Salut,
Un curs extraordinar de la TutsPlus parcurs rapid in aceasta saptamana: PSD to HTML: The Responsive Portfolio Build. Cursul prezinta practic transpunerea 100% a unui template grafic PSD in cod HTML stilizat cu CSS si foarte putin jQuery.
28 de lectii, fiecare preluand etapa anterioara si adaugand cod si avansand in transpunerea i cod HTML a designului grafic de plecare.
Lucruri noi: analiza graficii, lansarea de solutii de plecare, implementare si rafinare.
4 Sectiuni:
A. Analiza
B. Structurarea (scrierea codului HTML concentrat pe sectiunile de continut identificate). Se tine seama de tipul de design responsive avut ca tinta
C. Stilizarea sectiunilor create. fiecare sectine se ia separat si se adauga cod CSS, se obtin imagini din layerele existente in fisierul grafic PSD (cursul prezinta si activitati de baza in PhotoShop petr preluarea acestor layere si obtinerea imaginilor web pentru template-ul HTML)
D. Obtinerea efectului Responsive. Ce inseamna Responsive Design: ajustarea layoutul-ului in functie de latimea browserului (functie la randul lui de device-ul* folosit) astfel incat sa fie corect pentr orice dimensiune.
* Daca rducem dimensiunea ferestei browserului manual, obtinem acelasi efect ce rezulta di folosirea unor dispozitive de dimensiuni diferite
Am invatat prma interogare media CSS (media query) care in functie de dimensiunea curenta a ferestrei browserului aplica fata de directivele CSS construite, valabile oricand cateva directive pentru a repozitiona elementele unor sectiuni din template
Restrangerea meniului la un menu-icon si apoi folosirea jQuery pentru a afisa/ascunde meniul restilizat cand dimensiunea ferestrei browserului trece inainte si inapoi fata de un breakpoint**
** breakpoint-urile (latimea ferestrei browserului) corespund de regula unor dimensiuni ale tabletelor si se identifica in functie de template-ul specific in lucru cu Web Chrome Tools
Află detalii privind realizarea site-urilor pe WordPress
Creare site WordPress
Sau ia legatura cu noi aici
