Quando ridimensioni la pagina, questi elementi di blocco si sovrappongono in modo elegante. Ho impostato alcune diverse istanze di query multimediali in un foglio di stile esterno. Ciò rende più facile tenere traccia degli stili quando si torna a modificare qualcosa in seguito.

 
 
 
Jake Rocheleau
 
Scrittore freelance e sviluppatore web
  Hudson, Massachusetts, Stati Uniti d'America  [email protected] Il mio portfolio • @jakerocheleau 
 
  
 
 

Prima di passare ai CSS dettagliati, voglio spiegare di più sull'uso dei microdati. Se guardi da vicino ho inserito gli attributi in molti elementi diversi con i nomi tipo di elemento, itemscope, e itemprop. Tutto ciò riguarda il progetto Schmea che spera di offrire una struttura dati per il web.

Formattazione di microdati utili

Tutti i principali motori di ricerca tra cui Google, Yahoo !, e Bing hanno accettato Schema come la migliore sintassi per il markup dei dati. Etichettando i dettagli su di te, aiuta questi motori di ricerca a visualizzare i risultati correlati per i tuoi contenuti online. Analizziamo come impostarli.

L'attributo itemscope viene applicato a qualsiasi contenitore che contiene informazioni su un elemento dello schema. Questo è sempre seguito dall'attributo itemtype, che in questo scenario descrive una persona. All'interno di questo wrapper div posso etichettare qualsiasi contenuto usando itemprop insieme ai dettagli elencati nella loro pagina di documentazione.

Il metodo consigliato è quello di avvolgere il contenuto in un tag span anziché aggiungerlo direttamente all'elemento. Quando stai etichettando qualcosa come una foto, dovresti allegarla a img elemento direttamente. Ma altrimenti avrai una marcatura molto più pulita avvolgendo i tuoi dati in tag span.

Quanto è troppo?

Direi che non c'è limite alla quantità di dettagli che puoi inserire. I microdati sono disponibili per aiutare i computer a riconoscere persone, organizzazioni, prodotti e altri elementi all'interno di un contesto online. Più informazioni puoi offrire, meglio è.

Vale la pena tenere e aprire la mente e vedere come è possibile utilizzare questi microdati in aspetti del proprio sito web. Se passi 10-15 minuti alla documentazione dello schema, è molto più semplice di quanto pensi. Possiamo guardare due esempi solidi dalla demo del curriculum:

 
 
Insieme di abilità
 
 
Sviluppo
 
 
HTML5 / CSS3
 
JavaScript e jQuery
 
Backend PHP
 
Database SQL
 
Wordpress
 
CMS di Pligg
 
Qualche obiettivo-C
 
 
 
 
Software
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel e phpMyAdmin
 
Xcode 4
 
 
 
 

Quando ho elencato le mie varie competenze, ho installato un nuovo contenitore che definisce lo schema ItemList. Non c'era alcun tipo di skillset o esperienza da elencare sotto una persona, quindi questa è un'alternativa sicura. Il valore qui è che Google può capire ciascuno itemListElement è correlato l'uno all'altro. In questo caso abbiamo un elenco di lingue e software con cui so lavorare.

 
 
Articoli recenti
 
  10 metodi di fallback utili per CSS e Javascript • Pubblicato in Luglio 2012
 
  Riscrivere gli URL in WordPress: suggerimenti e plugin • Pubblicato in Luglio 2012
 
  JPEG Optimization For The Web - Guida definitiva • Pubblicato in Luglio 2012
 
  9 trucchi per progettare la newsletter HTML perfetta • Pubblicato in Maggio 2012
 
  Guida al test A / B con lo Strumento per ottimizzare il sito di Google • Pubblicato in Marzo 2012
 
 

Un altro buon esempio è l'elenco degli articoli trovato in fondo. Esiste una configurazione dello schema per articoli e post di blog, tutti relativi ai contenuti trovati online. Ho indicato l'URL dell'articolo e la data di pubblicazione che sono informazioni più che sufficienti per questi crawler dei motori di ricerca.

Tieni presente che i microdati riguardano esclusivamente la formattazione dei contenuti da organizzare dai computer. Questo curriculum a pagina singola è l'esempio perfetto per definire i tratti di una persona specifica. Questi non saranno utili su tutti i siti Web, ma è una metodologia interessante da capire.

Stili CSS relativi

In questa ultima sezione diamo un'occhiata a come stile questa intera pagina web. Verso la parte superiore del nostro foglio di stile definisco alcune reimpostazioni iniziali e le proprietà di base degli elementi. Questi includono intestazioni, voci di elenco e effetti al passaggio del mouse di ancoraggio.

* margine: 0; padding: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); dimensione carattere: 62,5%; imbottitura-fondo: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; colore: # 454545; font-size: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; colore: # 484848; font-size: 2.5em; margin-bottom: 10px; decorazione del testo: sottolineatura;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; colore: # 777; font-weight: normal; font-size: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; colore: # 656565; font-weight: bold; font-size: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; colore: # 565656; font-size: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px;  small font-family: "Balthazar", serif; colore: # 656565; font-size: 1.6em; blocco di visualizzazione; margin-bottom: 6px;  ul display: block; stile elenco: nessuno;  ul li padding-left: 45px; list-style-type: none; vertical-align: top; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; famiglia di font: "Balthazar", serif; colore: # 666; font-size: 1.6em; line-height: 2.3em;  img border: 0; larghezza massima: 100%;  a color: # 5582d6; decorazione del testo: nessuna;  a: hover text-decoration: underline;  

Niente di troppo interessante ad eccezione di alcuni stack di font personalizzati. Ho anche afferrato un'icona di un proiettile unico invece di usare l'impostazione predefinita “disco”. Puoi provare a cercare in una directory come Icon Finder quando cerchi di individuare un design simile.

/ ** @group core layout ** / #w margin: 0px 50px; imbottitura: 20px 40px; padding-top: 35px; sfondo: #fff; larghezza minima: 260 px; larghezza massima: 900 px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header width: 100%;  / ** @group personal settings ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); background-color: #fff; border: 1px solid #ccc; imbottitura: 5px;  

Ci sono solo alcune importanti aree di blocco nella pagina che richiedono attenzione. Ovviamente il div wrapper è configurato con margini e padding extra. Anche la larghezza massima è limitata a 900px perché qualsiasi dimensione più grande sembra che la pagina abbia troppo spazio bianco. Ho anche usato angoli arrotondati nella parte inferiore della pagina per un effetto più liscio sugli occhi.

Design reattivo

Forse l'aspetto più cruciale di questo curriculum online è la funzionalità reattiva. Ho cinque diversi punti di interruzione per ottenere vari effetti quando ridimensiono la finestra del browser.

@media solo schermo e (larghezza massima: 740 px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; allineamento del testo: centro;  #info float: none; blocco di visualizzazione; allineamento del testo: centro;  #photo float: none; blocco di visualizzazione; allineamento del testo: centro;  #w padding: 20px 15px;  p padding: 0;  

L'iniziale 740px è proprio intorno a dove l'immagine della foto si scontrerà con il nostro testo di intestazione. Invece di lasciare cadere la foto sul lato destro, cancelliamo entrambi gli elementi e centriamo l'intero layout. Ho anche aumentato le dimensioni del testo dell'intestazione per lasciare un impatto più solido.

Man mano che la finestra si riduce, ho rimosso alcuni padding extra dal wrapper div e dai paragrafi. Il prossimo problema in cui ci imbattiamo dopo l'intestazione deriva dalle qualifiche dell'UL list. Abbasso l'approccio a due colonne e invece ho voci di elenco che galleggiano l'una accanto all'altra.

@media solo schermo e (max-larghezza: 570px) ul li display: inline-block; padding-left: 15px; larghezza: 140 px; background-position: -5px 0px; margin-right: 6px; line-height: 1.7em;  # skills-left, skills-right margin-bottom: 15px;  

Ciò richiede anche il riposizionamento di molte delle proprietà di testo predefinite. Dobbiamo aggiornare l'altezza della linea e riposizionare l'icona di ciascun elemento dell'elenco. Ho impostato una larghezza fissa in modo che la griglia appaia più organizzata fino al successivo punto di interruzione.

Codifica per smartphone

Le ultime tre domande sui media sono piccole ma molto importanti. Quando si passa dalla modalità orizzontale a quella verticale, l'iPhone ridimensionerà qualsiasi browser mobile. Questo è anche il caso della maggior parte dei dispositivi Android e dei telefoni Windows Mobile.

@media solo schermo e (larghezza massima: 480px) ul li larghezza: 120px;  #w margin: 0 20px;  @media only screen e (max-width: 320px) #w margin: 0 10px;  / ** Solo iPhone ** / @ schermata media e (max-device-width: 480px) ul li width: 150px;  

Quando si colpisce per la prima volta 480px o meno, si rimuove un po 'più padding dal wrapper e si ridimensionano nuovamente gli elementi dell'elenco. Poi a 320px ho rimosso parte dello spazio marginale al di fuori del documento. Puoi ancora vedere lo sfondo con texture, ma non è molto importante su una finestra verticale così sottile.

Infine sto usando max-device-width per indirizzare il dispositivo iPhone stesso, ovvero qualsiasi altro schermo mobile con una larghezza massima di 480 px. In questo caso, voglio aggiornare le voci dell'elenco un po 'più larghe in modo che riempiano l'intero schermo. Interesserà solo gli elenchi delle abilità in visualizzazione orizzontale poiché il ritratto è troppo sottile per notare eventuali differenze.

• dimostrazione
• Scarica il codice sorgente

Pensieri finali

Lavorare su Internet spesso richiede almeno un certo tipo di portafoglio online. Quando riesci a collegarti a una singola pagina riprendi con tutti i dettagli organizzati insieme, dimostra che intendi affari. Seri datori di lavoro e potenziali clienti si innamoreranno di una dimostrazione così carismatica di professionalità nel web design.

Spero che tu possa prendere alcuni punti chiave da questo tutorial. I liberi professionisti in qualsiasi località del mondo possono commercializzarsi con un minimo di impegno tecnico. Sentiti libero di scaricare il mio codice sorgente demo qui sopra e condividi i tuoi pensieri su questo articolo nella nostra area commenti.