projektowanie stron HTML5
grafika komputerowa
pozycjonowanie i reklama stron WWW

1
2
3
4

CO WYRÓŻNIA MOJE PROJEKTY:

  • Unikalna i atrakcyjna grafika.
  • Możliwość wdrożenia systemu
    zarządzania treścią CMS.
  • Pomyślna walidacja kodu HTML/CSS.
  • Zastosowanie najnowszych technologii.
  • Zooptymalizowana treść i grafika.
  • Przejrzystość i poprawność kodu.
9.2

Strona główna

Aktualności

Nowości w HTML5

Co nowego w najnowszym standardzie tworzenia witryn internetowych - HTML5?

  • Zmiana schematu strony.
  • Nowe znaczniki.
  • Obsługa miltimediów.
  • Nowości w obsłudze formularzy.
  • Łatwość wyświetlania w urządzeniach mobilnych.

ZMIANA SCHEMATU STRONY

Sekcja DOCTYPE oraz HEAD została znacząco zmieniona - ułatwiona. Każdy będzie w stanie teraz z pamięci napisać podstawową strukturę dokumentu w standardzie HTML5. Oto jak wygląda górna część dokumentu:

<!DOCTYPE html>
<head>
   <title>Tytuł strony</title>
</head>

W treści strony HTML5 zauważymy bardziej radykalne zmiany. Utworzono znaczniki zastępujące najczęściej używane przez projektantów stron divy, mowa o container, footer, nav itp.

Zamiast nich powstały ich odpowiedniki, pełniące jedynie funkcję semantyczną. Istotne jest to podczas tworzenia stron przeznaczonych również dla osób niewidomych. Poza tym Googlebot łatwiej będzie mógł określić która sekcja czego dotyczy.

Spójrz jak to wygląda w praktyce:

<header>Sekcja odpowiedzialna za nagłówek naszej strony</header>
<nav>
   <ul>
      <li><a href="./link1.php" title="">Link 1</a></li>
      <li><a href="./link2.php" title="">Link 2</a></li>
      <li><a href="./link3.php" title="">Link 3</a></li>
   </ul>
</nav>
<section>Nasz obszar roboczy</section>
   <article>
      <hgroup>
         <h1>Nowości w HTML5</h1>
         <div class="h2_arrow"></div><h2 class="h2_new">Czyli co daje nam nowy standard tworzenia stron.</h2>
      </hgroup>
      <p>Treść naszej sekcji tekstowej.</p>
   </article>
</section>

NOWE ZNACZNIKI

W najnowszym HTML pojawiło się wiele nowych znaczników. Ooprócz tych powyższych, które określają schemat strony HTML5 istnieją też inne bardzo ułatwiające pracę grafikom komputerowym i projektantom stron WWW.

http://webdeisgn.<wbr>grzegorzbielak.<wbr>pl/

Ten znacznik załamuje tekst w wybranym przez nas miejscu. Jest to niesamowcie przydatne, gdy długie frazy chccemy umieścić chcemy w bardzo wąskim obszarze.

<mark>To pole</mark> będzie zaznaczone na żółto.

Znacznik mark zaznacza nam wybrany tekst na żółto, służy to głównie to wytknięcia błędu [świadome] i podkreślenie jego znaczenia.

OBSŁUGA MULTIMEDIÓW

W HTML5 pojawiła się bardzo prosta i intuicyjna obsługa plików muzycznych oraz wideo. Wystarczy kilka linijek kodu.

<audio controls>
   <source src="../audio.mp3"/>
</audio>


<video src="../video.mp4" controls></video>

NOWOŚCI W OBSŁUDZE FORMULARZY

Na tą chwilę, czyli 20.02.2012 obsługa formularzy w przeglądarkach jest bardzo chwiejna. Jedna funkcja działa w Google Chrome, nie działa zaś w innych... Działa w Operze i Safari, nic z tego zaś w Chrome, IE czy Firefox'ie.

Nowych znaczników i operatorów jest bardzo dużo. Zainteresowanych zaprszam na stronę http://w3.org. Powiem tylko, że jesteśmy teraz w stanie obyć się nadmiernej ilości kodu JavaScript.

ŁATWOŚĆ WYŚWIETLANIA NA URZĄDZENIACH MOBILNYCH

Twórcy HTML5 znacznie poprawili wyświetlanie stron na urządzeniach mobilnych. Najciekawsze jest to, że zrobili to za pomocą jednej linii kodu w sekcji head.

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

Dzięki temu kodowi dajemy znać urządzeniom mobilnym, że nasza nie ma tych 800-950px szerokości i tekst na niej jest znacznie większy i bardziej przejrzysty.

Sądzę, że każdy projektant stron powinien zainteresować się HTML5, daje on duże możliwości, duże większe niż te opisane w moim artykule. Najważniejsze jest to, że jest on nieustannie rozwijany i powoli pojawia się na coraz większej ilości stron WWW. Bez wątpienia zastąpi on takie technologie jak HTML 4.1 czy np. Flash.