Filloni me HTML5 / CSS3: Këshilla, vitrinat dhe mostrat e kodimit

HTML5 po fiton më shumë popullaritet dhe po fillon të evoluojë tërë ndërfaqen në internet. Edhe disa nga zhvilluesit e uebit cituan që elementët HTM5 dhe efektet vizuale janë të krahasueshme me Flash. Stili i ri i skriptimit është i lehtë për t’u kuptuar dhe aftësitë për të përmirësuar ndërfaqen në internet është e pakufishme. Pra, sa interesante është kjo HTML5 gjithsesi?


Ky artikull ka për qëllim t’u japë lexuesve një pasqyrë mbi atë që duhet të dini në lidhje me HTML5 dhe më e rëndësishmja disa këshilla & hile për krijimin e faqeve të lehta, tërheqëse dhe ndërvepruese të HTML5.

1. Thelbësore në HTML5

HTML5

Para se të fillojmë ndonjë temë tjetër të kësaj teme në HTML5, do të jetë mirë të kontrolloni së pari shfletuesin tuaj aktual. Meqenëse shumë nga shfletuesit janë akoma në modalitetin e zhvillimit (përmirësimi për të akomoduar HTML5), disa veçori të përmendura këtu mund të mos jenë të mbështetshme.

Këtu keni një këshillë të shpejtë për të kontrolluar pajtueshmëria e shfletuesit.

Për të kuptuar më tej kufizimin e një shfletuesi të caktuar, mund t’i referoheni këtu.

2. Efektet e tekstit – Shtimi i hijes dhe efekti paraprak i tekstit në HTML5

Efektet e tekstit në HTML5

Efekt themelor i hijes në tekst

Ky është kodi më i thjeshtë me një varg që shndërron titullin tuaj të zakonshëm në një tekst të lezetshëm. Asnjëherë mos e nënvlerësoni efektin e hijes. Për të krijuar këtë efekt të ngjashëm në kërkim kërkon që stilisti i uebit të kalojë nëpër hapa të shumëfishtë të redaktimit të figurave në Photoshop. Dhe tani gjithçka që duhet është vetëm një linjë kodesh. Distanca e hijes, ngjyra mund të ndryshohet në përmbajtjen e zemrës suaj.

Shembull kodimi

#shadow h1
hije teksti: 0px 1px 1px rgba (0,0,0, .2);
}

Tekst mbi efektin paraprak si zjarri

Këshillë tjetër është të ju tregojmë se si kodimi HTML5 mund të shkulet në një tekst edhe më të freskët. Nëse eksperimentoni mjaftueshëm, ose gjeni shembuj të tjerë, mundësitë e rregullimit të efekteve janë të pafundme. Shënim: ky shembull nuk është krijuar nga asnjë program për redaktimin e figurave. Thjesht kode të thjeshta në HTML5.

Shembull kodimi

# zjarr h1
drejtimi i tekstit: qendër;
marzhi: 200px automatik;
font-family: "League-Gothic", Courier;
madhësia e fontit: 200px; shndërrimi i tekstit: shkronja të mëdha;
ngjyra: #fff;
text-hije: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10pp 80px # 451b0e;
}

Shembull tjetër i shkëlqyeshëm: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Qoshe e rrumbullakosur në HTML5

Këndi i rrumbullakosur në HTML5

Stilizimi i faqosjes së faqes në HTML5 nuk ka qenë kurrë kaq e lehtë që nga prezantimi i CSS. Dhe tani madje mund të keni qoshe të rrumbullakosura të elementeve tuaj të faqosjes! Imagjinoni këtë; jo më prerje imazhi në sfond, jo më fragmente fotografish të çrregullt. Kjo do të sjellë shumë gëzime për projektuesit e faqeve atje.

Shembull kodimi

div {
kufiri: 2px i ngurtë # 434343;
mbushje: 10px;
sfond: # e3e3e3;
-moz-kufi-rreze: 10px;
-webkit-kufi-rreze: 10px;
gjerësia: 500px;
}

Shënim: Moz do të thotë Mozilla, dhe webkit është për Safari dhe Chrome.

Shembull tjetër i shkëlqyeshëm: http://fjd1.com/roundcorner.html

4. Grafik Vektor i Shkallëzueshëm (SVG) në HTML5

HTML 5 udhëzime, udhëzues dhe mostra

Grafik Vektor i Shkallëzueshëm ose i njohur zakonisht si (SVG) është një grafikë vektoriale me 2 dimensione e cila përcaktohet në skedarët e tekstit XML. Me fjalë të tjera, për shkak se ADN-ja e tyre bazohet në skedarin e tekstit XML, ato mund të krijohen ose të redaktohen në platformën e uebit. Që do të thotë gjithashtu, mund të ketë shkallë të lehtë, dhe motorët e kërkimit janë në gjendje të lexojnë dhe kuptojnë imazhin.

Kodi i mostrës

Shembuj të tjerë të shkëlqyeshëm:

5. Futja e skedarit të filmit në HTML5

Video në HTML5

Këtu është një pjesë tjetër interesante për të treguar aftësitë e HTML5. Shumë nga videot në internet zakonisht paraqiten në internet në formën e Flash. Deri kohët e fundit, ngulitja e videos në HTML5 po fiton ngadalë vrull (YouTube është shembulli i mirë) dhe Flash po ngadalë po humbet tërheqjen e saj. Pse eshte keshtu? Përdoruesit e celularit. Nëse doni që videoja juaj të jetë në gjendje të luajë si në iPhone ashtu edhe me telefonat Android, HTML5 është mënyra për të ecur përpara.

Për të futur videon, do të duhet të dini se aktualisht 3 formate të mbështetura nga shfletues të ndryshëm; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Kodi i mostrës

Shembull tjetër i shkëlqyeshëm: https://www.html5rocks.com/en/tutorials/video/basics/

6. Prezantimi i rrëshqitjes në HTML5

HTML 5 udhëzime, udhëzues dhe mostra

Powerpoint ka qenë një bashkëpunëtor i emrit sinonim me prezantimin e rrëshqitjes. Por pse ta kufizoni veten me një prezantim offline ku mund të krijoni rrëshqitje të destinuara për audiencën në internet? HTML5 ka ardhur në shpëtim në krijimin e rrëshqitjeve shumë të fuqishme të prezantimit, të kompletuara me menunë e tranzicionit dhe të navigimit. Pjesa më e mirë është, madje mund të aplikoni një transformim 3D në prezantimin tuaj.

Kodi i mostrës

para
tranzicioni: të gjitha 1s lehtësi-inout;
}

para: rri pezull {
sfond-ngjyra: # F2F5FE;
ngjyra kufitare: e zezë;
}

div {
shndërroni: rrotullohen3d (1,1,0, 45deg);
}

Shembuj të tjerë të shkëlqyeshëm:

7. Përmbajtja e redaktueshme në HTML5

HTML 5 udhëzime, udhëzues dhe mostra

Teksti statik është kaq i vjetër në shkollë në epokën ku fleksibiliteti dhe dinamika sundojnë botën. Në HTML5, mund të përcaktoni një zonë të tekstit të bërë atë të redaktueshme nga përdoruesi i faqes në internet pa redaktorin e tekstit.

Kodi i mostrës

Kjo përmbajtje është e redaktueshme!

Shembull tjetër i shkëlqyeshëm: http://html5demos.com/contenteditable

8. Kanavacë interaktive në HTML5 në HTML5

HTML 5 udhëzime, udhëzues dhe mostra

Përveç SVG në HTML5, kanavacë është gjëja tjetër më e mirë që ka ndodhur ndonjëherë në internet. Kanavacë lejon dhënien e 2 formave me dimensione që sjellin ndërveprimin në një nivel të tërë pa ndihmën e Flash.

Sidoqoftë, kodimi i thjeshtë në HTML5 që krijon ndërveprim mahnitës të animacionit vlen të përmendet këtu.

Shembull tjetër i shkëlqyeshëm: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Zvarrit dhe lësho në HTML5

HTML 5 udhëzime, udhëzues dhe mostra

Drag and drop (ndonjëherë i njohur si DnD) është një tjetër veçori interesante që është në dispozicion të HTML5. Një shembull i shkëlqyeshëm do të ishte implementimi nga Google në Gmail-in e tyre. Nëse përdorni ndonjë nga shfletuesit HTML5 të mbështetur, thjesht mund të tërhiqni një skedar nga kompjuteri juaj dhe të bjerë në dritaren e kompozimit të mesazheve. Do të shtohet automatikisht si shtojcë. Sa e lezetshme është kjo?

Kodi i mostrës (DnD amtare)

dokument.addEventListener (‘dragstart’, funksioni (ngjarje) {
event.dataTransfer.setData (‘teksti’, ‘Teksti i personalizuar’);
event.dataTransfer.effectAllowed = ‘kopje’;
}, i rremë);

Shembull tjetër i shkëlqyeshëm: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Grafiku i të dhënave të pastra CSS në HTML5

HTML 5 udhëzime, udhëzues dhe mostra

Para HTML5, është gjithashtu e pamundur të krijoni një grafik të paraqitshëm thjesht duke përdorur kodimin në HTML. Për më tepër, ndryshimi i vlerës së të dhënave dhe pasqyrimi në tabelë nuk është detyrë e thjeshtë. Përsëri, HTML5 në shpëtim. Së bashku me CSS, ju mund të krijoni një tabelë absolutisht të bukur që e vë turp Microsoft Excel. Kodet janë të thjeshtë, dhe gjithçka që duhet të bëni është të harxhoni kohë për të rregulluar ngjyrën dhe efektin e përsosur për tabelën tuaj.

Shembull tjetër i shkëlqyeshëm: http://cssglobe.com/pure-css-data-chart/

Nuk mund të marr mjaftueshëm HTML 5?

Kështu bëjmë ne! Këtu keni më shumë temë, shkoni shikoni ato.

* 30 Shembuj shumë interesantë të faqeve të internetit HTML 5
* Fillimi me HTML 5
* Duhet të lexoni tutorialet HTML 5 në 2012
* Mësoni HTML 5: 10 Duhet të lexoni mësime

Po ashtu, shiko  ky kurs i rrëzimit HTML 5 nga Robin Nixon. Robin Nixon është autori i Mësoni PHP, MySQL dhe JavaScript; kursi mbulon pothuajse gjithçka që një i ri duhet të dijë në HTML5 – përfshirë kodifikimin themelor HTML, kanavacën HTML5 për vizatim, vendosje gjeografike, ruajtje lokale, si dhe audio dhe video HTML5.

Artikulli origjinal është botuar për herë të parë më Blog WHSR; tani menaxhohet dhe azhurnohet nga stafi i BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map