Fa-ti propriul framework HTML/CSS

Astazi, voi discuta un lucru mai putin cunoscut, dar foarte important in arsenalul unui tanar web designer – cum sa iti creezi propriul framework in HTML/CSS.Vei vedea ca pe masura ce adaugi tot mai multe lucrari portofoliului tau anumite tipare vor iesi la suprafata.Fiecare dintre noi munceste intr-un anumit stil, iar acel stil va deveni samanta de originalitate din lucrarile tale.Important de retinut este ca prin utilizarea unui framework creat de tine reduci semnificativ timpul de lucru la un design.

Notiunea de framework

Dupa buna Wikipedia, un framework este un ansamblu standardizat de concepte, practici ?i criterii pentru a se aplica asupra unui tip particular de problematic?, ce serve?te ca referin?? pentru a propune ?i rezolva probleme cu conota?ii similare.

Suna complicat si poate chiar este.Dar nu trebuie sa retii o definitie ca cea de mai sus.Eu cred ca e important sa retii numai urmatoarele:

  • un framework este o fundatie, pe care webdesignerii o reutileaza
  • e mai usor sa incepi cand ai un suport solid(in orice domeniu)
Imi place sa corelez notiunea de webmaster/web designer cu cea de reciclator.Caci in esenta, un webdesigner bun va reutiliza de multe ori elemente mai vechi, dar sub un nou aspect.Aceasta strategie este foarte buna, in special cand vrei sa cresti productivitatea, dar in acelasi timp si calitatea.

Un framework HTML

Mai jos este un exemplu de framework HTML 5 pe care si tu il poti utiliza pentru a mai salva cateva minute din designul care poate dura destul de mult.
[cc lang=”html”]




Titlul la website



[/cc]
Ce e mai sus poate fi numit un mic framework.E de ajutor in special cand vrei sa creezi un website caci de obicei multi webdesigneri vor utiliza aceste div-uri.

Un framework CSS

De asemenea, un framework css este foarte important in special cand vrei sa faci totul ca la carte,valid in toate browserele, in cazul acesta acea fila HTML numindu-se reset.css(de cele mai multe ori).Cu o fila ca aceasta elementele vor fi identice in toate browserele.
[cc lang=”css”]/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}[/cc]

Tine totul perfect aliniat

E foarte important ca atunci cand creezi un website sa-l faci foarte aliniat.Nu pare cine stie ce, dar de fapt aceasta “meticulozitate” la detalii daca o pot numi asa, confera site-ului acea “aura” serioasa si ordonata.De asemenea, in combinatie cu o spatiere potrivita intre elemente, site-ul tau va avea cu totul si cu totul un nou aspect.Acest detaliu trebuie rezolvat inca din sablonul .psd, asa ca aici ne este foarte la indemana “960 Grid System”.

Site-ul 960.gs ofera o colectie cu site-urile ce utilizeaza acest sistem.

Utilizeaza snippets

Snippet-urile sau micile bucatele de cod ar trebui sa ocupe un loc important in arsenalul tau.Ele pot fi inserate de obicei numai prin comenzi(CTRL+N de ex.)De exemplu, o bucla wordpress ar putea fi introdusa prin simpla tastare a comenzii wloop.Cateva dintre cele mai populare sunt TextWrangler si Zen coding, ambele niste unelte foarte puternice, care, utilizate la potentialul lor maxim pot economisi o groaza de timp.Totusi, nu toata lumea se poate obisnui cu asa ceva.Nici eu nu sunt atat de obisnuit sa le utilizez, dar cred ca sunt un pas in fata.

Sporeste productivitatea – ZenCoding from Stefanescu marian on Vimeo.

De asemenea, poti utiliza si bucatelele de cod din librariile online cum ar fi CSS-Tricks code snippets sau Wp-Snippets.

La o codare cat mai eficienta!

Leave a Reply