RSS
Twitter
WordPress Anniversary Theme | Demo | Download
Fotofolio Landscape | Demo | Download
WordPress Diary Theme | Demo | Download
Tabelul periodic al elementelor HTML
Tabelul periodic al elementelor HTML
Tabelul periodic pe care îl știm cu toții din școală a devenit o modalitate foarte uzuală de schematiza și dispune o serie de informații, găsindu-și adaptări în foarte multe domenii. Prin urmare există și în web design o serie de tabele periodice, unul dintre ele fiind cel al elementelor ce influențează SEO, altul fiind cel al elementelor HTML pe care îl vom prezenta în cele ce urmează.
Acest tabel a fost conceput de Josh Duck, un web developer australian, și poate fi găsit la adresa http://joshduck.com/periodic-table.html. Avem practic o schematizare a tag-urilor HTML5, care au fost dispuse pe coloane diferite și în culori diferite, pentru a construi familii de elemente înrdite și pentru o citire cât mai facilă. Dacă se dă click pe un element apare un popup cu o scurtă definiție și trimiteri către explicații și exemple mai avansate pe siteurile W3C Reference, W3C Schools, HTML5 Doctor ș.a.
Browsere pentru mobil
Browsere pentru mobil
De obicei telefoanele mobile sau tabletele vin cu propriul browser încorporat, dar în funcție de sistemul de operare folosit se pot instala și alte browsere alternative. Acestea vin cu o interfață personalizată și diferite funcții suplimentare de care puteți avea nevoie. Browserele pentru mobil sunt optimizate pentru a afișa pagini web pe ecrane cu rezoluție mai mică și cu resurse limitate, dar asta nu înseamnă că nu pot oferi facilități ca navigarea în tab-uri, semne de carte, gesturi, etc.
Firefox Mobile
Renumit mai ales prin browserul pentru desktop, Mozilla Firefox aduce și pe mobil o experiență complexă, alături de siguranță și confidențialitate. În plus se pot sincroniza istoria, semnele de carte, parolele și ferestrele deschise între diferite dispozitive. Rulează pe Android și IPhone.
Dolphin Browser HD
Un browser inteligent care suportă add-onn-uri, gesturi, multi-touch, taburi, sidebar, sau bară de adresă inteligentă. Poate fi customizat în 16 limbi străine și are câteva variante simplificate ca Dolphin Browser și Dolphin Browser Mini. Rulează pe Android.
Skyfire Web Browser
Skyfire este un browser inteligent destinat în special celor care folosesc rețele de socializare. Are o bară de unelte personalizată, suport pentru video flash, integrare cu Facebook și alte servicii de sharing. Rulează pe Android.
Maxthon
Acest browser oferă sincronizarea siteurilor favorite în cloud, posibilitatea comutării între versiunea integrală sau versiunea WAP a unui site, speed dial, cititor RSS sau manager de descărcări. Există o versiune a acestui browser special concepută pentru tabletele de 10 inci. Rulează pe Android.
Opera Mini
Un browser rapid care folosește serverele Opera pentru a comprima conținutul web astfel încât să se încarce mai repede. Între facilități regăsim gesturi, speed dial sau suport nativ pentru Twitter și Facebook. Rulează pe Android.
BOLT Browser
Acesta rulează pe toate dispozitivele mobile care suportă Java. Este construit pe o paltformă bazată pe Webkit și găzduită în cloud, astfel încât să ofere funcționalitate în stil PC pe telefonul mobil. Suportă standardele HTML5 și vine integrat cu diverse aplicații social-media.
UC Browser
Încă un browser care rulează pe toate platformele mobile și cu suport în cloud pentru compresie. Alt funcții: căutare, taburi, manager de descărcări, aut-completare, manager de fișiere sau mod de noapte.
Cum detectăm și redirectăm utilizatorii de telefoane mobile
Cum detectăm și redirectăm utilizatorii de telefoane mobile
Am vorbit la un moment dat de MobileESP, un framework pentru detectarea vizitatorilor care folosesc un dispozitiv mobil. Am vorbit și despre responsive web design, necesitatea de a oferi tuturor vizitatorilor o experiență optimă și metodele prin care poate fi realizată. Însă ambele metode au și dezavantaje: frameworkurile sunt încărcate cu multe elemente de care nu am nevoie, responsive designul pune probleme ca folosirea adițională a lățimii de bandă și a resurselor hardware.
Există metode mai simple de detectare a unui dispozitiv mobil, care implică folosirea de mici scripturi CSS, PHP sau Javscript. În urma efectuării unui test vom redirecta vizitatorul către o versiune dedicată a siteului, de exemplu m.numesite.ro.
Metoda Javascript
Este cea mai simplă metodă și se face prin adăugarea unui cod scurt în header-ul paginii HTML. Detecția se poate face după rezolția ecranului sau după user-agent. Ea ne permite customizarea unui site în funcție de rezoluție dar independent de dispozitiv, sau putem alege să servim o versiune personalizată pentru IPhone, Android, Blackberry, etc.
Detectarea după rezoluție:
<script type="text/javascript">
<!--if (screen.width <= 699) {document.location = "YOUR-MOBILE-SITE.com";}//--></script>Detecatrea după user-agent:
<script type="text/javascript"><!--if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { location.replace("http://YOUR-MOBILE-SITE.com");}--></script>Dezavantajul utilizării Javascript este că nu toate dispozitivele îl suportă sau poate fi dezactivat din setările browserului, de aceea o pratică utilă ar fi furnizarea unui link pe site către versiunea mobilă.
Metoda CSS
CSS-ul are propria metodă de detectare a rezoluției, folosind media queries. Dispozitivele mobile caută de obicei una sau mai multe declarații media, de obicei screen sau handheld. Pentru că nu știm exact care va fi folosită, este bine să le implementăm pe amândouă.
<link rel="stylesheet" href="screen.css" media="screen"/><link rel="stylesheet" href="handheld.css" media="handheld"/>Dezavantajul acestei metode, pe lângă faptul că nu este suportată de toate dispozitivele, este că poate necesita scrierea de foarte mult cod CSS, care trebuie menținut astfel încat să generăm o experiență similară în toate versiunile.
Metoda PHP
Este probabil cea mai convenabilă metodă, se face la nivel de server și nu necesită setări speciale ale browserului.
<? if ( stristr($ua, "Windows CE") or stristr($ua, "Mobile") ) { $DEVICE_TYPE="MOBILE"; } if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") { $location='YOUR-MOBILE-SITE.com/index.php'; header ('Location: '.$location); exit; } ?>Bineînțeles, metoda se poate implimenta în mod similar și în alte limbaje ca ASP, Ruby, etc.
