Kompresja stron internetowych

Wielkość: px
Rozpocząć pokaz od strony:

Download "Kompresja stron internetowych"

Transkrypt

1 Kompresja stron internetowych Patryk Jar Tech 3 Camp, 18 czerwca 2013 r.

2 O mnie Patryk Jar Webdeveloper Nor-sta (nor-sta.eu) yarpo.pl 2

3 3

4 Agenda Lepszy kod w przeglądarce Mniej żądań HTTP Mniej danych Narzędzia Ile możemy zyskać w praktyce? Podsumowanie 4

5 Lepszy kod CSS CSS expressions Szybsze selektory: a#id #id body div body > div div 5

6 Lepszy kod HTML Przeskalowane grafiki Zwalczaj divitis Pliki wystarczy ładować raz Ile razy ładujesz jquery? Unikaj błędów 404, 500 itp. Nie zostawiaj pustych <img src="" /> 6

7 JS i CSS <html> <head> <meta charset="utf-8" /> <title>example.com</title> <link rel="stylesheet" type="text/css" href="x.css"/> <link rel="stylesheet" type="text/css" href="y.css"/> </head> <body> <!-- tu cały kod HTML strony --> <script src="a.js"></script> <script src="b.js"></script> </body> </html> 7

8 Zamiast document.write document.write('<script src="script.js"></sc'+'ript>'); function loadjs(fileurl) { var e = document.createelement("script"); e.async = true; e.src = fileurl; document.body.appendchild(e); } 8

9 Mniej żądań HTTP Content Delivery Network Google Microsoft Wiele, wiele innych <script src="//ajax.googleapis.com/ajax/ libs/jquery/1.10.1/jquery.min.js"></script> 9

10 Scalanie plików CSS + + = 10

11 CSS Sprite Zamiast wielu osobnych plików (6 kb) Jeden (4kB) img { background: url(sprite.png); width: 18px; height: 18px; } #myicon { background-position: -40px 0; } <img src="blank.png" id="myicon" /> 11

12 CSS Sprite - zysk Pojedyncze grafiki CSS Sprite Liczba żądań HTTP 11 2 Rozmiar danych 6kB 4kB Czas ~500ms ~150ms 12

13 Grafika jako base64 <img src="blank.png" /> <img src="data:image/png;base64, ivborw0kggoaaaansuheugaaaaeaaaabca YAAAAfFcSJAAAAC0lEQVQIW2P8DwQACgAD /il4qj8aaaaasuvork5cyii=" /> 13

14 Moduły JavaScript Moduły JS (np. AMD, CommonJS) Wielokrotnie wywoływany moduł = 1 żądanie Ładowanie większej liczby plików równolegle Scalenie do jednego pliku 14

15 Zapakuj lepiej dane 15

16 JavaScript przed kompresją define("dijit/toolbar", ["require", "dojo/_base/declare", "dojo/has", "dojo/keys", "dojo/ready", "./_Widget", "./_KeyNavContainer", "./_TemplatedMixin"], function(require, declare, has, keys, ready, _Widget, _KeyNavContainer, _TemplatedMixin){ return declare("dijit.toolbar", [_Widget, _TemplatedMixin, _KeyNavContainer], { /* tu jeszcze 10 linii kodu */ templatestring: '<div class="dijit" role="toolbar" tabindex="${tabindex}" data-dojoattach-point="containernode"></div>', baseclass: "dijittoolbar", postcreate: function() { this.inherited(arguments); this.connectkeynavhandlers( this.islefttoright()? [keys.left_arrow] : [keys.right_arrow], this.islefttoright()? [keys.right_arrow] : [keys.left_arrow] ); } }); }); 16

17 JavaScript po kompresji define("dijit/toolbar",["require","dojo/_base/declare","dojo/has","dojo/keys","dojo/ready","./_ Widget","./_KeyNavContainer","./_TemplatedMixin"],function(_1,_2,_3,_4,_5,_6,_7,_8){ if(_3("dijit-legacy-requires")){ _5(0,function(){ var _9=["dijit/ToolbarSeparator"]; _1(_9); }); } return _2("dijit.Toolbar",[_6,_8,_7],{templateString:"<div class=\"dijit\" role=\"toolbar\" tabindex=\"${tabindex}\" data-dojo-attach-point=\"containernode\"></div>", baseclass:"dijittoolbar",postcreate:function(){ this.inherited(arguments); this.connectkeynavhandlers(this.islefttoright()?[_4.left_arrow]:[_4.right_arrow],this.islef ttoright()?[_4.right_arrow]:[_4.left_arrow]); }}); }); 17

18 Kompresja JavaScript Moduł Bez kompresji Skompresowany Zysk dojo/request/iframe 12kB 7kB 41% dojo/selector/acme 49kB 13kB 73% dojo/colors 7kB 5kB 29% dojo/cookie 3kB 2kB 33% dijit/menuitem 7kB 3kB 57% dijit/dialog 22kB 9kB 60% dijit/place 14kB 4kB 71% tct/widgets/nodebrowser 11kB 5kB 54% 18

19 GZIP 19

20 Ciasteczka Wysyłane w nagłówku żądania HTTP Inna domena na pliki statyczne HTML 5: sessionstorage, localstorage 20

21 Narzędzia Diagnoza YSlow Google PageSpeed Insights Kompresja JavaScript Shrinksafe JSmin Closure Compiler Kompresja CSS YUI Compressor CSS Sprite Dowolny edytor, wiele narzędzi online 21

22 Ile Nor-sta zyskała na kompresji? Prototyp TCT 5.0 Oficjalne wydanie TCT 5.0 Liczba żądań HTTP Rozmiar pobranych plików* ~1,2 MB ~300 kb ready 90 sekund 7 sekund * - dane przesłane po sieci, w oficjalnym wydaniu były poddane kompresji GZIP 22

23 23

24 Dziękuję za uwagę yarpo.pl 24

25 Pytania? 25

Patryk Jar Meet.js, Gdańsk 11 marca 2013 r. MODULARNY JAVASCRIPT

Patryk Jar Meet.js, Gdańsk 11 marca 2013 r. MODULARNY JAVASCRIPT Patryk Jar Meet.js, Gdańsk 11 marca 2013 r. MODULARNY JAVASCRIPT O mnie Patryk yarpo Jar Programista JavaScript (nor-sta.eu) yarpo.pl 2 Agenda Chaos Obiekty Biblioteki AMD Podsumowanie Pytania 3 Dawno,

Bardziej szczegółowo

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?

PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014 BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2 Perfomance + Joomla =? 3 Google PageSpeed

Bardziej szczegółowo

FEO w Joomla!, czyli jak przyspieszyć swoją stronę

FEO w Joomla!, czyli jak przyspieszyć swoją stronę FEO w Joomla!, czyli jak przyspieszyć swoją stronę Dominik Kucharski Lead Front-end Developer w CloudAccess.net email: dom@cloudaccess.net prywatny blog: blog.mino.pl twitter: @minopl PLAN PREZENTACJI

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 9

Tworzenie Stron Internetowych. odcinek 9 Tworzenie Stron Internetowych odcinek 9 Prosta galeria oparta na HTML Najprostszym sposobem zbudowania galerii zdjęć jest wykorzystanie tylko HTML i CSS. Strona główna galerii składa się miniatur zdjęć,

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional). Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie

Bardziej szczegółowo

Laboratorium 1: Szablon strony w HTML5

Laboratorium 1: Szablon strony w HTML5 Laboratorium 1: Szablon strony w HTML5 Czas realizacji: 2 godziny Kurs: WYK01_HTML.pdf, WYK02_CSS.pdf Pliki:, Edytor: http://www.sublimetext.com/ stabilna wersja 2 (portable) Ćwiczenie 1. Szablon strony

Bardziej szczegółowo

Przykład integracji kalkulatora mbank RATY na platformie IAI

Przykład integracji kalkulatora mbank RATY na platformie IAI Przykład integracji kalkulatora mbank RATY na platformie IAI 1. Moderacja - > Dodatki HTML i JavaScript 1.1 Klikamy na przycisk nowy dodatek Wpisujemy w pole Tytuł dodatku nazwę CSS_mRaty. Następnie ustawiamy

Bardziej szczegółowo

SEO Audyt. Podsumowanie. 51/100 punktów. Masz 11 rzeczy, które możesz poprawić! Uzyskany wynik: Data przeprowadzenia: 2015-01-17 12:33:47

SEO Audyt. Podsumowanie. 51/100 punktów. Masz 11 rzeczy, które możesz poprawić! Uzyskany wynik: Data przeprowadzenia: 2015-01-17 12:33:47 SEO Audyt Podsumowanie Przeanalizowany adres URL: http://www.krn.org.pl Uzyskany wynik: Data przeprowadzenia: 015-01-17 1::7 51/100 punktów Masz 11 rzeczy, które możesz poprawić! 1.... 5. 6. 7. 8. 9. 10.

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Referat z przedmiotu Technologie Internetowe SPIS TREŚCI

Referat z przedmiotu Technologie Internetowe SPIS TREŚCI SPIS TREŚCI 1.Dwie metody przekazu danych do serwera 2 2.Metoda GET przykład 3 3.Metoda POST przykład 4 4.Kiedy GET a kiedy POST 5 5.Szablony po co je stosować 7 6.Realizacja szablonu własną funkcją 8

Bardziej szczegółowo

Podstawy (X)HTML i CSS

Podstawy (X)HTML i CSS Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z

Bardziej szczegółowo

ANIMACJE W CSS3. Czyli po co płacić podatek o Javy Script i JQuery

ANIMACJE W CSS3. Czyli po co płacić podatek o Javy Script i JQuery ANIMACJE W CSS3 Czyli po co płacić podatek o Javy Script i JQuery DAWNIEJ: - Flash - Gif - Animacje w Photoshop - Grafika w Photoshop (cienie) OBECNIE -JavaScript - jquery -CSS3!!! PODATEK OD JS I JQ Według

Bardziej szczegółowo

Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych

Czym jest AJAX. AJAX wprowadzenie. Obiekt XMLHttpRequest (XHR) Niezbędne narzędzia. Standardowy XHR. XHR z obsługą baz danych Czym jest AJAX AJAX wprowadzenie Beata Pańczyk na podstawie: 1. Lis Marcin, Ajax, Helion, 2007 2. Hadlock Kris, Ajax dla twórców aplikacji internetowych, Helion, 2007 AJAX (Asynchronous JavaScript and

Bardziej szczegółowo

O stronach www, html itp..

O stronach www, html itp.. O stronach www, html itp.. Prosty wstęp do podstawowych technik spotykanych w internecie 09.01.2015 M. Rad Plan wykładu Html Przykład Strona www Xhtml Css Php Js HTML HTML - (ang. HyperText Markup Language)

Bardziej szczegółowo

I. Dlaczego standardy kodowania mailingów są istotne?

I. Dlaczego standardy kodowania mailingów są istotne? 1 Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? 3 II. Budowa nagłówka wiadomości. 4 III. Style kaskadowe CSS. 4 IV. Elementarna budowa szablonu. 6 V. Podsumowanie. 9 2 I. Dlaczego

Bardziej szczegółowo

Dokumentacja Skryptu Mapy ver.1.1

Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja Skryptu Mapy ver.1.1 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7 3 Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja skryptu

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW.

Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW. Ćwiczenie 3 Interaktywność na stronach WWW Dr inż. Robert Banasiak 1 Plan ćwiczeń W trakcie niniejszych ćwiczeń zapoznacie się Państwo z przykładowymi, wybranymi możliwościami wzbogacania stron WWW w elementy

Bardziej szczegółowo

Multimedia i interfejsy. Ćwiczenie 5 HTML5

Multimedia i interfejsy. Ćwiczenie 5 HTML5 Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych

Bardziej szczegółowo

Hyper Text Markup Language

Hyper Text Markup Language Podstawy projektowania dokumentów WWW Język znaczników HTML Hyper Text Markup Language Język słuŝący do zapisu dokumentów WWW. Opisuje wygląd dokumentu i definiuje łączniki hipertekstowe, pozwalające na

Bardziej szczegółowo

Krok 1: Stylizowanie plakatu

Krok 1: Stylizowanie plakatu HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Jak okiełznać frontend w Django? Piotr Maliński www.python.rk.edu.pl

Jak okiełznać frontend w Django? Piotr Maliński www.python.rk.edu.pl Jak okiełznać frontend w Django? Piotr Maliński www.python.rk.edu.pl Problemy frontendu Trudne testowanie i debugowanie Różne przeglądarki Różne ustawienia przeglądarek Urządzenia dotykowe Przekazywanie

Bardziej szczegółowo

Proste kody html do szybkiego stosowania.

Proste kody html do szybkiego stosowania. Proste kody html do szybkiego stosowania. Często, w trakcie pracy z blogiem czy portalem zachodzi potrzeba umieszczenia grafiki, linku zaszytego w grafice czy innych podobnych. Szczególnie w widgetach

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

Laboratorium 6 Tworzenie bloga w Zend Framework

Laboratorium 6 Tworzenie bloga w Zend Framework Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy

Bardziej szczegółowo

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.

Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 6

Tworzenie Stron Internetowych. odcinek 6 Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą

Bardziej szczegółowo

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org

Wordpress: http://wordpress.org. Joomla! http://www.joomla.org/ Drupal. http://drupal.org System zarządzania treścią (Content Management System, CMS) jest to aplikacja internetowa lub ich zestaw, pozwalająca na łatwe utworzenie serwisu WWW oraz jego późniejszą aktualizację i rozbudowę. Prezentacja

Bardziej szczegółowo

Raty PayU - Optymalne Wdrożenie

Raty PayU - Optymalne Wdrożenie Raty PayU - Optymalne Wdrożenie Spis treści Jak osiągnąd najlepsze efekty?... 3 1. Rozwijany panel boczny... 3 3. Informacja o ratach PayU poza layoutem strony Sklepu... 5 4. Kalkulator rat PayU... 7 5.

Bardziej szczegółowo

FLEX (16.03.2013) Przygotowanie środowiska developerskiego Hello world w MXML Hello world w ActionScript

FLEX (16.03.2013) Przygotowanie środowiska developerskiego Hello world w MXML Hello world w ActionScript FLEX (16.03.2013) Przygotowanie środowiska developerskiego 1. Uruchomić system operacyjny Linux 2. Pliki z pkt 3 oraz 5 dostępne są pod adresem http://kask.eti.pg.gda.pl/studium/ 3. Pobrać ze strony http://www.adobe.com/devnet/flex/flex-sdk-download-all.html

Bardziej szczegółowo

Szybko, prosto i tanio - ale czy na pewno?

Szybko, prosto i tanio - ale czy na pewno? Szybko, prosto i tanio - ale czy na pewno? Krzysztof Ścira Adrian Gadzina Kilka słów o nas Krzysztof Ścira Absolwent studiów pierwszego stopnia i jednocześnie student studiów 2 stopnia na AGH Zawodowo

Bardziej szczegółowo

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu

Bardziej szczegółowo

Co to jest NODE.JS? Nowoczesne środowisko programistyczne

Co to jest NODE.JS? Nowoczesne środowisko programistyczne Node.js Co to jest NODE.JS? Nowoczesne środowisko programistyczne Środowisko programistyczne w sensie zestawu gotowych klas i metod których można używać do przygotowania własnych skalowalnych i wydajnych

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 7 jquery Agenda Czym jest jquery? Podstawowe zasady jquery Selektory jquery Model DOM i jquery Zdarzenia

Bardziej szczegółowo

CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites

CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites CSS + HTML Front end publikacji internetowej Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites 1 CSS + pocięcie grafiki Struktura folderów reset.css Cięcie grafiki w Photoshopie 2 Nasza

Bardziej szczegółowo

Zdarzenia Zdarzenia onload i onunload

Zdarzenia Zdarzenia onload i onunload Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać

Bardziej szczegółowo

Tips (mainly) by Google and Kamil Majdanik

Tips (mainly) by Google and Kamil Majdanik Tips (mainly) by Google and Kamil Majdanik Bonus za to, że w ogóle jesteście Dodatkowo można zarobić cukierka za: Inteligentne pytania na temat Inteligentne uwagi na temat Zastrzegam prawo do nie dania

Bardziej szczegółowo

HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language) hipertekstowy język znaczników HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony

Bardziej szczegółowo

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.:
pierwsza treść, zdjęcie, tabele lub cokolwiek

Jeśli dodamy jakieś parametry stylów dla poszczególnych DIV-ów, np.: <div style=float: left>pierwsza treść, zdjęcie, tabele lub cokolwiek </div> Wykorzystanie znacznika DIV. Znacznik można nazwać blokiem, sekcją, zasobnikiem, pudełkiem, w którym umieszczamy dowolną treść. Poszczególne DIVy można dowolnie umieszczać na stronie, względem siebie

Bardziej szczegółowo

SterBox. Przygotowanie Strony Użytkownika

SterBox. Przygotowanie Strony Użytkownika Przygotowanie Strony Użytkownika Sterbox od wersji 2.1.1 obsługuje dwie strony użytkownika umożliwiające sterowanie z kontrolą stanów. Rozpoczynając tworzenie strony potrzebujemy programu do tworzenia

Bardziej szczegółowo

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty

TECHNOLOGIE INTERNETOWE WYKŁAD 6. JavaScript Funkcje i obiekty 1. Co to jest funkcja? Funkcja jest oddzielnym blokiem kodu, który może być wielokrotnie wykonywany w danym programie, poprzez jej wielokrotne wywoływanie. Do funkcji przekazujemy przeważnie jakieś argumenty,

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 10

Tworzenie Stron Internetowych. odcinek 10 Tworzenie Stron Internetowych odcinek 10 JavaScript JavaScript (ECMAScript) skryptowy język programowania powszechnie używany w Internecie. Skrypty JS dodają do stron www interaktywność i funkcjonalności,

Bardziej szczegółowo

Ataki na aplikacje WWW. Łomem, czy wytrychem? Jak dobrać się do aplikacji WWW

Ataki na aplikacje WWW. Łomem, czy wytrychem? Jak dobrać się do aplikacji WWW Ataki na aplikacje WWW Łomem, czy wytrychem? Jak dobrać się do aplikacji WWW Ataki na aplikację Ataki na przeglądarkę Ataki na serwer WWW/kontener, etc. Często kombinacja i wiele etapów Którędy do środka

Bardziej szczegółowo

Przedmowa...9. Wprowadzenie...11

Przedmowa...9. Wprowadzenie...11 Spis treści Przedmowa...9 Wprowadzenie...11 A Waga wydajności interfejsu...17 Określanie wydajności strony internetowej 17 Co dzieje się z czasem udzielania odpowiedzi? 19 Złota reguła wydajności 19 B

Bardziej szczegółowo

GRAFIKA SIECIOWA. WYKŁAD 2 Optymalizacja grafiki. Jacek Wiślicki Katedra Informatyki Stosowanej

GRAFIKA SIECIOWA. WYKŁAD 2 Optymalizacja grafiki. Jacek Wiślicki Katedra Informatyki Stosowanej GRAFIKA SIECIOWA WYKŁAD 2 Optymalizacja grafiki Jacek Wiślicki Katedra Informatyki Stosowanej Optymalizacja W kontekście grafiki optymalizacja stanowi proces uzyskiwania równowagi pomiędzy jakością obrazu,

Bardziej szczegółowo

Witryny i aplikacje internetowe. mgr inż. Remigiusz Pokrzywiński

Witryny i aplikacje internetowe. mgr inż. Remigiusz Pokrzywiński Witryny i aplikacje internetowe mgr inż. Remigiusz Pokrzywiński Podstawowe pojęcia dotyczące stron internetowych Strona internetowa, strona WWW (ang. web page) dokument HTML udostępniony w Internecie przez

Bardziej szczegółowo

Zaawansowane Techniki WWW (HTML, CSS i NODE.JS)

Zaawansowane Techniki WWW (HTML, CSS i NODE.JS) Zaawansowane Techniki WWW (HTML, CSS i NODE.JS) Dr inż. Marcin Zieliński Środa 15:30-17:00 sala: A-1-04 WYKŁAD 8 Wykład dla kierunku: Informatyka Stosowana II rok Rok akademicki: 2014/2015 - semestr zimowy

Bardziej szczegółowo

XML extensible Markup Language. część 5

XML extensible Markup Language. część 5 XML extensible Markup Language część 5 JavaScript Co to jest JavaScript? JavaScript był zaprojektowany w celu dodania interaktywności do stron HTML JavaScript jest językiem skryptowym JavaScript jest zwykle

Bardziej szczegółowo

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np.

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR> Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej

Bardziej szczegółowo

Od assemblera do html5

Od assemblera do html5 Od assemblera do html5 czyli jak się dziś kradnie pieniądze Tomasz keidii Bukowski @~# id IRT @ Cert Polska malware hunter / devops member of DragonSector Jak działaj internet jakaś między-sieć przeglądarka

Bardziej szczegółowo

Instrukcja platformy wideo

Instrukcja platformy wideo Instrukcja platformy wideo Wstęp Platforma wideo służy do dystrybucji bezpłatnych filmów w Polskim Języku Migowym wyjaśniających osobom Głuchym jak załatwiać sprawy w urzędzie oraz jak wypełniać formularze.

Bardziej szczegółowo

Tell a Story. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć własną stronę internetową, by opowiedzieć historyjkę, dowcip albo wiersz.

Tell a Story. Wstęp HTML & CSS. W tym projekcie nauczycie się, jak stworzyć własną stronę internetową, by opowiedzieć historyjkę, dowcip albo wiersz. HTML & CSS 1 Tell a Story Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot

Idea of responsive web design. Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Idea of responsive web design Roman Białek Mateusz Mikołajczak Kacper Palmowski Krzysztof Szot Czym tak właściwie jest responsive web design? Jest to podejście do projektowania stron internetowych w taki

Bardziej szczegółowo

Zaawansowane aplikacje internetowe

Zaawansowane aplikacje internetowe Zaawansowane aplikacje internetowe AJAX 1 Celem tego laboratorium jest pokazanie moŝliwości technologii AJAX. W ramach ćwiczeń zostanie zbudowana prosta aplikacja, przechwytująca kliknięcia uŝytkownika

Bardziej szczegółowo

STANDARDY KODOWANIA MAILINGÓW

STANDARDY KODOWANIA MAILINGÓW STANDARDY KODOWANIA MAILINGÓW Tabela zawartości: I. Dlaczego standardy kodowania mailingów są istotne? II. Budowa nagłówka wiadomości. III. Style kaskadowe CSS. IV. Elementarna budowa szablonu. V. Podsumowanie.

Bardziej szczegółowo

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385.

Źródła. cript/1.5/reference/ Ruby on Rails: http://www.rubyonrails.org/ AJAX: http://www.adaptivepath.com/publications/e ssays/archives/000385. Źródła CSS: http://www.csszengarden.com/ XHTML: http://www.xhtml.org/ XML: http://www.w3.org/xml/ PHP: http://www.php.net/ JavaScript: http://devedgetemp.mozilla.org/library/manuals/2000/javas cript/1.5/reference/

Bardziej szczegółowo

Tworzenie gadgetów Windows Vista/7. Krzysztof Jeliński Toruń 2011

Tworzenie gadgetów Windows Vista/7. Krzysztof Jeliński Toruń 2011 Tworzenie gadgetów Windows Vista/7 Krzysztof Jeliński Toruń 2011 Gadżety Małe specjalizowane aplikacje, które są projektowane tak, aby wykonywały proste zadania (zegary, kalendarze, powiadamiacze RSS lub

Bardziej szczegółowo

WITRYNY I APLIKACJE INTERNETOWE

WITRYNY I APLIKACJE INTERNETOWE WITRYNY I APLIKACJE INTERNETOWE TECHNIKUM INFORMATYCZNE wg programu 351203 KLASA II 3 godz. tygodniowo 90 godziny Liczba godzin w cyklu kształcenia 180 rok szkolny 2013/2014 Sylwia Płonka 2. W 1980 fizyk

Bardziej szczegółowo

Protokół HTTP. 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX.

Protokół HTTP. 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX. Protokół HTTP 1. Protokół HTTP, usługi www, model request-response (żądanie-odpowiedź), przekazywanie argumentów, AJAX. 1 Usługi WWW WWW (World Wide Web) jest najpopularniejszym sposobem udostępniania

Bardziej szczegółowo

2. Prezentacja wizualna

2. Prezentacja wizualna 2. Prezentacja wizualna 2.1. Opis rozdziału Rozdział ten przedstawia jak stworzyć przykładowy układ graficzny dla naszej gry w HTML5 i CSS3, które w dalszej części poradnika zostaną wykorzystane do stworzenia

Bardziej szczegółowo

Kompozycja Proceduralna

Kompozycja Proceduralna Kompozycja Proceduralna Temat 11: Mechanizm szablonów stron dynamicznych na przykładzie PHP Piotr Habela Polsko-Japońska Wyższa Szkoła Technik Komputerowych 1 Plan prezentacji Role autorów w tworzeniu

Bardziej szczegółowo

Podstawy programowania w języku JavaScript

Podstawy programowania w języku JavaScript Podstawy programowania w języku JavaScript Część piąta AJAX Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTML5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 1 Podstawy tworzenia stron internetowych Agenda Podstawy stron internetowych Przegląd języka HTML Wprowadzenie

Bardziej szczegółowo

How To? Konfiguracja podglądu strumienia z kamer IP ACTi

How To? Konfiguracja podglądu strumienia z kamer IP ACTi How To? Konfiguracja podglądu strumienia z kamer IP ACTi Poznań 2010 Wprowadzenie Ten dokument zawiera informacje o wykorzystaniu kontrolki ActiveX w celu integracji podglądu na żywo z kamery ACTi ze stroną

Bardziej szczegółowo

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl

Bootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15

Bardziej szczegółowo

Asynchroniczne interfejsy

Asynchroniczne interfejsy Asynchroniczne interfejsy AJAX WWW mgr inż. Rafał Grycuk mgr inż. Patryk Najgebauer Strona służbowa: http://iisi.pcz.pl/~rgrycuk/ Kontakt: rafal.grycuk@iisi.pcz.pl Konsultacje: Środa, godz. 12-14 Agenda

Bardziej szczegółowo

Asynchroniczne interfejsy WWW

Asynchroniczne interfejsy WWW Asynchroniczne interfejsy WWW Wprowadzenie do tworzenia aplikacji webowych, dokumentów HTML5 oraz CSS mgr inż. Rafał Grycuk mgr inż. Patryk Najgebauer Strona służbowa: http://iisi.pcz.pl/~rgrycuk/ Kontakt:

Bardziej szczegółowo

jquery Aplikacje internetowe laboratorium jquery

jquery Aplikacje internetowe laboratorium jquery jquery Celem dwiczenia jest zapoznanie studenta z biblioteką jquery, przeznaczoną dla języka JavaScript. W trakcie wykonywania zadao student zdobędzie następujące umiejętności: posługiwanie się różnymi

Bardziej szczegółowo

Specyfikacja reklamy tekstowej i bannerowej na portalu GoldenLine.pl

Specyfikacja reklamy tekstowej i bannerowej na portalu GoldenLine.pl Specyfikacja reklamy tekstowej i bannerowej na portalu GoldenLine.pl Spis treści Ogólne informacje... 3 Kreacje HTML5... 4 1. Formy reklamowe... 5 1.1. Link tekstowy... 5 1.2. Link tekstowy plus... 5 1.3.

Bardziej szczegółowo

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień.

Uwaga w niektórych przeglądarkach różnice mogą być niewidoczne zależy to od przeglądarki i ew. od jej ustawień. Poprzednie zajęcia skończyliśmy ucząc się tworzenia odsyłaczy/hiperłączy/linków (można wrócić do poprzedniego scenariusza, jeśli ktoś go nie skończył). Skoro jesteśmy przy odsyłaczach, to warto poznać

Bardziej szczegółowo

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów).

CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co to jest CSS? CSS jest is an skrótem od Cascading Style Sheets (Kaskadowe Arkusze Stylów). Co mogę zrobić z CSS? CSS jest językiem stylu określającego układ graficzny dokumentów HTML. Na przykład, CSS

Bardziej szczegółowo

Języki i narzędzia programowania III. Łukasz Kamiński Wykład II - 2012-10-08

Języki i narzędzia programowania III. Łukasz Kamiński Wykład II - 2012-10-08 Języki i narzędzia programowania III Łukasz Kamiński Wykład II - 2012-10-08 Wykład II Wprowadzenie kontynuacja Cookie HTML (JS/CSS/Flash/Java) Instalacja Apache, PHP, MySQL Konfiguracja Hosting i domeny

Bardziej szczegółowo

Specyfikacja techniczna form reklamowych na urządzenia mobilne

Specyfikacja techniczna form reklamowych na urządzenia mobilne Specyfikacja techniczna form reklamowych na urządzenia mobilne Aktualizacja: 01.07.2013 Spis treści 1. Zasady ogólne... 3 2. Formy reklamowe w m.interia.pl... 4 2.1. Mobileboard... 4 2.2. High Mobileboard...

Bardziej szczegółowo

www.fwrl.pl/szkolenie

www.fwrl.pl/szkolenie STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa

Bardziej szczegółowo

Ten skrypt powinien zająć 2-3 zajęcia. Trzeba go oddać na trzecim labie.

Ten skrypt powinien zająć 2-3 zajęcia. Trzeba go oddać na trzecim labie. Ten skrypt powinien zająć 2-3 zajęcia. Trzeba go oddać na trzecim labie. Zakładam, że wszyscy wiedzą na czym polega sudoku. Jeśli ktoś jednak nie wie, to http:// en.wikipedia.org/wiki/sudoku (wariant podstawowy).

Bardziej szczegółowo

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs 18.11 2008 22 12. 2008 Wprowadzenie do HTML, CSS, JavaScript, PHP Kurs 18.11 2008 22 12. 2008 Narzędzia do tworzenia i utrzymania dokumentów web owych Edytory HTML Server WWW i baz danych Przeglądarka internetowa kompilator

Bardziej szczegółowo

Języki programowania wysokiego poziomu. HTML cz.1.

Języki programowania wysokiego poziomu. HTML cz.1. Języki programowania wysokiego poziomu HTML cz.1. Struktura dokumentu html Dokument HTML ma postać:

Bardziej szczegółowo

REFERAT O PRACY DYPLOMOWEJ

REFERAT O PRACY DYPLOMOWEJ REFERAT O PRACY DYPLOMOWEJ Temat pracy: Projekt i budowa systemu zarządzania treścią opartego na własnej bibliotece MVC Autor: Kamil Kowalski W dzisiejszych czasach posiadanie strony internetowej to norma,

Bardziej szczegółowo

Szczegóły związane z wymaganiami odnośnie SLA znajdują się w dokumentacji funkcjonalnej znajdującej się w załączniku nr 10 do SIWZ.

Szczegóły związane z wymaganiami odnośnie SLA znajdują się w dokumentacji funkcjonalnej znajdującej się w załączniku nr 10 do SIWZ. Załącznik nr 1 do SIWZ Szczegółowy opis przedmiotu zamówienia dot. zmian dla strony www Culture.pl wraz z submarkami (subdomenami) oraz stroną IAM.PL Specyfikacja techniczna wraz z dokumentacją funkcjonalną

Bardziej szczegółowo

Projektowanie aplikacji internetowych. CSS w akcji

Projektowanie aplikacji internetowych. CSS w akcji Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji

Bardziej szczegółowo

Aplikacje internetowe

Aplikacje internetowe Temat: Język HTML i style CSS Aplikacje internetowe Pracownia specjalistyczna, studia podyplomowe, rok 2011/2012 1. Stwórz formularz HTML pozwalający na rejestrację użytkownika w aplikacji internetowej.

Bardziej szczegółowo

Języki programowania wysokiego poziomu WWW

Języki programowania wysokiego poziomu WWW Języki programowania wysokiego poziomu WWW Zawartość Protokół HTTP Języki HTML i XHTML Struktura dokumentu html: DTD i rodzaje html; xhtml Nagłówek html - kodowanie znaków, język Ciało html Sposób formatowania

Bardziej szczegółowo

Blok dokumentu.

Blok dokumentu. <div> </div> Blok dokumentu Polecenie div (blok, sekcja) jest jednym z najbardziej fundamentalnym poleceń języka HTML, które odgrywa kluczową rolę w grupowaniu wielu różnych elementów i pozycjonowaniu większych fragmentów

Bardziej szczegółowo

Wykrywanie i analiza złośliwych stron WWW. Łukasz Juszczyk CERT Polska/NASK lukasz.juszczyk@cert.pl

Wykrywanie i analiza złośliwych stron WWW. Łukasz Juszczyk CERT Polska/NASK lukasz.juszczyk@cert.pl Wykrywanie i analiza złośliwych stron WWW Łukasz Juszczyk CERT Polska/NASK lukasz.juszczyk@cert.pl Agenda atak analiza obrona techniki i mechanizmy ataków narzędzia, problemy sposoby obrony Atak Źródło

Bardziej szczegółowo

Programowanie internetowe

Programowanie internetowe Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML

Bardziej szczegółowo

Facelets ViewHandler

Facelets ViewHandler JSF i Facelets Wprowadzenie JSP (JavaServer Pages) są natywną i najczęściej używaną technologią do tworzenia warstwy prezentacyjnej dla JSF (JavaServer Faces) Istnieją alternatywne technologie opisu wyglądu

Bardziej szczegółowo

Specyfikacja techniczna formatów reklamowych w serwisach internetowych Wydawnictwa Te-Jot.

Specyfikacja techniczna formatów reklamowych w serwisach internetowych Wydawnictwa Te-Jot. Specyfikacja techniczna formatów reklamowych w serwisach internetowych Wydawnictwa Te-Jot. Statystyki. Technologię mierzącą dostarcza Smart AdServer. Dopuszczalna różnica adserwerowa dla statystyk odsłon

Bardziej szczegółowo

Kaskadowe arkusze stylów (CSS)

Kaskadowe arkusze stylów (CSS) Kaskadowe arkusze stylów (CSS) CSS (Cascading Style Sheets) jest to język opisujący sposób, w jaki przeglądarki mają wyświetlać zawartość odpowiednich elementów HTML. Kaskadowe arkusze stylów służą do

Bardziej szczegółowo

Popularne dostępne rozwiązania. Najpopularniejsze środowiska programistyczne:

Popularne dostępne rozwiązania. Najpopularniejsze środowiska programistyczne: Popularne dostępne rozwiązania Najpopularniejsze środowiska programistyczne: Popularne dostępne rozwiązania Najpopularniejsze środowiska programistyczne: oraz systemy CMS (Content Menager System): Dlaczego

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed

Bardziej szczegółowo

Aplikacje internetowe

Aplikacje internetowe Aplikacje internetowe HTML 5 Wprowadzenie Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi

Bardziej szczegółowo

Publikowanie strony WWW

Publikowanie strony WWW Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-10-11 Moduł 2 (1. część) Publikowanie strony WWW Do publikowania stron WWW wykorzystywany był dotychczas w ramach zajęć wydziałowy serwer WWW. Kroki publikacji

Bardziej szczegółowo

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM Język (X)HTML Podstawowe znaczniki i parametry Szablon dokumentu (X)HTML

Bardziej szczegółowo

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ

APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ APLIKACJE INTERNETOWE 1 HTML - STRUKTURA STRONY INTERNETOWEJ PLAN PREZENTACJI Wprowadzenie do HTML Struktura dokumentu HTML Komentarze Znaczniki Nagłówki (tytuły) Akapit Znacznik końca wiersza Linia pozioma

Bardziej szczegółowo

Sieciowe Technologie Mobilne. Laboratorium 4

Sieciowe Technologie Mobilne. Laboratorium 4 Sieciowe Technologie Mobilne Laboratorium 4 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 4 Urozmaicone zostaną animacje potworów, aby odpowiadały

Bardziej szczegółowo

Michał Bielecki, KNI 'BIOS'

Michał Bielecki, KNI 'BIOS' Michał Bielecki, KNI 'BIOS' PHP czyli język typu client side 1. przeglądarka www żąda dokumentu o rozszerzeniu.php 2. serwer odbiera żądanie i przesyła do parsera php 3. parser php znajduje żądany plik

Bardziej szczegółowo