Controlli CSS: bellissimi pulsanti

12/03/2019

La bellezza è un concetto relativo. I gusti di programmatori e utenti differiscono notevolmente. L'emergere di Internet e l'onnipresente trasformazione della programmazione locale nello sviluppo delle risorse web e gli utenti dei programmi nei visitatori dei siti Web non hanno modificato la situazione.

Modelli, framework, sistemi di gestione dei siti e altri "acceleratori di processo" di sviluppo hanno creato raccolte di menu, pulsanti, elementi di progettazione delle pagine e strumenti per gestirli, offrendo quindi opzioni estremamente semplici e design convenienti per gli sviluppatori comprensibili ai visitatori.

L'aspetto storico della bellezza nella programmazione

I futuri leader nel campo della rappresentazione e dell'elaborazione delle informazioni sono iniziati con un menu. Il resto dell'industria del software ha seguito le tradizioni dei futuri leader. I pulsanti apparivano non molto più tardi del menu, ma la loro bellezza originale era in volume, il che rendeva possibile distinguere il pulsante da premuto o inaccessibile.

"Primitive

Era l'inizio delle idee "finestra", il dialogo e la soluzione "bella" del pulsante tradizionale: Ok e Annulla.

I wrapper (ambienti, strumenti, IDE, ...) come Turbo Vision hanno rapidamente trovato numerosi genitori e la famiglia di Vision popolare ha iniziato a crescere. L'aspetto della grafica sui personal computer ha portato alla transizione alla modalità "volume reale".

"Volume

Era un "volume grigio", ma in realtà l'interfaccia della finestra e l'inizio della progettazione del pulsante. Molti non ricordano più i tempi primitivi nel campo della grafica, ma i bellissimi pulsanti HTML / CSS "apparivano" anche allora.

Quello che è successo dopo è stato il semplice arrivo dei designer nello sviluppo delle risorse web.

Un programmatore (sviluppatore), se non si nomina questa professione, non è mai stato caratterizzato da un debole per la bellezza. Il suo karma è codice, idee e sviluppo tecnologico. Il designer pensa in altre categorie e l'arrivo dei designer ha trasferito un pezzo di vera bellezza in forme a forma di bottone, lasciando in vigore:

  • un'idea;
  • il volume;
  • stato (c'è, premuto, non disponibile).

Se non approfondisci lo sviluppo tecnologico delle risorse web, gli anni '80 e '90 produttivi hanno dato al mondo non solo Oracle, Microsoft e Google, ma hanno anche iniziato a implementare la "bellezza" in termini reali di lavoro e contenuti pratici.

In primo luogo, il design, quindi la praticità.

La trasformazione delle idee di bellezza nello sviluppo delle risorse web è stata semplice. L'idea dell'ipertesto è una sistematizzazione efficace e concettualmente orientata di tutto ciò che è stato realizzato prima. Un bellissimo stile di scrittura del codice richiedeva la creazione di strumenti di dialogo HTML / CSS di alta qualità. Bellissimi pulsanti e menu: una parte importante di qualsiasi risorsa web.

Un componente importante dello sviluppo web

Non importa come viene inquadrato il pulsante: con un tag di lista e un elenco di elementi o con un tag di blocco e contiene gradazioni di funzionalità. La struttura a blocchi, lo sviluppo dell'ipertesto, l'espansione della funzionalità dei fogli di stile a cascata sono immediatamente messi in prima linea nel design, piuttosto che nella praticità.

Questa è stata la prima decisione affrettata e il successo temporaneo. Il sito deve essere vivo, davvero pratico, e il fatto che il suo design deve essere impeccabile, semplicemente non dovrebbe essere in dubbio.

Esempio: una mappa su un sito meteo

Basta disegnare una mappa (città, distretto o territorio) e attaccare diversi pulsanti ad essa:

  • temperatura;
  • umidità;
  • pressione.

Ma questa non è la soluzione più pratica. L'esperienza nello sviluppo di siti simili dà immediatamente una decisione inequivocabile su come realizzare un "bel pulsante". Regola CSS (uno!) Per disegnare mappe e il numero necessario di tag HTML per ogni località (puoi fare a meno delle regole CSS). Tutta la decisione.

Mappa e pulsanti meteo

In una tale decisione, puntando il mouse su un insediamento si innesca un evento e si abilita l'elaborazione di un particolare insediamento. Solo la mappa è visibile, è reale e pratica. Sotto la mappa c'è un incarico di funzionalità. Gli stessi gestori di eventi necessari elaboreranno la funzionalità corretta.

Il sito deve essere vivo e davvero pratico.

Il design della risorsa web dovrebbe essere perfetto - questo è fuori dubbio. Nessun problema: ci sono molti esempi per CSS puro (pulsanti e menu piacevoli, finestre di dialogo pop-up, algoritmi di tracciamento, suggerimenti con caselle di selezione) su Internet.

Il problema non è come visualizzare le serie di regole CSS proposte. Il problema è come combinare la bellezza proposta con i tag di una pagina web. Non è così facile caricare un file CSS alieno su una pagina, ma trasferire un'idea è sempre pratico e arricchisce lo sviluppatore con esperienza.

Di norma, nella versione "Internet CSS", i bellissimi pulsanti sono accompagnati da risorse, inserti HTML, collegamenti a modelli o framework di terze parti. Non tutti gli sviluppatori o il proprietario del sito sono interessati a sporcare il suo codice con qualcun altro. Ciò potrebbe essere dovuto a problemi di sicurezza e, più spesso, a mancanza di reale necessità.

Pulsanti unici

Copiare e sviluppare l'idea del design e delle regole dei CSS e dei bellissimi bottoni del proprio making-ready. Decisione di alta qualità e legalmente pulita. La verità dovrà passare un po 'di tempo su riprogettazione e programmazione, ma il gioco vale la candela.

Il design del sito Web perfetto è un assioma di sviluppo web.

La semplicità è la chiave del successo

La prima decisione ha portato al successo temporaneo, quando il volume grigio si è trasformato in bottoni colorati e soluzioni di menu originali grazie alla partecipazione di designer professionisti. La bellezza ha conquistato i visitatori dei siti, ma il tinsel esterno è diventato noioso, e le vistose regole CSS hanno iniziato a distrarre l'attenzione.

La seconda soluzione: estrema semplicità con piena funzionalità - è diventata la norma. Tipicamente, questa decisione è stata presa naturalmente. I moderni sistemi di gestione dei siti (CMS) sono diventati estremamente semplici e convenienti per raggiungere i loro obiettivi.

Uno sviluppatore può oggi, in qualsiasi versione del sito - sviluppata manualmente o sulla base di CMS - eseguire bellissimi pulsanti su CSS a proprio piacimento o utilizzare una raccolta popolare da un sito di terze parti. Questa è una decisione rischiosa.

Sviluppo manuale o CMS

Nel primo caso, eseguendo uno sviluppo manuale del sito, non è un peccato chiedere l'opinione dei principali produttori di CMS popolari. Tuttavia, non ci sono cento professionisti che mettono le loro conoscenze e competenze, e la comunità degli sviluppatori è misurata da centinaia di migliaia di specialisti.

Nel secondo caso, piegando la propria linea, quando tutto è pronto a portata di mano e si può semplicemente consegnare il lavoro in modo pulito e bello - una perdita di tempo. Il cliente potrebbe non apprezzare e il visitatore semplicemente non capisce l'autore.

Nel momento in cui i pulsanti sono già apparsi, ma non c'era ancora CS, i bellissimi pulsanti non sono stati rivendicati perché erano davvero belli. Erano "miserabili". Era una pseudo-grafica, cioè la modalità testo! Ma avevano un volume, potevano mostrare che erano pressati e potevano diventare inaccessibili.

Il bello è lontano da tutto ciò che viene eseguito da un designer professionista, ma è sempre bello che sia eseguito professionalmente e abbia un reale valore pratico.