TRANSFORMARE LAYOUT IN HTML SI CSS
A doua etapa in realizarea site-ului este transformarea layout-ului / machetei grafice alese de client in pagini HTML.
In cadrul acestei etape de tranformare layout in limbaj HTML şi CSS, designerii nostri ţin cont de standardele W3C.
Folosim doar div-uri in loc de tabele (layout-uri fluide) in realizarea html-urilor din mai multe motive:
* incarcare mai rapida a paginilor
* o mai buna vizibilitate pe toate browserele : Internet Explorer, Firefox, Google Chrome, Safari, etc ...
* mai puţin cod html deci o mai rapida incarcare a paginii
* codul devine mult mai flexibil
Prelucram atat layout-urile facute de noi dar putem coda şi layout-uri externe in timp foarte scurt.
Portofoliu transformare layout
Click pe meniul din dreapta pentru a selecta lucrari din portofoliul de redesign si refacere webdesign. »
-
- 1.
- Feedwatching - www.feedwatching.com
Codare HTML www.feedwatching.com
Feedwatching listeaza zeci de titluri din surse RSS sub forma de imagini, lasand vizitatorul sa aleaga ce sa citeasca dupa cum o imagine il atrage mai mult sau mai putin.
Cerinte client:
Clientul ne-a asigurat iniţial designul deja facut sub forma de PSD-uri, pentru prima pagina dar şi pentru paginile secundare. A dorit transformarea lor in HTML/CSS şi ne-a cerut mare atenţie la detalii şi o incarcare foarte rapida a paginii. De asemenea trebuia sa facem aceste pagini vizibile pe browserele dorite : Internet Explorer 7, Safari, Firefox.
Solutie/Inovatie web2dev :
Designer-ul care s-a ocupat de acest proiect a preluat PSD-urile şi le-a transformat HTML/CSS, pe baza de div-uri pentru o incarcare mai rapida a conţinutului.
Pagina are laţime 100% pentru ca cei cu rezoluţie mare sa nu deruleze foarte mult. De asemenea, user-ul poate alege sa vada 8, 12 sau 16 imagini per pagina.
Vizitatorul are, de asemenea, posibilitatea sa vada titlul RSS-ului peste poza sau nu. Toate aceste opţiuni interactive au fost posibile prin folosirea de tehnologii ca Ajax, jQuery si CSS. Pentru a nu aglomera pagina principala, unele informaţii şi link-uri sunt disponibile intr-un div care apare cu efect de SLIDE peste conţinutul paginii.
Atunci cand sunt foarte multe imagini, am dezvoltat o modalitate de scrolling foarte interesanta care permite pastrarea header-ului şi footer-ului vizibile/statice.
Tehnologii folosite:
Html/CSS, Flash, Ajax, JavaScript
Timp de implementare : 3 zile
- 2.
- Travelessence - www.travelesence.icondev.ro
Codare HTML/CSS www.travellessence.nl
Travelessence este o firma de turism din Olanda ce se adreseaza unei clientele aparte si care organizeaza calatorii in destinatii exotice si salbatice din Australia si Noua Zeelanda.
Cerinte client:
Clientul ne-a pus la dispoziţie layout-ul primei pagini şi cateva pagini secundare facute de o alta firma de grafica din Olanda. A dorit finalizarea layout-urilor pentru restul de pagini secundare, alte modificari de grafica, cat şi transformarea acestor PDF-uri in HTML/CSS. Tot ca şi cerinţa obligatorie a fost compatibilitatea html-ului pe browserele cele mai populare : Internet Explorer 6, Internet Explorer 7, Safari, Firefox.
Solutie/Inovatie web2dev :
Am inceput cu dezvoltarea restului de pagini secundare şi cu modificarile de grafica cerute. Apoi am transformat layout-ul in HTML/CSS,pe baza de div-uri pentru o incarcare mai rapida a conţinutului.
Nu am folosit deloc Flash pentru ca am vrut sa optimizam cit mai bine si acest site in motoarele de cautare, de aceea am optat pentru dezvoltarea unor scripturi de animatie de tip javascript si CSS (exemplu : animaţie top prima pagina).
De asemenea, am folosit diverse solutii de interactiune prin Ajax. Site-ul are o opţiune modificare marime font (3 marimi de font disponibile) pentru a parcurge mai uşor textul din site, ţinand cont de preferinţele fiecaruia.
Tehnologii folosite:
Html/CSS, Flash, Ajax, JavaScript
Timp de implementare : 3 zile
