Cum sa inveti Web Design + Bootstrap utilizand LEGO

17 ianuarie 2017

Fiecare persoana din Romania ar trebui sa invete cum sa realizeze si sa modifice un site web. Avem una dintre cele mai bune viteze de Internet din lume iar mediul digital ne ofera oportunitati la nivel global. Utilizand instrumentele potrivite, invatarea poate fi un proces creativ, util si distractiv.

Abordare diferita

Atunci cand doresti sa inveti cum sa realizezi site-uri web, probabil ultimul lucru pe care il vei face este sa utilizezi LEGO. Vei cauta informatii si vei incepe in mod normal de la partile componente catre rezultat, ceea ce poate fi un drum lung si uneori plictisitor.

Plecand insa de la rezultat catre partile componenente vei avea parte de distractie, inclusiv o gramada de piese colorate, special concepute pentru persoane peste 3 ani. Urmareste mai jos explicatia in cazul in care esti prins cu lego pe masa.

De la familiar la abstract - trecerea de la web design-ul cu dimensiuni fixe la web design-ul responsive, adaptabil pe orice dispozitiv de la telefon la tableta si desktop, implica un nivel ridicat de notiuni abstracte ce necesita timp pentru intelegere si care la inceput pot genera confuzii.

Plecand de la utilizarea obiectelor familiare asa cum sunt dreptunghiurile lego, putem construi structuri de site-uri complexe printr-un sistem usor de inteles, intr-un timp scurt.

Web design-ul responsive si sistemul Bootstrap

La inceput site-urile aveau dimensiuni fixe, exprimate in pixeli, de exemplu latimea de 980px, site-ul fiind usor de impartit cu putina matematica de baza. Aparitia tabletelor si telefoanelor smart au dus la trecerea catre dimensiuni responsive exprimate procentual in % iar structura si design-ul site-ului se schimba in functie de dispozitiv.



Calcularea procentuala devine un proces complex, existand multe variabile in plus de care trebuie sa tii cont: dispozitive de pe care este accesat site-ul, browsere, versiuni. Pentru asta a aparut solutia destul de repede, de aceasta data din partea Twitter ce au dezvoltat un framework responsive in cadrul companiei, denumit initial Twitter Blueprint si lansat open source in august 2011 sub denumirea de Bootstrap.

Sistemul de 12 coloane egale - Bootstrap imparte site-ul in 12 coloane proportionale, fiecare coloana avand o latime de : 8.33333333% ceea ce pare complicat si greu de retinut. Pentru aceasta vom utiliza clasa col-1.



Formarea dreptunghiurilor din coloane - desi mai jos vedem doua dreptunghiuri diferite, in realitate fiecare dreptunghi este format prin unirea a 3 coloane, asa cum putem usor observa din piesele lego. Latimea unui dreptunghi este egala cu latimea a 3 coloane. Tot ceea ce trebuie sa faci este sa retii si sa utilizezi clasa col-3, de calculul procentual se ocupa Bootstrap.



Site-uri din dreptunghiuri - structura de baza a unui site responsive este coloana. Adunand coloane vom obtine dreptunghiuri. Asezand diverse dreptunghiuri urmand o anumita structura vom obtine structura unui site responsive ce utilizeaza Bootstrap.



Pentru a controla afisarea pe diverse dispozitive utilizam xs, sm, md, lg astfel:
- col-xs-6 - vom obtine 6 coloane pe mobil (extrasmall devices)
- col-sm-6 - vom obtine 6 coloane pe tableta (small devices)
- col-md-6 - vom obtine 6 coloane pe laptop (medium devices)
- col-lg-6 - vom obtine 6 coloane pe desktop (larger devices)

Alte clase importante Bootstrap:
-hidden-xs - ascunde continutul pe mobil
-visible-xs - afiseaza continutul pe mobil
-col-sm-offset-1 - impinge o coloana la dreapta

Doua proprietati CSS diferite:
-margin - reprezinta marginea la exterior, intre doua dreptunghiuri
-padding - reprezinta marginea la interior, intr-un dreptunghi

Creativitate si eficienta

Reprezentarea si utilizarea vizuala a modelului se traducere prin abordari creative, diferite si eficiente de scriere a codului. Este mai simplu sa asezi 3 dreptunghiuri lego in diverse moduri pentru a obtine structura dorita iar ulterior sa parcurgi scrierea codului.

Andrei realizand structuri pentru zona de header a site-ului. Poate intr-o zi urmand o abordare diferita va realiza urmatorul site global.

Intelegerea conceptelor si ideilor intr-o noua perspectiva implica gandirea critica, laterala si generatoare de noi solutii, o abordare diferita si libertatea de a gasi noi rezultate.

Este distractiv - utilizarea jocurilor de 3+ ani pentru intelegerea notiunilor complexe de realizare a site-urilor cu design responsive, este in sine un lucru distractiv. In plus dezvolta colaborarea si lucrul in echipa, intelegerea conceptelor si ideilor intr-o perspectiva diferita, gandirea critica, laterala si creativa.

We have very little notion of how humans learn. Kids know: They play games. Until, that is, they go to school. That’s when the games stop. And often, so does the learning.F. MACKAY - Stanford.edu

Concluzie

Schimband modul in care invatam putem obtine rezultate mai bune, de durata si intr-un timp mai scurt. Dreptunghiurile lego sunt utile in intelegerea sistemului de baza in design-ul responsive si reprezinta un mijoc eficient de intelegere si asimilare a sistemului Bootstrap.

Aboneaza-te la noutati

Aboneaza-te pentru a primi articolele direct in inbox-ul tau

Cursuri web design incepatori: vino sa inveti cum sa realizezi site-uri web, poti lucra de oriunde te simti creativ, pentru persoane din intreaga lume.

Cursuri Web Design Acreditate

870 Lei 1100 Lei

Durata 5 saptamani
Invata cum sa realizezi Landing Page-uri, site-uri de tip One Page, site-uri pentru companii si persoane.
Cursuri web design  

© 2016 DIGITAL SKILLS SRL
Registrul furnizorilor de formare profesionala a adultilor numarul 40/7082/21.10.2016
Bulevardul Unirii, Nr. 14, Sector 4, Bucuresti R.C.: J40/6400/2016, C.U.I.: 36031733, Capital social 200 RON. Telefon: 0730.664.580