HTML5 / CSS3 atsakingo atnaujinimo kodavimas

Šis straipsnis yra dalis mūsų „Web Responsive Design“ serija - kuriuos sudaro įrankiai, ištekliai ir konsultacijos, padedančios kurti svetaines visų platformų naudotojams. Paspauskite čia pamatyti daugiau tos pačios serijos straipsnių.

Beveik kiekvienas verslo skyriuje tam tikru momentu sukūrė atnaujinimą. Dirbdami kaip laisvai samdomas darbuotojas, jūs visuomet norite iškrauti naujus projektus. Dėl šio pereinamojo darbo ciklo jis gali pasiūlyti potencialiems klientams trumpą žvilgsnį į savo ankstesnę patirtį. O kas geresnė galimybė nei pasiūlyti savo profesionalų atnaujinimą internete?

Demo
Atsisiųsti šaltinio kodą

Šioje instrukcijoje noriu parodyti, kaip galime sukurti a realaus vieno puslapio atnaujinimo išdėstymas. Aš koduosiu viską HTML5 / CSS3, kad galėčiau tinkamai veikti įvairiose ekrano rezoliucijose. Atnaujinimas taip pat padės palaikyti schema.org naudojamus mikroduomenis, kad gautų daugiau techninių SEO privalumų.

Dokumento kūrimas

Pradiu tinklalapį su HTML5 doctype ir standartiniais meta elementais. Tačiau norint, kad šis išdėstymas reaguotų, turėsime nustatyti keletą papildomų komponentų. Dauguma jų yra tipinės meta žymos ir bus palaikomos visose šiuolaikinėse naršyklėse.

     Online Responsive Resume Demo

Meta peržiūros sritis žyma yra labai svarbi norint gauti jautrią techniką dirbti su išmaniaisiais telefonais. Mes atstatome skalę kaip 1: 1, todėl išdėstymas rodomas pikseliu. Taip pat pastebėsite, kad įtraukiau išorinį stilių lapą iš „Google“ žiniatinklio šriftų. Naudoju du pasirinktinius šriftus “Simonetta” ir “Balthazar”. Unikalūs šriftai neabejotinai patraukia jūsų lankytojo dėmesį ir harmoningai įsilieja į vieno puslapio dizainą.

Aš taip pat sukonfigūravau nedidelę IE sąlygą, kuri apima kai kuriuos atvirojo kodo scenarijus senesnėms naršyklėms. „Internet Explorer 8“ ir naujesnėse versijose yra problemų, susijusių su HTML5 elementų ir CSS3 medijos užklausų pateikimu. Bet laimei, kai kurie išmanieji kūrėjai suprato, kaip gauti šiuos darbus naudojant „JavaScript“.

Pagrindiniai turinio blokai

Visas dokumentas yra supakuotas į divą su daugybe įvairių blokų sekcijų. Viršus

žyma apima mano nuotrauką, vardą, el. pašto adresą ir kitus svarbius metaduomenis. Po to aš suskirstiau kiekvieną bloką į a

likusio turinio elementas.

Pakeitus puslapio dydį, šie blokiniai elementai nukrenta žemiau vienas kito. Nustatau keletą skirtingų medijos užklausų atvejų išoriniame stiliaus lape. Tai palengvina stilių stebėjimą, kai grįžtate į ką nors vėliau.

   Jake Rocheleau
 Laisvai samdomi rašytojai ir žiniatinklio kūrėjai
  Hudsonas, Masačusetsas, JAV  [email protected] Mano aplankas • @jakerocheleau

Prieš pereinant prie išsamios CSS noriu daugiau paaiškinti apie mikroduomenų naudojimą. Jei atidžiai pamatysite, kad yra daugybė skirtingų elementų su vardais itemtype, elementai, ir itemprop. Visa tai susiję su „Schmea“ projektu, kuris tikisi pasiūlyti žiniatinklio duomenų struktūrą.

Naudingų mikroduomenų formatavimas

Visos pagrindinės paieškos sistemos, įskaitant „Google“, „Yahoo!“ ir „Bing“, pripažino schemą kaip geriausią duomenų žymėjimo sintaksę. Ženklinant išsamią informaciją apie save, šie paieškos varikliai gali rodyti susijusius rezultatus internete. Leiskite suskaidyti, kaip juos nustatyti.

Itemcope atributas taikomas bet kuriam konteineriui, kuriame yra informacija apie schemos elementą. Tai visada seka atributas itemtype, kuris šiame scenarijuje apibūdina asmenį. Viduje šią pakuotę div galiu pažymėti bet kokį turinį naudodamas prekes ir kartu su bet kuria jų dokumentacijos puslapyje pateikta informacija.

Rekomenduojamas būdas yra įvesti turinį span tegus, o ne tiesiogiai pridėti prie elemento. Kai ženklinate kažką panašaus į nuotrauką, turėtumėte pridėti elementą Prop img elementas tiesiogiai. Bet kitaip turėsite daug švaresnį žymėjimą, įvesdami savo duomenis į žymes.

Kiek yra per daug?

Norėčiau teigti, kad nėra jokių apribojimų, kokių detalių galite pereiti. Mikroduomenys yra prieinami, kad kompiuteriai atpažintų žmones, organizacijas, produktus ir kitus elementus internete. Kuo daugiau informacijos galite pasiūlyti, tuo geriau.

Verta išlaikyti ir atidaryti protą ir pamatyti, kaip galite naudoti šiuos mikroduomenis savo svetainės aspektuose. Jei praleidžiate 10–15 minučių per Schemos dokumentaciją, tai daug lengviau, nei manote. Iš atnaujinimo demonstracijos galime ieškoti dviejų tvirtų pavyzdžių:

  Įgūdžių rinkinys
  Plėtra
  HTML5 / CSS3
 „JavaScript“ ir „jQuery“
 PHP „Backend“
 SQL duomenų bazės
 WordPress
 Pligg CMS
 Kai kurie C tikslai
 
 
  Programinė įranga
  Adobe Photoshop
 „Adobe Dreamweaver“
 MS Office 2007-2010
 cPanel & phpMyAdmin
 Xcode 4

Įrašant mano įvairius įgūdžius, aš sukonfigūruoju naują konteinerį, apibrėžiantį „ItemList“ schemą. Pagal asmenį nebuvo jokių įgūdžių ar įgūdžių, todėl tai yra saugi alternatyva. Vertė yra ta, kad „Google“ gali suprasti kiekvieną itemListElement yra susiję vienas su kitu. Tokiu atveju turime kalbų ir programinės įrangos, su kuria turiu dirbti, sąrašą.

  Naujausi straipsniai
   10 Naudingi „CSS“ ir „JavaScript“ metodai • Paskelbta 2012 m. Liepos mėn
   URL perrašymas „WordPress“: patarimai ir papildiniai • Paskelbta 2012 m. Liepos mėn
   JPEG optimizavimas internetui - „Ultimate Guide“ • Paskelbta 2012 m. Liepos mėn
   9 gudrybės sukurti tobulą HTML naujienlaiškį • Paskelbta 2012 m. Gegužės mėn
   A / B testavimo vadovas „Google“ svetainių optimizavimo priemonė • Paskelbta 2012 m. Kovo mėn

Kitas geras pavyzdys yra straipsnių sąrašas, rastas pačioje apačioje. Straipsniai ir tinklaraščio įrašai yra su schema, visi susiję su internete rastu turiniu. Aš nurodiau straipsnio URL ir paskelbimo datą, kuri yra daugiau nei pakankamai informacijos šiems paieškos varikliams.

Turėkite omenyje, kad mikroduomenys yra apie turinio, kurį turi organizuoti kompiuteriai, formatavimą. Šis vieno puslapio atnaujinimas yra puikus pavyzdys, kaip apibrėžti tam tikro asmens bruožus. Tai nebus naudinga kiekvienoje svetainėje, tačiau tai yra įdomi metodika, kurią reikia suprasti.

Santykiniai CSS stiliai

Šiame paskutiniame skyriuje pažiūrėkime, kaip sukurti visą šį tinklalapį. Mūsų stiliaus lentelės viršuje apibrėžiu kai kuriuos pradinius nustatymus ir pagrindines elementų savybes. Tai apima antraštes, sąrašo elementus ir inkaro nuorodą.

* marža: 0; įdėklas: 0;  html aukštis: 101%;  kūnas fonas: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); šrifto dydis: 62,5%; apatinis: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; spalva: # 454545; šrifto dydis: 3.6em; paraštės apačia: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; spalva: # 484848; šrifto dydis: 2.5em; paraštės apačia: 10px; teksto apdaila: pabraukimas;  h3 font-family: „Trebuchet MS“, Verdana, Arial, sans-serif; spalva: # 777; šrifto svoris: normalus; šrifto dydis: 1.8em; paraštės apačia: 10px;  h4 font-family: „Trebuchet MS“, Verdana, Arial, sans-serif; spalva: # 656565; šrifto svoris: paryškintas; šrifto dydis: 1.75em; paraštės apačia: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serifas; spalva: # 565656; šrifto dydis: 1.8em; linijos aukštis: 1.4em; paraštės apačia: 15px; įdėklas kairėje: 35px;  mažas font-family: "Balthazar", serifas; spalva: # 656565; šrifto dydis: 1.6em; ekranas: blokas; paraštės apačia: 6px;  ul ekranas: blokas; sąrašo stilius: nėra;  ul li kairėje pusėje: 45px; list-style-type: nėra; vertikaliai lygiuoti: viršuje; fonas: URL („https://assets.hongkiat.com/uploads/responsive-resume/bullet.png“) 25px 5px ne kartoti; paraštės apačioje: 5px; šrifto šeima: "Balthazar", serifas; spalva: # 666; šrifto dydis: 1.6em; linijos aukštis: 2.3em;  img border: 0; maksimalus plotis: 100%;  a spalva: # 5582d6; teksto apdaila: nėra;  a: Hover teksto apdaila: pabraukti;

Niekas pernelyg įdomus, išskyrus kai kuriuos pasirinktinius šriftų rinkinius. Be to, naudoju numatytąjį ženklą, aš taip pat paėmiau unikalią kulkos piktogramą “diską”. Galite pabandyti ieškoti per katalogą, pvz., „Icon Finder“, kai bandote rasti panašų dizainą.

/ ** @ grupės grupės išdėstymas ** / #w paraštė: 0px 50px; paminkštinimas: 20px 40px; įdėklas: 35px; fonas: #fff; min. plotis: 260px; maksimalus plotis: 900px; apatinis dešinysis spindulys: 8px; apačioje-apačioje kairysis spindulys: 8px; -webkit-pasienio apačioje kairysis spindulys: 8px; -webkit-riba-apačioje dešinysis spindulys: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  antraštė plotis: 100%;  / ** @group asmeniniai nustatymai ** / #info float: kairėje; paraštės apačia: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-spindulys: 3px; pasienio spindulys: 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); dėžutės šešėlis: 0 2px 4px rgba (0, 0, 0, 0,2); fono spalva: #fff; siena: 1px kietas #ccc; paminkštinimas: 5px;

Puslapyje yra tik keletas svarbių blokų sričių, kurioms reikia dėmesio. Žinoma, įvyniojimo disko sąranka su papildomomis paraštėmis ir pamušalu. Be to, maksimalus plotis yra 900px, nes bet koks didesnis dydis jaučiasi, kad puslapis turi per daug erdvės. Aš taip pat naudoju apvalius kampus puslapio apačioje, kad galėtumėte sklandžiau paveikti akis.

Reaguojantis dizainas

Galbūt svarbiausias šio internetinio atnaujinimo aspektas yra reaguojantis funkcionalumas. Turiu penkis skirtingus taškų parametrus, kad galėčiau pasiekti įvairius efektus, kai keičiate naršyklės langą.

Tik „@media“ ekranas ir (maksimalus plotis: 740px) h1 šrifto dydis: 4.5em;  h3 šrifto dydis: 2.2em;  h2 ekranas: blokas; teksto derinimas: centras;  #info float: nėra; ekranas: blokas; teksto derinimas: centras;  #photo float: nėra; ekranas: blokas; teksto derinimas: centras;  #w įdėklas: 20px 15px;  p įdėklas: 0;

Pradinis 740px yra teisus aplink, kur nuotraukos vaizdas bus nesuderinamas su mūsų antraštės tekstu. Vietoj to, kad nuotrauka būtų išskleidžiama dešinėje pusėje, išvalome abu elementus ir centruojame visą išdėstymą. Taip pat padidina antraštės teksto dydį, kad palikčiau tvirtesnį poveikį.

Kai langas tampa mažesnis, aš pašalinau keletą papildomų pamušalų nuo vokų dėklo ir pastraipų. Kita problema, su kuria susiduriame po antraštės, yra iš UL sąrašo. Aš suskirstysiu dviejų stulpelių metodą ir vietoj to pateikiu sąrašo elementus, kurie plaukia vienas šalia kito.

Tik „@media“ ekranas ir (max-width: 570px) ul li ekranas: inline-block; įdėklas kairėje: 15px; plotis: 140px; fono padėtis: -5px 0px; paraštė dešinėje: 6px; linijos aukštis: 1.7em;  # įgūdžių kairėje, įgūdžių dešinėje margin-bottom: 15px;

Tai taip pat reikalauja daugelio numatytųjų teksto ypatybių perkėlimo. Turime atnaujinti linijos aukštį ir perkelti kiekvieno sąrašo elemento ženklelio piktogramą. Nustatiau fiksuotą plotį, kad tinklelis pasirodytų labiau organizuotas iki kito pertraukos.

Išmaniųjų telefonų kodavimas

Paskutinės trys žiniasklaidos užklausos yra mažos, tačiau labai svarbios. Perjungus kraštovaizdžio ir portreto režimą, „iPhone“ pakeis bet kokią mobiliojo naršyklę. Taip yra ir daugelyje „Android“ įrenginių ir „Windows Mobile“ telefonų.

Tik „@media“ ekranas ir (max-width: 480px) ul li plotis: 120px;  #w marža: 0 20px;  @ media only screen ir (max-width: 320px) #w paraštė: 0 10px;  / ** tik „iPhone“ ** / @ media ekranas ir (max-device-width: 480px) ul li plotis: 150px;

Pirmą kartą paspaudus 480px arba mažesnius, mes pašaliname šiek tiek daugiau padding iš pakuotės ir vėl iš naujo nustatome sąrašo elementus. Tada, esant 320px, pašalinau dalį dokumento ribų. Jūs vis dar galite matyti tekstūruotą foną, tačiau tai nėra labai svarbu tokiame ploname vertikaliame peržiūros lange.

Galiausiai aš naudoju maks. įrenginio plotis nukreipti į „iPhone“ įrenginį arba bet kokį kitą mobilųjį ekraną, kurio maksimalus plotis yra 480 pikselių. Tokiu atveju noriu šiek tiek išplėsti sąrašo elementus, kad jie užpildytų visą ekraną. Tai paveiks tik įgūdžių sąrašus kraštovaizdžio vaizde, nes portretas yra pernelyg liesas, kad pastebėtumėte skirtumus.

Demo
Atsisiųsti šaltinio kodą

Galutinės mintys

Darbui internetu dažnai reikia bent jau tam tikros rūšies portfelio. Kai galite susieti su vienu puslapiu, atnaujinkite visus duomenis, kurie yra organizuojami kartu. Sunkūs darbdaviai ir potencialūs klientai patirs tokį charizmatišką interneto dizaino profesionalumo vaizdą.

Tikiuosi, kad jūs galite imtis tam tikrų pagrindinių taškų nuo šios pamokos. Laisvai samdomi vertėjai bet kurioje pasaulio vietoje gali patys rinktis tik šiek tiek techninių pastangų. Nedvejodami atsisiųskite aukščiau pateiktą demo šaltinio kodą ir pasidalykite savo mintimis apie šį straipsnį mūsų komentarų srityje.