Pe măsură ce redimensionați pagina, aceste elemente de bloc cad sub un altul cu grație. Am setat câteva instanțe diferite de interogări media într-o foaie de stil externă. Acest lucru face mai ușor să urmăriți stilurile atunci când vă întoarceți să editați ceva mai târziu.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Massachusetts, Statele Unite ale Americii  [email protected] Portofoliul meu • @jakerocheleau 
 
  
 
 

Înainte de a sari în CSS detaliat vreau să explic mai multe despre utilizarea microdatelor. Dacă vă uitați îndeaproape, am alunecat atribute în interiorul multor elemente diferite cu numele categorie de obiect, itemscope, și itemprop. Toate acestea se referă la proiectul Schmea, care speră să ofere o structură de date pentru web.

Formatarea utile a microdatelor

Toate motoarele de căutare importante, inclusiv Google, Yahoo !, și Bing, au acceptat schema ca cea mai bună sintaxă pentru marcarea datelor. Prin etichetarea detaliilor despre dvs. vă ajută aceste motoare de căutare să afișeze rezultate similare pentru conținutul dvs. online. Să aruncăm o privire asupra modului de a stabili aceste probleme.

Atributul itemscope este aplicat oricărui container care conține informații despre un element de schemă. Acesta este întotdeauna urmat de atributul itemtype, care în acest scenariu descrie o persoană. În interiorul acestei divizoare pot să etichetez orice conținut utilizând itemprop împreună cu oricare dintre detaliile listate pe pagina de documentare.

Metoda recomandată este să înfășurați conținutul într-o etichetă de span, în loc să adăugați direct elementul. Când etichetați ceva asemănător unei fotografii, ar trebui să atașați itemprop la img element direct. În caz contrar, veți avea un marcaj mult mai curat prin împachetarea datelor în etichete de span.

Cât de mult este prea mult?

Aș spune că nu există nicio limită pentru cantitatea de detaliu pe care să o puteți accesa. Microdata este disponibilă pentru a ajuta computerele să recunoască persoane, organizații, produse și alte elemente într-un context online. Cele mai multe informații pe care le puteți oferi, cu atât mai bine.

Merită să vă păstrați și să vă deschideți mintea și să vedeți cum puteți folosi această microdată în aspecte ale propriului dvs. site web. Dacă petreceți 10-15 minute prin intermediul documentației Schema, este mult mai ușor decât credeți. Putem examina două exemple solide din demo-ul CV-ului:

 
 
Set de calificare
 
 
Dezvoltare
 
 
HTML5 / CSS3
 
JavaScript și jQuery
 
PHP Backend
 
Baze de date SQL
 
Wordpress
 
Pligg CMS
 
Unele obiective-C
 
 
 
 
Software-ul
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

La listarea diferitelor mele abilități am creat un nou container care definește schema ItemList. Nu a existat niciun fel de abilități sau experiență care să fie listate sub o Persoană, deci aceasta este o alternativă sigură. Valoarea de aici este că Google poate înțelege fiecare itemListElement sunt legate unul de celălalt. În acest caz, avem o listă de limbi și software cu care știu să lucrez.

 
 
Articole recente
 
  10 metode utile de coborâre pentru CSS și Javascript • Publicat în Iulie 2012
 
  Rescrierea URL-urilor în WordPress: Sfaturi și Plugin-uri • Publicat în Iulie 2012
 
  Optimizarea JPEG pentru Web - Ultimate Guide • Publicat în Iulie 2012
 
  9 trucuri pentru a proiecta Perfect HTML Newsletter • Publicat în Mai 2012
 
  Ghid pentru testarea A / B cu Google Website Optimizer • Publicat în Martie 2012
 
 

Un alt exemplu bun este lista de articole găsită în partea de jos. Există o configurare a schemelor pentru articole și postări de blog, toate legate de conținutul găsit online. Am indicat adresa URL a articolului și data publicării, care este mai mult decât suficientă informație pentru aceste crawlere pentru motoarele de căutare.

Rețineți că microdatele se referă la formatarea conținutului care urmează să fie organizat de computere. Acest CV este un exemplu perfect pentru definirea trăsăturilor despre o anumită persoană. Acestea nu vor fi utile pe fiecare site web, dar este o metodă interesantă de înțeles.

Stiluri CSS relative

În această ultimă secțiune, să aruncăm o privire asupra modului de a modela întreaga pagină web. Către partea de sus a foii de stil, definim câteva resetări inițiale și proprietăți elementale de element. Acestea includ antete, elemente de listă și efecte de hover link anchor.

* marja: 0; umplutura: 0;  html înălțime: 101%;  corp background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); dimensiune font: 62,5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; culoare: # 454545; font-size: 3.6; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; culoare: # 484848; font-size: 2.5m; margin-bottom: 10px; text-decorare: subliniere;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; culoare: # 777; font-weight: normal; font-size: 1.8; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; culoare: # 656565; font-weight: bold; font-size: 1.75; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; culoare: # 565656; font-size: 1.8; linia-înălțime: 1,4; margin-bottom: 15px; padding-left: 35px;  mic font-family: "Balthazar", serif; culoare: # 656565; font-size: 1.6; afișare: bloc; margin-bottom: 6px;  ul display: bloc; listă: nu există;  ul li padding-left: 45px; listă: nu există; vertical-aliniere: partea de sus; fundal: adresa URL ("https://assets.hongkiat.com/uploads/responsive-resume/bullet.png") 25px 5px no-repeat; margin-bottom: 5px; font-familie: "Balthazar", serif; culoare: # 666; font-size: 1.6; linia-înălțime: 2.3em;  img margine: 0; max-lățime: 100%;  a culoare: # 5582d6; text-decorare: nici unul;  a: hover text-decorare: subliniere;  

Nimic prea interesant, cu excepția unor stive de fonturi personalizate. De asemenea, am apucat o pictogramă unică a bulletului, în loc să folosesc setarea implicită “disc”. Puteți încerca să căutați într-un director ca Icon Finder atunci când încercați să localizați un design similar.

/ ** @ layout core group ** / #w margin: 0px 50px; padding: 20px 40px; padding-top: 35px; fundal: #fff; min-lățime: 260px; max-lățime: 900px; raza de jos-dreapta-dreapta: 8px; raza de jos-stânga-dreapta: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header lățime: 100%;  / ** @ setările personale ale grupului ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #foto img -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 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); fundal-culoare: #fff; frontieră: 1px solid #ccc; padding: 5px;  

Există doar câteva zone importante de bloc pe pagină care necesită atenție. Bineînțeles, divulgarea înfășurării este setată cu margini suplimentare și umplutură. De asemenea, lățimea maximă este limitată la 900 de pixeli, deoarece orice dimensiune mai mare se simte ca și cum pagina are prea mult spațiu liber. De asemenea, am folosit colturi rotunjite în partea de jos a paginii pentru un efect mai neted asupra ochilor.

Design Responsabil

Eventual cel mai important aspect al acestui CV online este funcționalitatea receptivă. Am cinci setări de întrerupere diferite pentru a obține diferite efecte la redimensionarea ferestrei browserului.

@media numai pe ecran și (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2;  h2 display: bloc; text-align: centru;  #info float: none; afișare: bloc; text-align: centru;  #photo float: none; afișare: bloc; text-align: centru;  #w padding: 20px 15px;  p padding: 0;  

Primul 740px este exact în jurul locului în care imaginea fotografiei se va contrazice cu textul antetului nostru. În loc de a lăsa fotografia drop-down pe partea dreaptă, ștergem ambele elemente și centralizăm întregul aspect. De asemenea, am mărit dimensiunea textului antetului pentru a lăsa un impact mai solid.

Pe măsură ce fereastra devine mai mică, am înlăturat niște cearceafuri extra din div divizare și paragrafe. Următoarea problemă pe care o întâlnim după antet este cea din lista de competențe UL. Am descompus abordarea cu două coloane și în loc de elementele de listă care plutesc una lângă cealaltă.

numai ecranul @media și (max-width: 570px) ul li display: inline-block; padding-left: 15px; lățime: 140px; pozitie de fundal: -5px 0px; margin-dreapta: 6px; linie înălțime: 1,7;  # abilități-stânga, abilități-dreapta margin-bottom: 15px;  

De asemenea, aceasta necesită repoziționarea multor proprietăți implicite ale textului. Trebuie să actualizăm înălțimea liniei și să repoziționăm pictograma bulletului fiecărui articol din listă. Am stabilit o lățime fixă ​​astfel încât grila să apară mai organizată până la următorul punct de întrerupere.

Codarea pentru telefoane inteligente

Ultimele trei interogări media sunt mici, dar foarte importante. Pe măsură ce comutați între modul peisaj și portret, iPhone va redimensiona orice browser mobil. Acest lucru este valabil și în cazul majorității dispozitivelor Android și al telefoanelor Windows Mobile.

@media numai pe ecran și (max-width: 480px) ul li width: 120px;  #w margine: 0 20px;  Numai ecranul @media și (max-width: 320px) #w margin: 0 10px;  / ** numai pentru iPhone ** / ecranul @media și (max-width-device: 480px) ul li width: 150px;  

Când atingem cel puțin 480 pixeli sau mai mici, eliminăm mai multe elemente de umplutură din ambalaj și, de asemenea, redimensionăm din nou elementele din listă. Apoi la 320px am eliminat o parte din spațiul marginal din afara documentului. Puteți vedea în continuare fundalul texturat, dar nu este foarte important pe un astfel de port de vizualizare vertical subțire.

În cele din urmă eu folosesc max-device-width pentru a viza dispozitivul iPhone în sine, și anume orice alt ecran mobil cu o lățime maximă de 480 px. În acest caz, vreau să actualizez elementele listă un pic mai larg, astfel încât acestea să completeze întregul ecran. Aceasta va afecta numai lista de competențe în vizualizarea peisajului deoarece portretul este prea slab pentru a observa diferențe.

• Demo
• Descărcați codul sursă

Gândurile finale

Lucrul pe Internet necesită adesea cel puțin un tip de portofoliu online. Când puteți să vă conectați la o reluare a unei singure pagini cu toate detaliile organizate împreună, aceasta arată că vă referiți la afaceri. Angajatorii serioși și potențialii clienți se vor arunca peste cap pentru o afișare carismatică a profesionalismului în designul web.

Sper că puteți lua câteva puncte cheie departe de acest tutorial. Freelancerii din orice locație din întreaga lume se pot comercializa cu puțin efort tehnic. Simțiți-vă liber să descărcați codul sursă demo de mai sus și împărtășiți-vă gândurile despre acest articol în zona de comentarii.