Tworzenie stron internetowych opiera się na fundamentalnym trio: HTML, CSS i JavaScript.
Trzy podstawowe języki, które są różne, działają w odmienny sposób, ale wzajemnie się uzupełniają. Razem stanowią integralną całość z punktu widzenia web developmentu. Krótko – jest moc!
Co jakiś czas, pojawiają się coraz to nowsze ich wersje z lepszymi możliwościami, funkcjonalnościami. W poniższym linku możecie zobaczyć, jak popularne strony wyglądały kiedyś dawno temu, takie tam ,,za górami za lasami” 🙂
http://www.telegraph.co.uk/technology/6125914/How-20-popular-websites-looked-when-they-launched.html
A teraz pokrótce.
HTML – Hypertext Markup Language
Najnowsza wersja to HTML5. Pewnie pisząc ogłoszenia, czy też przeglądając profile kandydatów, spotkaliście się już z tym nie raz.
Zastosowanie: pozwala tworzyć strukturę strony. To trochę, jak z wypracowaniem. Zgodnie z tym, co mówiła pani od polskiego, porządek musi być zachowany, konkretny schemat: tytuł, wstęp, rozwinięcie, zakończenie. Albo jeszcze inny przykład, każde mieszkanie też ma strukturę: pokój, kuchnia, łazienka, przedpokój, no i… balkon, niech będzie na bogato. A jak to sobie wszystko umeblujemy, jaki design, aranżacja, kolorystyka to już kwestia innego narzędzia – CSS, ale to za chwilkę.
HTML pozwala zatem nadać stronie odpowiednią strukturę. W każdej z części można dodać tekst, jednak całość wyglądałaby bez ,,polotu”, takie czarno białe czytadełko.
CSS – Cascading Style Sheets
Zastosowanie: odpowiada za projektowanie strony, nadaje czcionce styl, kolor, pozwala dodawać obrazki, zmieniać tło etc. Za pomocą tego języka specjalista sprawia, że strona staje się osobliwie piękna. Więc mamy już kolorowe czytadełko z obrazkami.
JavaScript
Język z bardzo ciekawą historią w tle. Polecam zerknąć w internety.
Zastosowanie: odpowiada za całą interaktywność na stronie. Wprawia ją w ruch. Mamy przyciski do klikania, pojawiają się okienka czatu etc. Pozwala nam wchodzić ze stroną w interakcje.
Podsumowując w jedym słowie:
- HTML —> struktura + treść
- CSS —> styl + wygląd
- JavaScript —> aktywność
Może odwołam się do przykładu. Coś bardziej dla Pań, coś z dzieciństwa. A co tam! Lalka Barbie.
W wersji tylko HTML – znaleziona gdzieś w kącie, z potarganymi albo obciętymi – zgodnie oczywiście z naszą dziecięcą inwencją twórczą – włosami, bez bucików, ubranek. Taka plastikowa a la Barbie, gdzie marzeniem były zginane rączki, czy nóżki.
W wersji HTML & CSS – w pełnym makijażu, ma już piękne ubranka, szpileczki no i uczesane włosy, takie długie rzecz jasna. Ciągle jednak plastikowa i statyczna.
W wersji HTML & CSS & JavaScript – oj, to już prawdziwa Barbie, iście amerykańska, żaden tam plastik, można zginać nóżki, do tego ma super samochód, którym może się poruszać. Podobno w 2015 roku na rynek trafiły zacne nowe modele, wyróżniające się giętkimi kostkami z prawdziwego zdarzenia, dzięki którym najsłynniejsza lalka świata może założyć płaskie buty. Taa… kie cuda! Powiedzmy… to w najnowszej wersji JavaScript 😉
Dobrze, to teraz coś bardziej uniwersalnego. Kiedyś znalazłam idealny obrazek przedstawiający owe różnice. Trochę zmodyfikowany, ale doskonale, jak dla mnie, oddaje istotę:
Z rekrutacyjnego punktu widzenia, dobrze jest rozeznać się w jakim stopniu dany specjalista wykorzystuje powyższe języki. Czy rozmawiamy z osobą, która jest biegła w projektowaniu stron, świetnie operuje CSS, zrobi cudo, czy może w programowaniu – strona wizualnie nas nie zachwyci, ale na pewno będzie wszystko działać na tip top? O tym więcej w następnym poście, czyli kto jest kim, gdy mowa o frontendzie.