pasjaonline.pl
notebook-405755_1280
notebook-405755_1280
notebook-405755_1280
notebook-405755_1280
Wtorki z Front-Endem #2 | Nowości w HTML5
autor

Mariusz Szczerbal

date

Witajcie!

Dziś chciałbym się z Wami podzielić nowościami, które moim zdaniem wniosły wiele dobrego w świat Front-Endu za sprawą wprowadzenia HTML5. Nie zwlekam dalej i zapraszam do lektury!

 

Uproszczenie w znacznikach

Główną zaletą w tej nowości jest to, że podczas implementowania na przykład dodatkowych blibliotek, czy plików CSS nie trzeba podawać parametru type. Uproszczenie drobne, ale gdy będziemy mieli większy projekt, to na pewno zauważymy różnicę.

 

Dodatkowe atrybuty w formularzach

Z takowych atrybutów najbardziej utkwiły mi w pamięci required i autofocus. Nie otrzymują one żadnych właściwości, np:

<input type="text" name="firstname" required autofocus>

Do czego służą ? Pierwszy z nich, czyli required należy do tego, aby dać użytkownikowi do zrozumienia, że dane pole jest wymagane. Drugi odpowiada za to, żeby po załadowaniu strony, wybrane pole było możliwe do uzupełnienia (użytkownik nie musi dodatkowo na nie klikać). Autofocus możemy użyć tylko raz w danym formularzu.

 

Osobny input dla maili

Bolączka wielu koderów się skończyła. Nie trzeba tworzyć w JS własnych wyrażeń regularnych, żeby walidować w formularzu pola e-mail. Wystarczy w type wpisać e-mail i po kłopocie. Tyle czasu zaoszczędzone!

 

Możliwość implementowania pliku audio/video

Od najnowszej wersji HTML dostaliśmy prezent w postaci możliwości łatwego zagnieżdżania plików audio i video. Wystarczy użyć odpowiednich znaczników, np:

 <audio>
  <source src="example.ogg" type="audio/ogg">
</audio> 

Dla plików video jest bardzo podobnie:

 <video>
  <source src="example.ogg">
 </video>

Canvas

Rysowanie w HTML ? A jednak! Twórcy najnowszej wersji HTML postarali się o to, aby można było łatwo zamieszczać grafikę na stronce, ale i też samemu rysować kształty. Opcja bardzo fajna, ale poza samym HTML-em trzeba znać też choćby podstawy JavaScriptu. Jeżeli ktoś go nie umie, to najwyższa pora się nauczyć, aby w przyszłości korzystać z dóbr Canvas. :)

 

Geolokalizacja

Od teraz możecie łatwo implementować mapki Google na swojej witrynie. Wystarczy wkleić kod źródłowy, który wygeneruje dla Was Google Maps i voila! Jeżeli chodzi o podstawy prawne, to oczywiście zostaniecie poproszeni o potwierdzenie informacji, że chcecie udostępnić swoją pozycję.

 

Web Workers

Tutaj napiszę krótko. To rozwiązanie ma pomóc w zwiększeniu przepustowości strony. Jeżeli posiadamy dużo kodu JS, to Web Workery służą do wymuszenia wielowątkowości. Innymi słowy, stronka będzie chodziła szybciej. :)

 

Coś dla Webmasterów

HTML5 wprowadza nowe znaczniki, które twórcom stron ułatwią orientację. Są to:

  • <section> – może to być jakiś dział strony. W jego wnętrzu można umieścić divy
  • <header> – ten znacznik będzie odpowiadał za „górę” strony
  • <footer> – j.w. tyle, że za „dół” strony, czyli stopkę
  • <nav> – ułatwia nawigację, np: w menu głównym strony

 

 

 

  • Dawidek

    TERAZ GDY STRONA MA TROCHE MATERIAŁU MOŻE JĄ JAKOŚ ZAREKLAMUJECIE

  • http://albert221.cba.pl/ Albert221

    Artykuł bardzo słabej jakości. Źle stawiane znaki interpunkcyjne. Do tego sam content jest bardzo ubogi i nie mówi nic ciekawego. Bardzo dużo bardzo przydatnych rzeczy pominięte, chociażby dokładniejsze opisanie nowych atrybutów jak np. [required] czy [placeholder].