joi, 12 aprilie 2012

HTML 5 Media

Noile elemente media audio și video oferă posibilitatea integrării fișierelor audio și video în paginile web fără a folosi un Flashplayer sau diferinte plug-in-uri.
Aceste elemente pot fi stilizate cu CSS, integrate cu SVG și API-ul canvas și controlate cu Javascript.
Browserele care implementează elementele media HTML5 furnizează controale și aspect implicit pentru fiecare element.
Cea mai simplă sintaxă pentru adăugarea unui element media într-o pagină web este:
<audio src="fisier_audio"></audio>
<video src="fisier_video"></video>
Pentru a vedea efectiv elementul audio în pagina web, trebuie adăugat atributul boolean controls:
<audio src="fisier_audio" controls></audio>
Când vorbim despre tipuri de fișiere media, vorbim de fapt despre două componente separate: software-ul folosit pentru a codifica și decodifica informația audio sau video, adică codecul, și containerul care conține stream-ul media și informații despre modul în care data și metadata coexistă. Un exemplu de container open-source este Ogg, iar un execmplu de codec este VP8. Fișierele audio sunt containere care conțin, uzual, un singur tip de stream - cel audio, în timp ce fișierele video sunt containere care conțin două tipuri de stream-uri - audio și video.
Diferite browsere oferă suport pentru diferite formate audio, așa cum reiese din tabelul următor:
Pentru a asigura compatibilitate cross-browser și fallback pentru browserele mai vechi care nu suportă elementul audio, adăgarea elementului audio într-o pagină web ar trebui să se facă după următorul model:
<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg" />
  <source src="audiofile.ogg" type="audio/ogg" />
  <source src="audiofile.wav" type="audio/wav" />
  <p><a href="audiofile.mp3">Your audio file fallback</a></p>
</audio>
Tabelul următor prezintă suportul oferit de browserele moderne diferitelor formate video:
Pentru a asigura compatibilitate cross-browser și fallback pentru browserele mai vechi care nu suportă elementul video, adăgarea elementului video într-o pagină web ar trebui să se facă după următorul model:
<video controls>
   <source src="videofile.mp4" type="video/mp4" />
   <source src="videofile.webm" type="video/webm" />
   <iframe width="640" height="390"
             src="http://www.youtube.com/embed/YE7VzlLtp-4">
   </iframe>
</video>
În ambele exemple, atributul source permite enumerarea surselor audio/video în diferite formate. Fiecare browser va utiliza formatul pe care îl poate reda ignorând celelalte surse. În cazul elementului video, fallback-ul este realizat cu ajutorul unui video YouTube. O altă variantă este utilizarea unui player Flash sau a unui alt plug-in.


Atribute specifice elementelor media
  • controls - afișează controalele pentru playerul audio sau video integrat
  • src - specifică fișierul media utilizat (calea completă)
  • preload - cu valorile: none - fișierul media nu va fi încărcat până când userul nu apasă butonul play, auto - fișierul media va fi încărcat automat la deschiderea paginii (valoare implicită), metadata - va fi încărcat automat numai elementul metadata din fișierul media
  • autoplay - fișierul media va fi redat automat după ce a fost încărcat
  • loop - redarea fișierului este reluată în mod continuu
  • muted - fișierul media este redat fără sonor
  • mediagroup - permite gruparea mai multor fișiere media
Exemplul următor prezintă un fișier audio care este încărcat și redat în mod automat la încărcarea paginii. Elementul audio este invizibil și redarea este reluată în mod continuu:
<!DOCTYPE html>
<html>
<head>
<title>Repeating Audio</title>
<meta charset="utf-8" />
<style>
#background
{
   display: none;
}
</style>
</head>
<body>
   <audio id="background" autoplay loop>
      <source src="audiofile.mp3" type="audio/mpeg" />
      <source src="audiofile.ogg" type="audio/ogg" />
   </audio>
</body>
</html>


Atribute specifice numai elementului video
  • poster - oferă posibilitatea de a afișa o imagine statică în elementul video până când fișierul video este redat
  • width și height - stabilesc dimensiunile elementului video în pagina web
Exemplul următor prezintă un element video care are dimensiunile setate cu ajutorul atributelor width și height și care afișează o imagine statică cu ajutorul atributului poster:
<!DOCTYPE html>
<html>
<head>
<title>Birdcage</title>
<meta charset="utf-8" />
</head>
<body>
  <video controls width="640" height="480" poster="birdcageposter.jpg">
     <source src="birdcage.mp4" type="video/mp4" />
     <source src="birdcage.webm" type="video/webm" />
  </video>
</body>
</html>


Conversia fișierelor audio și video
Această secțiune prezintă câteva instrumente utile pentru a converti fișierele audio și video în diferite formate pentru diferite browsere și medii de redare.
  • Convertorul Free Mp3/Wma/Ogg - pentru conversia fișierelor audio, poate fi descărcat de la adresa http://www.freemp3wmaconverter.com/ .Convertorul poate lucra cu fișiere audio Ogg Vorbis, WMA și MP3 și poate converti simultan unul sau mai multe fișiere.
  • Convertorul Miro Video - pentru conversia fișierelor video poate fi descărcat de la adresa http://www.mirovideoconverter.com/    
  • Frame Grabber - un astfel de program permite vizualizarea unui video cadru cu cadru și selectarea unui cadru drept poster pentru video. Un astfel de program este Avidemux care poate fi descărcat de la adresa http://avidemux.sourceforge.net/   






vineri, 6 aprilie 2012

Formulare inteligente

HTML 5 introduce noi tipuri pentru câmpurile input dintr-un formular:
  • tel - pentru numere de telefon
  • search - pentru câmpuri de căutare
  • url - pentru o adresă url completă
  • email - pentru o adresă validă de email
  • datetime - pentru dată și timp în format UTC
  • date - numai data calendaristică
  • month - pentru luna din an
  • week - pentru săptămâna din an
  • time - pentru oră
  • number - pentru un n umăr întreg sau real
  • range - pentru o valoare numerică dintr-un anumit domeniu
  • color - pentru selectarea unei culori
La ora actuală cel mai bun suport pentru noile tipuri îl oferă browserul Opera, dar pentru compatibilitate și fallback există disponibile pe web numeroase pollyfill-uri.
Alături de noile tipuri au fost introduse noi atribute pentru câmpurile unui formular cum ar fi:
  • autofocus - la încărcarea formularului, focusul este poziționat pe elementul respectiv. Observație: pagina poate conține un singur element cu atributul autofocus setat
  • placeholder - un substitut pentru textul sau valoarea afișată în câmpul respectiv
  • required - indică un câmp care trebuie completat obligatoriu înainte de a trimite formularul către server
Au fost adăgate noi elemente pentru proiectarea formularelor:
  • meter - pentru a reprezenta grafic o măsură dintr-un domeniu de valori
Exemplu: - folosiți Opera sau Chrome pentru a vizualiza pagina de mai jos
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
<title>meter element</title>
<style>
.tt { font-family: monospace; }
</style>
<script>
window.onload = function() {
 var today = new Date();
 var m = document.getElementById("m");
 m.min = new Date(today.getFullYear(), 0, 1);
 m.max = new Date(today.getFullYear(), 11, 31);
 m.value = today;
 var op = document.getElementById("op");
 op.value = 
Math.round(100/(m.max-m.min)*(m.value-m.min));
}
</script>
</head>
<body>
<h1>Ce procent din acest an a trecut deja?</h1>
<h2>Text</h2>
<p><output id="op"></output> % din an.</p>
<h2>Noul element <span class="tt">meter</span></h2>
<meter value="0" id="m"></meter>
</body>
</html>
  • progress - pentru a reprezenta gradul de completare a unei operații
  • datalist - o listă de opțiuni predefinite afișată ca un meniu drop-down din care utilizatorul poate selecta o opțiune
Exemplu: - folosiți Opera pentru a vizualiza pagina de mai jos
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo datalist</title>
  </head>
  <body>
<form>
  <p>
  <label for="url">Goto</label>
  http://<input type="text" id="url" name="homepage" list="hompages" autofocus>
  <datalist id="hompages">
    <option value="www.google.com">
    <option value="www.microsoft.com">
    <option value="slashdot.org">
    <option value="wired.com">
  </datalist>
  <input type=submit
    onclick="window.location = 
    'http://'+document.getElementById('url').value; 
    return false;" >
</form>
</body>
</html>
  • output - un câmp care reprezintă rezultatul unui calcul
Exemplu:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Elementul output</title>
    <style>
      body { font-family: sans-serif; }
      table { border-collapse: collapse;  }
      table, td, th { border: 1px solid; padding: 10px;}
      output { background: lightgray; 
        padding-left: 0.5em; padding-right: 0.5em; }
      .num { text-align: right; }
    </style>
    <script>
function updateSum() {
  var ips = document.getElementsByTagName("input");
  var sum = 0;
  var prods = 0;
  for (var i=0; i<ips.length; i++) {
    if (ips[i].value > 0) {
      sum += ips[i].value * Number(document.getElementById(
        ips[i].name+"Price").innerHTML);
      prods += Number(ips[i].value);
    }
  }
  document.getElementById("sumProd").value = prods;
  document.getElementById("sum").value = sum;
  document.getElementById("sum").innerHTML = sum;
}
window.onload = function() { updateSum(); }
    </script>
  </head>
  <body>
<form oninput="updateSum();" method="get">
  <table>
    <tr><th>Produs</th><th>Pret (RON)</th><th>Cantitate</th></tr>
    <tr><td>Tastatura</td> <td class="num" id="i1Price">30.00</td>
<td><input name="i1" id="i1" type="number" min="0" value="0" max="99"></td></tr>
    <tr><td>Mouse</td> <td class="num" id="i2Price">26.50</td>
<td><input name="i2"  id="i2" type="number" min="0" value="0" max="99"></td></tr>
    <tr><td>Monitor</td> <td class="num" id="i3Price">564.50</td>
<td><input name="i3" id="i3" type="number" min="0" value="0" max="99"></td></tr>
  </table>
  <p>Cosul dumneavoastra contine <output name="sumProd" for="i1 i2 i3" id="sumProd"></output> produse. Suma totala:
    <output name="sum" for="i1 i2 i3" id="sum"></output>RON. </p>
    <input type="submit" value="Submit">
</form>
</body>
</html>
La adresa
http://html5.komplett.cc/code/chap_forms/support_en.html 
puteți studia un formular care folosește noile facilități prezentate mai sus. Pentru a beneficia de suport maxim, deschideți pagina cu browserul Opera.

Ce aduce nou HTML 5

Declarațiile DOCTYPE și charset sunt simplificate:
<!DOCTYPE html>
<meta charset="utf-8">
Observați că din DOCTYPE lipsește versiunea HTML în conformitate cu noua viziune prin care limbajul HTML este un limbaj viu, în continuă dezvoltare. Cele două declarații sunt obligatorii conform standardelor WWW3C.
Tot obligatoriu este și tagul title din secțiunea head a unei pagini web.


Tagul script este simplificat, atributul type putând fi omis deoarece Javascript s-a impus ca singurul limbaj de script client-side în lumea aplicațiilor web:
<script src="myscript.js"></script>


Tagul link pentru inserarea fișierele CSS este de asemenea simplificat, atributul type nemaifiind necesar pentru că limbajul CSS este singurul existent pentru editarea foilor de stiluri în cascadă:
<link rel="stylesheet" href="mystyle.css"/>


Au fost adăugate noi taguri pentru organizarea semantică a conținutului unei pagini web:
  • header pentru antetul unei pagini sau a unei secțiuni dintr-o pagină
  • footer pentru subsolul unei pagini sau a unei secțiuni din pagină
  • section pentru o secțiune din pagina web
  • article pentru un articol independent din pagina web (exemplu o postare pe blog)
  • aside pentru conținut înrudit sau citate
  • nav pentru navigarea în pagina web
Puteți studia un blog realizat cu ajutorul noilor taguri semantice la adresa:
http://html5.komplett.cc/code/chap_structure/blog_en.html
Puteți identifica noile taguri utilizate la crearea blogului la dresele:
header:  http://html5.komplett.cc/code/chap_structure/blog_areas_en.html#header
article:   http://html5.komplett.cc/code/chap_structure/blog_areas_en.html#article
footer:   http://html5.komplett.cc/code/chap_structure/blog_areas_en.html#footer
aside:    http://html5.komplett.cc/code/chap_structure/blog_areas_en.html#aside
Nu uitați că puteți vedea codul HTML care a generat pagina, fie făcând clic-dreapta pe gaină și alegând din meniul contextul Source sau View Source, fie alegând din meniul File al browserului Source sau Page Source (în funcție de browserul utilizat).


HTML 5 introduce noi modalități pentru selectarea elementelor din DOM-ul (Document Object Model) asociat paginii web pe baza clasei sau pseudo-clasei CSS  din care face parte elementul respectiv.
Funcția querySelector() returnează primul element din pagină care respectă regula CSS de selecție.
De exemplu, querySelector("input.error"); va returna primul element de tip input (dintr-un formular) care aparține clasei CSS numită error.
Exemplul următor folosește funcția querySelector() și pseudo-clasa CSS hover pentru a afișa textul din celula unui tablou asupra căreia planează mouse-ul:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demonstratie querySelector()</title>
  <style>
    td {
      border-style: solid;
      border-width: 1px;
      font-size: 300%;
    }
    td:hover {
      background-color: cyan;
    }
    #hoverResult {
      color: green;
      font-size: 200%;
    }
  </style>
</head>
<body>
  <section>
    <!-- creeaza un tablou cu 3 x 3 celule -->
    <table>
      <tr>
        <td>A1</td> <td>A2</td> <td>A3</td>
      </tr>
      <tr>
        <td>B1</td> <td>B2</td> <td>B3</td>
      </tr>
      <tr>
        <td>C1</td> <td>C2</td> <td>C3</td>
      </tr>
    </table>
    <div>Faceti clic pe buton, miscati mouse-ul peste celule tabelului, si apasati Enter pentru a identifica celula folosind <strong>querySelector('td:hover')</strong>.</div>
    <button type="button" id="findHover" autofocus>Gaseste elementul din pseudo-clasa 'td:hover' </button>
    <div id="hoverResult"></div>
    <script type="text/javascript">
      document.getElementById("findHover").onclick = function() {
        // gaseste celula din tablou peste care planeaza mose-ul
        var hovered = document.querySelector("td:hover");
        if (hovered)
           document.getElementById("hoverResult").innerHTML = hovered.innerHTML;
      }
    </script>
  </section>
</body>
</html>


Funcția querySelectorAll() returnează toate elementele din pagina web care respectă regula de selecție CSS. De exemplu, querySelectorAll("#results td"); va returna toate celulele dintr-un tablou care au id-ul results.
Exemplul următor utilizează această metodă pentru a afișa textul din celule unui tablou care au caseta de tip checkbox bifată:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Demonstratie querySelectorAll()</title>
  <style>
    td {
      border-style: solid;
      border-width: 1px;
      font-size: 200%;
    }
    #checkedResult {
      color: green;
      font-size: 200%;
    }
  </style>
</head>
<body>
  <section>
    <table>
      <tr>
        <td><input type="checkbox" name="A1">A1</td>
        <td><input type="checkbox" name="A2">A2</td>
        <td><input type="checkbox" name="A3">A3</td>
     </tr>
      <tr>
        <td><input type="checkbox" name="B1">B1</td>
        <td><input type="checkbox" name="B2">B2</td>
        <td><input type="checkbox" name="B3">B3</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="C1">C1</td>
        <td><input type="checkbox" name="C2">C2</td>
        <td><input type="checkbox" name="C3">C3</td>
      </tr>
    </table>
<br />
    <div>Selectati diferite checkbox-uri, apoi apasati butonul pentru a le identifica folosind querySelectorAll("*:checked").</div>
<br />
    <button type="button" id="findChecked" autofocus>Gaseste celulele seclectate</button>
    <div id="checkedResult"></div>
      <script type="text/javascript">
         document.getElementById("findChecked").onclick = function() {
         var selected = document.querySelectorAll("*:checked");
          var result = "Celule selectate sunt: ";
          for (var i = 0; i < selected.length; i++) {
            result += (selected[i].name + " ");
          }
          document.getElementById("checkedResult").innerHTML = result;
        }
      </script>
  </section>
</body>
</html>







Introducere in HTML 5


HTML 5 este un ansamblu de tehnologii pentru crearea RIA (Rich Internet Application). Principiile care stau la baza acestor tehnologii sunt:
  • Compatibilitate
  • Utilitate
  • Interoperabilitate
  • Accesibilitate
Principiul coordonator este  toate paginile web create anterior trebuie  rămână funcționale în HTML 5 și noile funcționalități, care nu sunt suportate de unele browsere, trebuie  decadă elegant, fără a afecta dramatic experiența utilizatorului.
HTML 5 pune accent pe separarea clară a unui aplicații web în trei layere:
  • Conținut: marcajul HTML
  • Aspect, formatat in CSS
  • Comportament, stablilit prin codul Javascript
Prin HTML 5 se înțelege atât marcajul HTML propriu-zis cât și ansamblul noilor API-uri ce pot fi utilizate pentru proiectarea aplicațiilor web. API este acronimul pentru Application Programming Interface - Interfața pentru Programarea Aplicațiilor. De obicei este vorba despre interfața dintre programele de aplicații și sistemul de operare, care stabilește în amănunt modul în care programele de aplicații pot apela (accesa) serviciile sistemului de operare sub care rulează.
Pricipalele API-uri relaționate cu tehnologia numită generic HTML 5 sunt:
  • Canvas (2D și 3D)
  • Geolocația
  • Microdata
  • Protocolul Websocket
  • Audia și video
  • Web Storage
  • Aplicații offline
  • Webworkers
  • Lucrul cu baze de date web
  • XMLHttpRequest de nivelul 2 (tehnologia AJAX)
Puteți consulta suportul oferit de browsere noilor funcționalități HTML 5 la adresa:
http://www.caniuse.com
Pentru a verifica suportul oferit de browserul dvs. curent, puteți accesa adresa:
http://www.html5test.com
Cel mai bun suport pentru noile funcționalități îl oferă, per ansamblu, browserul Opera, iar cel mai slab versiunile Internet Explorer mai vechi decât versiunea 9.0.


Software necesar
Deși este suficient un editor simplu de text, cum ar fi Notepad și un browser, ideal ar fi să testați noile facilități HTML5 în cât mai multe browsere: Opera, Safari, Internet Explorer, Chrome, Mozilla Firefox.
Pentru editare, vă recomand:
  •  Notepad++
  •  Aptana Studio
  •  Komodo Editor
  •  Wakanda Studio
Toate sunt gratuite și oferă autocomplete și suport pentru o multitudine de limbaje utilizate în crearea aplicațiilor web.
Deasemenea aveți nevoie de un server web pentru că unele aplicații nu pot fi rulate decât de pe server.
Dacă folosiți serverul IIS (integrat in Windows XP, Vista, Windows 7), fișierele html trebuie salvate în directorul C:\inetpub\wwwroot și lansate în execuție dintr-un browser cu adresa http://localhost/nume_fisier.html.
O altă variantă este instalarea serverului Apache și cea mai simplă opțiune este instalarea aplicației XAMPP care integerează serverul Apache, MySql, serverul de email Mercury și serverul ftp Filezilla. Dacă folosiți această variantă, fișierele html trebuie salvate în directorul C:\xampp\htdocs și lansate din browser ca mai sus. 
Personal, folosesc serverul IIS pentru aplicațiile HTML și serverul Apache pentru aplicațiile PHP și niciodată nu pornesc simultan ambele servere.
În plus, dacă aveți instalate ambele servere, XAMPP nu va funcționa pentru că ambele servere folosesc portul 80. O soluție este să deschideți fișierul de configurare C:\xampp\apache\conf\httpd.conf și să modificați portul în secíunile Listen și ServerName. De exemplu, eu am configurat cele două secțiuni să folosescă portul 90 astfel:
#Listen 0.0.0.0:90
#Listen [::]:90
Listen 90
respectiv:
ServerName localhost:90
În această situație, aplicațiile PHP le lansez în browser cu adresa http://localhost:90/nume_fisier.php.