Dobre i złe praktyki kodowania w CSS czyli...
zostań nindżą CSS już dziś*!
*satysfakcja z udziału w prezentacji ani zwrot pieniędzy nie są gwarantowane
- jak tworzyć testowalne aplikacje stosując wzorzec Dependency Injection (bez frameworków!).
- jak node.js pomógł rozwiązać problemy kulturowe a programiści przestali nadużywać Single Page App'y
- jak komunikować się po HTTP z niestabilnymi mikrousługami
- jak automatyzować infrastrukturę Heroku z użyciem kodu JS
Carly Rae Jepsen pomoże mi wytłumaczyć dlaczego nie używamy callbacków.
A na koniec zdradzę dlaczego jestem gruby od tego JS.
Dobre i złe praktyki kodowania w CSS czyli...
zostań nindżą CSS już dziś*!
*satysfakcja z udziału w prezentacji ani zwrot pieniędzy nie są gwarantowane
- jak tworzyć testowalne aplikacje stosując wzorzec Dependency Injection (bez frameworków!).
- jak node.js pomógł rozwiązać problemy kulturowe a programiści przestali nadużywać Single Page App'y
- jak komunikować się po HTTP z niestabilnymi mikrousługami
- jak automatyzować infrastrukturę Heroku z użyciem kodu JS
Carly Rae Jepsen pomoże mi wytłumaczyć dlaczego nie używamy callbacków.
A na koniec zdradzę dlaczego jestem gruby od tego JS.
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPMariusz Szatkowski
Wprowadzenie do WordPressa - o co chodzi w tym CMS, liczby, statystyki, dlaczego warto, dlaczego Wordpress, a nie inny CMS?
Więcej na http://trojmiasto.us
BŁYSKAWICZNE TWORZENIE META BOXES, USTAWIEŃ, WIDGETÓW I FRONT-ENDOWYCH FORMULARZY Z WYKORZYSTANIEM FRAMEWORKA PIKLIST
WordPress pozwala na tworzenie własnych pól, meta boxes, widgetów i wielu, wielu innych rzeczy. Bywa to jednak uciążliwe, zwłaszcza, gdy potrzebujemy zrobić to szybko i bezboleśnie. Z pomocą przychodzi Piklist – framework, dzięki któremu za pomocą kilku linijek kodu dodamy własne, w pełni funkcjonalne pola z walidacją zapakowane w elegancki meta box, stworzymy pełnoprawny widget lub stronę ustawień. Dodawanie złożonych, powtarzalnych pól lub ładowanie plików nie stanowi dla niego najmniejszego problemu. Piklist jest rozwiązaniem wartym uwagi każdego developera WordPress – działa z motywami i wtyczkami. Jest bardzo lekki, przez co z powodzeniem może być wykorzystany w projekcie każdej wielkości.
WordCamp - Gdynia 2016
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia sza...Piotr Nalepa
Prezentacja na temat automatyzacji zadań w procesie tworzenia stron opartych na Joomla! W prezentacji zostały przedstaiwone sposoby automatyzacji w oparciu o Grunt.js oraz zostały pokrótce omówione możliwości tego rozszerzenia. Prezentacja była przedstawiana na JUG Silesia w dniu 14-go grudnia 2013, w Katowicach.
Co to jest WordPress? Czym jest potęga WordPressa? Dla kogo jest WordPress i kto go używa? Jaka jest różnica między WordPress self-hosted a WordPress.com?
Autorką slajdów tej przentacji jest Agnieszka Bury z Webfaces.pl - prezentacja została przygotowana na warsztaty z WordPressa dla Geek Girls Carrots w Krakowie.
Dane precentowe zostały zaktualizowane.
WordUp Łódź - Bedrock - jak przyspieszyć developmentInterSynergy
Szymon Kapturkiewicz w swojej prezentacji „Bedrock – pleśniowe sery kontra lasery – jak przyspieszyć development” opowiedział o wykorzystaniu narzędzia Bedrock do super-szybkiego stawiania instancji WordPressa, zarządzania wersjami wtyczek i automatyzacji deploymentu.
Czym jest Long Tail i na czym polega Long Tail SEO.
Od czego zależy wielkość długiego ogona w SEO.
Jak rozwijać długi ogon w WordPressie.
Skąd czerpać pomysły na publikację.
WordUp Łódź - Sage - Twoje szablony będą jak supermodelkiInterSynergy
Wojciech Walczak w prezentacji „Sage – twoje szablony będą od dziś jak supermodelki” przybliżył tworzenie szablonów do WordPressa w oparciu o szablon startowy Sage, który w łatwy sposób pozwala na zarządzanie bibliotekami front-endowymi, optymalizację kodu CSS i JavaScript oraz wprowadza przejrzystszą strukturę plików i kilka ułatwiających życie klas.
Permanentna inwigilacja. Podstawy analityki w WordPressieTomasz Kołkiewicz
Po co nam ta cała analityka, jak wdrożyć śledzenie w WordPressie, jakie pluginy ułatwią komunikację z Google Analytics, jak monitorować i podnosić aktywność użytkowników na stronie, jak właściwie interpretować współczynnik odrzuceń również na stronach typu OnePage. A na deser smaczny case z bloga kulinarnego, gdzie widać, jak można obniżyć współczynnik odrzuceń z ponad 65% do poniżej 1% i wydłużyć 3-krotnie czas odwiedzin.
4Developers 2015: Frameworki jee vs cross-site scripting (xss) - Piotr BuckiPROIDEA
Speaker: Piotr Bucki
Language: Polish
Celem wykład jest pokazanie na czym polega atak XSS i jakie są jego rodzaje oraz dostępne zabezpieczenia w popularnych frameworkach Java. Wykład jest przeznaczony dla osób tworzących aplikacje korzystając z WEBowych frameworków Java.
XSS (Cross-site scripting) jest rodzajem ataku na użytkownika serwis WWW, który polega na wykonaniu kodu przygotowanego przez atakującego (zazwyczaj JavaScript, ale także AciveX, Flash czy Silverlight) w przeglądarce ofiary.
4Developers: http://4developers.org.pl/pl/
This article discusses 10 thoughts on entrepreneurship from commencement speeches, including advice to take risks, think differently, solve problems creatively, embrace failure as learning experiences, and pursue work that inspires passion. Graduates are encouraged to start their own businesses and change the world through entrepreneurship.
The document discusses a new media platform called IVN that aims to provide a non-partisan space for communication between voters, civic leaders, and journalists. IVN sees traditional media as stuck in partisan "red vs blue" thinking and communication with voters as indirect. IVN aims to be different by offering an unfiltered platform that connects a diverse range of political viewpoints directly with voters. It provides editorial services, broad exposure, and targeted readership for contributors while maintaining etiquette standards of respect, substantiated sources, and no partisan attacks.
Wordpress dla początkujących szkolenie / warsztat 01/10 Wprowadzenie do WPMariusz Szatkowski
Wprowadzenie do WordPressa - o co chodzi w tym CMS, liczby, statystyki, dlaczego warto, dlaczego Wordpress, a nie inny CMS?
Więcej na http://trojmiasto.us
BŁYSKAWICZNE TWORZENIE META BOXES, USTAWIEŃ, WIDGETÓW I FRONT-ENDOWYCH FORMULARZY Z WYKORZYSTANIEM FRAMEWORKA PIKLIST
WordPress pozwala na tworzenie własnych pól, meta boxes, widgetów i wielu, wielu innych rzeczy. Bywa to jednak uciążliwe, zwłaszcza, gdy potrzebujemy zrobić to szybko i bezboleśnie. Z pomocą przychodzi Piklist – framework, dzięki któremu za pomocą kilku linijek kodu dodamy własne, w pełni funkcjonalne pola z walidacją zapakowane w elegancki meta box, stworzymy pełnoprawny widget lub stronę ustawień. Dodawanie złożonych, powtarzalnych pól lub ładowanie plików nie stanowi dla niego najmniejszego problemu. Piklist jest rozwiązaniem wartym uwagi każdego developera WordPress – działa z motywami i wtyczkami. Jest bardzo lekki, przez co z powodzeniem może być wykorzystany w projekcie każdej wielkości.
WordCamp - Gdynia 2016
ZOSTAŃ NINJA JOOMLA! DEVELOPEREM Automatyzacja zadań w procesie tworzenia sza...Piotr Nalepa
Prezentacja na temat automatyzacji zadań w procesie tworzenia stron opartych na Joomla! W prezentacji zostały przedstaiwone sposoby automatyzacji w oparciu o Grunt.js oraz zostały pokrótce omówione możliwości tego rozszerzenia. Prezentacja była przedstawiana na JUG Silesia w dniu 14-go grudnia 2013, w Katowicach.
Co to jest WordPress? Czym jest potęga WordPressa? Dla kogo jest WordPress i kto go używa? Jaka jest różnica między WordPress self-hosted a WordPress.com?
Autorką slajdów tej przentacji jest Agnieszka Bury z Webfaces.pl - prezentacja została przygotowana na warsztaty z WordPressa dla Geek Girls Carrots w Krakowie.
Dane precentowe zostały zaktualizowane.
WordUp Łódź - Bedrock - jak przyspieszyć developmentInterSynergy
Szymon Kapturkiewicz w swojej prezentacji „Bedrock – pleśniowe sery kontra lasery – jak przyspieszyć development” opowiedział o wykorzystaniu narzędzia Bedrock do super-szybkiego stawiania instancji WordPressa, zarządzania wersjami wtyczek i automatyzacji deploymentu.
Czym jest Long Tail i na czym polega Long Tail SEO.
Od czego zależy wielkość długiego ogona w SEO.
Jak rozwijać długi ogon w WordPressie.
Skąd czerpać pomysły na publikację.
WordUp Łódź - Sage - Twoje szablony będą jak supermodelkiInterSynergy
Wojciech Walczak w prezentacji „Sage – twoje szablony będą od dziś jak supermodelki” przybliżył tworzenie szablonów do WordPressa w oparciu o szablon startowy Sage, który w łatwy sposób pozwala na zarządzanie bibliotekami front-endowymi, optymalizację kodu CSS i JavaScript oraz wprowadza przejrzystszą strukturę plików i kilka ułatwiających życie klas.
Permanentna inwigilacja. Podstawy analityki w WordPressieTomasz Kołkiewicz
Po co nam ta cała analityka, jak wdrożyć śledzenie w WordPressie, jakie pluginy ułatwią komunikację z Google Analytics, jak monitorować i podnosić aktywność użytkowników na stronie, jak właściwie interpretować współczynnik odrzuceń również na stronach typu OnePage. A na deser smaczny case z bloga kulinarnego, gdzie widać, jak można obniżyć współczynnik odrzuceń z ponad 65% do poniżej 1% i wydłużyć 3-krotnie czas odwiedzin.
4Developers 2015: Frameworki jee vs cross-site scripting (xss) - Piotr BuckiPROIDEA
Speaker: Piotr Bucki
Language: Polish
Celem wykład jest pokazanie na czym polega atak XSS i jakie są jego rodzaje oraz dostępne zabezpieczenia w popularnych frameworkach Java. Wykład jest przeznaczony dla osób tworzących aplikacje korzystając z WEBowych frameworków Java.
XSS (Cross-site scripting) jest rodzajem ataku na użytkownika serwis WWW, który polega na wykonaniu kodu przygotowanego przez atakującego (zazwyczaj JavaScript, ale także AciveX, Flash czy Silverlight) w przeglądarce ofiary.
4Developers: http://4developers.org.pl/pl/
This article discusses 10 thoughts on entrepreneurship from commencement speeches, including advice to take risks, think differently, solve problems creatively, embrace failure as learning experiences, and pursue work that inspires passion. Graduates are encouraged to start their own businesses and change the world through entrepreneurship.
The document discusses a new media platform called IVN that aims to provide a non-partisan space for communication between voters, civic leaders, and journalists. IVN sees traditional media as stuck in partisan "red vs blue" thinking and communication with voters as indirect. IVN aims to be different by offering an unfiltered platform that connects a diverse range of political viewpoints directly with voters. It provides editorial services, broad exposure, and targeted readership for contributors while maintaining etiquette standards of respect, substantiated sources, and no partisan attacks.
The document discusses the benefits of exercise for mental health. Regular physical activity can help reduce anxiety and depression and improve mood and cognitive function. Exercise causes chemical changes in the brain that may help protect against mental illness and improve symptoms.
Ways my media product uses develop and challanges media conventionsentwistlesophie8064
My media product fits conventions of real magazines in several ways. The front cover includes a skyline, date, slogan, and barcode placement consistent with magazines. The contents page follows the magazine's house style and features an image related to an article. The double page spread lays out text in columns around a model, with a large bold title above the text, mirroring other magazine interviews. The language used relates to the target audience.
Hukum perburuhan mengatur hubungan antara pengusaha dan pekerja. Terdiri dari peraturan tertulis dan tidak tertulis. Sejarahnya mengalami perubahan besar pasca reformasi dengan diberlakukannya tiga undang-undang baru tentang serikat buruh, ketenagakerjaan, dan penyelesaian perselisihan hubungan industrial.
The document discusses a proposed scholarship program called APSSP aimed at increasing retention and graduation rates of low-income freshmen at the University of Florida Institute of Technology (UFIT). APSSP would provide students with tuition, housing, meals, tutoring, and a monthly allowance. It aims to give students enough support to become persistent and succeed academically and socially. The program boasts positive retention, graduation, and recruitment rates for UFIT. Its yearly budget of $100,000 primarily supports students through scholarships and pays personal tutors.
Training and development is an educational process that allows people to learn new skills and information. There are various types of training like job training, safety training, and promotional training. Training methods include classroom programs, coaching, mentoring, simulations and on-the-job training. Companies provide training to maintain quality, reduce costs, and improve communication between employees.
Tesol summer institute 2014 giving student feedbackTelly J Hajny
The document provides 20 tips for teachers to effectively give feedback to students. It begins with an introduction explaining the importance of feedback and defining what constitutes feedback. The bulk of the document is dedicated to listing the 20 tips, such as ensuring feedback is timely, focused on specific skills or knowledge, and encourages further improvement. It also recommends asking students for self-reflection and peer feedback. The document concludes by emphasizing feedback should create a positive learning experience for students.
This document provides an overview of Storm, including its basic components like topologies, streams, spouts, and bolts. It explains how Storm guarantees message processing through mechanisms like acknowledgements and anchors tuples to ensure messages are reprocessed if failures occur. Key aspects covered include the lifecycle of a tuple as it flows through a topology from a spout to being fully processed, and how Storm uses tuple anchoring and acknowledgements to track processing and handle failures.
Teks tersebut merangkum konsep dasar teknik tenaga listrik, termasuk jenis-jenis arus listrik, sistem tenaga listrik, komponen pengubah energi seperti generator dan motor, konsep induksi magnetik dan elektromagnetik, baterai, serta prinsip kerja generator dan motor arus searah dan bolak-balik.
Bagaimanakah kesan teknologi media dapat membantu pengajaran dan pembelajaran...Nik Mohamad Al-Fazil
Teknologi media memainkan peranan penting dalam pengajaran dan pembelajaran. Ia mampu meningkatkan keberkesanan pengajaran guru dan memudahkan pelajar memperoleh maklumat. Teknologi media seperti video dan perisian persembahan elektronik seperti PowerPoint berupaya menyampaikan maklumat secara visual dan interaktif.
Dokumen tersebut membahas tentang teknologi komunikasi dan informasi khususnya penggunaan Microsoft Power Point 2007. Terdapat penjelasan mengenai standar kompetensi dan kompetensi dasar, peta konsep, indikator, materi pelajaran membuat tabel, grafik dan diagram organisasi menggunakan Power Point dan kunci jawaban untuk soal uji kompetensi.
Projektowanie stron www dla ngo i projektow eko - case studyKrakweb
Case study projektu strony "Biogazownia rolnicza - sprawa publiczna”: www.gmina.bio-gazownie.edu.pl. Najważniejsze zasady, którymi kierujemy się w naszej pracy, to: przejrzysty budżet, nieprzekraczalne terminy i gwarancja wsparcia technicznego. Zapoznaj się z kolejnymi etapami realizacji zadania, dobrymi praktykami w relacjach z klientem oraz danymi technicznymi.
Spróbujemy odpowiedzieć na pytanie: Jaki framework będzie dla nas najlepszy? Opowiem dlaczego to pytanie jest takie ważne oraz o tym czego potrzebujemy by znaleźć na nie odpowiedz, która wcale nie jest taka trywialna.
Web Dev Insider prezentuje: nowości ze świata wydajności frontendu. Nowinki, nowe narzędzia i techniki optymalizacji - przydatne z perspektywy techniczego SEO oraz front-end developmentu.
Praktyczne przykłady optymalizacji frontendu, które warto znać w 2023 roku. Od wydajności JS, metryki INP, rekalkulację styli po frameworki przyjazne wydajności.
Sidebary, Widgety, Motywy, HTML5+CSS3, Responsywność. strona internetowa dostosowująca się do rozdzielczości urządzenia na jakim jest oglądana (dosłownie wrażliwa na jego rozdzielczość). Technika tworzenia stron responsywnych polega na tworzeniu paru wersji strony dostosowanej do różnych rozdzielczości. Podczas wczytywania strony lub zmiany jej rozdzielczości strona responsywna sprawdza aktualną rozdzielczość i dostosowuje się do niej poprzez wczytywanie odpowiednich wersji grafik oraz innych elementów. Często w stronach responsywnych inaczej zorganizowane są elementy nawigacji.
Więcej na http://trojmiasto.us
O zagadnieniu:
Czy następuje taki moment w życiu programisty, kiedy może on stwierdzić, że jego warsztat jest już doskonały? Nie, jeżeli pracuje w technologiach internetowych. Ta dziedzina informatyki rozwija się w niesamowicie szybkim tempie, a stworzone wczoraj rozwiązania warto stosować już dziś!
Cel i korzyści spotkania:
Podczas spotkania słuchacze poznają aktualnie wykorzystywane technologie oraz kluczowe umiejętności w produkcji aplikacji internetowych, jak również metody programowania ekstremalnego i techniki zwinnego wytwarzania oprogramowania. Osobom, które dopiero zaczynają swoją przygodę z web development, zostanie przedstawiona propozycja działań, których sumienne podjęcie się gwarantuje odniesienie sukcesu zawodowego.
PRZEGLĄD NARZĘDZI W WARSZTACIE OTWARTEGO NAUKOWCAArtur Gunia
Głównymi założeniami otwartej nauki są: 1) otwarta metodologia, 2) otwarte oprogramowanie (a przynajmniej, jak najmniej komercyjne), 3) otwarte dane, 4) otwarty dostęp, 5) Open Peer Review, oraz 6) otwarte zasoby edukacyjne. By sprostać założeniom otwartej nauki i tym samym prowadzić, jak najlepsze badania replikujące wcześniejsze wyniki potrzebujemy narzędzi informatycznych. Oczywiście ideałem byłyby programy o otwartym kodzie źródłowym (open source), jednak nie zawsze jest to możliwe. Niemniej dysponujemy szeregiem darmowego i opartego o otwarte standardy oprogramowania, które możemy wykorzystać w naszym warsztacie badawczym. W trakcie mojego wystąpienia chciałbym skupić na tych rozwiązań, które szczególnie są przydatne w badaniach z zakresu nauk społecznych. Przede wszystkim pragnę zademonstrować informatyczne narzędzia: przetwarzania i analizy danych, pracy grupowej i umożliwiające otwarte upowszechnianie wyników badań.
Django jest webowym framework napisanym w Pythonie skierowanym do wymagających dostawców treści planujących szybki rozwoju aplikacji.
Django powstało dla szybko rozwijającego się, dynamicznego portalu z newsami. Musiał się on zmierzyć z dwoma zadaniami: dotrzymywaniem krótkich terminów redakcji i spełnianiem surowych wymagań autorów -- doświadczonych developerów webowych. Django pozwala na budowanie wydajnych i eleganckich aplikacji internetowych w krótkim czasie.
Prezentacja z webinaru: https://www.youtube.com/watch?v=K_zRugiNpGY
Poruszane tematy:
- Audyty wydajności stron w raportach SEO - dlaczego większość robi to źle?
- Co mówią nam komponenty LCP
- Czym jest interfejs Speculation Rules i jak wpływa na TTFB, LCP i CLS?
- Przykłady systemów RUM
- Proces optymalizacji wydajności interakcji
- Przykłady optymalizacji interakcji względem wskaźnika INP (zoptymalizujemy Cookie Consent Banner, analitykę uruchamianą przez Google Tag Manager, długo wykonujące się zadania przez Javascript i wiele innych)
5. „responsive” wg Oxford Dictionary
reacting quickly and positively
quickly - at a fast speed; rapidly
http://oxforddictionaries.com/definition/english/responsive
6. WNIOSEK #1
responsive to nie tylko:
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
33. kto mało pyta (serwer o zasoby),
nie błądzi
● mniej plików graficznych
● mniej plików .css
● mniej plików .js
34. mniej obrazków
● kod CSS3 zamiast <img>
http://css3generator.com/
http://www.cssmatic.com/
● data URIs zamiast <img>
{background: url(data:image/gif;base64,R0lGODlh...)}
https://github.com/nzakas/cssembed
http://dataurl.net/
● image sprites
{background-position: -450px -300px}
38. Mniej HTML
● mniej obiektów DOM
<div><ul><li>... </li></ul></div>
● preg_replace
return preg_replace('/[ ]{2,}/', ' ', preg_replace('/[nrt]{1,}/', '', $html));
● <a href=”http://www.domain.com”>foo<a/>
39. Mniej transferu
● cache-controll
ExpiresByType image/gif "access plus 1 month"
● kompresja zlib
php_flag zlib.output_compression on
● statyczna treść na subdomeny, najlepiej kilka
● SSL
● lazyloading
● header 301
43. Mniej bajerów*
animacja w JS
=
większe obciążenie CPU
=
większy pobór mocy
=
krótsze życie baterii
*animacje w CSS są OK
{-webkit-transition: background-color .4s linear;}
47. Czego dziś się dowiedzieliśmy?
● responsive == quick
● Strona www i przeglądarka ~ Audycja i TV
● Nope.
● Mniej jpg, css, js, html
● XI. optymalizuj, kompresuj i cache'uj
49. Dziękuję za uwagę
kto mało pyta, nie błądzi
Jakub Wiśniewski - j.w.wisniewski@gmail.com
Responsive Web Design
Editor's Notes
Witam wszystkich Nazywam się Jakub Wiśniewski Opowiem dziś wam trochę o Responsive Web Design Wbrew podtytułowi zachęcam wszystkich do zadawania pytań Znaczenie podtytułu wyjaśni się w trakcie prezentacji
| Na początek krótko przedstawię znaczenie słowa „responsive” |Dalej powiemy sobie trochę o konsumpcji |Jesli ktoś w trakcie prezentacji zrobi się głodny, to na zewnątrz na pewno znajdzie coś na ząb |Wyciągniegniemy sobie kilka wniosków oraz zademonstruję wam kilka przykładów | A w drugiej części – mając podstawy teoretyczne – przejdziemy do wskazówek i porad praktycznych
OK wiemy o czym będzie dziś prezentacja | Zanim jednak zaczniemy, kilka słów o osobie, która przed Wami stoi
OK, to zaczynamy Będziemy mówić o responsive web design Czym dla... zwykłej osoby, gdzie przez zwykłą osobę rozumiem, programistę z wewnętrzną naturą „geeka”, który od kilku lat zajmuje tworzeniem stron, jest RWD? Słyszymy RWD, co przychodzi na myśl? - @media queries - Adaptowanie układu strony do szerokości ekranu urządzienia - CSS3 / HTML5 To wszystko prawda, ale...
Spójrzcie jednak na definicję słowa 'responsive' ze słownika Oksforda To znaczenie, o którym większość dziś zdaje się zapominać I na tym znaczeniu słowa responsive, dziś będę się skupiał
Czas zatem na pierwszy wniosek Responsive to nie tylko media queries Responsywność to przede wszystkim szybkość działania i reakcji na zachowania użytkownika: kliknięcia, tapnięcia i gesty palcami wykonywane na ekranie dotykowym … ??
Teraz trochę o konsumpcji Każdy z nas jest konsumentem W taki lub inny sposób, nawet jeśli nie zdaje sobie z tego sprawy Oto kilka przykładów, które doprowadzą nas do drugiego wniosku w naszej prezentacji
Pierwszy, najbardziej oczywisty przykład jeśli chodzi o konsumpcję: jedzenie Jedzenie jako treść I sztućce jako narzędzia do konsumowania treści
Idąc dalej: Tekst/słowo pisane, które niesie ze sobą konkretny przekaz Oraz druk, książki, gazety, w setkach, tysiącach identycznych egzemplarzy jako narzędzi umożliwiających nam dostęp do tej treści
Kolejny przykład. Telewizja. Treść - czyli audycja nadawana przez kabel lub satelitę (a od kliku dni tylko cyfrowo) oraz telewizor, czyli narzędzie przystosowane do oglądania tej treści
No i w końcu internet Strony www oraz przeglądarki Treść oraz narzędzia, które używamy by z tą treścią się zapoznać Zauważcie, że w poprzednich dwóch przykładach, na przestrzeni czasu, wraz z rozwojem technologii, pokazane narzędzia ewoluują. Tekst pisany – rysunek naskalny/kamień, tekst pisany i zwoje papirusu, tekst drukowany i książki gazety, a teraz także „tekst cyfrowy” i czytniki ebooków Telewizja – cz/b i telewizory lampowe, później kolorowa, teraz wysokiej rozdzielczości i płaskie telewizory, cyfrowe hdtv Gdy pojawia się nowa technologia – stara wymiera, przestaje być wspierana i nikt z tego powodu się nie bulwersuje.
Internet, strony WWW i przeglądarki to najmłodszy z pokazanych wynalazków Po jego stworzeniu, staraliśmy się jakoś go „skatalogować”, porównać przez analogię, do wcześniejszych Strony internetowe, z racji na ograniczoną szybkość łączy, sprowadzały się większości do treści pisanej. Stąd też przyjęliśmy analogię, że strony www i przeglądarki są jak tekst pisany i książki
Pytanie jednak – czy to dobra analogia? W ramach jednego nakładu wszystkie książki są identyczne – i poprzez tę analogię – wpadliśmy w obsesje,
aby strony internetowe w każdej przeglądarce wyglądały tak samo.
Gdy sugerujemy coś innego, ludzie patrzą na nas krzywo i się złoszczą
Spróbujmy zatem jeszcze raz i Zacznijmy naszą analogię od nowa
Mamy starą przeglądarkę, która jest jak stary telewizor
Oraz nową przeglądarkę, która jest jak nowy telewizor hd z bazylionem cali w przękątnej
Jak widać sprawa jest prosta i wszystko jest jasne. Telewizja rozwiązała ten problem Nikt nie skaży się że na starym odbiorniku, nie może oglądać telewizji w HD.
Taki efekt jednak osiągamy, gdy trzymamy się pierwszej analogii, według której we wszystkich przeglądarkach wygląd stron ma być identyczny.
Nie trzeba chyba dodawać nic więcej, Nie jest to najlepsza droga
Wniosek #2 zatem brzmi
Dobrze, teraz czas na krótką dygresję... Pomoże nam ona w zrozumieniu poprawności drugiego wniosku
Podam Wam teraz odpowiedź na wielkie pytanie dotyczące projektowanie stron www Czy ktoś z was wie jak ona jest ?
Czy strony muszą być tak samo doświadczane w każdej przeglądarce?
Teraz mała demonstracja, aby nie pozostać gołosłownym Jak widzicie, forma się różni, ale treść pozostaje bez zmian Innymi słowy aby przekazać użytkownikowi konkretną wiadomość nie jest konieczne dążenie do tego, by zawsze i wszędzie forma przekazu była identyczna
OK, jesteśmy mniej więcej w połowie, zatem po odrobinie teorii, czas na trochę praktycznych wskazówek, jak osiągnąć wysoką prędkość działania
Dlaczego prędkość jest tak ważna?
Dotychczas, gdy internet nie był mobilny, sytuacja przedstawiała się następująco. Komputer stacjonarny, nierzadko podłączony bezpośrednio, z publicznym IP, oddzielony od docelowego serwera zaledwie o kilka hopów
Teraz natomiast, pomiędzy użytkownikiem końcowym a serwerem jest znacznie dłuższa droga, mamy więcej maszyn pośrednich i biorących udział w komunikacji Użytkownik jest też mobilny, co niesie za sobą gorszą jakość łącza, większy potencjał błędów oraz technicznie patrząc – w porównaniu z kablem, czy światłowodem – niższą przepustowość
Jeśli ktoś nadal nie jest przekonany, i zadaje sobie pytanie „no ale dlaczego(!)?”
Powód jest prosty, limit połączeń wynosi 6 Wyjątkiem jest teraz IE 10 z limitem wynoszącym 8. Co to oznacza? Przeglądarka jest w stanie jednocześnie pobierać tylko 6 zasobów: CSS, JS, obrazków Gdy na stronie mamy ich 60, to potrzebnych będzie 10 cykli, by pobrać wszystkie i to że mamy akurat dostępne łącze 3G i dostępny 1 megabit, nie ma tu znaczenia
Celem naszym jest zatem ograniczenie ilości zasobów, które będzie musiała pobrać przeglądarka.
Wszędzie gdzie to możliwe powinniśmy zastąpić grafiki kodem CSS3 – cienie, gradienty, zaokrąglone rogi – wszystko to co kiedyś osiągalne było za pomocą grafik, teraz to jedynie kilka linii kodu Bardziej skomplikowane elementy graficzne można umieścić inline zamiast odwoływać się do zasobów zewnętrznych wykorzystując Data URI. Jedyną wadą tego rozwiązania jest około 40% przyrost danych w porównaniu z oryginałem z racji na kodowanie base64 Można też połączyć wiele obrazów w jeden większy sprite i zamiast n osobnych requestów, wykonywać tylko 1 i pobawić się ujemnymi wartościami background position
Gdy skorzystanie z zewnętrznego zasobu jest jednak konieczne, to przed umieszczenie grafiki na serwerze dobrze będzie przepuścić ją przez optymalizator. Szczególnie duże oszczędności uzyskamy, w przypadku małych grafik zapisywanych z Photoshopa, w których procent komentarzy-śmieci pośród wszystkich danych w pliku graficznym wynosi nierzadko kilkadziesiąt procent
Kolejnym elementem jaki można zoptymalizować to skrypty i style. Usuwanie zbędnych białych znaków, komentarzy, pustych bloków i deklaracji Także łączenie wielu plików w jeden wynikowy by zminimalizować ilośćrequestów do serwera, to przydatne zabiegi. Krótki research w google, da wam dziesiątki linków do aplikacji desktop i online
Wszelkie minifikatory usuną nam zbędne spacje, zbędne średniki z końca linii, jednakże błędów logicznych, czy też semantycznych nie poprawią. O te rzeczy musimy dbać samemu.
Owijanie listy, która jest już elementem blokowym, w kolejny kontener jest w większości przypadków zbędne Z pomocą w ograniczeniu ilości przesyłanych danych przyjdzie nam też zwykłe wycięcie zbędnych białych znaków z wynikowego HTMLa Zauważcie też, że prefix http: jest zbędny
W ograniczeniu ilości przesyłania danych pomoże nam poprawna konfiguracja pamięci podręcznej i kompresji danych na wyjściu serwera Ciekawostka – kiedyś - Home.pl / nazwa.pl – brak kompresji i cache'owania Ststyczna treść na subdomen - Obrazki, video, css – ograniczenie ilosci cookie Ciekawostka - Analytics domyślnie na poddomeny SLL = brak pamięci podręcznej Lazy loading - Bounce rate, niepotrzebnie pobrane obrazki, treść Redirect w htaccess 20-30ms, w kodzie PHP 200-300ms
Jak pamiętacie z jednego z poprzednich slajdów w przypadku użytkownika mobilnego serwer DNS może być od niego znacznie oddalony Warto zatem w nagłówku dokumentu, powiedzieć przeglądarce, o które domeny zawczasu ma odpytać serwer DNS http://tech.vg.no/2013/02/09/speed-up-websites-using-dns-prefetching/
http://s.codepen.io/paulirish/fullpage/nkwKs http://codepen.io/paulirish/full/LsxyF Testowanie na różnych choć tych samych urządzeniach
I na koniec jeszcze jedna wskazówka Zwracajcie uwagę na to, bo ograniczać ilość zmian układu strony. Atrybuty width i height dla obrazków są jak najbardziej poprawne w HTML5 Dają one przeglądarce informacje o tym ile miejsca zarezerwować na stronie na grafikę, która załaduje się dopiero za jakiś czas
Wyolbrzymiony Ale dobitnie pokazujący w czym rzecz
Na koniec, krótkie podsumowanie Responsywność to przede wszystkim szybkość działania i rekacji na akcje użytkownika Strony internetowe i przeglądarki, Aby zachować jednoznaczność przekazu, jego forma nie musi być zawsze ta sama. Możemy zrezygnować – mówiąć kolokwialnie – ze zbędnych bajerów, bez ryzyka, że snie przekażemy użytkownikowi części treści Aby zachowaćszybkośćdziałania, im mniej wszystkiego - mniej grafik ,styli, skryptów, użytego transferu, tym lepiej