Aplikacje internetowe

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "Aplikacje internetowe"

Transkrypt

1 Aplikacje internetowe HTML 5 Wprowadzenie Autor Roman Simiński Kontakt Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi uważnego w nim uczestnictwa. Opracowanie to jest chronione prawem autorskim. Wykorzystywanie jakiegokolwiek fragmentu w celach innych niż nauka własna jest nielegalne. Dystrybuowanie tego opracowania lub jakiejkolwiek jego części oraz wykorzystywanie zarobkowe bez zgody autora jest zabronione.

2 HTML 5 co nowego (o tym słyszeli wszyscy) Różnice w stosunku do poprzedników: Uproszczenie w zakresie tego co wcześniej zbędne lub nadmiernie zagmatwane. Rozszerzenie o elementy praktycznie potrzebne, nieistniejące wcale bądź obsługiwane poza językiem HTML. Zestawienie powszechnie wskazywanych nowości: Nowe znaczniki semantyczne, pozwalające na czytelne (dla ludzi i przeglądarek) wyodrębnienie logicznych i funkcjonalnych części dokumentu. Znacznik canvas pozwalający na programowe rysowanie w obrębie dokumentu, bez stosowania wtyczek. Znaczniki video i audio pozwalające na bez wtyczkowe umieszczanie w dokumencie dźwięku i sekwencji wideo wraz z możliwością programowego sterowania tą zawartością. 2

3 HTML 5 co nowego (o tym słyszeli wszyscy) Zestawienie powszechnie wskazywanych nowości: Nowe znaczniki semantyczne, pozwalające na czytelne (dla ludzi i przeglądarek) wyodrębnienie logicznych i funkcjonalnych części dokumentu (article, footer, header, nav, section). Znacznik canvas pozwalający na programowe rysowanie w obrębie dokumentu, bez stosowania wtyczek. Znaczniki video i audio pozwalające na bez wtyczkowe umieszczanie w dokumencie dźwięku i sekwencji wideo wraz z możliwością programowego sterowania tą zawartością. Nowe atrybuty znacznika input: tel, search, url, , datetime,... 3

4 HTML 5 co nowego (mniej znane elementy) Mniej znane nowości: Możliwość umieszczania grafiki SVG bezpośrednio w kodzie HTML, znacznik <svg></svg>. Możliwość umieszczania wzorów MathML bezpośrednio w kodzie HTML, znacznik <math></math>. Oznacza to, że kody wzorów matematycznych oraz rysunków SVG mogą być zapisane bezpośrednio w kodzie HTML. Dekorowanie grafiki SVG z wykorzystaniem stylów, programowe manipulowanie za pośrednictwem JavaScript. Dostępne API do obsługi Drag-and-Drop. przechowywanie historii przeglądania, z możliwością zmiany url przeglądarki bez przeładowania strony. możliwość pracy aplikacji w trybie offline 4

5 Nowe znaczniki semantyczne header, section, nav <!doctype html> <html> <head> </head> <body> <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer> </body> </html> Znacznik <header> opisuje nagłówek elementu, w którym został zdefiniowany. W tym przypadku oznacza nagłówek całej strony, ale może być używany w poszczególnych sekcjach dokumentu. Nie używamy tego znacznika wewnątrz znaczników <footer>, <address>, innego znacznika <header>. Sekcja <nav> zwiera zwykle hiperłącza do poszczególnych sekcji strony. Zakłada się, że <nav> zawiera główne linki nawigacyjne na stronie. Znacznik <section> definiuje blok dokumentu, który może zawierać wszelkie adekwatne znaczniki, w tym również wielokrotnie zagnieżdżone bloki <section>. Copyright Roman Simiński 5

6 Nowe znaczniki semantyczne aside, footer <!doctype html> <html> <head> </head> <body> <header> </header> <nav> </nav> <section> </section> <aside> </aside> <footer> </footer> </body> </html> Znacznik <aside> definiuje dodatkową, poboczną treść w stosunku do głównej treści prezentowanej w dokumencie. Zazwyczaj w obrębie znacznik <aside> umieszczany jest jako panel boczny np. z linkami powiązanymi z prezentowaną treścią. Znacznik <footer> definiuje stopkę strony, zawierającą zazwyczaj informacje o autorze stron, prawach autorskich, licencjach, informacje kontaktowe. zwyczajowo nagłówek jest elementem domykającym układ strony od dołu. 6

7 Nowe znaczniki semantyczne article <section> <article> <header> <h2>tytuł nagłówka artykułu</h2> <p>jaka ś dodatkowa tre ś ć i np. link: <a href="#">wi ę cej...</a></p> </header> <p>znacznik <mark>article</mark> reprezentuje pewn ą zamkni ę t ą cało ś ć, która mo ż e być traktowana niezale ż nie od całej strony, np. wpis blogowy, artykuł, komentarz.</p> </article> </section> Przy okazji znacznik <mark> wyróżnienia fragmentu tekstu. 7

8 Nowe znaczniki semantyczne details i summary <section> <details > <summary>czytaj wi ę cej... </summary> <p>znaczniki <em>details</em> i <em>summary</em>.</p> <p>aktualnie zaimplementowane jedynie w Chrome.</p> </details> </section> Na razie tylko Chrome Znacznik <details> określa dodatkową informację, którą użytkownik może zobaczyć lub ukryć na życzenie. Sterowanie pokazywaniem/ukrywaniem zawartości <details>steruje atrybut boolowski open. Znacznik <summary> określa widoczny nagłówek sekcji <details>. 8

9 Nowe znaczniki semantyczne meter i progress <meter value="3" min="1" max="10">3 w skali od 1 do 10</meter><br /> <meter value="0.4">40%</meter> Gdy brak implementacji Opera, Chrom Znacznik <meter> definiuje wskaźnik, np. zużycie przestrzeni dyskowej, page rank, wynik ankiety. Uwaga nie używa się jako paska postępu, do tego jest <progress>. <progress value="11" max="100">ładowanie: 11%</progress> Gdy brak implementacji Opera, Chrom, Firefox 9

10 Sterowanie elementem progress prosty przykład var timeoutobject; var sek = 0; function display() document.getelementbyid( "pb" ).value = sek++; if( sek > 100 ) zeruj(); function start() display(); window.timeoutobject = setinterval( "display()", 100 ) function stop() window.clearinterval( timeoutobject ); function zeruj() document.getelementbyid( "pb" ).value = sek = 0; <body> <h1>progress bar</h1> <progress id="pb" value="0" max="100"></progress> <input type="button" value="start" onclick="start()" /> <input type="button" value="stop" onclick="stop()" /> <input type="button" value="zeruj" onclick="zeruj()" /> </body> </html> 10

11 Nowe znaczniki semantyczne figure i figurecaption <figure> <img src="globus.jpg" alt="globus" width="50" height="50" /> <figcaption>to jest globus</figcaption> </figure> <figure> <figcaption>to jest globus</figcaption> <img src="globus.jpg" alt="globus" width="50" height="50" /> </figure> Znacznik <figure> opisuje zawartość taką jak ilustracja, zdjęcie, rysunek, diagram, fragment kodu programu. Znacznik<figcaption> określa legendę elementu w <figure>, może stanowić nagłówek lub podpis. 11

12 Nowe znaczniki semantyczne audio <audio src="traktor.mp3" controls autoplay loop preload="none"> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> controls wyświetlanie panelu sterowania odtwarzaniem, autoplay automatyczne odtwarzanie od razy, gdy to możliwe, MSIE Opera Chrome loop powtarzanie odtwarzania. preload wskazówka dla przeglądarki: jak postępować z dźwiękiem w trakcie ładowania strony: auto ładowanie pliku w trakcie ładowania strony; metadata ładowanie metadanych w trakcie ładowania strony; none plik nie powinien być ładowany w trakcie ładowania strony. Dla autoplay = true atrybut preload jest ignorowany. 12

13 Nowe znaczniki semantyczne audio + source <audio controls> <source src="traktor.mp3" type="audio/mpeg" /> <source src="traktor.ogg" type="audio/ogg" /> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> Nieobowiązkowe Zaleca się stosowanie znacznika <source> dla <audio> and <video> pozwala to na określanie alternatywnych plików źródłowych dla multimediów, przeglądarka może wybrać określony typ np. w zależności od wykorzystywanych kodeków. type określa typ MIME dla pliku (dla audio zwykle: audio/ogg, audio/mpeg). Znaczenie atrybutu src jest oczywiste, kolejny atrybut media nie jest aktualnie obsługiwany w żadnej ze znanych przeglądarek. 13

14 audio + source versus audio scr <audio controls> <source src="cos.mp3" type="audio/mpeg" /> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <audio src="cos.mp3" controls > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> Dynamiczna modyfikacja elementu source i jego atrybutów po wstawieniu go do elementu audio (video również) nie przynosi oczekiwanych rezultatów. Zaleca się stosowanie atrybutu src lub wykorzystania funkcji load(). 14

15 Nowe znaczniki semantyczne sterowanie elementem audio function playsound() var audioitem = document.getelementbyid( "player" ); if( audioitem ) audioitem.play(); function pausesound() var audioitem = document.getelementbyid( "player" ); if( audioitem ) audioitem.pause(); <body> <audio id="player"> <source id= "playersrc" src="traktor.mp3" type="audio/mpeg" /> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> </body> 15

16 Na marginesie rożne odwołania do elementów function playsound() var audioitem = document.getelementbyid( "player" ); if( audioitem ) audioitem.play(); function playsound() document.getelementbyid( "player" ).play(); 16

17 Pokazywanie/ukrywanie panelu sterującego controls function playsound() var audioelement = document.getelementbyid( "player" ); if( audioelement ) audioelement.controls = true; audioelement.play(); function togglecontrols() var audioelement = document.getelementbyid( "player" ); if( audioelement ) audioelement.controls =!audioelement.controls; <body> <audio id="player" src="rock.ogg"> Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <p> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> <input type="button" value="wł ą cz/wył ą cz panel" onclick= "togglecontrols()" /> </p> </body> 17

18 Więcej na temat audio, przykład <body> <audio id="player" src="traktor.mp3" > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <p id="filename"></p> <p id="duration"></p> <p id="volume"></p> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> <input type="button" value="gło ś niej" onclick= "changevolume(0.1)" /> <input type="button" value="ciszej" onclick="changevolume(-0.1)" /> <input type="button" value="w kóło" onclick="setrepeat()" /> </body> 18

19 Więcej na temat audio, przykład, cd... function playsound() var audioelement = document.getelementbyid( "player" ); var fileinfo = document.getelementbyid( "filename" ); var durationinfo = document.getelementbyid( "duration" ); var volumeinfo = document.getelementbyid( "volume" ); fileinfo.innerhtml = audioelement.src; durationinfo.innerhtml = audioelement.duration.tofixed( 2 ); volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); audioelement.play(); function pausesound() document.getelementbyid( "player" ).pause(); 19

20 Więcej na temat audio, przykład, cd... function changevolume( steep ) var audioelement = document.getelementbyid( "player" ); var volumeinfo = document.getelementbyid( "volume" ); audioelement.volume += steep; volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); function setrepeat() document.getelementbyid( "player" ).loop = true; 20

21 Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku <body> <audio id="player" src="traktor.mp3" ontimeupdate="showcurrtime()" > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> <p id="filename"></p> <p id="duration"></p> <p id="current"></p> <p id="volume"></p> <input type="button" value="odtwórz" onclick="playsound()" /> <input type="button" value="zatrzymaj" onclick="pausesound()" /> <input type="button" value="gło ś niej" onclick="changevolume(0.1)" /> <input type="button" value="ciszej" onclick="changevolume(-0.1)" /> <input type="button" value="w kóło" onclick="setrepeat()" /> </body> 21

22 Pobieranie informacji o aktualnym czasie odtwarzanego dźwięku function showcurrtime() document.getelementbyid( "current" ).innerhtml = document.getelementbyid( "player" ).currenttime.tofixed( 2 ); <body> <audio id="player" src="traktor.mp3" ontimeupdate="showcurrtime()" > Ta przegl ą darka nie odtwarza d ź wi ę ku. </audio> 22

23 Wykorzystanie audio i dynamicznie dodanego elementu progress var progressbar = null; function initprogressbar( duration ) progressbar = document.createelement( 'progress' ); document.body.appendchild( progressbar ); progressbar.value = 0; progressbar.max = duration; function playsound() volumeinfo.innerhtml = audioelement.volume.tofixed( 2 ); if( progressbar == null ) initprogressbar( audioelement.duration ); audioelement.play(); function showcurrtime() progressbar.value = document.getelementbyid( "player" ).currenttime; 23

24 Dynamicznie dodawany element audio i progress <body> <p>wybierz:</p> <ul> <li><a href="#" onclick="playsong( 'rock_s.ogg' )">Rock</a></li> <li><a href="#" onclick="playsong( 'jazz_s.ogg' )">Jazz</a></li> <li><a href="#" onclick="playsong( 'folk_s.ogg' )">Folk</a></li> </ul> <input type="button" value="zatrzymaj" onclick="pausesound()" /> </body> 24

25 Dynamicznie dodawany element audio i progress var progressbar = null; function var audioelement = null; showprogres() * progressbar.max = audioelement.duration; progressbar.value function playsong( songname ) = audioelement.currenttime; if( audioelement == null ) audioelement = new Audio(); document.body.appendchild( audioelement ); audioelement.addeventlistener( "timeupdate", showprogres, true ); audioelement.src = songname; if( progressbar == null ) progressbar = document.createelement( "progress" ); document.body.appendchild( progressbar ); if( progressbar.hidden ) progressbar.hidden = false; audioelement.play(); * function pausesound() audioelement.pause(); progressbar.hidden = true; 25

26 Różne sposoby tworzenia elementu audio Wykorzystanie konstruktorów: audioelement = new Audio(); audioelement.src = 'rock_s.ogg'; document.body.appendchild( audioelement ); audioelement = new Audio( 'rock_s.ogg' ); document.body.appendchild( audioelement ); Wykorzystanie funkcji createelement(): audioelement = document.createelement( 'audio' ); audioelement.src = 'rock_s.ogg'; document.body.appendchild( audioelement ); 26

27 Istnieje znacznie więcej możliwości programowej obsługi Do wykrywania czy odtwarzanie trwa czy też zostało wstrzymane służy właściwość paused. function audio_play_pause() var audioelement = document.getelementbyid("player"); if( audioelement.paused ) audioelement.play(); else audioelement.pause(); Jest jeszcze dużo więcej, choć oficjalnie jakby nie ma...: https://developer.mozilla.org/en/using_audio_and_video_in_firefox Copyright Roman Simiński 27

28 Odtwarzanie sekwencji wideo element video <video src="wildlife.ogg" controls autoplay loop> Ta przegl ą darka nie odtwarza wideo. </video> Większość atrybutów znanych ze znacznika audio występuje również dla znacznika video. Chrome FireFox Opera Wykorzystanie znacznika source: <video controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przegl ą darka nie odtwarza wideo. </video> 28

29 Atrybut poster <video src="wildlife.ogg" controls poster="vid_poster.jpg" > Ta przegl ą darka nie odtwarza wideo. </video> Gdy autoplay == false, atrybut poster pozwala określić obraz który będzie pokazywany do czasu wybrania gdy użytkownik nie naciśnie przycisku odtwarzania. Obraz ten jest również wyświetlany podczas ściągania sekwencji wideo. Gdy obraz nie zostanie określony, wykorzystywana jest pierwsza klatka filmu. 29

30 Atrybuty width i height <video width="200" height="150" autoplay controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przegl ą darka nie odtwarza wideo. </video> <video width="320" height="240" autoplay controls poster="vid_poster.jpg"> <source src="wildlife.mp4" type="video/mp4" /> <source src="wildlife.ogg" type="video/ogg" /> Ta przegl ą darka nie odtwarza wideo. </video> 30

31 Atrybuty width i height uwagi Atrybuty height i width określają odpowiednio, liczoną w pikselach, wysokość i szerokość elementu video. Zaleca się określanie wartości opu parametrów, co pozwala przeglądarce na zarezerwowanie odpowiedniego obszaru podczas ładowania strony. Brak tych wartości powoduje często zmiany układu strony przeglądarka określi rozmiar ostateczny rozmiar obczaru dopiero po załadowaniu sekwencji wideo. Atrybuty height i width nie służą do zmiany (a w szczególności zmniejszenia wymiarów) sekwencji wideo. I tak zostanie pobrany plik w jego oryginalnej wersji, nawet jeżeli ma być wyświetlony w polu o małych wymiarach. Przeskalowanie obrazu powinno wyć wykonywane przy użyciu odpowiedniego oprogramowania przed zamieszczeniem sekwencji wideo na serwerze. Przy okazji istnieje atrybut muted, pozwalający na wyciszenie ścieżki audio w sekwencji wideo, ale nie jest aktualnie obsługiwany przez żadną z przeglądarek. 31

32 Atrybuty width i height uwagi, cd.... Jeżeli ustawione wartości atrybutów width i height nie pasują do proporcji obrazu wideo, obraz ten nie jest dopasowywany do ustalonych wymiarow. Obraz wideo zachowuje swoje proporcje i jest maksymalizowany w obszarze elementu video. Wymiary podaje się w pikselach bez podawania jednostki, inne jednostki mogą być używane z wykorzystaniem mechanizmu stylów CSS <video src="wildlife.ogg" height="300" width="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> 32

33 Ładowanie sekwencji wideo i atrybut preload Przeglądarki bardzo podchodzą do sprawy ładowania sekwencji wideo. Opera, Chrome i Safari automatycznie pobierają sekwencję wideo nawet gdy nie jest automatycznie odtwarzana. FireFox pobiera tyle, by określić pierwszą ramkę i czas trwania, być może aktualnie Opera czyni podobnie. Zastosowanie autoplay powoduje, że wideo jest ładowane tak szybko, jak to możliwe. Atrybut preload niekoniecznie jest dobrze interpretowany przez przeglądarki. Aby uzyskać efekt preload="none" można: <video id="player" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="załaduj" onclick="document.getelementbyid('player').src = 'wildlife.ogg'" /> 33

34 Pobieranie informacji na temat rozmiarów obrazu wideo Atrybuty videowidth i videoheight pozwalają na pobranie wewnętrznych rozmiarów sekwencji wideo. <script> function showinfo() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); info.innerhtml = player.videowidth + "x" + player.videoheight; </script> <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="poka ż info" onclick="showinfo()" /> <p id="info"></p> 34

35 Wykrywanie informacji o obsłudze formatów Nawet gdy element video jest obsługiwany, może się zdażyć że nie są obslugiwane konkretne kodeki. Dla elementu video istnieje metoda canplaytype() pozwalająca na wykrywanie obsługiwanych formatów. W przypadku gdy dany format nie jest obsługiwany, generowane jest zdarzenie informujące o błędzie można zdefiniować obsługę tego zdarzenia. MSIE FireFox 35

36 Metod canplaytype() function showsupport() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); var str; str = "video/ogg: " + player.canplaytype('video/ogg') + "<br \/>"; str += "video/mp4: " + player.canplaytype('video/mp4') + "<br \/>"; info.innerhtml = str; <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="poka ż info" onclick="showsupport()" /> <p id="info"></p> MSIE Chrome FireFox 36

37 Metod canplaytype() function showsupport() var player = document.getelementbyid("player"); var info = document.getelementbyid("info"); var str; str = "video/ogg: " + player.canplaytype('video/ogg') + "<br \/>"; str += "video/ogg codecs=theora, vorbis: " + player.canplaytype('video/ogg; codecs="theora, vorbis"') + "<br \/>"; info.innerhtml = str; <video id="player" src = 'wildlife.ogg' width="150" height="100" controls> Ta przegl ą darka nie odtwarza wideo. </video> <input type="button" value="poka ż info" onclick="showsupport()" /> <p id="info"></p> 37

38 Pobieranie informacji o odtwarzanej sekwencji function setduration() var duration = document.getelementbyid("player").duration; document.getelementbyid("durinfo").innerhtml = "Cało ś ć: " + duration.tofixed(2); document.getelementbyid("bar").max = duration; function showinfo() var player = document.getelementbyid("player"); var info = document.getelementbyid("currinfo"); var bar = document.getelementbyid("bar"); info.innerhtml = "Aktualnie: " + player.currenttime.tofixed(2); bar.value = player.currenttime; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przegl ą darka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any"> 38

39 Sterowanie odtwarzaną sekwencją ustawianie currenttime function rewindvideo() var player = document.getelementbyid("player"); var bar = document.getelementbyid("bar"); player.currenttime = bar.value; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przegl ą darka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any" onchange="rewindvideo()"> 39

40 Sterowanie odtwarzaną sekwencją start, pause function rewindvideo() var player = document.getelementbyid("player"); var bar = document.getelementbyid("bar"); player.currenttime = bar.value; <video id="player" src = "wildlife.ogg" controls ontimeupdate="showinfo()" ondurationchange="setduration()"> Ta przegl ą darka nie odtwarza wideo. </video> <p id="durinfo"></p> <p id="currinfo"></p> <input id="bar" type="range" step="any" onchange="rewindvideo()"> 40

41 Ciąg dalszy nastąpi... 41

Aplikacje internetowe

Aplikacje internetowe Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Elementy multimedialne Nowe znaczniki semantyczne audio

Bardziej szczegółowo

Aplikacje internetowe Koncepcja Architektura Technologie

Aplikacje internetowe Koncepcja Architektura Technologie Aplikacje internetowe Koncepcja Architektura Technologie Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl HTML5 wprowadzenie Rozwój środowiska WWW Trochę faktów historycznych Copyright Roman

Bardziej szczegółowo

HTML5 Nowe znaczniki header nav article section aside footer

HTML5 Nowe znaczniki header nav article section aside footer Specyfikacja HTML5 wprowadza nowe znaczniki pozwalające w łatwy i intuicyjny sposób budować szkielet strony, który przez zmniejszenie ilości kodu jest czytelniejszy i łatwiejszy w utrzymaniu, pozwala poza

Bardziej szczegółowo

Audio i Video w HTML5

Audio i Video w HTML5 Audio i Video w HTML5 http://www.asdala.de/netz/html/video.html Kiedyś

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

Multimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski

Multimedia w HTML5. Statyczne witryny internetowe 2TI/TOR. Marek Kwiatkowski Multimedia w HTML5 Statyczne witryny internetowe 2TI/TOR Marek Kwiatkowski Cele lekcji: Poznanie zasady umieszczania plików multimedialnych w HTML5 Zrozumienie istoty stosowania nowych znaczników w HTML5

Bardziej szczegółowo

rk HTML 4 a 5 różnice

rk HTML 4 a 5 różnice rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

HTML 5 język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest

HTML 5 język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest język wykorzystywany do tworzenia i prezentowania stron internetowych www. Jest rozwinięciem języka HTML 4 i jego XML-owej odmiany (XHTMl 1), opracowywane w ramach prac grupy roboczej WHATWG (Web Hypertext

Bardziej szczegółowo

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37 Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników

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

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ł 4 HTML 5 i CSS 3.0 Agenda Co nowego w HTML 5? Nowe elementy HTML 5 Nowe elementy w formularzach HTML

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

Osadzenie pliku dźwiękowego na stronie www

Osadzenie pliku dźwiękowego na stronie www Osadzenie pliku dźwiękowego na stronie www gdzie jako "ścieżka dostępu do pliku" należy podać lokalizację

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

Przegląd technologii

Przegląd technologii rzegląd technologii 1/34 Przegląd technologii Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 29 marca

Bardziej szczegółowo

Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek.

Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Obiektowy model przeglądarki (BOM, Browser Object Model) Współdziałanie przeglądarki i skryptów w pliku HTML (lub XML), oraz współdziałanie przeglądarki i ekranu ilustruje niżej położony rysunek. Plik

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

Zawartość specyfikacji:

Zawartość specyfikacji: Zawartość specyfikacji: Wielkość, waga i kodowanie Umieszczanie obrazków w kreacji Elementy niedopuszczalne Nazewnictwo plików Stopka mailingu Nie spełniam wymagań pracodawcy Waga, wielkość i kodowanie

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

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania. Reformuje on znane zasady języka HTML 4 w taki sposób, aby były zgodne z XML (HTML przetłumaczony na XML).

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

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

Zajęcia 4 - Wprowadzenie do Javascript

Zajęcia 4 - Wprowadzenie do Javascript Zajęcia 4 - Wprowadzenie do Javascript Co to jest Javascript Javascript jest językiem skryptowym pozwalającym na dołączanie dodatkowej funkcjonalności do stron WWW. Jest ona najczęściej związana z modyfikacją

Bardziej szczegółowo

<meta http-equiv=content-type content=text/html; charset=iso > Podstawy HTML Wstęp Podstawowa struktura pliku html: tytuł strony

Bardziej szczegółowo

Tomasz Grześ. Systemy zarządzania treścią, cz. II

Tomasz Grześ. Systemy zarządzania treścią, cz. II Tomasz Grześ Systemy zarządzania treścią, cz. II Panel administracyjny Panel administracyjny pozwala na zarządzanie wszystkimi elementami pakietu, m.in. zarządzanie użytkownikami, edycję stron, instalowanie

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

Mailingi HTML. Specyfikacja techniczna

Mailingi HTML. Specyfikacja techniczna Mailingi HTML Specyfikacja techniczna Informacje wstępne Grupa Morizon S.A. zastrzega sobie prawo do odmowy emisji materiałów reklamowych bez podania przyczyny, w szczególności gdy ich jakość techniczna

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

Programowanie w Sieci Internet o HTML 5 i CSS 3.0 słów kilka. Kraków, 17 października 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ

Programowanie w Sieci Internet o HTML 5 i CSS 3.0 słów kilka. Kraków, 17 października 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ Programowanie w Sieci Internet o HTML 5 i CSS 3.0 słów kilka Kraków, 17 października 2014 mgr Piotr Rytko Wydział Matematyki i Informatyki UJ Plan zajęć HTML5: struktura HTML5, elementy HTML5, HTML forms,

Bardziej szczegółowo

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

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

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

Rys.2.1. Drzewo modelu DOM [1]

Rys.2.1. Drzewo modelu DOM [1] 1. CEL ĆWICZENIA Celem ćwiczenia jest przedstawienie możliwości wykorzystania języka JavaScript do tworzenia interaktywnych aplikacji działających po stronie klienta. 2. MATERIAŁ NAUCZANIA 2.1. DOM model

Bardziej szczegółowo

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ Poznań, 2012-10-04 AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ NAZWA ADRES STRONY ILOŚĆ BŁĘDÓW WCAG 33 ILOŚĆ OSTRZEŻEŃ WCAG 3 TYP DOKUMENTU UŻYTY FORMAT (X)HTML JĘZYK OWANIE STRONY Urząd Marszałkowski Województwa

Bardziej szczegółowo

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco: 1 1. Ramki Najbardziej elastycznym sposobem budowania stron jest uŝycie ramek. Ułatwiają one nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka obszarów. KaŜdy z nich zawiera

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium JavaServer Pages Celem ćwiczenia jest zbudowanie kilku prostych stron internetowych z użyciem technologii JSP. Podczas ćwiczenia wykorzystany zostanie algorytm sortowania bąbelkowego

Bardziej szczegółowo

Aplikacje WWW - laboratorium

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

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

Programowanie w języku C++

Programowanie w języku C++ Programowanie w języku C++ Część siódma Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi

Bardziej szczegółowo

PROBLEMY TECHNICZNE. Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS

PROBLEMY TECHNICZNE. Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS PROBLEMY TECHNICZNE Co zrobić, gdy natrafię na problemy związane z użytkowaniem programu DYSONANS Jeżeli stwierdziłeś występowanie błędów lub problemów podczas pracy z programem DYSONANS możesz skorzystać

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

Funkcje i instrukcje języka JavaScript

Funkcje i instrukcje języka JavaScript Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje

Bardziej szczegółowo

Nowoczesne Technologie WWW

Nowoczesne Technologie WWW INP002295W Test zaliczeniowy A 10.06.2016 Nowoczesne Technologie WWW 1. Napisz szablon poprawnej i responsywnej strony HTML5 w polskiej wersji językowej:

Bardziej szczegółowo

Udostępnianie obrazu z kamer Sanyo HD na stronach WWW PORADNIK

Udostępnianie obrazu z kamer Sanyo HD na stronach WWW PORADNIK PORADNIK Udostępnianie obrazu z kamer Sanyo HD na stronach WWW 1. Informacje wstępne Istnieje kilka sposobów wyświetlenia płynnego obrazu w formacie H.264 z kamer Sanyo z serii HD na dostępnych publicznie

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

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS Autor prezentacji: Michał Kołkowski Promotor: prof dr. hb. Włodzisław Duch SPIS TREŚCI 1. Ogólnie o Canvasie 2. Utworzenie szablonu do pracy z Canvas

Bardziej szczegółowo

Specyfikacja techniczna kreacji HTML5

Specyfikacja techniczna kreacji HTML5 Specyfikacja techniczna kreacji HTML5 www.gemius.pl Parametry przekazywane do kreacji Kreacje HTML osadzane są na stronie za pomocą znacznika . W adresie do pliku kreacji przekazywane są parametry

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

XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2

XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2 XHTML2 i HTML5 Przyszłość WWW oparta o nowe standardy sieciowe HTML5 i XHTML2 mgr inż. Dominik Tomaszuk Uniwersytet w Białymstoku XHTML2 XML XHTML2 to aplikacja XML a, która nie daje innych możliwości

Bardziej szczegółowo

Poprzednia wersja HTML, HTML 4.01, pochodzi z 1999. Sieć od tego czasu zmieniła się znacznie.

Poprzednia wersja HTML, HTML 4.01, pochodzi z 1999. Sieć od tego czasu zmieniła się znacznie. Co to jest HTML5? HTML5 będzie nowym standardem dla HTML. Poprzednia wersja HTML, HTML 4.01, pochodzi z 1999. Sieć od tego czasu zmieniła się znacznie. HTML5 jest ciągle w stadium tworzenia i konkretyzacji.

Bardziej szczegółowo

Tworzenie stron internetowych RAMKI

Tworzenie stron internetowych RAMKI Tworzenie stron internetowych RAMKI RAMKI Ramka to zdefiniowana część okna przeglądarki, której to części przypisano właściwości takie jak całemu oknu. ramka może być przewijana niezależnie od pozostałej

Bardziej szczegółowo

PROJEKTOWANIE STRON WWW W4

PROJEKTOWANIE STRON WWW W4 Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak PROJEKTOWANIE STRON WWW W4 ODNOŚNIKI PSEUDOKLASY

Bardziej szczegółowo

URL: http://www.ecdl.pl

URL: http://www.ecdl.pl Syllabus WEBSTARTER wersja 1.0 Polskie Towarzystwo Informatyczne 2007 Copyright wersji angielskiej: Copyright wersji polskiej: The European Computer Driving Licence Foundation Ltd. Polskie Towarzystwo

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium PHP. Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej wykorzystującej technologię PHP. Aplikacja pokazuje takie aspekty, obsługa formularzy oraz zmiennych

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

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

Programowanie WEB PODSTAWY HTML

Programowanie WEB PODSTAWY HTML Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony

Bardziej szczegółowo

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.

JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. IŚ ćw.8 JAVAScript w dokumentach HTML (1) JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript

Bardziej szczegółowo

Tabele. Przykład 15a.htm. Cennik

Cennik

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER=1> <TR> Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem

Bardziej szczegółowo

Sigplus. Galeria w Joomla

Sigplus. Galeria w Joomla Sigplus Galeria w Joomla Cel prezentacji Pokazanie że Sigplus jest prosty w konfiguracji; Metody konfiguracji Sigplusa; Jest jednym z najczęściej używanych dodatków w tworzeniu galerii na stronie internetowej

Bardziej szczegółowo

Kompresja stron internetowych

Kompresja stron internetowych Kompresja stron internetowych Patryk Jar Tech 3 Camp, 18 czerwca 2013 r. O mnie Patryk Jar Webdeveloper Nor-sta (nor-sta.eu) yarpo.pl 2 3 Agenda Lepszy kod w przeglądarce Mniej żądań HTTP Mniej danych

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

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

Spis treści. Wprowadzenie 11 Rozdział 1. Pierwsze spotkanie z JavaScriptem 15. Spis treści

Spis treści. Wprowadzenie 11 Rozdział 1. Pierwsze spotkanie z JavaScriptem 15. Spis treści Spis treści Spis treści Wprowadzenie 11 Rozdział 1. Pierwsze spotkanie z JavaScriptem 15 Czym jest JavaScript?... 16 JavaScript to nie Java... 17 Skąd się wziął język JavaScript... 19 Co potrafi JavaScript...

Bardziej szczegółowo

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści

E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, Spis treści E.14.1 Tworzenie stron internetowych / Krzysztof T. Czarkowski, Ilona Nowosad. Warszawa, 2014 Spis treści Przewodnik po podręczniku 8 Wstęp 10 1. Hipertekstowe języki znaczników 1.1. Elementy i znaczniki

Bardziej szczegółowo

Krótki kurs JavaScript

Krótki kurs JavaScript Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania

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

REKLAMA INTERNETOWA WYMAGANIA TECHNICZNE

REKLAMA INTERNETOWA WYMAGANIA TECHNICZNE WYMAGANIA TECHNICZNE y form reklamowych dostępnych w serwisach www.gazetaolsztynska.pl i wm.pl SPIS TREŚCI 3 SPIS TREŚCI Zasady ogólne...................................str. 4 1. Baner tradycyjny................................str.

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

Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1]

Programowanie Multimediów. Programowanie Multimediów JAVA. wprowadzenie do programowania (3/3) [1] JAVA wprowadzenie do programowania (3/3) [1] Czym jest aplikacja Java Web Start? Aplikacje JAWS są formą pośrednią pomiędzy apletami a aplikacjami Javy. Nie wymagają do pracy przeglądarki WWW, jednak mogą

Bardziej szczegółowo

Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:

Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji: Technologia wykonania projektu: HTML5 Javascript: o jquery (1.9.1), o CreateJS (0.6.1): EaselJS, TweenJS, PreloadJS. Części funkcjonalne projektu: Strona internetowa pliki strony internetowej zlokalizowane

Bardziej szczegółowo

Specyfikacja techniczna form reklamowych do umieszczenia na stronie

Specyfikacja techniczna form reklamowych do umieszczenia na stronie Specyfikacja techniczna form reklamowych do umieszczenia na stronie www.olsztyn.tvp.pl (ważna od 1 lipca 2017 r.) Postanowienia ogólne Wszystkie formy reklamowe przeznaczone do emisji na stronie www.olsztyn.tvp.pl

Bardziej szczegółowo

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30

MS Word 2010. Długi dokument. Praca z długim dokumentem. Kinga Sorkowska 2011-12-30 MS Word 2010 Długi dokument Praca z długim dokumentem Kinga Sorkowska 2011-12-30 Dodawanie strony tytułowej 1 W programie Microsoft Word udostępniono wygodną galerię wstępnie zdefiniowanych stron tytułowych.

Bardziej szczegółowo

1. Przypisy, indeks i spisy.

1. Przypisy, indeks i spisy. 1. Przypisy, indeks i spisy. (Wstaw Odwołanie Przypis dolny - ) (Wstaw Odwołanie Indeks i spisy - ) Przypisy dolne i końcowe w drukowanych dokumentach umożliwiają umieszczanie w dokumencie objaśnień, komentarzy

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

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0 Przeznaczenie Sylabusa Dokument ten zawiera szczegółowy Sylabus dla modułu ECDL/ICDL Web Editing. Sylabus opisuje zakres wiedzy i umiejętności, jakie

Bardziej szczegółowo

WYKŁAD 1 ANGULARJS CZĘŚĆ 1

WYKŁAD 1 ANGULARJS CZĘŚĆ 1 WYKŁAD 1 ANGULARJS CZĘŚĆ 1 DEFINICJA ANGULARJS Framework JavaScript na licencji open-source wykorzystywany do tworzenia aplikacji SPA (single page applications) w oparciu o wzorzec projektowy Model-View-Controler.

Bardziej szczegółowo

Kurs HTML 4.01 TI 312[01]

Kurs HTML 4.01 TI 312[01] TI 312[01] Spis treści 1. Wiadomości ogólne... 3 2. Wersje języka HTML... 3 3. Minimalna struktura dokumentu... 3 4. Deklaracje DOCTYPE... 3 5. Lista znaczników, atrybutów i zdarzeń... 4 5.1 Lista atrybutów

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

Elementy div i style CSS w praktyce

Elementy div i style CSS w praktyce Elementy div i style CSS w praktyce Włodzimierz Gajda 23 listopada 2005 ver. 0.2 Streszczenie Artykuł omawia kulisy tworzenia strony internetowej wyłącznie w oparciu o elementy div oraz kaskadowe arkusze

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 Ustalenia dodatkowe... 3 Kreacje HTML5... 4 1. Formy reklamowe... 5 1.1. Link tekstowy... 5 1.2.

Bardziej szczegółowo

Wprowadzenie do języka HTML

Wprowadzenie do języka HTML Radosław Rudnicki (joix@mat.umk.pl) 05.09.2009 r. Wprowadzenie do języka HTML Do tworzenia stron internetowych wystarczy użyd zwykłego Notatnika oferowanego przez system Windows, czy dowolny inny system

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

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 Luty 2014 Spis treści Ogólne informacje... 3 Kreacje SWF... 3 1. Formy reklamowe... 5 1.1. Link tekstowy... 5 1.2. Link tekstowy plus...

Bardziej szczegółowo

Wdrożenie modułu płatności eservice. dla systemu oscommerce 2.3.x

Wdrożenie modułu płatności eservice. dla systemu oscommerce 2.3.x Wdrożenie modułu płatności eservice dla systemu oscommerce 2.3.x - dokumentacja techniczna Wer. 01 Warszawa, styczeń 2014 1 Spis treści: 1 Wstęp... 3 1.1 Przeznaczenie dokumentu... 3 1.2 Przygotowanie

Bardziej szczegółowo

NTW - Bezp. sieci Lista nr 1 mgr inż. Adam Dudek

NTW - Bezp. sieci Lista nr 1 mgr inż. Adam Dudek HTML 5 i podstawy PHP NTW - Bezp. sieci Lista nr 1 mgr inż. Adam Dudek 1. HTML 5 - wybór koloru - wybór daty wybór daty i czasu

Bardziej szczegółowo

Specyfikacja mailingu GG Network

Specyfikacja mailingu GG Network Specyfikacja mailingu GG Network Styczeń 2012 2 Mailing założenia ogólne Do wysłanego mailingu konieczne jest dostarczenie: kreacji typu HTML (do 30 kb); tematu mailingu; nadawcy mailingu; danych reklamodawcy

Bardziej szczegółowo

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.)

TECHNIKI WWW (WFAIS.IF-C125) (zajęcia r.) TECHNIKI WWW (WFAIS.IF-C125) (zajęcia 12.10.2016 r.) Zajęcia: grupa 2: środa 12:00-13:30 Prowadzący: Dr inż. Marcin Zieliński marcin.zielinski@uj.edu.pl pokój: B-2-33 (Zakład Fizyki Jądrowej) konsultacje:

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

XML extensible Markup Language. część 5

XML extensible Markup Language. część 5 XML extensible Markup Language część 5 XML ważne zastosowanie Jak często pracujemy z plikami XML? Wróćmy jeszcze do wykładu poprzedniego. A dokładnie do pliku zawierającego ten wykład. xml_2017_wyklad_4.pptx

Bardziej szczegółowo

Defilada - przykład wykorzystujący animowane modele Copperlicht. Andrzej P.Urbański Politechnika Poznańska

Defilada - przykład wykorzystujący animowane modele Copperlicht. Andrzej P.Urbański Politechnika Poznańska Defilada - przykład wykorzystujący animowane modele Copperlicht Andrzej P.Urbański Politechnika Poznańska Czego potrzebujemy? Animowane postacie potrafiące wykonywać różne ruchy cząstkowe np.: chodzić,

Bardziej szczegółowo

Podstawy programowania w języku C++

Podstawy programowania w języku C++ Podstawy programowania w języku C++ Część trzynasta Tablice struktur, pliki struktur Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści

Bardziej szczegółowo

Poziomy wymagań Konieczny K Podstawowy- P Rozszerzający- R Dopełniający- D Uczeń:

Poziomy wymagań Konieczny K Podstawowy- P Rozszerzający- R Dopełniający- D Uczeń: WYMAGANIA EDUKACYJNE PRZEDMIOT: Witryny i aplikacje internetowe NUMER PROGRAMU NAUCZANIA (ZAKRES): 351203 Lp 1. Dział programu Podstawy HTML Poziomy wymagań Konieczny K Podstawowy- P Rozszerzający- R Dopełniający-

Bardziej szczegółowo

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz Wykład 2 TINT XHTML tabele i ramki Zofia Kruczkiewicz 1. Tabele 1.1. Przykład tabeli zawierającej kalendarz na miesiąc marzec ... definiuje tabelę Atrybuty: border ="" obramowanie tabeli,

Bardziej szczegółowo

ADOBE FLASH PLAYER Menedżer ustawień lokalnych

ADOBE FLASH PLAYER Menedżer ustawień lokalnych ADOBE FLASH PLAYER Menedżer ustawień lokalnych Informacje prawne Informacje prawne Informacje prawne znajdują się na stronie http://help.adobe.com/pl_pl/legalnotices/index.html. iii Spis treści Magazyn..............................................................................................................

Bardziej szczegółowo

Dokumentacja imapliteapi

Dokumentacja imapliteapi Dokumentacja imapliteapi Urząd Marszałkowski Województwa Małopolskiego 30.06.2014 Spis treści: 1. Wprowadzenie... 3 2. Sposób użycia biblioteki imapliteapi... 3 3. Metody API... 5 4. Lista gotowych kompozycji

Bardziej szczegółowo

ANKIETER wersja 5.1.2 tworzenie kwestionariusza

ANKIETER wersja 5.1.2 tworzenie kwestionariusza ANKIETER wersja 5.1.2 tworzenie kwestionariusza Wstęp Kwestionariusz do systemu Ankieter wprowadza się w postaci pliku XML. Pliki XML można tworzyć w dowolnym edytorze tekstu, zapisujemy go z rozszerzeniem

Bardziej szczegółowo

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap.

Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap. Kod szkolenia: Tytuł szkolenia: FRONT-END Front-end: solidne podstawy. Wszystko, co warto wiedzieć o HTML, CSS, JavaScript i Bootstrap. Dni: 5 Opis: Adresaci szkolenia Kurs przeznaczony jest zarówno dla

Bardziej szczegółowo