HTML5, czyli nowe możliwości tworzenia stron WWW


Data dodania: 4.02.2018, 10:11:43 Autor: Paweł Podkowa


Ostatnio postanowiłem dogłębnie przeanalizować możliwości jakie daje HTML5. Sprawdzałem jego użycie zarówno przy budowie zaplecza jak i frontu. Oczywiście dzisiaj strony wyglądają pięknie w porównaniu do stron internetowych, które jeszcze pamiętają cięcie obrazków i umieszczanie ich w tabelach :) - swoją drogą ciekawe jakby takie strony pozycjonowały się w Google, ale nie o tym ten wpis. 

HTML5 + JavaScript

Większość dzisiejszych stron - ich elementy graficzne są wyprodukowane w języku programowania - JavaScript. JavaScript daje nam możliwości pełnej kontroli HTML DOM po jego załadowaniu jak i w trakcie ładowania. Daje nam możliwości, aby nasza strona wchodziła w lepszą interakcję z użytkownikiem. HTML5 jest jakby stworzony pod JavaScript. Pisząc ostatnio back`end dla jednego z klientów postanowiłem skupić się bardziej na wykorzystaniu wszystkich funkcji jakie daje nam HTML5. 

Jedne mniej ważne drugiej więcej, ale na pewno dużo zależy od projektu jaki będziemy wykonywać. Ale skupmy się tutaj na JavaScript. Po pierwsze funkcja "contenteditable(true/false)". Funkcja nadaje możliwość edycji zawartości - tekstu w danym elemencie drzewa HTML. Dlaczego tak bardzo mi się spodobała? A no przy np. edycji "on live" powiedzmy tytułu wpisu na bloga. Normalnie używając technologii JavaScript i funkcji Ajax() musimy kodować dosyć sporo wydarzeń, np. on.Click później dodanie pola <input> w miejsce tekstu, przeładowanie tekstu do innerHTML of <input>, zastosować funkcję on.Blur znów przekopiować teksty i wrócić do pozycji wyjściowej usuwając <input> tag i znów kopiując tekst - sporo prawda ? Z pomocą przychodzi HTML5 ! Tutaj wystarczy nadać np. w danej komórce tabeli jej atrybut contenteditable='true' w tym momencie możemy po najechaniu i kliknięciu myszą nadpisywać tekst w niej zawarty. W przypadku gdy drzewo generowane jest na podstawie normalnego zastosowania PHP możemy użyć dodatkowo w tej komórce funkcji onBlur i zastosować własną funkcję np. save, czyli onBlur='save();'. W funkcji save robimy odczyt zawartości komórki $(this).text(); i przekazujemy ją do zapisu metodą POST do bazy danych przez funkcję Ajax(). Czyli tak naprawdę redukujemy 70% kodu javascript dzięki użyciu HTML5 ! Wspomnę jeszcze dla programistów, którzy generują tabelę po przez zapytanie i wynik funkcji Ajax(), wtedy musimy zastosować funkcję onBlur w samym javascripcie, aby odnosił się do danego ID po załadowaniu i zmianie drzewa DOM, $(document)....

To jedna z wielu możliwości jakie daje połączenie JavaScriptu i HTML5 mnie bardzo spodobało się osobiście redukcja kodu JavaScript, a brak straty funkcjonalności. Do wyżej wymienionego przykładu warto zastosować element biblioteki jQuery - jQuery colors. Daje ona możliwość animacji kolorami na drzewie DOM, np. mignięcie kolorem zielonym tła danej komórki. To sprawdza się po dodaniu jej do funkcji zapisu danych save(), tak aby użytkownik wiedział że wszystko poszło dobrze i dane zostały zapisane. Dlaczego tak? ponieważ contenteditable nie narzuca do drzewa tagu <input>, a więc użytkownik po niekąd nie widzi czy onBlur zadziałał, chociaż na upartego można dodać też funkcję onChange i zastosować jakiś CSS dla tej akcji. 

HTML5 i formularze

Kolejne ciekawe rozwiązanie zastosowane w html5, które daje mnóstwo commend inline jakie można wykorzystać przy programowania np. formularza kontaktowego na swojej stronie internetowej. Weźmy pod uwagę np. walidację poprawności wprowadzanych danych. Często widzi się na forach internetowych problem jaki sprawia początkującym użytkownikom jQuery Validation. Tutaj możemy oddać całą walidację pod HTML5 i nie mieć żadnego problemu z jej zakodowaniem do formularza. Niżej prezentuje przykład użycia funkcji HTML5 w prostym formularzu kontaktowym: 

            <div class="form">
              <div id="sendmessage">Twoja wiadomość została wysłana!</div>
              <div id="errormessage"></div>
              <form action="" role="form" id="kontakt" class="contactForm">
                <div class="form-group">
                  <input type="text" name="name" class="form-control" id="name" placeholder="Imię lub nazwa firmy" required minlength="4"  />
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" name="email" id="email" placeholder="Adres e-mail" required data-rule="email"  />
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Temat" required minlength="4" />
                </div>
                <div class="form-group">
                  <textarea class="form-control" name="message" rows="5" required minlength="10" placeholder="Wiadomość"></textarea>
                </div>
                <div class="text-center"><button type="submit" class="btn btn-primary">Wyślij!</button></div>
              </form>
            </div>

Walidacja w HTML5 jest tak prosta, że na pierwszy rzut oka to jej wcale nie widać w formularzu :) Oczywiście jest, użyto dwie funkcje: required oraz np. minlenght i to tyle :) Funkcje te wskazują jakie mają zostać użyte walidacje, dodatkowo można określić typ pola np. password albo email.  I to właśnie kolejny raz HTML5 zaoszczędza dużej ilości kodu javascript, a ponownie przy wysyłce takiego formularza JavaScript ogranicza się do użycia funkcji serialize(); i po prostu przekazania danych po przez POST funkcji Ajax() do skryptu odpowiedzialnego za wysyłkę maila. 

To tylko dwa zastosowania funkcji języka HTML5. Jest naprawdę ich cały ogrom i różnego rodzaju zastosowanie. Ostatnio bardzo popularne filmiki i inne video streamy także mają szerokie zastosowanie w HTML5, bo dają możliwość ładowania lekkiego typu player`ów co znacznie zwiększa wydajność stron. Flash po prostu był ciężki, a html5 to całkowicie inna bajka, wystarczy dodać źródło i włączyć opcje playera lub dodatkowe cechy jakie ma posiadać i to wszystko. 

HTML5 bardzo fajnie sprawdza się w pisaniu zaplecza, naprawdę polecam zagłębić się na inne ciekawe opcje jakie daje w połączeniu z JavaScriptem. Przede wszystkim pozycjonowanie stron internetowych z przejrzystym i lekkim kodem źródłowym to największa zaleta stosowania HTML5. Warto też przy tworzeniu stron internetowych pamiętać o formatowaniu kodu, kod powinien być poukładany kaskadowo. Zapraszam do dzielenia się przydatnymi dla was funkcjami HTML5 w komentarzach. 



Wszystkie wpisy