Naarmate u de grootte van de pagina wijzigt, vallen deze blokelementen sierlijk onder elkaar. Ik heb een paar verschillende instanties van mediaquery's ingesteld in een externe stylesheet. Dit maakt het eenvoudiger om stijlen bij te houden wanneer u later iets gaat bewerken.

 
 
 
Jake Rocheleau
 
Freelance schrijver en webontwikkelaar
  Hudson, Massachusetts, Verenigde Staten van Amerika  [email protected] Mijn portfolio • @jakerocheleau 
 
  
 
 

Voordat we naar gedetailleerde CSS gaan, wil ik meer uitleggen over het gebruik van microdata. Als je goed kijkt, heb ik attributen in veel verschillende elementen met de namen bezaaid type voorwerp, itemscope, en itemprop. Deze hebben allemaal betrekking op het Schmea-project dat een datastructuur voor het web wil bieden.

Formatterende nuttige microdata

Alle grote zoekmachines, waaronder Google, Yahoo !, en Bing hebben Schema geaccepteerd als de beste syntaxis voor gegevensopmaak. Door details over jezelf te labelen helpt het deze zoekmachines om gerelateerde resultaten voor je online-inhoud weer te geven. Laten we opsplitsen hoe deze in te stellen.

Het item itemscope wordt toegepast op elke container die informatie bevat over een schema-item. Dit wordt altijd gevolgd door het kenmerk itemtype, dat in dit scenario een persoon beschrijft. In deze wrapper div kan ik elke inhoud labelen door itemprop te gebruiken samen met een van de details die op hun documentatiepagina staan.

De aanbevolen methode is om uw inhoud in een span-tag in te pakken in plaats van rechtstreeks aan het element toe te voegen. Wanneer u iets als een foto labelt, moet u itemprop toevoegen aan de img element rechtstreeks. Maar anders krijgt u veel schonere markup door uw gegevens in span-tags in te pakken.

Hoe veel is te veel?

Ik zou zeggen dat er geen limiet is voor de hoeveelheid details waar je in kunt gaan. Microdata is beschikbaar om computers te helpen mensen, organisaties, producten en andere items in een online context te herkennen. Hoe meer informatie u kunt bieden, hoe beter.

Het loont de moeite om open te blijven en te kijken hoe u deze microdata kunt gebruiken in aspecten van uw eigen website. Als je 10-15 minuten besteedt aan het doornemen van de Schema-documentatie, dan is dat een stuk eenvoudiger dan je zou denken. We kunnen twee solide voorbeelden uit de CV-demo bekijken:

 
 
Vaardigheden
 
 
Ontwikkeling
 
 
HTML5 / CSS3
 
JavaScript en jQuery
 
PHP-backend
 
SQL-databases
 
Wordpress
 
Pligg CMS
 
Sommige doelstelling-C
 
 
 
 
Software
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Bij het opsommen van mijn verschillende vaardigheden heb ik een nieuwe container opgezet die het ItemList-schema definieert. Er was geen enkele skillset of ervaring om onder een persoon te noemen, dus dit is een veilig alternatief. De waarde hier is dat Google elk kan begrijpen itemListElement is gerelateerd aan elkaar. In dit geval hebben we een lijst met talen en software waarmee ik kan werken.

 
 
recente artikelen
 
  10 nuttige fallback-methoden voor CSS en Javascript • Gepubliceerd in Juli 2012
 
  Herschrijven van URL's in WordPress: tips en plug-ins • Gepubliceerd in Juli 2012
 
  JPEG-optimalisatie voor het web - Ultieme gids • Gepubliceerd in Juli 2012
 
  9 trucs om de perfecte HTML-nieuwsbrief te ontwerpen • Gepubliceerd in Mei 2012
 
  Handleiding voor A / B-tests met Google Website Optimizer • Gepubliceerd in Maart 2012
 
 

Een ander goed voorbeeld is de artikelenlijst helemaal onderaan. Er is een schemainstelling voor artikelen en blogberichten, allemaal gerelateerd aan online gevonden inhoud. Ik heb aangegeven dat de URL van het artikel en de publicatiedatum voldoende zijn voor deze crawlers van zoekmachines.

Houd er wel rekening mee dat het bij microdata gaat om het formatteren van inhoud die moet worden georganiseerd door computers. Deze CV van een enkele pagina is het perfecte voorbeeld om eigenschappen over een specifieke persoon te definiëren. Deze zullen niet op elke website nuttig zijn, maar het is een opwindende methode om te begrijpen.

Relatieve CSS-stijlen

In deze laatste sectie bekijken we hoe je deze hele webpagina kunt stylen. Naar de bovenkant van ons stylesheet definieer ik enkele initiële resets en elementaire basiseigenschappen. Deze omvatten kopteksten, lijstitems en zwevende effecten van de verankeringslink.

* marge: 0; opvulling: 0;  html height: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); lettergrootte: 62,5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; kleur: # 454545; font-size: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; kleur: # 484848; font-size: 2.5em; margin-bottom: 10px; tekstdecoratie: onderstrepen;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; kleur: # 777; font-gewicht: normaal; lettergrootte: 1,8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; kleur: # 656565; lettertype: vet; lettergrootte: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; kleur: # 565656; lettergrootte: 1,8em; regelhoogte: 1,4em; margin-bottom: 15px; opvulling links: 35px;  klein font-family: "Balthazar", serif; kleur: # 656565; lettertypegrootte: 1.6em; weergave: blok; margin-bottom: 6px;  ul display: block; lijststijl: geen;  ul li padding-left: 45px; list-style-type: none; vertical-align: top; achtergrond: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px zonder herhaling; margin-bottom: 5px; font-family: "Balthazar", serif; kleur: # 666; lettertypegrootte: 1.6em; regelhoogte: 2,3em;  img border: 0; maximale breedte: 100%;  a color: # 5582d6; tekstdecoratie: geen;  a: hover text-decoration: onderstrepen;  

Niets bijzonders behalve enkele van de aangepaste lettertypestapels. Ik heb ook een uniek opsommingstekenpictogram gepakt in plaats van de standaard te gebruiken “schijf”. U kunt proberen door een map zoals Icon Finder te zoeken bij het zoeken naar een soortgelijk ontwerp.

/ ** @group hoofdlay-out ** / #w margin: 0px 50px; opvulling: 20px 40px; padding-top: 35px; achtergrond: #fff; min-breedte: 260 px; maximale breedte: 900 px; border-bottom-right-radius: 8px; grens-onder-links 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 persoonlijke instellingen ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; grensradius: 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); achtergrondkleur: #fff; border: 1px solid #ccc; opvulling: 5px;  

Er zijn slechts een paar belangrijke blokgebieden op de pagina die aandacht vereisen. Natuurlijk is de wrapper div ingesteld met extra marges en opvulling. Ook de maximale breedte is beperkt tot 900 px, omdat een groter formaat aanvoelt alsof de pagina te veel witruimte heeft. Ik heb ook afgeronde hoeken aan de onderkant van de pagina gebruikt voor een gladder effect op de ogen.

Reagerend ontwerp

Misschien wel het meest cruciale aspect van dit online CV is de responsieve functionaliteit. Ik heb vijf verschillende breakpoints-instellingen om verschillende effecten te bereiken bij het wijzigen van het formaat van het browservenster.

@media alleen scherm en (max. breedte: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; text-align: center;  #info float: none; weergave: blok; text-align: center;  #photo float: none; weergave: blok; text-align: center;  #w opvulling: 20px 15px;  p opvulling: 0;  

De initiële 740px is precies in de buurt waar het foto-beeld botst met onze koptekst. In plaats van de foto naar rechts te laten vallen, maken we beide elementen leeg en centreren we de hele lay-out. Ik heb ook de koptekstgrootte verhoogd om een ​​meer solide effect te behouden.

Als het venster kleiner wordt, heb ik wat extra opvulling uit de wrapper div en alinea's verwijderd. Het volgende probleem dat we tegenkomen na de kop is van de UL-notering. Ik onderbreek de benadering met twee kolommen en plaats in plaats daarvan lijstitems die naast elkaar zweven.

@media only-scherm en (max-width: 570px) ul li display: inline-block; padding-links: 15px; breedte: 140 px; achtergrond-positie: -5px 0px; margin-right: 6px; regelhoogte: 1.7em;  # skills-left, skills-right margin-bottom: 15px;  

Dit vereist ook het herpositioneren van veel van de standaard teksteigenschappen. We moeten de lijnhoogte bijwerken en het opsommingsteken van elk lijstitem verplaatsen. Ik heb een vaste breedte ingesteld, zodat het raster overzichtelijker wordt weergegeven tot het volgende breekpunt.

Codering voor smartphones

De laatste drie vragen in de media zijn klein maar erg belangrijk. Als u schakelt tussen de liggende en portretmodus, wordt de grootte van de grootte van elke mobiele browser aangepast. Dit is ook het geval met de meeste Android-apparaten en Windows Mobile-telefoons.

@media only screen en (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  @media alleen scherm en (max-width: 320px) #w margin: 0 10px;  / ** iPhone only ** / @media-scherm en (max-device-width: 480px) ul li width: 150px;  

Wanneer we eerst 480px of kleiner raken, verwijderen we wat meer opvulling uit de wrapper en wijzigen we de lijstitems opnieuw. Op 320px heb ik een deel van de marge buiten het document verwijderd. Je kunt nog steeds de gestructureerde achtergrond zien, maar het is niet erg belangrijk op zo'n slank verticaal kijkvenster.

Ten slotte gebruik ik max device width om het iPhone-apparaat zelf te targeten, oftewel elk ander mobiel scherm met een maximale breedte van 480px. In dit geval wil ik de lijstitems wat wijder bijwerken, zodat ze het hele scherm vullen. Het heeft alleen invloed op de vaardighedenlijsten in liggende weergave, omdat het portret te dun is om verschillen op te merken.

• demonstratie
• Download de broncode

Laatste gedachten

Werken via internet vereist vaak op zijn minst een of andere vorm van online portfolio. Wanneer u kunt linken naar een CV van een enkele pagina met al uw gegevens bij elkaar, laat het zien dat u het meent. Serieuze werkgevers en potentiële klanten komen hals over kop voor zo'n charismatische weergave van professionaliteit in webdesign.

Ik hoop dat je een aantal belangrijke punten uit deze tutorial kunt halen. Freelancers op elke locatie over de hele wereld kunnen zichzelf vermarkten met slechts een beetje technische inspanning. Download mijn demo-broncode hierboven en deel uw mening over dit artikel in ons opmerkingenveld.