Arhive etichetă: html5

11 lucruri pe care trebuie sa stii despre HTML 5

Ca si programator web, e important ca mereu sa evoluezi pentru a putea tine pasul cu tehnologia care mereu se schimba si se dezvolta.

HTML5 este a 5-a si cea mai noua versiune a HTML-ului standard; fiind un limbaj de programare folosit pentru a structura si ilustra un continut web. Acesta beneficiaza de functionalitati avansate care iti ofera suport media imbunatatit si care ridica standardul in crearea aplicatiilor web.

Programatorii HTML trebuie sa fie la curent cu noile tendinte si functionalitati pe care HTML5 le ofera.

  1. DOCTYPE simplificat

Daca inca folosesti vechiul tip XHTML DOCTYPE, e timpul sa treci la DOCTYPE-ul nou si imbunatatit. Noua versiune HTML vine cu un DOCTYPE usor de folosit.

HTML5 DOCTYPE este compatibil cu toate noile tipuri de documente, fiind folosit pentru toate tipurile de browsere, atat cele mai vechi, cat si cele noi, care au nevoie de un DOCTYPE specific.

Good to know! Browserele care nu functioneaza cu acest tip de DOCTYPE vor fi executate direct in modul standard.

  1. New figure element

In carti sau reviste e chiar usor sa gasesti titlul, dar inainte ca HTML5 sa apara sa gasesti o solutie simpla prin care titlu sa fie asociat cu un anumit paragraf sau o anumita imagina, era destul de dificil.

HTML5 vine cu acest doua elemente pentru a usura aceasta sarcina: <figure> si <figcaption>. Prin imbinarea lor poti integra semantic titlurile cu imaginile.

  1. Nu trebuie introduse tipurile pentru script-uri si link-uri

Aceasta functionalitate iti ofera libertatea de a nu introduce tipul pentru link-uri si script-uri. De notat, ca ambele etichete sunt pentru script-uri si stylesheets, motiv pentru care tipul atributului se poate sterge cu usurinta.

  1. Elemente semantice noi si usor de memorat

Majoritatea site-urilor web folosesc coduri HTML cu un scop pentru a ilustra header-ul, navigatia si footer-ul, care se dovedeste a fi o tehnica destul de complicata.

In acest sens, HTML5 ofera elemente semantice noi si usor de memorat, care ii pot ajuta pe programatorii web pentru a diferentia diferite sectiuni ale unei pagini web.

  1. Placeholder attribute

Placeholder text este un indiciu de text afisat in campul formularului cand campul nefocalizat. Inainte de aceasta tehnica, era necesar sa se foloseasca un JavaScript pentru a construi placeholderele pentru casetele de text.

Acum, datorita lui HTML5 si functionalitatii de atribuire placeholder, aceasta afiseaza textul intr-un camp pana cand campul este focalizat, iar apoi textul este ascuns.

  1. Use of required attribute

Atributul required este un atribut Boolean care are rolul de a determina daca campul input-ului este completat sau nu, inainte de depunerea finala a formularului.

Poti sa scrii acest atribut in mai multe feluri, in functie de tipul tau de scriere a codurilor, sau poti alege o metoda mai structurata.

  1. Use of Autofocus attribute

Caracteristica de autofocus este noua si specifica pentru HTML5. Aceasta are rolul de a determina daca un element input este focalizat in mod automat sau cand pagina se incarca. Poti folosi aceasta calitate pentru un input specific care a fost selectat in mod implicit.

  1. Pattern attribute

Uneori e dificil sa scrii o expresie regulata pentru a verifica o anumita caseta de text, dar cu noua functionalitate a HTML5 acest proces devine mai usor. Functionalitatea ofera un atribut tipar prin care e simplu de adaugat o expresie regulata in markup.

  1. Suport audio

Pentru a adauga continut audio intr-un document HTML sau XHTML, HTML5 are aceasta functionalitate. De retinut, faptul ca doar browserele curente au acest suport pentru HTML5 audio.

Doar trei formate audio se gasesc: mp3 suportat de Firefox, ogg wav, browserele Safari si Webkit.

  1. Suport video

Pe langa suportul audio, HTML5 ofera si un element pentru suport video care functioneaza cu majoritatea browserelor recente. Azi, majoritatea browserelor suporta video-ul HTML5.

Browserele care functioneaza cu HTML5 video sunt: IE9 si Safari functioneaza cu formatul H.264. Opera si Firefox lucreaza cu formate Vorbis si Theora, in timp ce Chrome afiseaza video-urile care sunt codate atat in formatul Ogg cat si mp4.

  1. HTML5 local storage

Conform denumirii, HTML5 local storage este un loc de stocare a datelor pentru aplicatiile web in cadrul browserului utilizatorului.

Pana acum, datele aplicatiilor erau stocate in cookies, dar functionalitatea de local storage a fost conceput pentru a stoca in mod securizat cantitati mari de date locale, fara a afecta performanta unui site web.

Good to know! HTML5 local storage deja e functional pe toate browserele.

Daca iti doresti sa inveti HTML de la zero, dar si alte tehnologii pentru a urma o cariera in IT, si nu numai, alaturat gasesti datele mele de contact!

Lectia 12 – Bara de instrumente pentru navigare

jQuery Mobile ofera o bara de instrumente pentru navigare, se pot adauga pana la 5 butoane ( pe un rand ) cu sau fara iconita. Bara de instrumente de navigare se poate adauga atat in antet cat si in subsol.
Bara de instrumente pentru navigare este doar o lista <ul> avand atributul data-role=”navbar”.

Sa cream impreuna o bara de instrumente de navigare cu 2 butoane: „Prima pagina” si „Contact”

	<div data-role="header"  data-position="fixed" data-theme="c" >
			<h1>Lectia 12 – Bara de instrumente pentru navigare</h1>
			<div data-role="navbar">
				<ul>
					<li><a href="#home" class="ui-btn-active"   data-transition="slide">Prima pagina</a></li>
					<li><a href="#contact"   data-transition="slide">Contact</a></li>
				</ul>
			</div><!-- /navbar -->
	</div>

Demo

Demo-ul complet poti vizualiza aici.

Lectia 11 – Bara de instrumente Footer

Bara de instrumente Footer se comporta ca si cea pentru header. Bara de instrumente Footer se afla in josul paginii, in multe cazuri nu este vizibila fara a face scroll in jos.

Structura

Bara de instrumente Footer este un div cu atributul data-role=”footer” .

	<div data-role="footer">
		<h1>Lectia 11 - Bara de instrumente Footer</h1>
	</div>

Adaugare butoane

Este foarte simplu sa adaugi butoane pentru bara de instrumente footer. Linkurile trebuie sa contina atributul data-role=”button”. In footer poti adauga mai multe butoane, ele fiind aliniate implicit stanga.

Exemplu cu trei butoane: „Adauga”, „Sus” si „Jos”

<div data-role="footer" class="ui-bar">
	<a href="l11ex1.html" data-role="button" data-icon="plus">Adauga</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-u">Sus</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-d">Jos</a>
</div>

jQuery Mobile Framework ofera posibilitatea de a grupa butoane. Vezi exemplu #2:

<div data-role="footer" class="ui-bar">
  <div data-role="controlgroup" data-type="horizontal">
	<a href="l11ex1.html" data-role="button" data-icon="plus">Adauga</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-u">Sus</a>
	<a href="l11ex1.html" data-role="button" data-icon="arrow-d">Jos</a>
  </div>
</div>

Observatii

Pozitionarea „fixed”, „fullscreen” si „inline” sunt valabile si pentru bara de instrumente footer.

Demo

V-am pregatit demo-urile :

Lectia 10 – Bara de instrumente Header

Bara de instrumente Header se afla in antetul paginii, contine titlul paginii si maxim 2 butoane . Practic se pot insera mai multe butoane dar ramanem la 2.

Structura

Header-ul este un div cu atributul data-role=”header” . De obicei incepem sa adaugam un titlu.

	<div data-role="header">
		<h1>Lectia 10 - Bara de instrumente Header</h1>
	</div>

Adaugare butoane

Cum am zis, este posibila adaugarea butoanelor pe bara de instrumente header. In mod normal adaugam pana la doua butoane si jQuery Mobile Framework va pozitiona implicit primul buton in partea stanga, iar celalalt buton in partea dreapta.

Exemplu cu doua butoane: „Anuleaza” si „Salveaza”

	<div data-role="header">
		<a href="l10ex1.html" data-icon="delete">Anuleaza</a>
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check">Salveaza</a>	
        </div>

Exemplu2: Stilizare buton salveaza

	<div data-role="header">
		<a href="l10ex1.html" data-icon="delete">Anuleaza</a>
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check" data-theme="c">Salveaza</a>	
        </div>

Butoanele se pot pozitiona prin intermediul claselor css ( jquery.mobile.min.css ): ui-btn-right si ui-btn-left.

Exemplu3: Pozitionare butonului Salveaza la dreapta

	<div data-role="header">
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check" data-theme="c" class="ui-btn-right">Salveaza</a>	
        </div>

Exemplu4: Pozitionare butonului Salveaza la stanga

	<div data-role="header">
			<h1>Lectia 10 - Bara de instrumente Header</h1>
		<a href="l10ex1.html" data-icon="check"  class="ui-btn-left">Salveaza</a>	
        </div>

Demo

V-am pregatit demo-urile :

Lectia 9 – Introducere in bara de instrumente

Cred ca fiecare dintre voi stie ce este bara de instrumente (toolbar) . In jQuery Mobile Framework sunt definite doua tipuri de bare de instrumente:

  1. Bara de instrumente pentru antet ( header toolbar ); de obicei contine titlul pagini + doua butoane – un buton in partea stanga si alt buton in partea dreapta
  2. Bara de instrumente pentru subsol ( footer toolbar ); de obicei contine atat butoane cat si text + linkuri.

Pozitionare

Barele de instrumente se pot pozitiona in 3 moduri:

  • inline – pozitionare implicita in jQuery Mobile Framework. Pozitionare „inline” inseamna ca se va aloca o zona pentru bara de instrumente, dar nu va fi mereu vizibila.
  • fixed – Prin pozitionare „fixed” bara de instrumente va rif mereu vizibila, din pacate va „fura” o mica zona din ecran .
  • fullscreen – Pozitionare „fullscreen” este tot o pozitionare „fixed” doar ca nu se va „fura zona din ecran” , toolbar-ul este transparent si sub toolbar se vede continutul paginii.

Cod sursa

Incepand cu aceasta lectie nu voi adauga tot codul, doar modificarile.

Pozitionare „fixed”

	<div data-role="header"  
             data-position="fixed" 
             data-theme="b">
		<h1>Lectia 9 - Introducere in bara de instrumente</h1>
...
	</div>

Pozitionare „fullscreen”

	<div data-role="header"  
             data-position="fixed" 
             data-fullscreen="true"
             data-theme="b">
		<h1>Lectia 9 - Introducere in bara de instrumente</h1>
...
	</div>

Demo

V-am pregatit 2 fisiere demo, primul exemplu cu pozitionare fixa („fixed”), iar celelalt cu pozitionare pe tot ecran („fullscreen”).

Lectia8 – Ferestre pop-up

Cand ne gandim la ferestre pop-up, aducem aminte de ferestrele enervante ce se deschid fara acordul nostru.

In cazul nostru ferestrele pop-up folosim mai mult pentru a confirma o actiune ( stergere, modificare) sau pentru a notifica utilizatorul ( ex: nume utilizator prea scurt – la un formular de inregistrare – ) .

In JQMF nu se face diferenta intre pagina si fereastra pop-up, pentru ca ambele exista in codul nostru HTML. Totusi ca o pagina sa devina o fereastra de tip pop-up, avem de adaugat atributul data-rel=”dialog” pentru eticheta <a>.

Exemplu1

   <a href="alt_fisier.html"
      data-rel="dialog">
         Deschide fereastra pop-up</a>

Bineinteles si pentru afisarea ferestrelor pop-up se pot adauga efecte de tranzitie.

Exemplu2: Adaugam efectul de tranzitie „slidedown”

   <a href="alt_fisier.html"
      data-rel="dialog"
      data-transition="slidedown">
         Deschide fereastra pop-up cu efectul "slidedown"</a>

Personalizare stil

Personalizarea ferestrei pop-up se poate realiza in 2 moduri:

  1. Adaugarea atributului data-theme (ex: data-theme=”e”)
  2. Modificarea fisierului CSS: De exemplu doresti sa optimizezi fereastra pentru samsung mini ce are o rezolutie de 240×320 px, poti sa suprascrii in fisierul jquery.mobile.min.css urmatorele:
    .ui-dialog .ui-header, 
    .ui-dialog .ui-content, 
    .ui-dialog .ui-footer { 
    	max-width: 240px; 
    	margin: 10% auto 15px auto; 
    }
    

Demo

V-am pregatit fisierul demo cu ferestre pop-up: Vizualizeaza DEMO .

Lectia 7 – Filtre

Filtrarea unei liste este foarte utila cand dorim sa gasim un anumit lucru. De exemplu, in lectia 6 am avut o lista cu marcile masinilor si acum dorim sa activam un filtru.
Activarea filtrului se face adaugand atributul data-filter=”true” pentru lista din exemplu.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 7 - Filtre</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body> 

  <!-- PRIMA PAGINA -->
  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 7 - Filtre</h1>
	</div>

	<div data-role="content">
	<p> 
        <ul data-role="listview" data-filter="true">
	   <li><a href="l6ex2.html">Acura</a></li>
           <li><a href="l6ex2.html">Audi</a></li>
	   <li><a href="l6ex2.html">BMW</a></li>
	   <li><a href="l6ex2.html">Dacia</a></li>
	   <li><a href="l6ex2.html">Mercedes</a></li>
	   <li><a href="l6ex2.html">Opel</a></li>
        </ul>
</p>

	</div>

	<div data-role="footer">
<p>&copy; 2012</p>
	</div>
   </div>

</body>
</html>

Observatie

  • filtrul se adauga folosind atributul data-filter=”true”

Demo

V-am pregatit fisierul demo: Vizualizeaza DEMO .

Lectia 6 – Liste pentru site mobil

Adaugand atributul data-role=”listview” pentru o lista nesortata ( la eticheta <ul> ) , jQuery Mobile Framework transforma aceasta lista intr-una optimizata pentru mobil. Elementele din lista vor fi linkuri si se pot aplica efectele de tranzitie pentru a emula cat mai bine o aplicatie nativa mobil.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 6 - Liste pentru site mobil</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body> 

  <!-- PRIMA PAGINA -->
  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 6 - Liste pentru site mobil</h1>
	</div>

	<div data-role="content">
	<p> 
        <ul data-role="listview" >
	   <li><a href="l6ex2.html">Acura</a></li>
           <li><a href="l6ex2.html">Audi</a></li>
	   <li><a href="l6ex2.html">BMW</a></li>
        </ul>
</p>

	</div>

	<div data-role="footer">
	<a href="#pagina2" 
           data-transition="pop"
	   title="Du-te la pagina2">Pagina 2</a> 
	</div>
	</div>
   </div>

</body>
</html>

Observatii

  • pentru site-uri mobile vom folosi tot eticheta <ul>
  • pentru a activa optimizarile jQuery Mobile pentru liste se va adauga atributul data-role=”listview”

Demo

V-am pregatit fisierul demo: Vizualizeaza DEMO

Lectia 4 – Butonul „back”


In lectia 4 scriu despre butonul „back” . Motivul pentru care insist asupra butonului „back” este faptul ca la aplicatii mobile butonul „back” se afla in coltul stanga sus si utilizatorii pur si simplu sunt obisnuiti cu pozitia butonului. Bineinteles este posibil adaugarea unui buton personalizat, dar se poate si mai simplu cu jquery mobile framework. jQuery Mobile Framework ofera aceasta optiune, doar trebuie adaugat atributul data-add-back-btn=”true” la div-ul cu data-role=”page”.

<!DOCTYPE html>
<html>
    <head>
    <title>Lectia 4 - Butonul "back"</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
<body> 

  <!-- PRIMA PAGINA -->
  <div data-role="page" id="home">
	<div data-role="header">
	<h1>Lectia 4 - Butonul "back"</h1>
	</div>

	<div data-role="content">
	<p><center>"jQuery Mobile Framework ofera aceasta optiune, doar trebuie adaugat  atributul <strong>data-add-back-btn="true"</strong> la div-ul cu <strong>data-role="page"</strong>. "</center></p>

	</div>

	<div data-role="footer">
	<a href="#pagina2" 
           data-transition="pop"
	   title="Du-te la pagina2">Pagina 2</a> 
	</div>
	</div>
   </div>



  <!-- PAGINA LECTIA 2-->
  <div data-role="page" id="pagina2" data-add-back-btn="true">
	<div data-role="header">
	<h1>Pagina2</h1>
	</div>

	<div data-role="content">
	<p><center>"Bineinteles este posibil adaugarea  unui buton personalizat, dar se poate si mai simplu cu jquery mobile framework."</center></p>

	</div>

	<div data-role="footer">
	<a href="#home" 
           data-transition="pop"
           data-rel="back"
	   title="Inapoi la prima pagina">Inapoi</a> 
	</div>
   </div>

</body>
</html>

Observatii

  • in jQuery Mobile Framework, versiunea 1.1.0, afisarea implicita butonului „back” a fost dezactivata
  • butonul „back” clasic se activeaza adaugand atributul data-add-back-btn=”true”, vezi linia #33
  • se poate adauga functionalitatea „back” pentru un link adaugand atributul data-rel=”back”, vezi linia #46

Demo

V-am pregatit fisierul demo: Vizualizeaza DEMO