• Acasă
  • Despre noi
  • Autori
  • Mărturii
  • Arhivă
  • Trimite Articol
  • Contact

WORLDIT

Lumea în 1 și 0.

  • Știri
    • Tehnologie
    • Tehnologie mobilă
    • Securitate
    • Developers
    • Știință
    • Benzi desenate
    • Jocuri
    • Intern
  • Tehnic
    • Browser
    • C#
    • C/C++
    • Challenge
    • HTML/CSS
    • Javascript, Ajax, jQuery
    • Open Source
    • PHP
    • Python
    • Securitate IT
    • Socializare
    • WordPress
    • Altele
  • Recenzii
  • Interviuri
  • Evenimente

Creaza un website elegant in HTML5 si CSS 3

15
  • Publicat de Andrei Avădănei
  • în Fără categorie
  • — 25 apr., 2010 at 1:57 pm

Cred ca sunt unul din sustinatorii complet cuceriti de noile tehnologii care incep sa-si faca aparitia in domeniul web tot mai mult : HTML 5 si CSS 3.

Creativitatea noastra este o chestie foarte subiectiva, dar care poate fi parsata prin prisma obiectivitatii, prin noi, programatorii. In orice creatie exista un proces extrem de logistic si tehnic, parte ce dovedeste ca acest domeniu nu e pentru toti. Daca incercam sa privim si domeniul design intr-un mod mai itist, pot spune ca tot procesul crearii urmeaza niste algoritmi, algoritmi mai mult sau putin eficienti. Ca si in cazul limbajelor de programare, si design-ul are nevoie de optimizare, eficienta si sporirea productiei prin noi metode : HTML 5 si CSS 3. Aceste noi tehnologii urmaresc exact aceasta dorinta : depasirea unor probleme plicticoase ce intarzie finalizarea proiectului si in acelasi timp ce sporesc costul productiei.

Cum HTML 5 si CSS3 schimba regulile productiei?

Desi, nu sunt designer aproape deloc (cu totii stiti asta), pot spune cu mare siguranta ca multe opinii s-au schimbat o data cu aparitia noilor tehnologii. Se schimba conceptia dezvoltarii deoarece s-a imbunatatit extrem de mult procesarea imaginilor din interiorul codul HTML/CSS. Aud tot mai des parerea ca Photoshop incepe sa-si piarda din autoritate o data cu efectele puse la dispozitie de CSS 3. Trebuie subliniat faptul ca nu il inlocuieste, ci doar ii reduce necesitatea. In cazul HTML 5, putem spune cu siguranta ca aduce noi efecte in discutie, reduce utilizarea unor librarii foarte populare precum flash sau java.

Introducere efectiva in HTML 5

Am tot vorbit teoretic in cateva articole pe blog, dar cred ca e cazul sa dovedim si dezvoltatorilor cateva din noile functii oferite de aceasta tehnologie. Trebuie remarcat si faptul ca aceasta tehnologie nu este un standard W3C, deci tot ce prezentam urmareste introducerea in noua tehnologie.

Ma voi focaliza doar asupra elementelor ce imbunatatesc structurarea paginilor.
<section> – elementul este o solutie generica a unei sectiuni din document sau a intregii pagini, o grupare tematica a continutului ce contine un antet. Trebuie avut in vedere faptul ca „<section> nu este doar un <div> semantic”.

<aside> este o sectiune din pagina ce consta in continut ce este asemanator doar tangential cu subiectul principal al paginii. Il putem folosi spre exemplu in sidebar, la reclame, la bara de navigare(meniul) sau orice alt continut ce este mai putin relevant cu contentul propriu-zis.

<article> – este un element, sa spunem, principal deoarece contine practic contentul propriu-zis al paginii : postul unui forum, un articol pe blog, o stire etc). Acest element ar trebui folosit in aceste situatii in locul elementului <section>, deoarece e mai logic.

<footer> este un element ce reprezinta footerul celui mai apropiat parinte fata de sectiune curenta a contentului. Poate contine informatii relevante la sectiune, linkuri related pentru documente, copyright etc. Il putem folosi in cazul in care folosim tagurile article, respectiv section.

<header> – reprezinta un element similar cu precedentul, doar ca va contine o grupare de elemente reprezentative pentru sectiunea curenta (grupari de h1-6).

<nav> – este un element pentru sectiunea de navigare (meniul). In acest tag trebuie incluse doar blocurile majore de adrese.
<time> – element folosit pentru a reprezenta data

Introducere efectiva in CSS3

CSS 3, ca in cazul HTML 5, nu este un standard W3C, dar avem posibilitatea de a testa deja pe browserele compatibile diverse functii din noua tehnologie.

RGBa – este modelul standard RGB folosit in paletele de culori (0,0,0 – 255,255,255) la care se adauga o noua optiune (a) pentru opacitate.

background: rgba(196,89,30,0.65);


box-shadow
– aceasta optiune CSS urmareste crearea unor efecte de umbra.

-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);


border-radius
– o alta proprietate foarte interesanta, ne permite sa rotunjim colturile. Aceasta proprietate este folosita in acest moment pe blog, vizibila pe browserele ce sunt compatibile cu aceasta (gen Mozilla Firefox).

-moz-border-radius: 10px; /*radius of 10px*/
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

text-shadow – proprietate ce ne ofera posibilitatea de a aplica diverse umbre pe text.

text-shadow: 1px 1px 1px #2c0306;

Un website elegant in HTML5 si CSS 3

Dupa o introducere succinta, putem vedea rezultatele acestor tehnologii. Mai jos aveti un demo al website-ului, alaturi de toate sursele.

Cum sa faci un website elegant?

Ca in cazul oricarui proiect, modul profesionist de a lucra consta in organizarea eficienta a unui plan de lucru. Mai jos urmeaza pasii crearii eficiente.

„Mazgaleste” ideile

Cred ca cea mai buna idee este crearea unui mic sablon pe o coala de hartie, pe care iti sintetizezi structurarea paginii astfel incat sa o poti interpreta mai tarziu cand urmeaza implementarea efectiva in cod.

Detaliile grafice

Paleta de culori

Elemente grafice

Codeaza efectiv website-ul cu HTML 5

Urmeaza stabilirea structurii de baza si trecerea efectiva la lucru. Mai jos aveti structurarea aproximativa a paginii.

Arhiva o puteti descarca de aici. Puteti vedea informatii suplimentare legate de implementare in articolul original. 🙂

Daca acest articol contine o greseala, selecteaza cuvintele sau fraza gresita si tasteaza combinatia de taste Shift + Enter sau apasa click aici pentru a o raporta. Multumim!

— Andrei Avădănei a scris 1246 articole

Andrei scrie pe worldit.info din vara lui 2011. Este fondatorul Asociatiei Centrul de Cercetare in Securitate Informatica din Romania - CCSIR si coordoneaza DefCamp, cea mai importanta conferinta de securitate informatica & hacking din Europa Centrala si de Est. Andrei ofera in cadrul Bit Sentinel servicii de securitate informatica, penetration testing, security management, recuperarea de pe urma unui atac cibernetic, training-uri si workshop-uri.

  • Articolul anterior QuickScan – tehnologia BitDefender pentru diagnosticarea sistemelor infectate
  • Articolul următor Egazduireweb.ro – Gazduire web profesionala

15 Comentarii

  1. Grigore Ciprian spune:
    aprilie 25, 2010 la 3:46 pm

    Ca tot mi-a sarit in ochi paleta de culori.Pentru cei interesati sau doar curiosi de diverse combinatii/palete de culori, accesati http://kuler.adobe.com
    O sa va fie de folos.

  2. Cornescu Andrey spune:
    aprilie 25, 2010 la 5:46 pm

    Sunt de parare ca html 5 e doar o complicatie inutile si nenecesara pentru aspectul unei pagini, insa CSS3 ofera multe avantaje (unele cum ar fi selectors, care nu le’ai prezentat) si sustin adaptarea cat mai rapida a standardului

  3. dr.Parazitu spune:
    aprilie 25, 2010 la 10:29 pm

    Nu stiu cat ajuta HTML 5 pe viitor, dar in schimb CSS 3 e mana cereasca:)) oricum la unele chestii s-au inspirat de la efectele CSS 2 care rulau doar pe mozilla, de exemplu rounded corners fara photoshop.

  4. iosif spune:
    aprilie 25, 2010 la 11:04 pm

    Aproape degeaba cu html5/css3 pana cand oamenii vor folosi browsere compatibile cu noile standarde.

  5. Avadanei Andrei spune:
    aprilie 25, 2010 la 11:10 pm

    @dr. Parazitu HTML 5 e bun la asemenea chestii :http://www.worldit.info/noutati/google-dezvaluie-puterea-noului-html-5/

    @iosif Si la ce te astepti? toata lumea sa foloseasca noile tehnologii dintr-o data? Pana sa devina standard mai dureaza putin.

  6. Grigore Ciprian spune:
    aprilie 26, 2010 la 12:50 am

    @iosif banuiesc ca te referi la vechea poveste in legatura cu utilizatorii ce inca mai folosesc IE6(doar un exemplu).

  7. iosif spune:
    aprilie 26, 2010 la 3:27 pm

    @andrei: o sa dureze un pic mai mult decat „putin”; cel putin 2-3 ani pana cand populatia o sa foloseasca browsere compatibile cu noile standarde. Uita-te si tu, Internet Explorer 6 aparut prin 2002, parca, si dupa 8 ani aproape jumatate dintre cei ce navigheaza pe internet folosesc inca relicva asta.

  8. dage spune:
    aprilie 26, 2010 la 8:12 pm

    Sunt destul de interesat de html5 si css3, insa va dura mult pana cand o sa apara siteuri in aceste limbaje. Pe langa scosul unor tehnologi ar trebui facut ceva pentru ca oamenii sa inteleaga de ce este necesar sa aiba un browser cu ultima versiune. Pentru ca degeaba scoti o tehnologie daca nu poti sa o utilizezi.

    Oare de ce nu face cineva vrun virus care sa le faca upgrade la browser(in cazul ie 6)… dar deja visez…

  9. Claudiu spune:
    aprilie 30, 2010 la 9:38 pm

    Oameni buni, cum sa dureze mult pana sa apara site-uri in asemenea limbaje? 🙂 Tot ce trebuie sa faci ca sa treci pe HTML 5 e sa schimbi doctype-ul (cum a facut Google). IE va citi doctype-ul, va ramane masca, il va ignora si va continua sa randeze ca pana acum.

    In alta ordine de idei, welcome HTML5. Tag-urile noi vor fii si ele ignorate, ceea ce face problema mai delicata, dar puteti folosi alte feature-uri HTML 5 cum ar fii tipurile noi de inputuri (mail, date and so on). De asemenea, HTML 5 stie sa randeze video, audio si e foarte ok pentru canvas (canvas + JS = love). Youtube a implementat deja un player HTML 5 iar niste baieti au recreat Quake 2D pe canvas. La inputuri, daca typul nu este recunoscut (cum ar fii email sa zicem) va fii tratat ca input de tip text, pe orice browser, deci nu ne deranjeaza cu nimic.

    @drParazitu Nu e inspirat din CSS 2, e chiar CSS 3. Fiecare browser a inceput sa implementeze anumite feature-uri CSS 3, de acolo si denumirea dubioasa (moz-, webkit-). Asta e un lucru bun pentru ca putem sa ne jucam cu cateva lucruri inainte sa fie implementate toate optiunile.

    Sunt extrem de multi (fata de cati ar fi normal) care folosesc inca IE6, so what? IE se pregateste sa scoata versiunea 9, iar Win 7 devine din ce in ce mai comun. Majoritari sunt cei care folosesc browsere moderne si se va ajunge la o uniformizare. Standardele actuale (HTML 4.01 + CSS 2) erau perfect ok pana acum ceva vreme, cand s-a cam renuntat la design table based (all the time) si evident nu toate browserele au tratat problema la fel.

    Se lucreaza foarte intensiv pe partea de HTML 5, CSS 3 si motoare Javascript mai eficiente. It’s gonna come with a bang 😛

  10. iosif spune:
    aprilie 30, 2010 la 11:55 pm

    @claudiu: frate, poti sa schimbi tu ce vrei, css 3 nu-ti va fi recunoscut de multe browsere.

  11. Claudiu spune:
    mai 1, 2010 la 12:05 am

    @iosif Ma’ nigga, cred ca tu ai citit alt comment 🙂 Unde am scris ca daca schimbi ceva, va fii recunoscut CSS 3? Sau prima oara aruncam cu pietre si dupa gandim?

    Am spus ca trecerea de la HTML 4 la HTML 5, dpdv al fisierului in sine, consta in schimbarea doctype-ului (aka <!DOCTYPE html>, simplu, fara complicatii ca pana acum). Si am mai spus ca sunt elemente HTML5 care pot fii folosite fara a crea probleme pe browsere care nu suporta HTML 5 pentru ca atributele necunoscute sunt inlocuite cu altele existente (input type=”email” de exemplu e inlocuit de type=”text”). Iar asta se intampla fara sa faci update-uri la browser sau ceva.

    CSS 3 e suportat de browserele moderne partial, asa cum am si specificat, folosind extensiile specifice motoarelor de randare ale lor (moz- si webkit- for example). Ei bine, cu astea ne putem juca. Daca un alt browser nu recunoaste proprietatea CSS o va ignora, no harm done.

    Diferentele intre CSS si HTML sunt fundamentale, HTML e limbaj de markup iar CSS de styling. De altfel, doctype-ul de care spuneam ca e safe sa fie schimbat la orice ora, nu are nicio legatura cu CSS, ca nu citeste CSS doctype-ul si daca vrei poti sa folosesti HTML 4 cu CSS 3 sau HTML 5 cu CSS 2, whatever makes you feel good.

    So, „frate” vorbim la coltul blocului si acuzam fara argumente tot acolo, deal?

    Tema de research: http://diveintohtml5.org/forms.html

  12. Tudor spune:
    mai 2, 2010 la 6:14 pm

    a) din pacate, ritmul de actualizare a browserelor in Romania este foarte foarte lent; daca vreti sa avem site-uri romanesti pe HTML 5 in viitorul apropiat, promovati la maxim necesitatea utilizarii unei versiuni cat mai recente a browserului.

    b) macheta grafica a unui site nu are nici o legatura cu limbajul de programare; faptul ca prin css se pot reproduce anumite efecte grafice PSD, nu inseamna ca graficianul va incepe sa se limiteze doar la utilizarea unor elemente din biblioteca CSS; menirea programatorului este de a transpune creeatia graficianului, conform structurii site-ului

  13. Avadanei Andrei spune:
    mai 2, 2010 la 9:14 pm

    a) Sunt total deacord, dar nu e suficient un singur om sa faca asta. 🙂
    b) Ai dreptate si aici. Eu am incercat sa subliniez faptul ca numai e nevoie de cunostinte PS pentru a face anumite lucruri. Dupa cum vezi si in articolul asta, nu toate chestiile au fost facute in HTML 5 &CSS 3, ci s-a folosit, la minim, PS. 🙂

  14. Claudiu spune:
    mai 3, 2010 la 1:45 am

    Eu vad treaba asta cu efecte PS simulate foarte ok cu CSS 3 altfel. Primesc designul in PS de la designer (evident) si nu mai trantesc imagini acolo unde am nevoie de un drop-shadow sau colturi rotunjite. Imi usureaza si mie munca, ofera si o experienta mai placuta utilizatorului (caruia i se incarca mai repede site-ul) si ma iubeste si designer-ul cand nu ii spun sa-mi schimbe design-ul pentru ca daca ii fac tot site-ul din imagini ne injura userii. Everybody happy 🙂

  15. Despre CSS 3 si HTML5 | The Blog spune:
    decembrie 22, 2010 la 1:13 pm

    […] Creaza un website elegant in HTML5 si CSS3 […]


  • Facebook

    WorldIT.info
  • Ultimele Atacuri Cibernetice din Romania – RO Hacked

    • imacoolat-curat.ro
      | Published: februarie 3, 2020 - 2:00 am
    • hotel-palace.ro
      | Published: februarie 2, 2020 - 2:00 am
    • www.tahometru.ro
      | Published: februarie 1, 2020 - 2:00 am
    • alexisart.ro
      | Published: ianuarie 30, 2020 - 2:00 am
    • justshop.ro
      | Published: ianuarie 29, 2020 - 2:00 am
    RO Hacked este registrul atacurilor cibernetice din România.
  • Caută

  • Articole Recomandate

    • Recent Posts
    • Tags
    • Număr record de participanți la DefCamp 2015, cel mai important eveniment dedicat securității cibernetice din Europe Centrala si de Estdecembrie 2, 2015
    • La DefCamp 2015 vei afla prin ce tehnici pot fi evitate măsurile de securitate ale sistemelor informatice criticeoctombrie 16, 2015
    • Ultima sansa sa rezervi bilete de tip Early Bird la DefCamp 2015septembrie 1, 2015
    • 15 sfaturi despre cum poti deveni un programator bun venite de la specialisti romaniaugust 4, 2015
    • algoritmica Android antivirus Apple Avadanei Andrei benzi desenate BitDefender blog browser C++ Chrome concurs eveniment Facebook Firefox Google google chrome hacking html5 infografic informatica internet Internet Explorer IT javascript linux Microsoft Mozilla Firefox online PHP programare retea sociala review Romania securitate Tehnologie Twitter web Windows Windows 7 Wordpress WorldIT worldit.info Yahoo! YouTube
  • ianuarie 2021
    L Ma Mi J V S D
    « dec.    
     123
    45678910
    11121314151617
    18192021222324
    25262728293031
  • Link-uri Sponsorizate

    • laptop second hand

    • Calculatoare Second Hand

    • cod voucher pc garage

  • Home
  • Creaza un website elegant in HTML5 si CSS 3
  • Important

    • Bit Sentinel
    • Centrul de Cercetare în Securitate Informatică din România
    • DefCamp
  • Prieteni

    • BetiT.ro
    • bijuterii handmade
    • Computerica | Resurse gratuite PC
    • Descopera.org
    • Gadgeturi si IT – Giz.ro
  • Prieteni

    • PC – Config
    • RO Hacked
    • Stiri IT

Copyright © 2009-2014 WORLDIT. Toate drepturile Rezervate.
Termeni și condiții | Contact | Licența Creative Commons

Multumim foarte mult ca ne-ai raportat greseala! O vom remedia in cel mai scurt timp posibil.