Kako mijenjate veličinu stranice, ovi elementi bloka graciozno padaju jedan iza drugog. Postavio sam nekoliko različitih instanci medijskih upita u vanjskoj tablici stilova. To olakšava praćenje stilova prilikom povratka na uređivanje kasnije.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Massachusetts, SAD  [email protected] Moj portfelj • @jakerocheleau 
 
  
 
 

Prije nego što skočimo u detaljni CSS želim objasniti više o korištenju mikropodataka. Ako pažljivo pogledate, u mnoštvu različitih elemenata s imenima obilazim atribute itemtype, itemscope, i itemprop. Sve se to odnosi na projekt Schmea koji se nada ponuditi strukturu podataka za web.

Formatiranje korisnih mikropodataka

Sve glavne tražilice, uključujući Google, Yahoo! i Bing, prihvatile su shemu kao najbolju sintaksu za označavanje podataka. Označavanjem pojedinosti o sebi pomaže tim tražilicama prikazati povezane rezultate za vaš sadržaj na mreži. Razdvojimo kako to postaviti.

Atribut itemscope primjenjuje se na bilo koji spremnik koji sadrži informacije o stavci sheme. Nakon toga uvijek slijedi atribut itemtype, koji u ovom scenariju opisuje osobu. Unutar ovog omota div mogu označiti bilo koji sadržaj pomoću stavke itemprop zajedno s bilo kojim pojedinostima navedenim na stranici s dokumentacijom.

Preporučena metoda je zamotati vaš sadržaj unutar oznake raspona umjesto dodavanja izravno elementu. Kada označavate nešto kao fotografiju, morate priložiti itemprop img izravno. Ali u suprotnom ćete imati mnogo čišću oznaku tako što ćete omotati svoje podatke u oznake raspona.

Koliko je previše?

Rekao bih da ne postoji ograničenje količine detalja u koje možete ući. Mikropodaci su dostupni kako bi pomogli računalima da prepoznaju ljude, organizacije, proizvode i druge stavke unutar online konteksta. Što više informacija možete ponuditi, to bolje.

Važno je zadržati i otvoriti um i vidjeti kako možete koristiti ove mikropodatke u aspektima vlastite web stranice. Ako provedete 10-15 minuta kroz dokumentaciju sheme, mnogo je lakše nego što mislite. Možemo pogledati dva čvrsta primjera iz demo snimka:

 
 
Skup vještina
 
 
Razvoj
 
 
HTML5 / CSS3
 
JavaScript i jQuery
 
PHP pozadina
 
SQL baze podataka
 
Wordpress
 
Pligg CMS
 
Neki ciljevi-C
 
 
 
 
Softver
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Prilikom navođenja mojih različitih vještina postavila sam novi spremnik koji definira shemu ItemList. Nije bilo nikakve vrste vještina ili iskustva koje bi se moglo navesti pod osobom, tako da je ovo sigurna alternativa. Vrijednost ovdje je da Google može razumjeti svakog od njih itemListElement je međusobno povezana. U ovom slučaju imamo popis jezika i softvera s kojima znam raditi.

 
 
Nedavni članci
 
  10 korisnih povratnih metoda za CSS i Javascript • Objavljeno u Srpanj 2012
 
  Prepisivanje URL-ova u WordPress-u: savjeti i dodaci • Objavljeno u Srpanj 2012
 
  JPEG optimizacija za web - Ultimate Guide • Objavljeno u Srpanj 2012
 
  9 trikova za dizajn Perfect HTML Newsletter • Objavljeno u Svibanj 2012
 
  Vodič za A / B testiranje s Googleovim alatom za optimizaciju web-lokacija • Objavljeno u Ožujak 2012
 
 

Još jedan dobar primjer je popis članaka koji se nalazi na samom dnu. Postoji postavka sheme za članke i postove na blogu, a sve se odnosi na sadržaj koji se nalazi na mreži. Naznačio sam URL članka i datum objavljivanja koji je više nego dovoljno informacija za ove alate za indeksiranje tražilica.

Samo imajte na umu da su mikropodaci sve o oblikovanju sadržaja koji će organizirati računala. Ovaj životopis na jednoj stranici savršen je primjer za definiranje osobina o određenoj osobi. To neće biti korisno na svakoj web-lokaciji, ali to je uzbudljiva metodologija za razumijevanje.

Relativni CSS stilovi

U ovom posljednjem odjeljku pogledajmo kako oblikovati cijelu ovu web stranicu. Prema vrhu naše stilske tablice definiram neka početna resetiranja i osnovna svojstva elemenata. To uključuje zaglavlja, stavke popisa i efekte zadržavanja veze sidra.

* margin: 0; padding: 0;  html visina: 101%;  tijelo pozadina: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); veličina fonta: 62,5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; boja: # 454545; veličina fonta: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; boja: # 484848; font-size: 2.5em; margin-bottom: 10px; dekoracija teksta: podcrtavanje;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; boja: # 777; težina fonta: normalna; veličina fonta: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; boja: # 656565; font-weight: bold; veličina fonta: 1.75em; margin-bottom: 4px;  p familija fontova: "Balthazar", "Droid Serif", Times New Roman, serif; boja: # 565656; veličina fonta: 1.8em; visina linije: 1.4em; margin-bottom: 15px; padding-left: 35px;  mala font-family: "Balthazar", serif; boja: # 656565; veličina fonta: 1.6em; prikaz: blok; margin-bottom: 6px;  ul display: block; list-style: nema;  ul li padding-left: 45px; list-style-type: nema; vertikalno poravnavanje: vrh; background: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px bez ponavljanja; margin-bottom: 5px; obitelj fonta: "Balthazar", serif; boja: # 666; veličina fonta: 1.6em; visina linije: 2.3em;  img border: 0; maksimalna širina: 100%;  a boja: # 5582d6; text-decoration: none;  a: hover text-decoration: underline;  

Ništa previše zanimljivo osim za neke prilagođene hrpe fontova. Također sam zgrabio jedinstvenu ikonu metka umjesto zadanog “disk”. Možete pokušati pretraživanje kroz katalog kao što je Icon Finder kada pokušavate pronaći sličan dizajn.

/ ** @group raspored jezgre ** / #w margin: 0px 50px; obloga: 20px 40px; padding-top: 35px; pozadina: #fff; min-width: 260px; max-width: 900px; radijus rub-dno-desno: 8px; radius: 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 širina: 100%;  / ** @group osobne postavke ** / #info float: lijevo; margin-bottom: 12px;  #photo float: desno;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; granični polumjer: 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); kutija-sjena: 0 2px 4px rgba (0, 0, 0, 0.2); boja pozadine: #fff; granica: 1px solid #ccc; padding: 5px;  

Postoji samo nekoliko važnih blokiranih područja na stranici koja zahtijevaju pažnju. Naravno, omotač div je podešen s dodatnim marginama i padding. Također maksimalna širina je ograničena na 900px, jer bilo koja veća veličina se osjeća kao da stranica ima previše razmaka. Koristio sam i zaobljene kutove na dnu stranice za glatkiji učinak na oči.

Osjetljiv dizajn

Možda najvažniji aspekt ovog online životopisa je osjetljiva funkcionalnost. Imam pet različitih točaka prekida za postizanje različitih efekata pri promjeni veličine prozora preglednika.

@ samo za zaslon i (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; poravnavanje teksta: centar;  #info float: nijedan; prikaz: blok; poravnavanje teksta: centar;  #photo float: none; prikaz: blok; poravnavanje teksta: centar;  #w padding: 20px 15px;  p punjenje: 0;  

Početni 740px nalazi se točno na mjestu gdje će se fotografija pojaviti u sukobu s tekstom zaglavlja. Umjesto da fotografiju ispustite na desnu stranu, očistimo oba elementa i centriramo cijeli raspored. Također sam povećao veličinu teksta zaglavlja kako bih ostavio solidniji učinak.

Kao što je prozor postaje manji sam ukloniti neke dodatne padding od omot div i stavaka. Sljedeći problem na koji smo naišli nakon zaglavlja je iz UL popisa vještina. Razbijam pristup u dva stupca i umjesto toga stavke popisa plutaju jedna pored druge.

@ samo za zaslon i (max-width: 570px) ul li display: inline-block; padding-left: 15px; širina: 140px; pozicija u pozadini: -5px 0px; margin-right: 6px; visina linije: 1.7em;  # vještina-lijevo, vještine-desno margin-bottom: 15px;  

To također zahtijeva repozicioniranje mnogih zadanih svojstava teksta. Moramo ažurirati visinu linije i premjestiti ikonu oznake svake stavke popisa. Postavio sam fiksnu širinu tako da se rešetka više organizira do sljedeće točke.

Kodiranje za pametne telefone

Posljednja tri medijska upita su mala, ali vrlo važna. Prilikom prebacivanja između pejzažnog i portretnog načina rada iPhone će promijeniti veličinu bilo kojeg mobilnog preglednika. To vrijedi i za većinu Android uređaja i Windows Mobile telefona.

@ samo zaslon i (max-width: 480px) ul li širina: 120px;  #w margin: 0 20px;  @media samo zaslon i (max-width: 320px) #w margin: 0 10px;  / ** samo za iPhone ** / @media i (max-device-width: 480px) ul li širina: 150px;  

Prilikom prvog udara 480px ili manje uklanjamo još neke obloge iz omotača i ponovno mijenjamo stavke popisa. Zatim sam na 320px uklonio dio margine izvan dokumenta. Još uvijek možete vidjeti teksturiranu pozadinu, ali nije toliko važna na tako tankom vertikalnom prikazu.

Na kraju koristim max uređajima širine da biste ciljali sam uređaj iPhone, odnosno bilo koji drugi mobilni zaslon s maksimalnom širinom od 480 piksela. U ovom slučaju želim ažurirati stavke popisa malo šire, tako da ispune cijeli zaslon. To će utjecati samo na unos vještina u pogledu na pejzaž jer je portret previše mršav da biste primijetili razlike.

• Demo
• Preuzmite izvorni kod

Završne misli

Rad preko Interneta često zahtijeva barem neku vrstu online portfelja. Kada možete povezati s nastavkom na jednoj stranici sa svim organiziranim podacima, to znači da mislite na posao. Ozbiljni poslodavci i potencijalni klijenti će pasti preko glave za takav karizmatični prikaz profesionalnosti u web dizajnu.

Nadam se da možete odvojiti neke ključne točke od ovog tutoriala. Slobodnjaci na bilo kojem mjestu u svijetu mogu se plasirati na tržište samo uz malo tehničkih napora. Slobodno preuzmite moj demo izvorni kod iznad i podijelite svoje misli s ovim člankom u području komentara.