Tydzień 41

Pierwsza „duża” strona www za mną. Projekt zrealizowany kompleksowo od koncepcji, przez realizację do oczekiwania na ostatnie materiały od klienta. Nigdy bym się nie domyślił, że przygotowanie materiałów na stronę może zajmować tyle samo, albo i więcej czasu od pisania kodu. Też tak masz?

Ogólnie z projektu jestem zadowolony. Jest to fajne podsumowanie tego, co do tej pory nauczyłem się o HTML i CSS. Java Script wykorzystałem tylko do galerii zdjęć i nie pisałem kodu sam, tylko ściągnąłem gotowca. Dwa razy podchodziłem do zoptymalizowania kodu JS na swoje potrzeby, ale za każdym razem okazywało się, że drobne modyfikacje w CSS załatwiają problem i JS nie trzeba zmieniać. Może to i dobrze, bo jak coś działa to po co przy tym grzebać? Najciekawsze jest to, że w projekcie było sporo fotek do wstawienia. Niby nic, ale każda fotka w innym rozmiarze, a kontener na fotki w jeszcze innym rozmiarze. To spowodowało, że musiałem się zaprzyjaźnić z GIMPem. Nadal nie umiem idealnie poskładać jednej fotki z pięciu, ale za to kadrowanie, skalowanie i lekki retusz mam w małym paluszku.

W tym tygodniu oprócz kodowania znalazło się też trochę miejsca na podsumowanie zdobytej do tej pory wiedzy. Trochę z przyzwyczajenia, a trochę z braku przemyślenia tematu na początku swoje notatki prowadziłem w zeszytach. Klasycznie, jak w szkole czy na studiach. W zasadzie to żaden problem, a niektórzy nawet pochwalą, że to pamięć mięśniowa, więc super świetnie. Niby tak, ale…

  • zauważyłem, że niektóre elementy zapisane mam kilka razy w różnych miejscach;
  • brak porządku w tych notatkach (elementy związane z JS mieszają się z HTML i CSS) to utrudnia szukanie odpowiedzi na pytania;
  • w zeszycie nie działa ctrl + F;
  • często używane zeszyty niszczą się szybko.

Wobec narastających problemów z zarządzaniem wiedzą postanowiłem przenieść notatki do świata cyfrowego. Nad narzędziem nie zastanawiałem się długo. W zasadzie znam dwa dobre narzędzia do przechowywania wiedzy: Evernote i Microsoft OneNote. Narzędzie od Microsoftu, według mnie, jest zdecydowanie lepszym wyborem. Posiada wszystkie zalety Evernota, ale do tego pozwala wrzucać linki wewnątrz sekcji, dzięki czemu wyszukiwanie informacji jest niezwykle proste. Co więcej aplikacja desktopowa jest dużo bardziej przyjemna w obsłudze.

Porządkując wiedzę znalazłem kilka stron z opisem znaczników html. Pomyślałem, ze fajnie będzie je tu wrzucić, bo okazują się być dość przydatne, a jakoś tak mniej popularne niż <div>, <p> czy <section>.

HTML5 oferuje możliwość umieszczenia na stronie multimediów w trzech znacznikach:

<iframe src=” “></iframe> bardzo często wykorzystywany do umieszczania video z serwisu YouTube;

<video controls width=””> <source src=” ” type=” “></video> pozwalający umieścić materiał video na stronie.

<audio controls><source src=””></audio> pozwalający umieścić na stronie materiał audio.

Prawo autorskie i swobodny dostęp do informacji był przedmiotem gorącej debaty w 2019 roku, ale w zasadzie sam nie wiem na czym stanęło. Można cytować inne strony na swojej stronie, czy nie można? W każdym razie, gdybyś potrzebował skorzystać z eleganckiego znacznika HTML do cytowania, to przyda Ci się na pewno <blockquote cite=””></blockquote> który właśnie do tego służy.

Strona www musi być responsywna. Co do tego nikt już nie ma wątpliwości. Wyzwaniem pozostaje ładowanie odpowiedniej wielkości zdjęć w zależności od wielkości ekranu użytkownika. Oczywistym wydaje się, że serwowanie zdjęć w wysokiej rozdzielczości na małe ekrany niepotrzebnie spowalnia ładowanie się strony. Na szczęście HTML oferuje znacznik <picture> w którym możemy określić, które pliki mają się załadować w zależności od wielkości ekranu np.:

<picture>
<source media=”(min-width: 1024px)” srcset=”wysoka_rozdzielczosc.jpg”>
<source media=”(min-width: 650px)” srcset=”srednia_rozdzielczosc.jpg”>
</picture>

Wspominając o zdjęciach warto też zaznaczyć, że poza popularnym formatem jpg czy png dostępny jest obecnie format wepb. Jest to format dużo lżejszy, a przy tym utrata jakości zdjęć jest akceptowalna.

To tylko kilka znaczników, których wykorzystanie na co dzień może pomóc. Samych znaczników jest oczywiście o wiele więcej. Tak naprawdę, to łatwo przekonać się na własnej skórze jak dużo jest znaczników html, z których nie korzystamy próbując zdać egzamin ewaluacyjny na LinkedIn 😉

W tym tygodniu pisanie kodu zajęło mi 17 godzin. W całości przeznaczone na tworzenie strony www. Czasu związanego z porządkowaniem notatek nie wliczam. W przyszłym tygodniu wracam do nauki JS.

No comments
Krzysztof NyrekTydzień 41

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *