Co to Open Web? (Otwarta sieć)

Ideą otwartasiec.pl jest promocja tzw. otwartych standardów sieciowych. O co chodzi? To łatwe! Jest to zbiór darmowych i ustandaryzowanych (działających wszędzie tak samo według zdefiniowanych algorytmów) technologii, dzięki którym budujemy współczesny internet. Zapewne słyszałeś i wiele razy używałeś HTMLa, CSS3 czy JavaScriptu. Mówimy o nich nieprzypadkowo - od kilku lat przeżywają one niesamowity rozkwit - są obecne w przeglądarkach, na serwerach, urządzeniach mobilnych i telewizorach. Uważamy, że rozwinęły się do tego stopnia, że powinieneś usłyszeć o ich niesamowitych możliwościach! Fantastyczne gry działające w przeglądarce, serwery pocztowe, edytory graficzne, zaawansowane systemy CMSowe, interaktywne strony internetowe, użyteczne i nowoczesne aplikacje dotykowe, i wiele innych - już dzisiaj możesz je stworzyć poznając tylko trzy nieskomplikowane technologie.

CSS3

Pamiętasz czasy, gdy do prostych animacji musiałeś uczyć się JavaScriptu lub podpinać bardzo ociężałe biblioteki, jak np. jQuery lub Prototype? A może kojarzysz żmudne wycinanie różnych wzorów i gradientów, by zrobić tło dla jakiegoś elementu strony? Zaokrąglone rogi? Tak, tak, mnóstwo trików dla różnych przeglądarek i kłębek nerwów. Zapomnij o tym, dziś CSS3 zapiera dech w piersiach i pozwala Ci czerpać radość z kodu. Oto, co może dzisiaj CSS3:

CSS gradients

Gradienty - tak popularne za czasów osławionego Web 2.0 sprawiały problemy głównie z powodu trudności w ich szybkiej modyfikacji. Developerzy byli zmuszeni do wycinania grafik i umieszczania ich w tłach elementów oraz pilnowania, czy aby na pewno grafika powtarza się w odpowiedni sposób. Na szczęście, dzięki CSS3 możemy z łatwością definiować gradienty za pomocą kilku linijek kodu, co znacznie przyspiesza pracę i ułatwia dokonywanie zmian w kodzie.

Border radius

Pamiętasz Web 2.0? Więc pewnie wiesz co to rounded corners. Często używane w projektach graficznych zaokrąglone rogi bywały prawdziwym problemem dla developerów, którzy zdani byli na technikę sliding doors. Na szczęście teraz jesteśmy w stanie osiągnąć ten efekt bez użycia jakichkolwiek grafik dzięki border radius.

Border image

Zapewne wielokrotnie myślałeś o tym aby ustawić ramkę dla elementu z własną grafiką. Właściwość border-image pozwala Ci użyć dowolnego pliku, pociąć go w odpowiednich proporcjach i dopasować poszczególne wycinki do ram wybranego elementu.

Box shadow

Kolejnym problemem, na który mógł się naciąć każdy front-end developer były wszelkiego typu cienie, zarówno na zewnątrz jak i wewnątrz elementów. Podobnie jak border-radius dzięki tej właściwości nie musimy polegać na grafikach. Możemy ustawiać cienie zarówno po lewej czy prawej stronie elementu jak i na górze czy na dole. Dodatkowo określamy stopień rozmycia cienia a także jego zasięg.

Font-face

Przez długi czas byliśmy ograniczeni do używania tych samych zestawów czcionek - reguła @font-face pozwala nam na użycie dowolnej czcionki poprzez podanie lokacji pliku. W zasadzie tą samą funkcjonalność oferują nam serwisy typu TypeKit lub Google Fonts - poprzez załączenie pliku JavaScript i kilku linijek CSS możemy śmiało korzystać z oferowanych bibliotek czcionek.

Selectors

CSS Transitions

CSS Transforms

Multi-column layout

Przyszłość CSS

HTML5

Nowe atrybuty

Atrybuty formularzy

Nowe elementy wprowadzone do specyfikacji HTML 5

Sections

Grouping content

Text-level semantic

Embedded content

Interactive elements

Forms

Przydatne linki

JavaScript

W ciągu ostatnich lat JavaScript błyskawicznie przebył długą drogę od prostego języka używanego np do walidacji forumarzy czy manipulacji drzewem dokumentu ( DOM ) do poważnego, pełnoprawnego języka, którego można używać zarówno po stronie klienta jak i na serwerze.

Aktualnie JavaScript to nie tylko rozbudowane apilacje webowe, ale także gry w przeglądarce w użyciem elementów Canvas czy SVG, wykorzystanie komunkacji, obsługa urządzeń dotykowych/mobilnych, aplikacje w systemach operacyjnych ( Windows 8 ), wydajne rozwiązania po stronie serwera ( Node JS ) i wiele innych...

Co teraz możesz zrobic wykorzystując JavaScript?

Dobra znajomość JavaScriptu to przedewszystkim umiejętność pisania czystego kodu

Podstawowe zagadnienia:

Design patterns:

Community resources:

Nowe funkcje:

Serverside JavaScript:

Przyszłość JavaScript:

Community

Badges

Platform

Tools

Rozwój w oparciu o Open Web to nie tylko szereg standardów i interfejsów programistycznych. W skład zestawu każdego dobrego programisty (developera?) wchodzi zwykle szereg narzędzi, które pozwalają przyspieszyć jak i uporządkować pracę nad projektem. Narzędzia takie są niezbędne przy dużych projektach, ale pozwalają także na znaczne przyspieszenie pracy przy mniejszych aplikacjach. Od tego w jakim stopniu opanujesz dane narzędzie będzie często zależeć wydajność Twojej pracy. Poświęć wiec nieco energii by dobrać odpowiedni ich zestaw, dzięki któremu Twoja praca zyska na szybkości jak i jakości.

Będąc w zgodzie z ideą Otwartej Sieci nie narzucamy Ci żadnych rozwiązań czy poszczególnych narzędzi. Każdy z nas zawsze dobiera je tak, by były zgodne z indywidualnymi preferencjami. Pragniemy jedynie zaznaczyć, że niektóre z nich zdobyły szerokie uznanie wśród społeczności, a więc prawdopodobnie zasługują także na Twoją uwagę.

Należy rownież pamiętać, że technologie webowe rozwijają się z dnia na dzień. Poszczególni producenci przeglądarek prześciagają się w implementacji nowych funkcjonalności. Skutkiem tego mogą być problemy z kompatybilnością twojego kodu pomiędzy przeglądarkami (i ich wersjami). Społeczność skupiona wokół front-endu jest jednak bardzo aktywna i stworzyła szereg narzędzi ułatwiających prace nad przenośnym kodem (Compass, Can I use, Modernizr).

Bycie dobrym programistą Open Webu to nie tylko znajomość standardów i języków programowania. To także znajomość dobrych praktyk w danej dziedzinie. Tworząc kolejne projekty zauważysz, że duża część Twojego kodu HTML i CSS powtarza się (zwróć uwagę na HTML5Boilerplate i Bootstrap). Jeśli struktura Twoich plików CSS zaczyna być trudna w utrzymaniu, a kod zaczyna przypominać senne koszmary, może powinieneś sprawdzić czy projekt Sass, lub metodyki takie jak OOCSS lub BEM nie rozwiązałby części z Twoich problemów.

Autorzy