Implementarea Web Pentru Dispozitivele Mobile

Informatica

Implementarea Web Pentru Dispozitivele Mobile

Byadmin ianuarie 1, 2024

IMPLEMENTAREA WEB PENTRU DISPOZITIVELE MOBILE

Cuprins

Introducere

1 Web design

1.1 Dezvoltarea web

1.2 WordPress

1.2.1 Prezentare

1.2.2 Vulnerabilități

1.2.3 Teme

1.2.4 Plugin-uri

1.2.5 Widget-uri

1.2.6 Aplicații mobile

1.2.7 CMS (Content Management System)

2 Web design pentru dispozitivele mobile

2.1 Web design dinamic

2.1.1 Responsive web design

2.1.2 Mobile First

2.1.3 Feature Detection

2.1.4 Date tehnice

2.1.5 Crearea de imagini responsive

2.1.6 Adaptive web design vs responsive web design

2.1.7 Elemente media responsive

2.2 Framework-uri responsive

2.2.1 Foundation

2.2.2 Twitter Bootstrap

2.3 CSS

2.3.1 CSS3 Media Queries

2.3.2 Dimensionarea absoluta

2.4 Mobile JQuery

2.4.1 jQuery plugins

2.5 Testare cod cu JSFiddle

2.6 Unelte ajutătoare pentru dezvoltatori

2.6.1 Opera Mobile Emulator

2.6.2 Phone Gap

2.6.3 Aptana Studio

2.7 Pași importanți în web design pe mobil

2.7.1 Planificarea unei experiențe solide a utilizatorului

2.7.2 Păstrarea paginilor scurte și concise

2.7.3 Alegerea rezoluției ecranului

2.7.4 Împărțirea paginilor în porțiuni mici

2.7.5 Simplificarea designului

2.7.6 Opțiunea pentru a vizualiza complet website-ul

2.7.7 Amplasarea navigării

2.7.8 Folosirea linkurilor cu text

2.7.9 Distincție intre link-ul selectat

2.7.10 Păstrarea unui echilibru intre linkuri

2.7.11 Reducerea textului de intrare utilizator

2.7.12 Fără pop-up-uri sau refresh-uri dese

2.8 Proiectarea de site-uri web pentru IPhone

3 Aplicația

3.1 Prototipare

3.2 Proiectare website pe principiul ”Mobile First”

3.3 Testare macheta responsive

3.4 Modificare template si creare website neoptimizat

3.5 Utilizare Bootstrap

3.6 Introducere breakpoints

3.7 Optimizare imagini responsive

3.8 Creare slideshow folosind ResponsiveSlides.js

3.8.1 Eveniment JavaScript

3.9 Testare website complet optimizat

Concluzii

Bibliografie

Introducere

Navigarea pe internet se făcea acum mulți ani de pe un simplu computer iar website-urile prezentau informații sumare. Odată cu progresul tehnologiei, apariția smartphone-urilor și creșterea complexității site-urilor a apărut și problema afișării conținutului pe multitudinea de dispozitive existente (smartphone-uri, tablete, ipad, etc.), precum și problema mărimii website-ului și implicit a vitezei de încărcare. Odată cu progresul tehnologiei, căutarea informației pe internet a devenit o rutină. În prezent sunt aproape 6 miliarde de utilizatori de telefoane mobile în întreaga lume, dintre ei aproximativ 20% navighează pe internet, iar în România s-a depășit deja cifra de 7 milioane de utilizatori de internet de pe telefonul mobil. Oriunde ne-am afla, cu ajutorul telefoanelor mobile putem găsi informația dorită foarte rapid. Avem nevoie oare de o varianta pentru mobil a site-ului pe care-l vizitam și ne putem pune întrebarea daca avem de pierdut daca nu avem și varianta mobila la website-ul nostru? Având în vedere faptul că numărul celor care își cumpără un telefon mobil capabil să navigheze pe internet este în continuă creștere, o prezentare calitativă a imaginii pe internet necesită și website în variantă pentru mobil. Așadar este de preferat ca fiecare site să aibă și variantă pentru dispozitive mobile pentru a se alătura la standardele actuale în materie de web design.

O mulțime de oameni utilizează dispozitive mobile pentru a naviga pe Web în timp ce stau pe canapea, cuplați la Wi-Fi, cu un ochi pe telefon și unul la TV. Și mulți navighează pe net după informații stârnite de o conversație cu oamenii din jur. Acest tip de utilizator al internetului devine din ce în ce mai întâlnit. Dar sunt și întotdeauna vor fi oameni care accesează internetul de pe un dispozitiv mobil în timp ce se afla afară, eventual folosind tehnologie 3G într-o zonă cu semnal dodgy sau pe un plan de date scump. Web designerii și dezvoltatorii au tendința de a investi în planuri de date foarte ofertante și design foarte ofertant estetic și tehnic, dar, o mulțime de oameni, nu vad lucrurile la fel și ar fi mult mai bucuroși de un plan limitat. Aceste persoane nu vor aprecia utilizarea datelor lor mobile încărcând imagini de dimensiuni mari pe dispozitivele lor în timp ce ne vizitează site-ul. Ei pot abandona site-ul înainte de a se uita la el în cazul în care imaginea descărcata încetinește totul. În plus, vizitatorii ar putea verifica doar site-ul, rapid, în timp ce fac altceva, și un site lent ar putea dăuna în ierarhia motoarelor de căutare. Luând toate acest lucruri în considerare, cu siguranță, reducerea imaginilor pentru dispozitive mobile nu este recomandata.

Putem să ne întrebam așadar care e diferența intre un website pentru dispozitive mobile și unul desktop. Un aspect ar fi că standardele și arhitectura folosită la navigarea pe internet sunt diferite pentru telefoanele mobile fată de cele pentru desktop-uri sau laptop-uri. Dacă website-ul nostru se afișează în mod corect când îl accesăm de pe laptop sau de pe desktop, pentru telefonul mobil se va afișa diferit. Afișarea corecta a conținutului pe dispozitivele mobile trebuie sa respecte anumite standarde impuse de W3C – instituția care impune standardele internetului larg acceptate.[1] Ideal ar fi ca website-ul să fie atât de bine optimizat astfel încât să nu fie nevoie de o versiune separată pentru mobile. Dar ce facem atunci când versiunea desktop a website-ului nu este suficient de bine optimizată având astfel nevoie de o versiune și pentru dispozitivele mobile? Despre asta vom discuta în acest material și vom încerca să înțelegem cum trebuie făcut un website mobil și care sunt diferențele care apar fata de versiunea desktop. [2]

Web design

Dezvoltarea web

Dezvoltarea web este un termen larg, care cuprinde orice activitate legata de dezvoltarea unui site web pentru WWW( World Wide Web) sau Intranet. Aceasta poate include dezvoltarea afacerilor prin comerț electronic (e-Commerce), web design, dezvoltarea de conținut web, programare specifica, configurarea serverelor web, etc. Dezvoltarea web include atât realizarea unor simple pagini web statice cu text, pana la cele mai complexe aplicații Internet, afaceri electronice (e-Business), sau servicii de rețele sociale. Există multe sisteme pentru dezvoltarea web disponibile în mod gratuit. Un exemplu bine-cunoscut este LAMP (Linux, Apache, MySQL, PHP), care este de obicei oferit gratuit. A ajutat peste tot în lume la instalarea zilnica de noi site-uri web contribuind astfel la creșterea popularității site-urilor web. Un alt factor contributiv a fost creșterea ușurinței în folosirea de software WYSIWYG(WhatYouSeeIsWhatYouGet) pentru dezvoltarea web, în special Adobe Dreamweaver sau Microsoft Expression Studio. Practic prin folosirea acestor software-uri oricine poate dezvolta o pagina web în câteva minute. Cunoașterea unui limbaj de programare (CSS, HTML, PHP) nu mai este astfel, necesară. Dezvoltarea web a dus la apariția de transformări dramatice în comunicații și în comerț. Cele mai bune exemple: comerțul electronic și apariția blogului. Exista la ora actuala o mulțime de platforme tip open source care au extins dezvoltarea web spre noi modalități de interacțiune și comunicare. Cele mai cunoscute sunt Joomla!, Drupal, WordPress, Xoops, Typo3. Dintre acestea WordPress a realizat medii de blog ușor de implementat pe site-uri web individuale și nu întâmplător am făcut aceasta precizare intru-cât aplicația mea este creata pe WordPress dar trebuie mai întâi să înțelegem mai detaliat ce este WordPress.

WordPress

WordPress este o platformă de tip open source gândită inițial pentru publicarea de bloguri. Platforma WordPress este scrisă în limbajul PHP, folosind pentru gestionarea bazelor de date sistemul MySQL. Șabloanele specifice sunt scrise în limbajele HTML și CSS. Avantajele majore prezentate de WordPress sunt simplitatea și numeroasele plugin-uri create de către comunitate care pot modifica funcționalitatea WordPress-ului permițând crearea aproape oricărui tip de site web. De asemenea interfața poate fi schimbată foarte ușor datorită multitudinii de teme gratuite sau premium(contra-cost).

Ca o scurta istorie, WordPress a fost lansat în 27 Mai 2003, de către Matt Mullenweg3 și Mike Little, ca precursor al b2/cafelog, care era utilizat de 2 000 de bloguri la acea vreme.

Numele de WordPress a fost sugerat de către Christine Selleck Tremoulet, o prietena a lui Matt Mullenweg.

Prezentare

WordPress reprezintă cea mai performantă și actuală platformă dedicată publicării personale.

Orientarea sa pe estetică, standarde web și ușurința de folosire o fac alegerea preferata a majorității dezvoltatorilor sau web designerilor, iar faptul că e disponibilă gratuit fiind software liber, permite distribuirea și personalizarea sa pe placul tuturor.

WordPress se bazează pe un sistem de template-uri, folosind un procesor de template (motor de template).

Motorul de template, este o componenta software destinat procesării template-urilor web și a informațiilor de conținut pentru a produce la ieșire documente web. El rulează în contextul unui sistem de template-uri. Limbajul folosit este un limbaj numit limbaj template.

Vulnerabilități

De la începuturi și până în prezent, WordPress a fost etichetat în nenumărate rânduri ca fiind vulnerabil la atacuri ce vizau adăugare de conținut malițios pe blogurile sau site-urile ce foloseau această platformă. Au fost create numeroase programe automate ce căutau pe internet site-uri care foloseau această platformă și, folosindu-se de vulnerabilitățile acesteia, reușeau să introducă în conținut, fără acordul proprietarului, link-uri către site-urile celor ce foloseau aceste programe.

În ultimul timp însă, dezvoltatorii platformei au reușit să aducă WordPress într-o stare în care atacurile de acest tip sunt aproape imposibil de realizat. În momentul de față WordPress este printre cele mai sigure și mai puternice CMS-uri la ora actuală.

Cea mai noua versiune, 4.1 lansata la 18 decembrie 2014, a rezolvat mare parte din vulnerabilitățile prezente în versiunile anterioare, și a făcut din WordPress o platforma mult mai sigura.

Teme

Utilizatorii WordPress pot instala și comuta între teme . Temele permit utilizatorilor să modifice aspectul și funcționalitatea unui site WordPress sau instalarea, fără a modifica informații de conținut sau structura site-ului. Temele pot fi instalate în WordPress folosind panoul de administrare "Appearance" sau fișierul cu tema poate fi încărcat prin intermediul FTP. Codul PHP, HTML(HyperText Markup Language) și CSS (Cascade Style Sheets) găsit în teme poate fi adăugat sau editat pentru furnizarea de caracteristici avansate. Există mii de teme WordPress, unele gratuite, și unele premium. Utilizatorii de WordPress, de asemenea, pot crea și dezvolta propriile lor teme personalizate dacă au cunoștințele și abilitățile necesare.

Temele WordPress sunt fișiere care lucrează împreună pentru a crea design și funcționalitate de un site WordPress. Fiecare temă poate fi diferită, oferind mai multe opțiuni pentru proprietarii de site-uri pentru a schimba instantaneu aspectul. Ca și cum am angaja un web designer, diferența fiind că tema este deja terminată, spre deosebire de cealaltă situație în care ar fi necesitat două săptămâni de așteptare. Unele teme oferă setări de meniu tip drop-down, care oferă posibilitatea de a controla ceea ce se întâmplă, prin glisare și fixare(drag and drop). Teme de toate tipurile sunt oferite pe web, în mass-media, pe site-uri de cumpărături , astfel încât e imposibil sa nu găsiți ce căutați, dacă căutați suficient de bine.

Plugin-uri

Un plugin este o parte de software care conține un grup de funcții care pot fi adăugate la un site web WordPress. Ele pot extinde funcționalitatea sau adăuga noi caracteristici pentru site-urile WordPress. Plugin-urileWordPress sunt scrise în limbajul de programare PHP și integrate perfect cu WordPress.. Face totul atât de simplu încât permite utilizatorilor să adauge caracot instala și comuta între teme . Temele permit utilizatorilor să modifice aspectul și funcționalitatea unui site WordPress sau instalarea, fără a modifica informații de conținut sau structura site-ului. Temele pot fi instalate în WordPress folosind panoul de administrare "Appearance" sau fișierul cu tema poate fi încărcat prin intermediul FTP. Codul PHP, HTML(HyperText Markup Language) și CSS (Cascade Style Sheets) găsit în teme poate fi adăugat sau editat pentru furnizarea de caracteristici avansate. Există mii de teme WordPress, unele gratuite, și unele premium. Utilizatorii de WordPress, de asemenea, pot crea și dezvolta propriile lor teme personalizate dacă au cunoștințele și abilitățile necesare.

Temele WordPress sunt fișiere care lucrează împreună pentru a crea design și funcționalitate de un site WordPress. Fiecare temă poate fi diferită, oferind mai multe opțiuni pentru proprietarii de site-uri pentru a schimba instantaneu aspectul. Ca și cum am angaja un web designer, diferența fiind că tema este deja terminată, spre deosebire de cealaltă situație în care ar fi necesitat două săptămâni de așteptare. Unele teme oferă setări de meniu tip drop-down, care oferă posibilitatea de a controla ceea ce se întâmplă, prin glisare și fixare(drag and drop). Teme de toate tipurile sunt oferite pe web, în mass-media, pe site-uri de cumpărături , astfel încât e imposibil sa nu găsiți ce căutați, dacă căutați suficient de bine.

Plugin-uri

Un plugin este o parte de software care conține un grup de funcții care pot fi adăugate la un site web WordPress. Ele pot extinde funcționalitatea sau adăuga noi caracteristici pentru site-urile WordPress. Plugin-urileWordPress sunt scrise în limbajul de programare PHP și integrate perfect cu WordPress.. Face totul atât de simplu încât permite utilizatorilor să adauge caracteristici pentru site-ul lor, fără a cunoaște vreun limbaj de programare sau fără a scrie o singură linie de cod. Arhitectura plugin-urilor WordPress permite utilizatorilor să extindă caracteristicile sale. WordPress are peste 30.000 de plugin-uri disponibile, care oferă funcții personalizate și caracteristici care să permită utilizatorilor să adapteze site-urile la nevoile lor specifice. Aceste particularizări variază de la optimizarea motorului de căutare, la portaluri pentru clienți folosite pentru a afișa informații private pentru utilizatorii conectați, la afișarea de caracteristici, cum ar fi adăugarea de conținut, widget-uri și bare de navigare. Dar nu toate plugin-urile disponibile sunt mereu actualizate și ca urmare acestea ar putea să nu funcționeze corect sau să nu funcționeze deloc. Un plugin care este util pentru orice tip de site este MobilePress, care oferă o temă separată pentru dispozitivele mobile. Nu toate plugin-urile funcționează pentru toate versiunile de WordPress. Unele plugin-uri mor după o anumită perioadă de timp, sau încetează să se mai actualizeze pentru a fi compatibile cu versiunile mai noi de WordPress. Deoarece marea majoritate a plugin-urilor sunt gratuite, este important să rețineți că acestea nu vin de obicei cu suport tehnic. Din acest motiv este important să fiți atenți atunci când le alegeți pe cele pe care doriți să le instalați. Multa lume susține ca având o mulțime de plugin-uri instalate va face ca încărcarea site-ului sa fie mai lentă, dar nu este adevărat, numai numărul celor rele vor încetini site-ul, așadar întotdeauna asigurați-vă că un plugin are un rating bun și este actualizat în mod regulat. Plugin-urile slab dezvoltate și, desigur cantitatea de fișiere, cod și script-uri solicitate, toate pot încetini site-ul. Ca administrator de site, puteți instala/dezinstala plugin-uri din zona de admin. Plugin-urile pot fi instalate din directorul de plugin-uri al WordPress în cadrul panoului de administrare. Puteți, de asemenea, descărca și instala manual folosind un client FTP.

Widget-uri

Un widget WordPress este un mic bloc care îndeplinește o funcție specifică. Este conceput pentru a oferi o modalitate simplă și ușor de utilizat, de a oferi un design și control la o secțiune din tema WordPress sub forma de bara laterală sau subsol. Unele plugin-uri pe care le descărcați vă oferă un widget cu opțiuni pentru a afișa anumite funcționalități într-un mod diferit sau mai repede. Un widget foarte util este widget-ul built-in HTML, în care puteți pune orice tip de cod sau încorpora codul în orice terț, dar există și un plugin pentru asta. Există multe tipuri diferite de widget-uri. WordPress implicit vine cu mai multe widget-uri inclusiv categorii, tag-ul cloud, meniu de navigare, calendar, căutare, posturi recente etc. Dacă de exemplu trageți widget-ul de posturi recente în zona pentru widget, atunci acesta va conține o listă de posturi recente. Widget-urile sunt în cea mai mare parte zone de cod de sine stătătoare (standalone) care execută o anumită funcție. Plugin-uri se adaugă adesea widget-urilor pentru a oferi utilizatorilor mai mult control asupra funcțiilor de afișare a plugin-ului. Un exemplu de widget plugin ar fi OIO editor, care vă permite să adăugați o zonă de bannere cu anunțuri specifice.

Aplicații mobile

Exista aplicații native pentru WebOS, Android, iOS (iPhone, iPod Touch, iPad), Windows Phone și BlackBerry. Aceste aplicații, proiectate de Automattic, permit un set limitat de opțiuni, care includ adăugarea de noi posturi și pagini pe blog, comentarea, moderarea de comentarii, răspunsul la comentarii și posibilitatea de a vizualiza statistici.

Alte caracteristici

WordPress, de asemenea prezinta caracteristici de gestionare de link-uri integrate; un motor de căutare prietenos, o structura Permalink curată, capacitatea de a atribui mai multe categorii de articole, și suport pentru tagging de posturi și articole. Filtre automate sunt de asemenea incluse, oferind formatare și stil de text standardizat în articole (de exemplu, conversie ghilimele regulate la ghilimele inteligente). WordPress, de asemenea, sprijină standardele Trackback și Pingback pentru afișarea de link-uri către alte site-uri care s-au legat de un post sau un articol.[4]

CMS (Content Management System)

Un sistem de management al conținutului (Content Management System sau prescurtat CMS) este un sistem utilizat pentru a gestiona conținutul unui site web. De obicei, un CMS este format din două elemente: aplicația de management de conținut (Content Management Aplication sau prescurtat CMA) și aplicația de livrare de conținut (Content Delivery Application sau prescurtat CDA). Elementul CMA permite managerului de conținut, să gestioneze crearea, modificarea și îndepărtarea de conținut de pe un site web fără a fi nevoie de expertiza unui administrator. Elementul CDA utilizează și compilează aceste informații pentru a actualiza website-ul. Caracteristicile unui sistem de management al conținutului pot varia, dar cele mai multe sunt bazate pe web publishing, format de gestionare, revizuire de control și indexare, căutare și recuperare. Datorită complexității site-urilor web și inexistenței unui model standard, definirea unitară a unui CMS precum și a părților sale componente este foarte greu de realizat.

Caracteristica de publicare web-based permite persoanelor fizice să utilizeze un template sau un set de template-uri, precum și ghiduri și alte instrumente pentru a crea sau modifica conținutul de pe site-ul web. Funcția de gestionare a formatului permite documentelor inclusiv documentelor electronice moștenite și documentelor scanate să fie formatate în HTML sau Portable Document Format (PDF) pentru site-ul web. Caracteristica de revizuire a controlului permite conținutului să fi actualizat la o versiune mai nouă sau restaurat la o versiune anterioară. De asemenea, poate depista modificările făcute în fișiere de către indivizi. O caracteristică suplimentară este indexarea, căutarea și recuperarea. Un sistem CMS indexează toate datele în cadrul unei organizații. Persoana apoi caută date folosind cuvinte cheie, care preia sistemul CMS. Un sistem de CMS poate prevedea, de asemenea, instrumente pentru marketing 1:1 . Marketing 1:1 este capacitatea unui site web de a adapta conținutul său și publicitatea, caracteristicilor specifice unui utilizator, folosind informațiile furnizate de utilizator sau adunate de pe site (de exemplu, un anumit model de secvență a paginii utilizatorului). De exemplu, dacă vizitați un motor de căutare și dați căutare pentru "aparat de fotografiat digital", bannerele publicitare vor face publicitate firmelor care vând aparate digitale de fotografiat în loc de afaceri care vând de exemplu produse pentru grădină. Doi factori trebuie luați în considerare înainte ca o organizație să decidă să investească într-un CMS. În primul rând, trebuie considerată dimensiunea organizației și dispersia geografică mai ales în cazul în care o organizație este răspândită în mai multe țări. Pentru aceste organizații, trecerea la CMS este mai dificilă. În al doilea rând, trebuie luată în considerare diversitatea de forme de date electronice utilizate în cadrul unei organizații. Dacă o organizație utilizează documente text, grafică, video, audio, și diagrame pentru a transmite informațiile, conținutul va fi mai dificil de gestionat. Sistemele de administrare a conținutului web sunt folosite adesea pentru stocarea și controlul documentelor cum ar fi articole, manuale tehnice sau de altă natură, ghiduri de vânzări și broșuri de marketing.

Un CMS poate avea mai multe funcții:

De a crea și transfera documente și material multimedia

De a identifica utilizatorii cheie și rolul lor în gestionarea conținutului

De a atribui roluri și responsabilități diferitelor categorii de conținut

De a defini sarcini de lucru, astfel încât managerii de conținut sunt alertați automat când intervin schimbări ce îi privesc

De a urmări și organiza mai multe versiuni ale aceluiași element de conținut.

De a publica conținutul într-o bibliotecă, pentru a sprijini accesul la conținut.

Sistemul oferă unelte software prin care utilizatorii fără cunoștințe de programare pot crea și organiza conținutul cu ușurință. Majoritatea sistemelor folosesc o bază de date pentru stocarea conținutului și un layer de prezentare pentru afișarea acestuia vizitatorilor obișnuiți, bazat pe un set de modele sau mostre (templates). Administrarea se face în mod normal printr-un browser web, dar unele sisteme pot fi modificate și pe alte căi.

Un CMS web este diferit fata de creatoarele de site-uri precum FrontPage sau Dreamweaver prin faptul că un CMS permite utilizatorilor fără cunoștințe tehnice să facă schimbări în site cu training puțin sau deloc. Un CMS este ușor de folosit și permite utilizatorilor autorizați să administreze un site web. Un CMS este mai mult o unealtă de întreținere decât un creator de site-uri.

Un sistem de administrare a conținutului web oferă următoarele caracteristici de bază:

Template-uri automate – Creează template-uri vizuale standard care pot fi aplicate automat conținutului nou și existent, creând un punct central pentru schimbarea interfeței unui sit web.

Conținut ușor editabil – Odată ce conținutul e separat de reprezentarea vizuală a sitului, editatul și manipulatul devin de obicei mult mai ușoare și mai rapide. Cele mai multe CMS-uri includ unelte de editat WYSIWYG ce permit personalului să creeze și să editeze conținut.

Componente care extind functionalitatea – Cele mai multe CMS-uri au plugin-uri sau module care pot fi instalate ușor pentru a extinde funcționalitatea.

Upgrade-uri după standardele web – Soluțiile active de administrare a conținutului primesc de-obicei update-uri regulate care includ noi facilități și țin sistemul la standardele web.

Administrarea fluxului de lucru – procesul creării de sarcini secvențiale și paralele care trebuie îndeplinite de către CMS.

Administrarea documentelor – CMS-urile pot veni cu mijloace de gestionare a ciclului de viață al unui document, de la creare, prin revizii, publicare, arhivare și distrugere.5

Fig. 1.2 Captură de ecran cu panoul de administrare WordPress

Folosirea WordPress ca CMS

Zona administrativă a WordPress, este cea care îl transformă într-un CMS sau Content Management System. Zona administrativă oferă un editor WYSIWYG (WhatYouSee IsWhatYouGet), similar cu o mini-versiune de Microsoft Word. Acest lucru permite practic oricui să adauge și editeze conținutul prin intermediul browser-ului web și fără cunoștințe de HTML sau alte limbaje de programare. Desigur, pentru utilizatorii mai avansați, există o opțiune de "cod view" unde pot edita codul HTML din pagina, post sau articol, dar nu este necesar pentru crearea de conținut simplu.

Web design pentru dispozitivele mobile

Statisticile experților arata că pana în anul 2015 exista 2 miliarde de utilizatori de internet pe telefoanele mobile, IPhones, sisteme Android, etc.

Tehnologiile folosite în prezent pot rezolva probleme de programare. Însă mai exista și problemele care intervin în cazul designului. Când se oferă servicii de web design pentru dispozitivele mobile, tehnologia este importanta. Exista o mare diferență intre rezoluția grafica, mărimea ecranului și viteza de încărcare, care afectează prezentarea site-ului și funcționalitatea acestuia în funcție de aparatul mobil folosit.

Dispozitivele mobile precum telefoanele mobile și tabletele folosesc în principal conexiuni de date oferite de providerii de servicii GSM care, în majoritatea cazurilor, au trafic de date și viteza limitate, deci un design 'pompos' al website-ului îl va încărca mai greu, deci va fi afectat modul de prezentare al acestuia.

Simplitatea este cea mai importanta, versiunea site-ului pentru mobil, trebuie să fie foarte mica ca mărime, permițând încărcarea rapida. Eliminarea graficelor și minimizarea opțiunilor din meniu, precum și împărțirea conținutului pe mai multe pagini, permit simplificarea site-ului.

Codul trebuie să fie valid și minimal. Sistemele de operare nu au aceleași performante precum sistemele desktop. Vizitatorii trebuie să aibă opțiunea să poată vedea site-ul standard,, pentru că anumite aparate mobile, permit vizualizarea site-ului normal.

Scroll-ul trebuie limitat la o singura direcție, iar conținutul trebuie adăugat în direcția respectiva, preferabil, în jos. Eliminarea totala a popup-urilor, pentru a nu stresa vizitatorii și a oferi performantă site-ului.

Toate aceste aspecte contează când este vorba de varianta 'mobile' a paginii web.

Web design dinamic

Web design-ul dinamic (sau "responsive web design") a devenit o tema importantă încă din 2012, iar trendul continuă și s-a răspândit deja în ultimii ani. Ce înseamnă design dinamic? Ei bine, un design croit astfel încât să se adapteze tuturor formelor de media digitală. Ideea din spatele lui este să ia forma dispozitivului pe care este redat: laptop, desktop, smartphone, tableta, și orice alt dispozitiv care va fi creat. Practic este vorba de un web design uniform care rulează perfect în orice mediu. Layout-ul se va adapta în funcție de display-ul pe care este redat, ceea ce înseamnă că nu va mai fi nevoie să cream o versiune desktop și una mobilă a unui site. Rezultatele? Universalitate, timp câștigat și eficientă sporită. Nu întâmplător web design-ul dinamic (responsive web design) este primul pe lista trendurilor în ultimii ani. 7

Responsive web design

Responsive web design este o abordare noua în materie de web design, care permite o vizualizare optima pe aproape orice tip de ecran: desktop, tableta sau telefon mobil. Are câteva avantaje clare: deși prețul este mai mare, un site fully responsive se va acomoda aproape orice ecran, de la un monitor widescreen, cu o lățime de peste 2400 pixeli, la un telefon mobil mai vechi, cu o rezoluție de 240 pixeli (lățime). Astfel, clientul primește teoretic 3 sau 4 variante ale aceluiași site: varianta desktop, tableta, smartphone și mobil. Practic se plătește un site puțin mai scump, și se primesc 3 sau 4 variante pentru același preț.

Furnizează același cod HTML pentru aceiași adresa URL, indiferent de dispozitiv, dar va afișa un aspect diferit , funcție de dimensiunile display-ului dispozitiv-ului de pe care este accesat.

Un site creat pe principii fully responsive poate prezenta o experiența de smartphone la fel de bogata ca o varianta dedicata pentru smartphone-uri. Tehnologiile și framework-urile responsive nu oferă doar un minim de unelte pentru ca site-ul să se poate redimensiona în funcție de mărimea ecranului. Multe dintre ele oferă o multitudine de elemente pentru interfețe mobile: butoane, liste, dropdown-uri optimizate pentru vizualizare pentru mobil. Astfel, un site redimensionat pentru mobil nu va prezenta aceleași butoane/meniu, ca pe desktop, ci odată deschis pe un gadget, navigația desktop va dispărea, și vor apărea elementele de navigație optimizate pentru vizualizare pe gadgeturi sau mobil, în cazul unui site fully Responsive.

Este totodată o abordare web design care propune ca varianta mobil să fie în prim plan, după principiul “Mobile First”, și afișează elemente ale interfeței de utilizare după posibilitățile si capabilitățile gadget-ului pe care este rulat (Feature Detection).

Mobile First

Cand lucram la un design sau o aplicatie web, trebuie sa avem in vedere faptul ca utilizatorii vor le accesa de pe dispozitivele mobile si trebuie sa ne gandim daca varianta propusa va arata bine pe dispozitivele mobile cu ecrane mai mici. Multa lume sugereaza abordarea Mobile First, care prepupune ca inca din primele etape trebuie sa dezvoltam o aplicatie tinand cont de cateva aspecte:

Sa ne asiguram ca aplicatia web (design si layout) arata bine pe ecranele mai mici

Sa diferentiem continutul care va fi aratat pe ecranele mari si cele mici, trebuie sa incepem cu ecranele mici si sa imbunatatim pentru cele mai mari

Sa testam aplicatia pe retele lente (3G) si sa minimizam greutatea paginii

Sa decidem abordarea pe care o vom folosi: sa folosim responsive design sau sa alegem alta abordare cum ar fi frameworkuri mobile bazate pe HTML5, native sau hibrid.

Daca avem in plan sa folosim servicii geografice de localizare, trebuie sa ne decidem asupra API folosit pentru dispozitivele mobile dar sa nu omitem nici variantele desktop.

Sa consideram tintirea dispozitivelor mobile. Una din constrangerile pe care le au utilizatorii de dispozitive mobile, este viteza relativ scazuta a internetului pe mobil.Asta inseamna ca, chiar daca utilizatorii desktop vor folosi linii de retea rapide, aplicatia web trebuie sa fie modularizata in asa fel incat doar un numar minim de module sa fie incarcate initial.

Sansele sunt reduse ca utilizatorii desktop sa piarda accesul la internet pentru o perioada lunga de timp. Pe de alta parte, utilizatorii de dispozitive mobile ar putea sta intr-o zona fara conexiune la internet. In acest caz, abordarea Mobile First poate duce la introducerea unui mod offline cu functionalitate limitata.

Gandind in perspectiva, continutul minim care trebuie afisat pe ecrane mobile mici ne poate obliga sa schimbam si designul paginilor web desktop. Asadar trebuie sa ne asiguram ca exista suficient spatiu pentru afisarea elementelor importante ale paginii web, chiar si pe cele mai mici dispozitive.

Google recomanda Responsive Design. Acest lucru înseamnă că ei prefera un site responsive, în locul unui site care are o varianta desktop și una pentru mobil, tocmai pentru că responsive design înseamnă o abordare unificata, și nu se servesc variante diferite ale codului HTML pentru aparate diferite: 8

Feature Detection

Acum vom discuta putin despre cum sa utilizam caracteristicile de detectare oferite de o biblioteca JavaScript, numita Modernizr. Este o biblioteca feature-detection, pe care este neaparat s-o avem, pentru ca ajuta aplicatia sa isi dea seama daca browserul ultimizatorului suporta anumite caracteristici HTML5/CSS3. Folosim fisierul index.html, in care vom include 2 sectiuni de script. JavaScript Modernizr este incarcat primul, in timp ce fisierul main.js, este incarcat la finalul sectiunii body:

<!DOCTYPE html>

<head>

<title>Prototype | Home Page</title>

</head>

<body>

</body>

</html>

Modernizr este o biblioteca JavaScript open source, care ajuta scriptul nostru sa determine daca caracteristicile HTML sau CSS cerute, sunt suportate de browserul utilizatorului. Observati in codul de mai sus fragmentul <html class="no-js" lang="en"> . Pentru ca Modernizr sa functioneze, elementul root HTML trebuie sa includa o clasa numita no-js. In incarcarea paginii, Modernizr inlocuieste clasa no-js, cu versiunea sa extinsa care prezinta o enumerare a tuturor caractieristicilor detectate, cele care nu sunt suportate sunt etichetate cu prefixul no-. Daca rulati fisierul index.html acum veti observa ca proprietatea claselor elementelor HTML este diferita acum.

Date tehnice

Tehnic vorbind, un design responsive presupune introducerea așa-numitelor break points, adică lățimi ale ecranului, măsurate în pixeli, la care site-ul aplica o redimensionare mai drastica a site-ului. Un site responsive își redimensionează elementele și între aceste break points, daca deschideți într-un browser un site responsive și redimensionați în continuu browserul (pe lățime), veți vedea că textele, pozele și cea mai mare parte a elementelor de pe pagina încep să se “adapteze” lățimii modificate, se redimensionează și ele în mod continuu. Însă modificarea majora se întâmplă când se ajunge la un breakpoint. să luam ca exemplu lățimea de 990 pixeli. Când se ajunge la aceasta lățime, întreg layout-ul paginii se micșorează (in cazul în care micșoram browserul) sau se mărește (in cazul în care mărim browserul). Pagina sare de la o lățimea maxima (ex. 1170 pixeli) la una intermediara (ex.: 990 pixeli), și toate elementele de pe pagina se redimensionează, acomodându-se la noua lățime.

Browserele detectează lățimea ecranului, folosindu-se de așa-numitele media query-uri, introduse în CSS3. Framework-urile responsive se ocupa de toate aceste redimensionări, citind lățimea ecranului și ajustând conținutul paginii, folosindu-se de reguli CSS responsive și de cod Java script scris în acest scop. Fiecare framework de design responsive are o abordare puțin diferita, cea mai mare diferență fiind de obicei în numărul de break points, dar și la nivel de grid layout. Un framework responsive are întotdeauna un responsive grid layout, adică niște reguli CSS pentru împărțirea lățimii maxime folosibile într-un anumit număr de coloane. Cele mai multe grid layouturi propun 12 coloane (de aceiași lățime), ceea ce înseamnă că putem folosi un design cu elemente dispuse pe maxim 12 coloane, sau elemente care se întind pe orice număr de coloane de la 1 pana la 12.

Fig. 2.2 Diferite exemple grid layout

Astfel, putem vorbi de un mare număr de combinații posibile: coloane de meniu pe stânga, pe dreapta, site împărțit pe 6 coloane egale, site care se întinde pe întreaga lățime a ecranului, împărțit într-un număr de coloane după preferințe, deci responsive design deschide calea spre o multitudine de layout-uri de site, rezolvând totodată o eterna problema.

Fig 2.3 Exemplu autostreching coloane pe intreaga lațime

Un feature foarte folositor pe care îl oferă multe framework-uri responsive este un layout fluid, prin care, făcând unele setări în markup, randarea coloanelor devine fluida, lățimile coloanelor fiind setate în procente și nu în pixeli. Astfel putem avea spre exemplu un layout alcătuit din 2 coloane, o coloana pentru meniu și una pentru conținut, iar a doua coloana poate conține din nou, un număr maxim de 12 coloane:

2.4 Exemplu nesting

In imaginea de mai sus sunt reprezentate 6 coloane inserate intr-una, reprezentând spre exemplu produsele unui web-shop. Astfel, putem vedea că folosind fluid layout, putem insera din nou și din nou maximum 12 coloane de lățime egala în orice coloana, într-un design responsive.

Posibilitățile sunt nelimitate, dar bineînțeles că trebuie să procedam cu moderație în privința uneltelor oferite de framework-urile responsive, pentru că ele se folosesc de media queries și de Java script, iar acestea pot încetini funcționarea site-ului, cel puțin a interfeței de utilizare.

Responsive web design este suportat de versiunile relativ noi ale browserelor moderne precum Google Chrome, Mozilla Firefox, Apple Safari, iar Internet Explorer este codaș la acest capitol, ca de obicei, având cel mai bun suport pentru designul responsive doar în varianta 10 a browserului. Dar atenție, logic, nu avem nevoie de suport pe Internet Explorer mai vechi, pentru ca tabletele și smartphone-urile care rulează variante mai vechi ale IE sunt prea puține.

Crearea de imagini responsive

Cei care sunt interesați de proiectarea designului responsive cu siguranță au observat că au început să apară câteva metode de a obține imagini cu adevărat responsive.

Iată câteva dintre cele mai folosite tehnici :

Înlocuirea imaginilor în markup cu imagini de fundal, imagini de diferite dimensiuni, în funcție de dispozitiv. Această metodă are grave dezavantaje de accesibilitate și SEO deoarece imaginile nu au alt Tag-uri pentru cititoare de ecran sau motoarele de căutare.

Utilizarea unor imagini mai mici în markup și o imagine mai mare ca fundal al elementului din conținut în versiunea desktop a site-ului, și apoi utilizarea CSS pentru a ascunde imagini mai mici pe ecrane mari. Această metodă, descrisa în detaliu de Harry Roberts pe responsive-images-right-now 13 , este mai bună decât prima, dar ea are nevoie să creați manual două imagini și apoi, în foaia de stil, să definiți imaginea de fundal pentru fiecare singură imagine pe site. Dar asta e pentru cei care au răbdare.

Utilizarea unei soluții bazată pe Java Script, care angajează URL parametrii de date sau atribute. Acest lucru evită munca repetitivă de mai sus, dar implică mai multa prelucrare și poate încetini site-ul, contrar a ceea ce ne propunem.

Utilizând o soluție cum ar fi imaginile Adaptive ale lui Matt Wilcox, poate funcționa pentru ceea ce ne dorim. Aceasta este opțiunea cea mai uniformă, dar este nevoie să separați imaginile care doriți să fie redimensionate de cele care nu doriți, dar poate fi o potențială problemă atunci când permitem accesul la CMS-ul site-ului, unui client sau editor care nu este foarte specialist în aceasta tehnologie.

Faptul că imaginile adaptive folosesc cod PHP, ne face să ne gândim cum ar putea fi acest lucru integrat în WordPress, care în cele din urma este scris în limbaj PHP. Voi demonstra că exista o tehnica și voi folosi pentru asta site-ul pe care l-am creat, un site care are un număr semnificativ de accesări de pe dispozitive mobile. în acest moment folosește tag-ul max-width pentru a redimensiona imaginile.

Așa arata website-ul în afișat în browsere desktop și mobile:

Fig. 3.1 Captură ecran desktop respectiv mobil, site responsive neoptimizat

După cum se poate observa, imaginile se încadrează în layout. Dar ceea ce nu se observa este faptul că dimensiunea reala a imagini rămâne aceiași. Trebuie să schimbam asta și soluția ar fi folosirea a trei elemente:

Un plugin gratuit , Mobble, suportat de WordPress, care detectează dispozitivele și furnizează funcții PHP, care pot fi folosite să afișam conținut diferit pe dispozitive diferite.

Fișierele single.php și page.php , pe care le vom edita pentru a afișa imaginea featured, dar modificând dimensiunea în funcție de tipul de dispozitiv.

Funcționalitatea de imagine featured în panoul de administrare WordPress, pe care o vom folosi să definim imaginea folosita în fiecare post și pagina.

Pentru pasul 1, trebuie să descărcam plugin-ul Mobble. Acesta va verifica user-agent string-ul browserului pentru a determina de pe care dispozitiv este conectat vizitatorul. Practic un alt gen de User Agent Sniffing, poate chiar mai eficient. Aceste verificări sunt încapsulate în funcționalitățile condiționale ale stilului WordPress, cum ar fi is_mobile , care este și cea pe care o vom folosi.

După ce descărcam plugin-ul , îl activam.

Pasul 2, deschidem fișierul single.php , folosind editorul WordPress sau orice editor de text, și căutam un fragment de cod care arata cam așa:

In acest exemplu imaginile, trebuie afișate imediat după heading și înainte de conținut, deci codul trebuie inserat în acest caz intre tagurile h1 și section. Daca tema folosita nu suporta HTML5, putem pune div în loc de section

Codul care afișează o imagine featured este acesta:

<?php the_post_thumbnail(); ?>

Funcția are câțiva parametrii pe care ii putem folosi, cel mai important fiind dimensiunea imaginilor. Putem folosi oricare din dimensiunile definite de WordPress :

thumbnail
Miniatura: by default, maxim 150 × 150 pixeli

medium
Rezoluție medie: by default maxim 300 × 300 pixeli

large
Rezoluție mare: by default, maxim 640 × 640 pixeli

full
Full resolution: dimensiunea originala

Aici este partea în care funcția noastră va lucra cu dimensiunile imaginii.

Vom avea nevoie de următorul cod:

<?php

if (is_mobile()) {

the_post_thumbnail('medium');

} else {

the_post_thumbnail('large');

} ?>

Codul face următoarele:

Verifica daca website-ul este accesat de pe un dispozitiv mobil prin sintaxa if (is mobile());

Daca, da aplica rezoluția medie pentru imaginile miniaturi sau featured: {the_post_thumbnail('medium')};

Daca nu, ( else), aplica rezoluția mare, pentru imaginile miniature sau featured: {the_post_thumbnail(large)}.

După ce ne-am ocupat de single.php să facem la fel și cu page.php

Apoi trebuie să schimbam orice imagine embedded în imagini featured, prin panoul de administrare WordPress.

Voi prezenta modul de a utiliza capacitatea de built-in a WordPress pentru afișarea de imagini featured, pentru a afișa imagini cu dimensiuni diferite pentru diferite dispozitive. "Imagini recomandate", uneori menționate ca miniaturi, este o caracteristică de WordPress care a fost îmbunătățita foarte mult începând cu versiunea 3. Acesta vă permite să specificați o imagine recomandata pentru fiecare post și să o afișați în conținutul lui. Faptul că imaginea este stocată în meta-data, mai degrabă decât încorporata în conținut, înseamnă că putem să o folosim mai flexibil, așa cum vom vedea în continuare.

Sa adăugam imagini featured în WordPress a devenit foarte ușor de când funcționalitatea a fost inclusa în interfață de utilizator în versiunea 3.0

Trebuie doar să urmam câțiva pași:

Deschidem în panoul de administrare, fereastra de editare pentru fiecare post sau pagina.

Ștergem imaginea existenta ( dar va rămâne în galerie pentru acel post sau pagina, ceea ce ne va fi de ajutor)

Dam click pe „Set featured image” în partea din dreapta jos a ecranului.

Apoi dam click pe tabul „Gallery”. Imaginea pe care tocmai am șters-o va fi afișata. Tot ce trebuie să facem acum este să dam click pe „Use as featured image” și apoi să dam click pe cruciulița din partea de stânga sus a ferestrei. Nu trebuie să introducem imaginea în post , pentru că va fi afișata de doua ori.

In final, dam click pe butonul „Update” pentru a salva modificările pe care le-am făcut și să testam .

In acest fel am demonstrat că este destul de simplu să facem website-uri responsive pentru dispozitive mobile folosind funcționalitatea featured images a WordPress. 14

Adaptive web design vs responsive web design

Daca vă întrebați care este cea mai buna soluție pentru un website optimizat, exista o alternativa la responsive web design, denumita adaptive web design. Aceasta alternativa propune servirea variantelor diferite pentru aparate și ecrane diferite, direct de pe server, adaptarea la posibilitățile utilizatorului se întâmplă deja pe server, și nu pe aparatul utilizatorului. Acest lucru înseamnă economie de resurse, poate și o rulare mai rapida, însă presupune și costuri mult mai mari, fiind varianta preferata de firme mari, corporații.

Elemente media responsive

Faptul că un site este responsive nu înseamnă neapărat că toate elementele lui sunt și ele responsive. La crearea unui astfel de site, trebuie să se folosească slideshow-uri responsive, galerii de poze responsive, elemente de poze/imagini responsive. Partea buna este că acestea sunt din ce în ce mai multe, creatorii de pluginuri jQuery și alte platforme Java script axându-se mai nou pe plugin-uri responsive, care și ele se redimensionează în funcție de lățimea div-ului/elementului în care sunt. Un element non-responsive pe un site responsive poate cauza anomalii, daca nu se redimensionează automat, după dimensiunile acelei pagini.

Câteva dintre framework-urile responsive:

– Twitter Bootstrap
– Less Framework
– Skeleton
– Foundation
– Responsive Grid System
– Gumby Framework
– Base
– Semantic Grid System
– Compass

Și nu putem trece mai departe fără să discutăm despre, părerea mea, doua dintre cele mai bune front-end frameworks din lume, Foundation respectiv, Twitter Bootstrap.

Framework-uri responsive

Foundation

Foundation este un front-end framework responsive, dezvoltat de Zurb. Vine cu un grid responsive și foarte multe componente ale interfetei de utilizator de HTML și CSS, template-uri, fragmente de cod, forme, butoane, navigare și alte componente, ca de asemenea și extensii JavaScript. A fost creat si testat pe numeroase browsere si dispozitive. Este un framework responsive de tip mobile first construit cu Saas/SCSS oferind designerilor cele mai bune practici pentru dezvoltare rapidă. Foundation se bazează un sistem de layouting folosind 12 coloane pentru a defini lățimea fiecarei ”secțiuni”, care derivă din fișierul foundation.css, folosind dimensiunea de 1000px pentru lațime.

</div>

Codul de mai sus înseamna că intr-un anumit rînd, o să ocupăm 12 coloane cu lațimea de 1000px, în timp ce, în codul de mai jos am introdus de doua ori ”șase coloane” in interiorul a ”12 coloane”, asta însemnând ca ”șase coloane” vor ocupa 50% din lățimea a ”12 coloane”.

</div>

Pentru ”șapte coloane” am introdus încă un rând care ocupa ”12 coloane”. Asta înseamnă ca ”12 coloane” va ocupa lățimea maximă a ”7 coloane” și o va împarți în ”12 coloane”.

</div>

</div>

Este o încrengătura de rânduri și coloane, care este importantă pentru crearea unui design responsive.

Twitter Bootstrap

Bootstrap este colecție de unelte gratuită și open-source pentru crearea de site-uri web si aplicații. Conține template-uri de design bazate pe HTML și CSS pentru tipărire, forme, butoane, navigare și alte componente de interfață, precum și extensii opționale JavaScript. Framework-ul Bootstrap are ca scop ușurarea dezvoltării web.

Bootstrap este un front-end framework, adica o interfață pentru utilizator, spre deosebire de codul pe partea de server ( server-side) care se gasește in partea terminala (back-end) sau pe server. Este de asemenea cadru de aplicație web, proiectat să suporte dezvoltarea site-urilor dinamice și aplicațiilor web.

Este compatibil cu cele mai noi versiuni de browsere Google Chrome, Firefox, Internet Explorer, Opera și Safari, cu toate că unele din acestea nu au suport pe toate platformele.

Începand cu versiunea 2.0 suportă web designul responsive iar odată cu versiunea 3.0 adoptă o filozofie de design mobile first, subliniind implicit designul responsive.

Bootstrap este modular și constă intr-o serie de foi de stil LESS, care implementează diferitele componente ale setului de instrumente. Vine implicit cu o sistem cu lațimea de 1170 px, dar dezvoltatorii pot utiliza o lățime variabilă. Pentru ambele cazuri, setul de instrumente are 4 variante, pentru a folosi diferite rezoluții si tipuri de dispozitive: telefoane mobile, tablete si computere de rezoluție ridicată și scăzută.

De asemenea vine cu un set de foi de stiluri care oferă definiția stilurilor de bază pentru toate componentele HTML importante. Aceasta conferă o apariție uniformă, modernă pentru formatare text, tabele și alte elemente.

Este gazduit, dezvoltat și menținut pe GitHub și disponibil gratuit pentru descărcare.

Bootstrap include un grid fluid, responsive pe principiul mobile first, care scalează adecvat pană la 12 coloane pe masură ce dispozitivul sau dimensiunea ecranului se mărește.

Exemplu de cod pentru proiectarea unui design fluid și dinamic pentru telefoane mobile, tablete și desktop folosind clasele .col-xs-* si .col-md*.

<!– Stack the columns on mobile by making one full-width and the other half-width –>

</div>

<!– Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop –> <div class="row">

</div>

<!– Columns are always 50% wide, on mobile and desktop –>

</div>

Codul de mai sus ilustrativ arata asa pe ecran tableta:

Respectiv pe ecran desktop:

Dacă mai multe de 12 coloane sunt plasate pe un singur rând, fiecare grup din coloanele in plus, vor așeza pe o nouă linie.

Pentru a crea fluid grid (fluid container) trebuie sa transformam orice valoare fixed-width intr-una full-width si putem face acest lucru modificand clasa .container si inlocind-o cu .container-fluid

…

</div>

Dar exista mult mai multe tehnici de a folosi Boostrap si trebuie sa consultati site-ul oficial sau alte materiale de buna calitate pentru a va familiariza cu ele.

Există câteva asemănări între Foundation și Bootstrap:

Grid fluid

Unelte de interfața utilizatorului: numeroase widget-uri, potrivite pentru prototipare rapidă.

Sistemul de grid cu 12 coloane

Dar există și multe deosebiri și din acest punct de vedere Foundation este mai bun, având câteva caracteristici care îl plasează în top în rândul framework-urilor responsive.

CSS

Acum, că știm cum să optimizam site-ul mobil pentru o mai bună lizibilitate și grad de utilizare ar fi bine să vorbim despre stilurile CSS (Cascading Style Sheets). Când vorbim de CSS trebuie să știm că vom lucra cu foi de stil.

O foaie de stil web este o forma de separare intre prezentare și conținut în web design în care marcarea (de exemplu, HTML sau XHTML), unei pagini web conține și structura semantică a paginii dar nu definește aspectul său vizual (stilul). în schimb, stilul este definit intr-un fișier de foaie de stil extern, folosind un limbaj de foaie de stil, cum ar fi CSS sau XSLT. Aceasta abordare de design este identificata ca o ”separare”, deoarece înlocuiește în mare măsură metodologia antecedenta în care în marcarea unei pagini este definit atât stilul, cat și structura.

Separarea intre stil și conținut a devenit practica numai după îmbunătățirea implementării CSS în browserele web populare.

Site-urile care folosesc CSS, cu XHTML sau HTML, sunt mai ușor de îmbunătățit, astfel încât acestea să para ca fiind similare în diferite browsere.

Site-urile care folosesc CSS permit ”degradarea eleganta” în browserele care nu pot afișa conținut grafic, cum ar fi Lynx, sau cele care sunt foarte vechi și care nu pot utiliza CSS.

Browserele ignora CSS –urile pe care nu le înțeleg, cum ar fi CSS3.

Acest lucru permite ca o mare varietate de agenți de utilizator (user agents) să poată accesa conținutul unui site, chiar daca aceștia nu pot citi foaia de stil, sau nu sunt proiectate cu o capacitate grafica. De exemplu, un browser cu ajutorul unui afișaj Braille actualizabil la ieșire ar putea ignora complet informațiile de aspect, iar utilizatorul va avea în continuare acces la întreg conținutul paginii.

Fiecare foaie de stil CSS conține multe selectoare cu proprietăți referitoare la fonturi, dimensiuni, de poziționare, și setările de afișare. Când vine vorba de mobil ar trebui să fim atenți la încadrarea blocurilor.

O zona buna pentru a începe este să resetam dimensiunile exterioare ale site-ului în procente. Este normal a se utiliza pixeli ca unitate pentru poziționare, înălțime de linie, dimensiunea fontului și div pe lățime, dar atunci când proiectam pentru mobile vom dori paginile să fie fluide și tranziția între fiecare dispozitiv să se facă în mod natural. Setarea container divs cu lățime 100% va permite conținutului să alterneze cu ușurință între modul portret/peisaj fără a depăși marginile.

Dacă sunteți printre cei în căutarea de a restructura întregul aspect, asigurați-vă că ați lovit totul cu o resetare. De asemenea, paragrafele, titlurile și link-uri de navigare ar trebui să fie setate pentru a afișa: bloc; ca să avem acel sentiment de stil de afișare liniar. Repoziționați marginile și umplutura pentru a elimina bula de aspect. Evita tabelele dacă este posibil, deoarece acestea au tendința de a produce bug-uri între dispozitive.

Imaginile mari sunt, de asemenea, o problema între dispozitive. Cele mai multe dintre imaginile site-ului vor fi afișate la o rezoluție mai mare decât 480px și nu doriți să își piardă din conținut. Prima opțiune este setați lățimea la 100% astfel încât imaginile se pot redimensiona natural. Este de asemenea posibil să creați seturi diferite de imagini pentru site și să fie afișate diferit, funcție de agentul de browser, dar sincer acest lucru doar adaugă mai mult de lucru pe partea asta, așa că încercați să utilizați aceasta tehnica numai atunci când este într-adevăr nevoie.

CSS3 Media Queries

CSS3 media queries prezinta unele avantaje dar are si dezavantaje pentru majoritatea dintre web designeri și dezvoltatori. Toți cei care l-au folosit și cei care îl folosesc în continuare sunt încântați de posibilitățile pe care le aduce și problemele pe care le rezolva, dar, de asemenea, sunt dezamăgiți de lipsa de support pe care continua s-o aibă pe Internet Explorer 8. Ceea ce voi demonstra în cele ce urmează este o tehnica care folosește partea de CSS3, care este, de asemenea, fără support pe Internet Explorer 8. Cu toate acestea, nu contează, pentru ca unul dintre locurile cele mai utile pentru acest modul este undeva unde are foarte mult suport – mini dispozitive precum cele care folosesc iPhone și Android .

CSS3 Media queries, extinde funcționalitatea inclusa prima data în CCS2, dar care nu avea suport prea mare de dispozitivele portabile. Pe lângă a cauta un tip de dispozitiv, putem caută și capabilitatea acelui dispozitiv și putem folosi CCS3 media queries să verificam tot felul de lucruri:

Lățimea și lungimea ferestrei browserului

Lățimea și lungimea dispozitivului

Orientarea – de exemplu, daca este portret sau landscape

Rezoluția

Daca folosim un browser care suporta media queries, atunci putem scrie cod CSS pentru anumite situații. De exemplu daca utilizatorul are un dispozitiv mic, cum ar fi, un smartphone de o anumita descriere și oferindu-i un anumit layout.

Layout-ul fluid este foarte important in designul responsive. Grid-urile au fost folosite de catre designeri de secole; opagina web este impartita intr-un numar imaginar de linii si coloane. Dar un grid fluid,asacum ii indica si numele, este flexibil si poate scala functie de dimensiunea ecranului.

Un exemplu de cod care se creaza un layout fluid folosindu-se de breakpoints:

.breakpoint-768 . cell {

float: none;

width: 100%;

padding-bottom: 0.5em

}

@media only screen (max-width: 640px) {

.breakpoint-480.cell {

float:none;

width: 100%;

padding-bottom: 0.5em

}

@media only screen (max-width: 480px) {

.breakpoint-480.cell {

float:none;

width: 100%;

padding-bottom: 0.5em

}

Acest cod dezactiveaza floating-ul (floating:none) daca dimensiunea ferestrei atinge 768 pixeli sau mai putin. Aceasta rearanjeaza celulele vertical. Latimea 100% (width:100%), forteaza celula sa ocupe intreaga latime a containerului.

Acelasi lucru se intampla iar, cand dimensiunea ferestrei scade sub 640 pixeli.

Cand se ajunge la dimensiunea de 480 de pixeli sau mai putin, nu va mai avea loc nici o rearanjare, a structurii pentru ca am setat aceasta valoare ca fiind valoarea minima a dimensiunii ferestrei pe care poate fi vizualizat site-ul fully optimizat pentru mobil. Asadar atunci cand stabiliti valoarea minima luati in calcul care este dimensiunea minima a unui ecran de dispozitiv mobil pentru care vreti sa optimizati.

In acest fel cu acest cod, putem rearanja designul site-ului, functie de marimea ecranului dispozitivului de pe care este accesat.

Dar cate breakpoints e bine sa avem si cat de mult putem folosi media queries pentru a crea un design responsive? Asta depinde de site-ul pe care vrem sa-l proiectam. Am aratat mai sus un cod, in care am folosit breakpoint de 768 pixeli, ceea ce reprezinta dimensiunea unei tablete in mod portret. Dar exista si tablete care au dimensiunea ferestrei de 800 pixeli sau peste.

Nu exista o regula generala, in ceea ce priveste numarul de breakpoints necesar pentru o pagina web obisnuita. Trebuie sa lasam continutul paginii sa dicteze unde trebuie intoduse breakpoints. Putem crea un prototip a unui website si sa modificam dimensiunea ferestrei browserului. La un moment dat, designul va incepe sa se ”rupa”.Aici este nevoie sa introducem un breakpoint si sa definim un media query pentru el. Este recomandat sa incepem cu proiectarea pentru cele mai mici dimensiuni (pe principiul Mobile First). Pe masura ce dimensiunea ferestrei creste, putem decide sa afisam mai mult continut si implicit sa definim un nou breakpoint. Practic, asta inseamna ca. continutul CSS se aplica initial pentru cele mai mici dimensiuni si numai cand dimensiunea se mareste vom aplica media queries. Aceasta abordare va reduce folosirea codului CSS de catre browser pe dispozitivele moile.

Pentru a afla dimensiunea ferestrei putem folosi Google Chrome Developer Tools. Introducem in consola window.innerWidth si vom vedea dimensiunea in pixeli.

Google Chrome Developer Tools ofera de asemenea posibilitatea de a testa o pagina web pe diferite de dispozitive mobile. Nu trebuie decat sa selectam „Show Emulation view in console drawer” in Setari si apoi vom vedea tabul „Emulation”, sub mediul „Elements” (daca nu apare trebuie sa apasam tasta Esc)

Dimensionarea absoluta

Cand un browser afiseaza un text, foloseste o marime de font implicita numai daca marimea este anulata de proprietatea font-size. Practic, dimensiunea implicita a fontului este de 16 pixeli. Dar inloc sa folosim o marime absoluta,putem folosi una relativa folosind unitati em. Dimensiunea implicita a browserului poate fi reprezentata de 1 em. Pentru ca marimea implicita a fontului este 16 pixeli, putem spune ca 1 em = 16 pixeli.

Ca o curiozitate numele em provine de la numele literei ”M” in engleza (scrisa cu litera mare) care este cea mai mare litera din alfabet, 1 em fiind definit ca dimensiunea corpului literei ”M” scrisa cu litera mare.

Dimensiunile absolute sunt dusmani pentru site-urile cu design responsive si specificarea marimilor in unitati em ne ofera libertatea sa cream pagini web cu continut flexibil si fluid relativ. Marimea poat fi calculata dupa formula oferita de Ethan Marcotte in articolul sau Fluid grids (http://alistapart.com/article/fluidgrids) care adaptata pentru fonturi

este:

marimea in pixeli / 16 = marimea in em.

Sa luam un exemplu si in loc sa specificam o marime de 24 de pixeli, putem sa o setam la 1.5 em (24 / 16= 1.5). Asta in codul CSS s-ar scrie:

padding bottom: 1.5em.

Poate nu pare mare lucru, dar este, pentru ca daca totul este facut folosind dimensionare relativa, pagina va arata bine si proportional functie de dimensiunea ecranului si functie de cat de mare sau mic arata 24 de pixeli pe un anumit ecran.

Daca folosim unitati em pentru a reprezenta marimile fonturilor, fontul devine contexul. Dar daca dorim sa reprezentam marimea unei componente HTML aleatoare,intr-un browser sau in orice alt container, atunci marimea componentei devine tinta si dimensiunea totala devine contextul. Putem folosi aceiasi formula dar vom inmulti rezultatul cu 100%. Asftel, dimensiunea unei componente HTML nu va fi reprezentata in unitati em, ci in procentaj relativ al dimensiunii totale a containerului.

Sa presupunem ca marimea totala a ferestrei browserului este 768 pixeli si dorim sa cream un panou in partea stanga cu dimensiunea de 120 pixeli. In loc sa specificam acasta latime in pixeli, vom folosi formula si o vom transforma in procente:

120 /768 * 100% = 15.625%

Aceasta abordare face designul paginii fluid. Daca cineva decide sa vizualizeze aceasta pagina pe un ecran cu dimensiunea de 480 de pixeli, panoul va ocupa tot 15.625% din marimea ecranului , in loc sa solicite 120 pixeli, ceea ce ar arata substantial mai lat pe o dimensiune a ferestrei mai mica.

În CSS, unitatea "em" este înălțimea fontului în puncte nominale sau inch. Înălțimea reala, fizic de oricarei parti a unui anumit font depinde de setarea dpi definita de utilizator, dimensiunea actuala a fontului și fontul special utilizat. Pentru a face reguli de stil, care depind doar de dimensiunea implicită a fontului, s-a dezvoltat o altă unitate: rem sau rădăcină em, este dimensiunea fontului a elementului rădăcină a documentului. Spre deosebire de unitatile em, care pot fi diferite pentru fiecare element, rem este constantă de-a lungul documentului.

Adobe Dreamweaver CS6 automatizeaza crearea media queries si introduce layout-ul cu grid fluid. De asemenea permite sa vedem cum ar atata designul nostru pe o tableta sau un smartphone.

Cand proiectam o pagina noua, Adobe Dreamweaver ne sugereaza alocarea unui numar diferit de coloane pentru desktop, tablete si telefoane. De exemplu putem aloca implicit 12 coloane penru desktop, 8 pentru tablete si 5 pentru telefoane, ceea ce reprezinta o abordare foarte buna. Dar unii designeri prefera sa foloseasca 12 coloane pentru toate tipurile de ecran si apoi sa jongleze cu procentajul latimii pentru diverse dimensiuni.

Să ne imaginam ca trasam imaginar pe toata fereastra un grid invizibil care contine 12 coloane egal portionate. Fiecare coloana va ocupa 8.333% din latimea totala. Acum trebuie sa alocam unei componente HTML aproximativ 40% din latimea totala si putem face asta-alocand 5 coloane ( 8.333% x 5 = 41.665%) . Dupa cum urmeaza, fisierul CSS poate contine 12 clase pe care pe care le putem folosi in pagina, dupa cum e aratat mai jos:

.one-column { width: 8.333%;

}

.two-column { width: 16.666%;

}

.three-column { width: 24.999%;

}

.four-column { width: 33.332%;

}

.five-column { width: 41.665%;

}

.six-column { width: 49.998%;

}

.seven-column { width: 58.331%;

}

.eight-column { width: 66.664%;

}

.nine-column { width: 74.997%;

}

.ten-column { width: 83.33%;

}

.eleven-column { width: 91.663%;

}

.twelve-column { width: 100%;

float: left;

}

Spre exemplu iată mai sus aceasta captura de imagine a unui site afișat pe desktop. Și mai jos cum arata daca e accesat de pe un smarthphone ( în cazul nostru, a fost accesat de pe tableta)

Se poate observa că site-ul nu numai că a fost micșorat să se adapteze dimensiunilor ecranului dispozitivului, dar și conținutul a fost reconstruit să fie mai ușor de accesat pe ecrane mici.

La fel este afișat și pe un smarthpone , indiferent că are tehnologie Android sau iOS, deci folosind media queries putem reproiecta practic orice site să se plieze pe orice tip de dispozitiv.

Sa luam ca exemplu un layout simplu cu 2 coloane. Ca să fie mai ușor de citit pe un ecran mai mic, trebuie să aliniem întregul design la o singura coloana, și să facem zona header mult mai mica pentru ca vizitatorii să nu fie nevoiți să deruleze în jos pentru a vedea conținutul.

Prima cale de a folosi media queries este de a avea o secțiune alternativa de CSS chiar în interiorul paginii de stil.

Ca să țintim dispozitivele mici, trebuie să folosim următoarea sintaxa:

@media only screen and (max-device-width: 480px) {

}

Folosind cascada de stiluri putem să suprascriem orice regula de stil stabilita pentru browserele desktop în secțiunea noastră CSS.

Deci pentru a liniariza layout-ul și să folosim un header mai mic putem adaugă următoarele:

@media only screen and (max-device-width: 480px) {

div#wrapper {

width: 400px;

}

div#header {

background-image: url(media-queries-phone.jpg);

height: 93px;

position: relative;

}

div#header h1 {

font-size: 140%;

}

#content {

float: none;

width: 100%;

}

#navigation {

float:none;

width: auto;

}

In codul de mai sus folosesc o imagine de fundal alternativa și am redus înălțimea headerului, apoi am setat conținutul și navigarea și am suprascris lățimea setata anterior în cascada de stil. Aceste reguli se aplica numai pentru dispozitive cu ecrane mici.

Cum spuneam mai sus indiferent de dispozitiv și sistemul de operare, putem lucra cu cod CSS și sa-l testam după bunul plac. Totuși va trebui să inseram codul undeva pentru a-l putea vedea. Dar pe lingă asta, putem testa și dispozitive pe care nu le deținem fizic.

Asta ar putea fi de foarte mare ajutor în procesul de dezvoltare al unui site pentru mobil.

Pentru asta putem folosi ProtoFluid 15, o aplicație care ne permite să introducem adresa URL a site-ului, și să vizualizam designul care ar fi afișat pe o mulțime de dispozitive, de la smartphones pana la iPad-uri.

Ceea ce este și mai spectaculos la aceasta aplicație este faptul că putem să introducem noi o anumita dimensiune pentru un anumit dispozitiv pentru care vrem să testam și pentru care cunoaștem dimensiunile displayului.

Pentru a folosi aplicația trebuie să modificam ușor codul CSS postat mai devreme și să includem max-width și max-device-width . Asta înseamnă că regula este valabila și daca utilizatorul e conectat de pe un browser desktop dar are un monitor cu display foarte mic.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

După ce updatam codul de mai sus, trebuie doar să reîmprospătam pagina și să mărim dimensiunea ferestrei trăgând de unul din colturi și vom vedea că layout-ul se va schimba când va atinge 480 pixeli.

Media queries reacționează când se atinge valoarea introdusa .

Daca nu vrem ca layout-ul să se modifice când modificam dimensiunea ferestrei trebuie să ștergem partea cu max-width și astfel va avea efect doar pentru ecranele dispozitivelor mici și nu și pentru ferestrele de browser mici.

Dar asta nu e tot ce putem face cu media queries și sincer încă n-ați văzut nimic. Una dintre marile atuuri ale CCS este că poate furniza variante alternative ale designului nostru.

Tehnica demonstrată mai sus poate fi aplicata și unui site deja existent care are o versiune pentru mobil.

Mobile JQuery

Majoritatea dezvoltatorilor de web front-end sunt familiarizați cu biblioteca jQuery. Aproximativ jumătate din site-urile de top din ziua de azi folosesc biblioteca jQuery. jQuery este simplu de utilizat și nu e necesar ca noi sa schimbam dramatic modul în care programam pentru Web. jQuery oferă ajutor pentru sarcinile cu care majoritatea dezvoltatori web trebuie să se ocupe, de exemplu, găsirea și manipularea elementelor DOM, procesare evenimente de browsing, care implica si probleme de incompatibilitate a browserului, ceea ce face codul de mai mentenabil. Acesta oferă unele scurtături excelente pentru editare cod, animații, meniuri derulante, și o serie de alte funcționalități în browser-ul de codificare și devine și mai minunat odată cu anunțarea jQuery Mobile. Nu este recomandat să ne aruncam direct în tehnica și să ne încărcăm site-ul, cu efecte peste tot, dar pentru scopuri de testare funcționalități avansate poate servi foarte bine.

Bibliotecile sunt diferite de framework-uri. Întrucât framework-urile ne obligau sa ne organizam codul într-un anumit fel, o bibliotecă oferă pur și simplu componente care ne permit să scriem mai puțin cod.

Mai jos avem un exemplu simplu al celebrului program ”Hello World” scris in jQuery Library:

<!DOCTYPE html>

<head>

<title>Hello jQuery</title>

</head>

<body>

$(function(){

$("body").append("<h1>Hello World!</h1>");

});

</script>

</body>

</html>

Si sa luam acum 2 fragmente din codul de mai sus si sa le explicam mai in detaliu :

$(function(){

Daca scriptul trece o functie ca argument, acea functie este apelata atunci cand obiectul DOM este pregatit. Functia jQuery ready() este invocata. Nu e acelasi lucru cu invocarea unui function handler window.on.load, care este apelat dupa ce toate resursele (nu numai obiectele DOM) sunt incarcate complet.

$("body").append("<h1>Hello World!</h1>");

Daca scriptul trece un string catre jQuery, acel string este tratat ca selector CSS si jQuery incearca sa gaseasca colectiile potrivite de elemente HTML. Aceasta linie demostreaza de asemenea metoda de inlantuire: metoda the append() este apelata la obiectul returnat de $(”body”).

In acest fel functioneaza jQuery, dar jQuery Mobile este un pic diferit de obișnuitul jQuery, deoarece oferă un mediu complet pentru a construi. Când lucram cu fișierele lor, ele nu sunt doar Java Script, au de asemenea, stiluri CSS pentru butoane, link-uri și efecte de tranziție. Încă se mai scriu pagini web în cod HTML, dar echipa jQuery Mobile a furnizat o mulțime de caracteristici de design optionale pentru interfata de utilizator. Există o mulțime de lucruri pe care le putem face cu acest framework dar din moment ce este încă în versiune beta, ne rezumam la efectele simple.

Un mic tutorial găsit pe blog-ul DevGrow11 oferă câteva exemple minunate. Site-ul oficial oferă, de asemenea, demo-uri pentru a testa functionalitatile. Rețineți că folosim atributul HTML și date de tranziție pentru a adăuga efecte de animație cu valorile predefinite. Efectele și tranzițiile sunt destul de îngrijite, și faptul că vă puteți construi o interfață de mobil întreaga strict cu jQuery, de asemenea, este un pas uriaș pentru aceasta platforma, dar cu platforma numai în versiune beta, nu este recomandata deocamdată construirea întregului site mobil cu biblioteca lor, în special pentru faptul că nu este susținută de toate smartphone-urile majore în momentul de fata (în special în Windows Phone 7), dar acesta va fi cu siguranță mai bine cu trecerea timpului. În cele din urmă este de recomandat familiarizarea cu acest nou framework mobil înainte de a vă aventura în orice proiect.

jQuery plugins

Deoarece jQuery este o bibliotecă extensibila, o mulțime de plugin-uri au fost create de dezvoltatorii din întreaga lume, și sunt disponibile gratuit. Dacă nu putem găsi un plugin care se potrivește nevoii noastre, puteți crea personal unul .

Plugin-urile jQuery sunt componente reutilizabile care știu cum să facă anumite lucruri, cum ar fi validarea unui formular sau afișarea unor imagini în slideshow. Există câteva plugin-uri jQuery foarte interesante și utile, și nu pot trece de această secțiune făra să vorbesc despre unul care merită aminitit: ResponsiveSlides.js .

Ce este ResponsiveSlides.js și ce îl face atât de interesant? Este un plugin jQuery micuț cu ajutorul căruia se pot crea slide-show-uri responsive utilizând elemente în interiorul unui conținut. A fost utilizat la site-uri ca Microsoft Build 2012 și Gridset App. Functionează cu o gama largă de browsere, inclusiv toate versiunile Internet Explorer, începand de la versiunea IE6 în sus. De asemenea adaugă suport css max-width pentru IE6 și alte browsere. Cea mai mare diferență comparativ cu alte plugin-uri de același tip este marimea fișierului (1,4 kb micșorat si arhivat), precum și faptul că nu incearcă să le facă pe toate. ResponsiveSlides are doar 2 moduri diferite la bază: ori rulează automat imaginile, ori acționează ca un container de imagini responsive cu paginare și/sau navigare care să dispară intre slide-uri.

Caracteristici:

Complet responsive

Micsorat și comprimat cu gzip la 1KB

Tranziții CSS3 cu rezervă JavaScript

Marcare simplă folosind lista neordonata

Setări pentru tranziție și durata timeout

Suport pentru slideshow-uri multiple

Estompare automată și manuală

Funcționează în toate browserele importante

Paginare separată și controale prev/next

Posibilitatea de a alege unde se adaugă controalele

Posibilitatea de a alege aleator ordinea slide-urilorr

Posibilitatea de a utiliza marcare personalizată pentru paginare

Câteva exemple de utilizare:

Înlănțuire de fișiere

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

– Adăugare marcare:

</ul>

Atasarea slideshow-ului:

$(function() {

$(".rslides").responsiveSlides();

});

</script>

Plugin-ul poate fi descarcat gratuit de pe GitHub.

Un alt plugin interesant este Swipebox, un plugin ”lightbox” pentru desktop, telefoane mobile si tablete.

Principalele caracteristici sunt:

1. Gesturi de citire: pentru mobil

2. Tastatura de navigare pentru desktop

3. Tranziții CSS cu rezervă jQuery

4. Retina support pentru icoane ale interfeței utilizatorului

5. Personalizare CSS usoară

Este suportat de toate versiunile de browser, Chrome, Opera, Firefox, IE9+, precum si iOS4+, Android si windows phone.

Utilizare:

Pentru a include jQuery si scriptul swipebox in head sau imediat dupa body:

Pentru a include fisierul CSS in head:

Pentru a lega comportamentul swipebox in fiecare link cu ajutorul clasei ”swipebox”:

;( function( $ ) {

$( '.swipebox' ).swipebox();

} )( jQuery );

</script>

Inserarea unui filmulet, prin adaugarea adresei URL:

<a class="swipebox-video" rel="vimeo" href="http://vimeo.com/29193046">My Videos</a>

Si asta nu e tot ce putem face cu acest plugin minunat.

Poate fi descarcat gratuit de la : http://brutaldesign.github.io/swipebox/

Testare cod cu JSFiddle

Website-ul foarte la indemana JSFiddle ne ofera posibilitatea de a testa rapid fragmente de cod HTML, CSS, JavaScript sau alte framework-uri des utilizate. Pagina web are o bara laterala in partea stanga si 4 panouri mari in partea dreapta. Trei din aceste panouri sunt pentru a introduce sau a copia/insera cod HTML, CSS si respectiv JavaScript, iar al patrulea panou este pentru afisarea rezultatului.

Copiati si inserati fragmente de cod si apasati pe butonul Run, in cadrul barei de unelte din partea de sus a paginii asa cum se poate observa in captura de imagine de mai jos:

Fig. 2.1 Test fragment de cod din website-ul aplicatie folosind JSFiddle

Unelte ajutătoare pentru dezvoltatori

Dezvoltatorii de mobil nu caută doar în resurse de cod și design. Există, de asemenea, o cerere mare pentru instrumente de software și IDE-uri, să nu mai vorbim de framework-uri mobile puternice. Dezvoltarea web este o sarcină dificilă, care necesită destul de multa dăruire, dar folosind instrumente suplimentare va face munca mult mai ușoară.

Opera Mobile Emulator

Pentru cei care caută un mod pentru a verifica cum site-ul mobil este afișat, acest lucru poate fi o durere foarte mare de cap, dacă nu au un smartphone cu acces la internet. Sau daca nu doresc să utilizeze smartphone-ul pentru a testa site-ul de fiecare dată când o actualizare este efectuata pe server. Ei bine, Opera Mobile Emulator este o piesă fantastica de software pentru a testa site-ul mobil.

Emulatorul acceptă aproximativ 20 de profiluri mobile ca Samsung Galaxy S, HTC Desire și chiar tablete ca Motorola Xoom. De asemenea, este posibil să setați rezoluția preferata și densitatea de pixeli în scop de testare intensiva. Cel mai bun din toate, nu este nevoie să faceți prea multa munca de configurare , doar câteva clickuri și este suficient.

Descărcarea este complet gratuita și software-ul poate rula atât în mediu Mac OS X și Windows. Dezvoltatorii lor lucrează din greu pentru crearea standardelor web corespunzătoare.

Phone Gap

Nu au existat niciodată mai multe API-uri dezvoltate peste HTML5 pentru a construi aplicații mobile solide. Remarcam faptul că peisajul mobil a fost lipsit de aceste tipuri de site-uri web, și din acest motiv PhoneGap umple nișa atât de bine. Platforma lor permite construirea cu ușurință de aplicații bazate pe HTML5 ca aplicații native pe 6 platforme diferite.

Fig. 2.7 Captură ecran platforma PhoneGap

Procesul lucrează prin comprimarea codului și îl trece prin frameworkul de aplicare PhoneGap. Acolo aplicația poate ajunge la o mare parte din piața de mobile inclusiv Android, iOS, Windows Phone 7 și Black Berry.

Dacă sunteți un pic confuz nu vă impacientați. Paginile lor de support au un aspect îngrijit și oferă link-uri către resurse utile. Aplicații care au fost deja dezvoltate au fost compilate într-un portofoliu frumos de biblioteca-stil. Accesați site-ul full apps collection12 , unde găsiți aplicații care le puteți sorta pe dispozitive cu capturi de ecran.

Aptana Studio

Site-ul Aptana este primul pas pentru învățarea despre instrumentele lor de dezvoltare. Cea mai recentă versiune, Aptana 3.0.3, oferă un IDE complet integrat de dezvoltare web, stiluri CSS și HTML tag nesting, și cea mai bună parte: Aptana este complet gratuit pentru a fi descărcat și utilizat. Oferă pachete pentru toate cele 3 principale sisteme de operare (inclusiv Linux) care este un avantaj imens pentru dezvoltatori.

Fig. 2.8 Captură ecran Aptana Studio 3

Ce face Aptana special este cât de repede se poate dezvolta o mini-aplicație web și testa design-ul. Aplicația vă permite să dezvoltați și să testați rapid o aplicație web care rulează pe Ruby, PHP, Python, sau pur și simplu HTML/CSS și codul subliniază caracteristici care au fost recent îmbunătățite pentru a include biblioteci noi HTML5 și CSS3. De asemenea, vine cu integrarea Git, un terminal built-in, cod debugger, și o mână de alte caracteristici interesante.

Pași importanți în web design pe mobil

Navigarea pe web-ul mobil este de așteptat să se transforme în următoarea platforma majora de Internet. Acum este ușor să navigam pe net de aproape oriunde utilizând dispozitive mobile care sunt la îndemână din cauza tehnologiei. Proiectarea pentru dispozitive mobile trebuie să fie mai simpla decât site-ul standard și mai bazata pe sarcini pentru a duce treaba la bun sfârșit pentru că utilizatorii caută ceva specific și urgent.

A trebuit luat în considerare cum să utilizam cel mai mic spațiu disponibil pentru conținutul major și să rămână interesant pentru utilizatorii de telefoane mobile. E recomandat a se evita imaginile mari și animație flash, pentru că ea va încetini site-ul. Trebuie să avem în vedere că funcționalitatea este mai importanta decât stilul pentru site-urile web pentru mobil. Dacă site-ul nu este creat și proiectat în mod corespunzător, aceasta ar putea arata mai bine pe un telefon, dar mai rău pe altul sau mai rău, nu se afișează deloc. Trebuie testat , validat și verificat dacă este compatibil cu toate dispozitivele mobile.

Proiectarea pentru web-ul mobil este o operație complet diferita fata de web design desktop PC. Site-urile sunt proiectate pentru ecrane imense, dar dimensiunea ecranului unui smartphone este prea mica în comparație cu asta, ceea ce duce la probleme enervante de uzabilitate. Noile standarde de design și practici sunt foarte necesare pentru a avea un design cat mai bun al site-ului mobil pentru o experiență cat mai buna a utilizatorului.

Vom căuta să proiectam un site ușor de utilizat pentru browsere mobile pe smartphones. Vom încerca să găsim cele mai bune practici și instrumente utile pentru utilizatori care să ajute la proiectarea unui website mobil cat mai bun, cat mai bine optimizat.

Planificarea unei experiențe solide a utilizatorului

Când construim un site mobil de web este important să avem utilizatorii în minte tot timpul, că în cele din urmă site-ul este conceput și creat pentru plăcerea utilizatorului. Este cu siguranță cert că utilizatorii se așteaptă ca un website mobil să se comporte în mod similar ca în mediul desktop, deci menținerea unei experiențe cat mai bune a utilizatorului ar trebui să fie principala preocupare în proiectarea unui website mobil de succes. Există multe concepte de uzabilitate care să fie luate în considerare de către utilizatori. Acestea includ : screen size, inline images, hyperlinkuri, mărimi de font și navigare. Planificarea unei experiențe puternice pentru utilizator, de asemenea înseamnă că trebuie să consideram cum utilizatorul va interacționa cu website-ul. Pe desktop site-ul poate fi interacționat cu un mouse și o tastatură, dar pe un smartphone utilizatorul va interacționa atingând, flicking și swiping în jurul website-ul mobil. Apare deci nevoia de a proiecta site-ul în modul în care utilizatorii pot accesa informațiile cu ușurință folosind aceste mișcări fizice.

Păstrarea paginilor scurte și concise

Sarea și piperul oricărui site este conținutul paginii. Fiecare dintre paginile web deține cantități semnificative de informații utile pentru utilizatori, cum ar fi text, fotografii sau clipuri video. Putem avea de exemplu articole de știri și posturi pe blog-uri care se deplasează pe câteva pagini, care ne pot permite să despărțim textul, dar nu este recomandat pentru dispozitive mobile, pentru că aceasta tehnica necesită încărcarea mai multor pagini, ceea ce înseamnă mai mult timp de așteptare din partea utilizatorului.

Dacă nu este absolut necesar se recomandă păstrarea conținutului scurt. Se recomandă, de asemenea, ceea ce face să arate mai plăcut, un stil de font pentru o dimensiune mult mai mare și poate alăturarea unor imagini. Cu conținutul pe ecran complet în mod sigur vom atrage atenția, să nu mai vorbim de optimizare ,care face scanarea paginilor mult mai simpla. Acesta este, de asemenea, motivul pentru care un aspect cu o coloană unică se potrivește perfect.

În majoritatea cazurilor browsere mobile nu vor încărca paginile web la fel de repede ca browserele desktop și acest lucru ar putea deranja utilizatorii, de aceea trebuie să optimizam conținutul și site-ul pentru încărcare de conținut de mare viteză. Putem fie scurta respectivul articol păstrând întregul conținut, sau pur și simplu eliminând imaginile inutile. Accentul trebuie să fie pe simplitate și nu pe aspect.

Baza de navigare este cel mai important mijloc de ajutor pentru vizitatorii site-ului care se deplasează pe pagini . Pe un dispozitiv mobil, link-urile de ecran vor apărea mult mai mici prin natura, astfel vor fi mult mai dificil de accesat. Un tweak esențial pentru a rezolva această problemă este de a maximiza fontul și spațiul pentru link-urile de navigare, chiar ocupând întregul bloc. De asemenea mai exista posibilitatea de a proiecta bara de navigare să fie similara cu bara de aplicații a unui smartphone pentru o și mai buna experiența a utilizatorului .

Alegerea rezoluției ecranului

Lumea mobila conține o variație bogata de considerente de proiectare de la diferite dimensiuni de ecran și rezoluții la o varietate de forme. Scopul este de a crea un echilibru între suficientă lățime și mărimea audientei. E bine să consultam specificațiile dispozitivelor mobile actuale și să alegem ce e mai bine. Ceea ce este o provocare pentru dezvoltatori este modul de a obține afișarea unei anumite game de rezoluții , fără a recrea pagini pentru diferite platforme.

Mai jos este o listă de rezoluții de web populare pe dispozitive mobile din februarie 2011 prezentate de Uxbooth.com 10 în articolul lor, Considerente pentru Mobile Web Design (partea 2): Dimensiuni, de David Leggett. Autorul explică în câteva puncte despre cum se afișează dimensiunile și soluții pentru layout design.

Fig 2.5 O lista cu cele mai populare rezoluții pentru dispozitivele mobile

Împărțirea paginilor în porțiuni mici

Secțiunile lungi de text pot fi greu de citit, deci introducerea lor pe mai multe pagini limitează navigarea la o singură direcție. De evitat conținut de prioritate scăzută. Trebuie să ne rezumam la o singură coloană de text care se încadrează astfel încât nu există nici o navigare pe orizontală.

Simplificarea designului

Simplitatea echivalează cu gradul de utilizare. Să dam posibilitatea utilizatorilor să acceseze site-ul fără nici o dificultate. A se evita includerea de tabele, rame și alte formatări. Dacă utilizam padding, trebuie să-l păstram la un minim absolut mult mai puțin decât l-am folosi pentru o pagină de web normala. În comparație cu calculatoare desktop, cu cat dam click pe mai multe link-uri pe site-uri mobile, cu atât mai mult mai mult așteptăm datorită timpului de încărcare. Cu asta, trebuie să curățăm și să simplificam site-ul păstrând un echilibru între conținut și navigare.

Opțiunea pentru a vizualiza complet website-ul

E recomandat să oferim un link pentru vizitatorii website-ului mobil pentru a comuta înapoi la site-ul complet, pentru că utilizatorul să găsească și să vadă alt conținut și caracteristici care sunt accesibile numai pentru versiunea desktop a site-ului. Vizitatorii vor face cu siguranță o mulțime de derulare verticală, deci e bine sa-i ajutam cu butoane link “Înapoi Sus" , astfel încât să poată ajunge foarte ușor înapoi la partea de sus a paginii.

Website-ul meu afișează în partea de jos un buton link,”Inapoi Sus” după cum se vede în captura de ecran de mai jos:

Fig 2.6 Captură ecran website-ul aplicație

Amplasarea navigării

Trebuie să ne cunoaștem audienta și ceea ce caută. Să știm cum aceștia doresc să navigheze pe site. Trebuie să poziționăm meniul de navigare sub conținut dacă utilizatorii de telefoane mobile cărora ne adresam doresc schimbarea rapida a conținutului. în primul rând titlul trebuie să fie vizibil și să nu împiedice vizionarea conținutului paginii. Pentru utilizatorii care doresc să navigheze pe o anumită categorie imediat, e indicat să plasăm bara de navigare în partea de sus a paginii.

Folosirea linkurilor cu text

Site-ul principal poate suporta afișarea de meniuri și elemente dinamice îndrăznețe și fanteziste , dar nu și browserul mobil, cel mai probabil. Pentru că trebuie să fim conștienți că elementele dinamice și link-urile grafice consuma foarte multe resurse, e bine să optam pentru link-uri text bine etichetate.

Distincție intre link-ul selectat

Deplasând cursorul în jos vom derula pagina și vom evidenția toate linkurile o dată. Deci, este important să ajutam vizitatorul să vadă ce post este în atenție . Aceasta se poate face prin schimbarea culorii fontului și fundalul link-urilor și butoanelor sau pur și simplu adăugând padding în apropiere de link-uri pentru a mări zona clickabila , în jur de 44px pe 44px.

Păstrarea unui echilibru intre linkuri

Fiecare descărcare de pagina consumă timp și resurse de sistem, care în scurt timp vor deveni insuficiente, așa că e bine să nu forțăm vizitatorii să parcurgă o multitudine de pagini pentru a accesa informațiile solicitate. Un echilibru între numărul de link-uri pe fiecare pagină și adâncimea site-ului este de preferat.

Reducerea textului de intrare utilizator

E greu să introduci text în versiunile mobile ale site-uri web. Putem înlocui cu butoane radio sau liste, astfel încât vizitatorii pot opta pentru ceea ce au nevoie cu ușurință. Trebuie să ținem cont că utilizatorii de telefoane mobile nu au acces la convențională tastatură și mouse. Un URL cu cat e mai scurt, cu atât e mai bine deoarece este monotonă tastarea în URL-urile lungi.

Fără pop-up-uri sau refresh-uri dese

Browserul mobil nu acceptă în mod normal, pop-up-uri. și dacă ar accepta, ar avea foarte puțin spațiu să se desfășoare. Nu este recomandata folosirea lor pe site-urile mobile pentru a evita rezultate imprevizibile. De asemenea, nu e bine să avem pagini care se reîmprospătează foarte des pentru a evita umplerea memoriei limitata a dispozitivului utilizatorului. Să lăsăm utilizatorul să reîmprospăteze conținutul oricând dorește.

Proiectarea de site-uri web pentru IPhone

Cota de piață a telefoniei mobile este destul de mare și împărțită, iar compania Apple a ajuns să dețină o parte importanta cu ale lor iDevices. Atât iPhone și iPad sunt dispozitive mobile Internet-gata cu funcționalitatea built-in touchscreen. Acestea au același default browser , Safari și o întreagă serie de alte opțiuni.

Anumit site-uri pentru Iphone trebuie să vizeze dimensiunea ecranului. Dimensiunea ecranului fix este setata la 320px pe 480px pentru modele mai vechi de iPhone și 640px pe 960px pentru iPhone 4 și iPhone 4S. Ecrane de iPhone sunt limitate la spațiu. Ar trebui să aveți un bloc de conținut care poate fi rulat jos pentru atâta timp cât este necesar. Păstrarea elementele într-o singură coloană vă va salva de dureri de cap și va permite pentru un layout fluid să se plieze pe ambele moduri portret și peisaj. Pentru aceasta va trebui probabil să dezvoltați un alt șablon și să găsiți o modalitate de a verifica dacă vizitatorii folosesc un iPhone.

Fragmentul PHP de mai jos ne va ajuta în aceasta privința:

<?php

$b = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");

if ($b){ // user is on an iPhone }

?>

Practic verifica variabila globală $_SERVER pentru agentul HTTP și verifică dacă cuvântul "iPhone" apare undeva. Daca da atunci știm că vizitatorul folosește un iPhone și de acolo putem pune cod HTML puțin modificat sau chiar un întreg șablon. Acest lucru ar putea fi, de asemenea, folosit pentru a include o foaie de stil specifică iPhone, a schimba titlurile , elimina imagini, sau aproape orice efecte dinamice.

Când vine vorba de noi stiluri există o cale mai ușoară. Așa cum am menționat mai devreme dimensiunea maximă de ecran pentru iPhone este 960px. Prin urmare, cu CSS3 media queries puteți adăuga stiluri direct în foaia principala de stiluri a site-ului, care va afișa numai pe iPhone.

Mai jos este un mic cod exemplu:

@media screen and (max-device-width: 960px){

/* iPhone css */

}

Acest lucru funcționează pentru că CSS poate detecta acum agenții de navigare și proprietățile lor. Lățimea de ecran maxima este una dintre proprietățile care pot fi, de asemenea, detectate.

Aplicația

Aplicația mea este un website construit pe platforma WordPress. Am creat un site de la zero și folosind tehnologiile moderne și l-am optimizat să fie adaptabil pe orice tip de ecran de fie ca vorbim despre desktop, laptop, tablete sau smartphones.

Dar să vorbim puțin despre cum se creează un website. Sunt câțiva pași care trebuie urmați și cu ajutorul cărora oricine poate crea un website destul de simplu.

Prototipare

In primul rand atunci cand vrem sa cream un site trebuie sa urmam un plan binestabilit, la fel cum constructorii, atunci cand construiesc o casa, apeleaza mai intai la un arhitect care face un plan, o macheta a respectivei constructii. In cazul nostru noi suntem si arhitect si constructor si primul pas este crearea unui model ( prototip) al site-ului pe care dorim sa-l cream. Acest model, trebuie sa cuprinda, informatii despre structura site-ului, orice site trebuie sa contina 4 zone bine delimitate , header , body, sidebar si footer, iar fiecare din aceste zone au anumite reguli de continut si structura.

Fig. 4.1 Captura ecran prototip website aplicatie

Dupa cum se poate observa in captura de ecran de mai sus, s-a creat o macheta dupa urmatoarea structura:

Header – este impartit in 2 sectiuni, prima in partea de sus contine o zona pentru logo si 2 blocuri pentru stratus text, iar sectiunea de dedesupt, contine zona cu taburi si linkuri catre celelalte pagini. Headerul mai contine de asemenea si o zona pentru slide-show de imagini care se intrepatrunde cu zona Body.

Body – contine o parte din zona de slideshow si este impartiti si el in 2 sectiuni: Primul sectiune contine o zona , am numit-o eu marketing, un bloc pe toata latimea paginii, care va contine text , si a doua sectiune impartita in 3, care va contine blocuri cu text.

Footer –Impartit la fel in 2 sectiuni, prima cu linkuri social media, contact iar a doua cu zona webmaster si site admin.

Am facut aceste precizari datorita faptului ca pentru a transforma site-ul intr-unul responsive, trebuie sa tratam in cod separat fiecare element de structura, iar pentru cei care se gandesc sa modifice un site neoptimizat deja construit, intr-unul responsive trebuie precizat ca va fi o munca destul de grea, intru-cat va trebui sa tratam in cod fiecare element, fie el media ,text sau alt gen. Sa tratam in cod inseamna sa luam separat fiecare imagine, bloc de text, sau alt element de structura si sa aplicam una din tehnicile responsive, fie folosind stilurile CSS, framework-uri sau plugin-uri . Pentru un site foarte stufos in continut , aceasta este o munca titanica si e de preferat ca daca vrem un site responsive, sa-l cream responsive de la inceput.

Proiectare website pe principiul ”Mobile First”

Majoritatea dezvoltatorilor web care creaza siteuri pentru dispozitivele mobile , proiecteaza un site plecand de la varianta desktop, stabilind ca dimensiune 100% , dimensiunea maxima a ecranului si apoi adapteaza structura pentru fiecare varianta de ecran de dispozitiv, fie el laptop, tableta, ipad, smartphone, etc.

Eu voi aborda principul mobile first, care presupune, ca pornim proiectarea site-ului pentru varianta de ecran cea mai mica si apoi il facem sa-si adapteze structura pe masura ce dimensiunea se mareste si in loc sa folosesc max-width, voi folosi min-width. In acest fel acoperim orice varianta de ecran de dispozitiv mobil de pe care poate fi accesat site-ul.

Astfel voi transforma macheta prezentata mai sus, intr-una responsive , pe principiul mobile first , care va fi 100% adaptabila pe orice tip de ecran. Pentru asta trebuie sa modificam putin codul HTML si sa adaugam putin cod CC3 media quries.

In codul CSS am definit layout-ul in urmatorul mod:

Latimea totala a coloanei se considera 100% ( full width 100% )

2/3 din latimea maxima a coloanei va fi 66.67% (column.two-thirds)

½ din latimea maxima a coloanei va fi 50% (column.half)

1/3 din latimea maxima a coloanei va fi 33.34% (column.third)

¼ din latimea maxima a coloanei va fi 25% (column.fourth)

Si am introdus urmatorul cod in fisierul style.css:

@media (min-width: 40em) {

.column {

padding:0.5rem;

float:left;

}

.column.full { width: 100%; }

.column.half { width: 50%; }

.column.third { width: 33.33%; }

.column.two-thirds { width: 66.67%; }

.column.fourth { width: 25%; }

}

Iar in codul HTML(in fisierul index.html) am folosit in header valoarea pentru ¼ (fourth) pentru ca am impartit headerul in 4.

<div class="column fourth"><a href="#">Despre</a></div>

<div class="column fourth"><a href="#">Responsive</a></div>

<div class="column fourth"><a href="#">Frameworks</a></div>

Testare macheta responsive

Aceste modifcari ar trebui sa ne transforme macheta, intr-una responsive adaptabila la dimensiunea ecranului si putem testa acest lucru , micsorand fereastra browserului si vom vedea cum structura se rearanjeaza pe masura pe fereastra browserului se micsoreaza.

Iata cum arata pe dimensiuni de smartphone.

Fig. 4.2 Captura ecran varianta smartphone

Se poate observa cum structura s-a rearanjat, blocurile cu status text care initial erau dispuse pe aceiasi linie, acum apar unul sub celalalt , la fel s-a intamplat si cu taburile cu butoane de pagini, iar restul continutului s-a micsorat, adaptandu-se la noua dimensiune.

Am facut acest test ca sa vedem ce inseamna CSS media queries si daca il folosim corect, pentru ca va fi mult mai greu de lucrat cu un site complex, cu continut divers, cu multe elemente diferite de structura si daca nu reusim sa folosim corect codul pentru un prototip care nu are mai mult de 100-150 de linii de cod, atunci cu atat mai putin vom reusi pentru o versiune imbunatatita a site-ului.

Ideea pe baza careia am creat aceasta aplicatie, se axeaza in cea mai mare parte pe partea de optimizare a site-ului si mai putin pe partea estetica si de continut. Dar evident ca pentru a demonstra cel mai bine, tehnica de optimizare a unui site pentru mobil, trebuie sa folosim un site mai complex, binenteles care sa se plieze pe macheta conceputa initial.

Modificare template si creare website neoptimizat

In ziua de azi , in designul web, foarte putini designeri mai folosesc in totalitate cod pentru ca exista numeroase unelte ajutatoare, template-uri, plugin-uri , teme, etc. care care ne scurteaza munca intr-o anumita masura.

Pentru a scurta putin partea de creatie, am folosit un template gratuit, dintre numeroasele template-uri disponibile, pe internet la ora actuala. Am folosit un template destul de simplu, care sa respecte in mare masura structura machetei creata si prezentata mai devreme la inceputul acestui capitol.

Am modificat template-ul adaugand un banner, slideshow de imagini, cateva butoane in plus si putina animatie JavaScript, iar in momentul in care dimensiunea ferestrei de modifica, structura nu se mai adapteaza in totalitate noii dimensiuni si asta se intampla datorita continutul media, care este necesar sa fie optimizat pentru un display corect.

Consider partea de estetica si structura incheiata in acest moment si ne ramane acum sa terminam optimizarea. Vom folosi din nou cod CSS, dar vom adauga si una din tehnologiile framework de care am vorbit in capitolul 2, si anume Bootstrap.

Utilizare Bootstrap

Am folosit urmatorul cod folosind clasa grid .col-md* care ma ajuta sa creez un sistem care incepe afisarea ca dispunere pe veritcala pe tablete sau telefoane, clasa .col-xs*(extra-small) si clasa .col-sm*(small), iar pe desktop devine orizontala, pentru clasa .col-md*(medium) :

</div>

</div>

</div>

</div>

Ilustrativ arata asa:

Si pe masura ce display-ul se mareste devine asa:

Introducere breakpoints

Apoi pentru a avea un site complet responsive, pe principiul mobile first, trebuie apelam la folosirea asa-numitelor breakpoints(despre care am discutat in capitolul 2) si pentru site-ul meu am ales 4 astfel de valori ale latimii ecranului si am scris urmatorul cod:

.breakpoint-768 . cell {

float: none;

width: 100%;

padding-bottom: 0.5em

}

@media only screen (max-width: 640px) {

.breakpoint-480.cell {

float:none;

width: 100%;

padding-bottom: 0.5em

}

@media only screen (max-width: 480px) {

.breakpoint-320.cell {

float:none;

width: 100%;

padding-bottom: 0.5em

}

@media only screen (max-width: 320px) {

.breakpoint-320.cell {

float:none;

width: 100%;

padding-bottom: 0.5em

}

Codul de mai sus introduce 4 breakpoints, la 768, 640, 480 si 320 pixeli si actioneaza in urmatorul fel: de fiecare data cand ecranul atinge una din valori, structura paginii se rearanjeaza, adaptandu-se noii dimensiuni.

In acest fel avem acea numita ”degradare eleganta”, adica un layout fluid si complet adaptabil.

Acest cod, actioneaza asupra intregii structuri a site-ului, dar pentru o optimizare cat mai buna este nevoie si de cod care se aplica doar unor zone sau sectiuni din pagina site-ului.

Optimizare imagini responsive

De acum, probabil știți ce înseamnă design responsive, dar vă reamintesc : folosește o combinație de layout fluid și media queries pentru a defini punctele de întrerupere la care layout-ul sau conținutul se modifica pentru a se potrivi unui anumit ecran. Majoritatea siturilor responsive utilizează media queries pentru adaptarea la dispozitive mobile smartphones, tablete, iPad-uri, . La început în designul responsive, să facem imagini responsive însemna folosirea CSS pentru a ne asigura că au rămas frumos în interiorul conținutului, și făceam asta cu ajutorul acestui cod:

img {

max-width: 100%;

}

Aceasta tehnica face ca imaginile să arate ordonat, dar tot ce face de fapt e să micșoreze aceeași imagine mare pentru a se potrivi conținutului. Ea nu face nimic pentru a modifica dimensiunea reală a fișierului, ceea ce ar putea duce la imagini de dimensiuni mari ascunse pe design-ul mobil și încetinirea serioasa a site-ului. Afișarea de imagini de dimensiuni mari, care au fost micșorate cu CSS este descurajata de W3C, și în plus folosește puterea de procesare și datele, așa că nu este o idee buna mai ales pe dispozitive mobile. Când proiectam design responsive acum, în general, includem un fel de a face dimensiunea reala a imaginii să fie mai mica, utilizând dintr-o varietate de tehnici .

Eu am folosit din nou Bootstrap pentru a crea imagiuni responsive, si m-am folosit de clasa .img-responsive. Aceasta aplica imaginii:

Max-width: 100%

Height: auto

Display: block

Pentru a centra imaginile cand folosesc clasa .img-responsive folosesc:.center-block in loc de .text.center.

Creare slideshow folosind ResponsiveSlides.js

Pentru crearea slideshow-lui de imagini am ales 3 imagini pe care le-am modificat si am folosit un plugin foarte interesant, ResponsiveSlides.js(despre care am vorbit in capitolui 2 la jQuery Library), pentru a face ca aceste imagini sa ocupe foarte putin spatiu si sa fie incarcate foarte repede de catre dispozitivele mobile.

$("#slider5").responsiveSlides({

auto: true,

pager: false,

nav: true,

speed: 500,

namespace: "callbacks",

before: function () {

$('.events').append("<li>before event fired.</li>");

},

after: function () {

$('.events').append("<li>afterevent fired.</li>");

}

});

</script>

Am folosit codul de mai sus pentru evenimente JavaScript pentru afisarea slideshow-lui si rularea imaginilor la intervale constante. Foloseste codul stocat in fisierul jquery.swipebox.min.js, care contine pe linga cod JavaScript si elemente jQuery Mobile.

Am facut legatura si catre fisierul swipebox.css, care contine codul plugin-ului swipebox, un plugin jQuery pentru desktop, tableta si smartphone, prezentat in capitolul 3.

Eveniment JavaScript

Dar asta nu este singura parte in care am utilizat evenimente JavaScript si elemente jQuery, am mai creat de asemenea si o zona care contine 6 imagini stilizate, iar la trecerea cu mausul peste ele, este afisat un text. Acesta este un alt tip de eveniment JavaScript, fata de cel folosit la slideshow, pentru ca acum evenimentul nu se mai declanseaza automat la intervale constante, ci la actiunea noastra cu mausul.

M-am ocupat apoi de optimizarea bannerelor, din header si footer si am scris urmatorul cod:

@media only screen and (max-device-width: 480px) {

div#wrapper {

width: 400px;

}

div#header {

background-image: url(banner.jpg);

height: 93px;

position: relative;

}

div#header h1 {

font-size: 140%;

}

#content {

float: none;

width: 100%;

}

#navigation {

float:none;

width: auto;

In mod asemanator se procedeaza si pentru footer sau orice sectiune care contine un banner.

Am folosit apoi frameworkul bootstrap pe care l-am scris intr-un fisier denumit bootstrap.css si la care se face legatura cu site-ul in codul HTML prin sintaxa:

In codul CSS am folosit si normalize.css , un plug-in care face ca browserele sa arate elementele mai consistent si aliniate la standardele moderne. Tinteste cu precizie numai stilurile care au nevoie sa fie ”normalizate”. http://necolas.github.io/normalize.css/.

Testare website complet optimizat

In final site-ul a devenit complet optimizat imaginile din slideshow, banerul din header si footer si alte elemente, toate se adapteaza functie de dimensiunea ecranului si ce este si mai important odata cu dimensiunea se modifica si marimea elementelor media, pentru ca nu putem numi un site complet optimizat fara acest lucru.

Fig. 4.7 Captura ecran dimensiune desktop

Fig. 4.8 Captura ecran tableta Fig. 4.9 Captura ecran smartphone

Concluzii

În designul unui site web pentru mobil putem alege între design responsive și design adaptive. Fiecare dintre ele are avantajele și dezavantajele sale mai mari sau mai mici. Stilurile CSS ne ajută să optimizam foarte ușor aspectul și structura website-ului nostru. În crearea unui site web nu avem neapărat nevoie să cunoaștem un limbaj de programare(CSS, PHP, HTML) pentru că avem de ales între câteva platforme (WordPress, Joomla, Drupal . etc) care ne permit să creăm foarte ușor un site folosindu-ne de numeroase template-uri și teme puse la dispoziție. Aceste platforme au un Sistem de Management al Conținutului care ne permit să lucrăm foarte ușor în cadrul acestor platforme fără să fie nevoie să lucrăm cu cod. Sunt de asemenea câteva unelte ajutătoare pentru dezvoltatori care ne ajută să efectuam diverse teste și să configurăm site-ul nostru.

Sunt și câțiva pași importanți de urmat pentru a crea un site pentru mobil foarte bine optimizat, care sa ofere o experiență plăcută vizitatorilor.

In crearea unui design responsive trebuie sa consideram abordarea Mobile First care prepupune ca inca din primele etape trebuie sa dezvoltam o aplicatie tinand cont de cateva aspecte:

Sa ne asiguram ca aplicatia web arata bine pe ecranele mai mici

Sa diferentiem continutul care va fi aratat pe ecranele mari si cele mici

Sa testam aplicatia pe retele lente (3G) si sa minimizam greutatea paginii

Sa decidem abordarea pe care o vom folosi: sa folosim responsive design sau sa alegem alta abordare cum ar fi frameworkuri mobile bazate pe HTML5, native sau hibrid.

Apoi Feature Detection care ajuta aplicatia sa isi dea seama daca browserul utilizatorului suporta anumite caracteristici HTML5/CSS3.

Putem folosi CSS media queries pentru a crea un site responsive, folosind acele latimi ale ecranului numite breakpoints dar trebuie sa avem in vedere faptul de a nu abuza de acest aspect si sa ne limitam la folosirea moderata a acestora.

Bibioteca jQuery vine cu o varianta pentru designul mobil numita Mobile jQuery care chiar daca este in veriune beta poate fi testata si folosita avand multe functionalizati extrem de potritive pentru desgnul responsive.

Putem crea imagini responsive utilizand o multime de tehnici, fie in cadrul WordPress, fie Bootrstap sau ale frameworkuri responsive foarte bune.

Si sa nu uitam ca Google recomanda designul responsive, un atu foarte important.

Exista insa si o alternativa la designul responsive, si anume designul adaptive care propune servirea variantelor diferite pentru aparate și ecrane diferite, direct de pe server, adaptarea la posibilitățile utilizatorului se întâmplă deja pe server, și nu pe aparatul utilizatorului. Acest lucru înseamnă economie de resurse, poate și o rulare mai rapida, însă presupune și costuri mult mai mari, fiind varianta preferata de firme mari, corporații.

Concluzia este că merita să optați pentru responsive design, chiar daca presupune costuri puțin mai mari dar este mai accesibil decat designul adaptive, pentru că s-ar putea ca pagina să nu fie foarte ușor de vizualizat pe o tableta sau un telefon mobil și crearea unei variante special pentru smartphone-uri presupune costuri mult mai mari, fiind nevoie de o interfață total separata de cea pentru desktop.

Bibliografie

http://www.webmediaserv.ro/blog-web-design-development/site-uri-pentru-telefoane-mobile/

http://www.margeo.net/development-mobile-vs-desktop/5769

http://en.wikipedia.org/wiki/Matt_Mullenweg

http://en.wikipedia.org/wiki/WordPress

http://www.ultra-design.ro/articol-sistemul-de-administrare-website-cms

http://www.ultra-design.ro/articol-web-design-pe-dispozitive-mobile

http://blog-freelancer-web.blogspot.ro/2013/01/tendinte-web-design-2013

https://developers.google.com/webmasters/smartphone-sites/details

http://www.marconimedia.ro/blog/2013/09/responsive-web-design/

http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/

http://devgrow.com/mobile-web-dev-using-jquery-mobile/

http://www.phonegap.com/apps

http://csswizardry.com/2011/07/responsive-images-right-now/

http://www.smashingmagazine.com/2012/06/14/responsive-images-with-wordress-featured-images/

http://protofluid.com

Bibliografie

http://www.webmediaserv.ro/blog-web-design-development/site-uri-pentru-telefoane-mobile/

http://www.margeo.net/development-mobile-vs-desktop/5769

http://en.wikipedia.org/wiki/Matt_Mullenweg

http://en.wikipedia.org/wiki/WordPress

http://www.ultra-design.ro/articol-sistemul-de-administrare-website-cms

http://www.ultra-design.ro/articol-web-design-pe-dispozitive-mobile

http://blog-freelancer-web.blogspot.ro/2013/01/tendinte-web-design-2013

https://developers.google.com/webmasters/smartphone-sites/details

http://www.marconimedia.ro/blog/2013/09/responsive-web-design/

http://www.uxbooth.com/blog/considerations-for-mobile-design-part-2-dimensions/

http://devgrow.com/mobile-web-dev-using-jquery-mobile/

http://www.phonegap.com/apps

http://csswizardry.com/2011/07/responsive-images-right-now/

http://www.smashingmagazine.com/2012/06/14/responsive-images-with-wordress-featured-images/

http://protofluid.com

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: Implementarea Web Pentru Dispozitivele Mobile (ID: 149898)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

Implementarea Web Pentru Dispozitivele Mobile

Copyright Notice

Sistem de Depistare a Plagiarismului In Productia de Software

Curba Phillips Si Modele Asociate

Elaborarea Bazei de Date Client Server a Centrului de Instruire a Personalului Pentru Transporturi Internationale

Drumuri Minime In Retele de Transport

Pagina Web Pentru Comert Electronic

Algebre Hopf. Module Hopf Si Integrale

Copyright Notice

Similar Posts