Aplikacje internetowe
|
|
|
- Justyna Kulesza
- 8 lat temu
- Przeglądów:
Transkrypt
1 Aplikacje internetowe HTML 5 Wprowadzenie Autor Roman Simiński Kontakt roman.siminski@us.edu.pl 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...: 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 Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Elementy multimedialne Nowe znaczniki semantyczne audio
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
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
Audio i Video w HTML5
Audio i Video w HTML5 http://www.asdala.de/netz/html/video.html Kiedyś
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
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
Podstawy programowania w języku JavaScript
Podstawy programowania w języku JavaScript Część trzecia Funkcje i programowanie sterowane zdarzeniami Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie
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ę
Systemy internetowe HTML + CSS - dodatki
Systemy internetowe HTML + CSS - dodatki West Pomeranian University of Technology, Szczecin; Faculty of Computer Science HTML 5 Sekcja to tematyczna grupa treści (dane kontaktowe, materiały dydaktyczne,
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
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
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
HTML (HyperText Markup Language) hipertekstowy język znaczników
HTML (HyperText Markup Language) hipertekstowy język znaczników Struktura dokumentu tytuł strony
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
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
Wykład 03 JavaScript. Michał Drabik
Wykład 03 JavaScript Michał Drabik Język programowania wykorzystywany na stronach internetowych głównie w celu umożliwienia interakcji z użytkownikiem. Kod JavaScript może być umieszczany w kodzie XHTML
Wprowadzenie. 1. Terminal WebRTC. LABORATORIUM 5: WebRTC komunikacja między terminalami.
LABORATORIUM 5: WebRTC komunikacja między terminalami. Wprowadzenie Technika WebRTC (złożenie angielskiego słowa Web oraz akronimu RTC, pochodzącego od angielskiego Real-Time Communications, komunikacja
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
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
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
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ę
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
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
Dokument hipertekstowy
Dokument hipertekstowy Laboratorium 3 Struktura semantyczna i formularze mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Design stackoverflow.com Design coursesweb.net Design accessibleculture.org
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
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ą
<ul> <ul> </ul> </ul>
Tworzenie list z CSS namiot materac latarka mapa koc namiot materac latarka mapa koc Lista (wykaz) umożliwia tworzenia uszeregowanych grup informacji
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE HTML W składni języka HTML wykorzystuje się charakterystyczne znaczniki. Każdy z nich zaczyna się i kończy ostrokątnym nawiasem a pomiędzy nimi znajduje się wyrażenie html. Rozróżniamy znaczniki
<meta http-equiv="content-type" content="text/html; charset=iso ">
Podstawy HTML Wstęp Podstawowa struktura pliku html: tytuł strony
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).
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
Aplikacje internetowe
Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Tworzenie prostych programów w środowisku przeglądarki W jaki sposób umieszczany
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ć
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,
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
DOM (Document Object Model)
DOM (Document Object Model) Czym jest DOM? Platforma, która pozwala skryptom na dynamiczny dostęp do zawartości strony i jej aktualizację. Elementy można dodawać, zmieniać lub usuwać. Specyfikacje Poziomy
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
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
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
HTML5 - informacje. Źródło. Struktura. Elementy. Atrybuty SVG.
HTML5 - informacje Źródło http://www.w3.org/tr/html5 Struktura example document example paragraph
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop Spis treści
HTML, CSS i JavaScript / Laura Lemay, Rafe Colburn, Jennifer Kyrnin. Gliwice, cop. 2017 Spis treści O autorach 11 Wprowadzenie 13 CZĘŚĆ I ROZPOCZĘCIE PRACY Lekcja 1. Co oznacza publikowanie treści w sieci
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,
Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty
Wybrane działy Informatyki Stosowanej Format HTML Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty dr hab. inż. Andrzej Czerepicki 2019 Definicja HTML HyperText Markup Language
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
Rys.2.1. Drzewo modelu DOM [1]
![Rys.2.1. Drzewo modelu DOM [1]](/thumbs/39/18108975.jpg "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
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
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
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
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
Natywne audio WPROWADZENIE
Natywne audio WPROWADZENIE Masz już do czynienia z osadzoną treścią, która jest importowana lub umieszczana na stronie internetowej - prawie codziennie. Pomyśl o elemencie img. Wstawia zawartość, obraz,
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
Podstawy JavaScript ćwiczenia Kontekst: Podstawy programowania w języku C i C++
Podstawy programowania w języku C i C++ Część czwarta Operatory i wyrażenia Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.us.edu.pl/~siminski Niniejsze opracowanie zawiera skrót treści wykładu,
Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.
Nazwa implementacji: CSS i box model Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie. Wprowadzenie CSS (kaskadowe arkusze stylów, ang. Cascading
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
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
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,
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.
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
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
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
Sierpień 2015 rozwiązanie plik: index.htlm
Sierpień 2015 rozwiązanie plik: index.htlm strona główna //ustalamy położenie wyświetlania
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
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
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
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
HTML. Tim Berners-Lee
HTML5 - początek HTML 1991 pojawia się pierwsza publicznie dostępna publikacja HTML Tags. 1993 - publikacja pierwszej propozycji specyfikacji języka"hypertext Markup Language (HTML)" Internet-Draft. 1995
Wybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej Aplikacje WWW. Statyczne oraz dynamiczne strony WWW. Skrypty po stronie klienta. Dr inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki
CZYM JEST JAVASCRIPT?
JAVASCRIPT JAVASCRIPT - CECHY Język skryptowy stosowany w sieci WWW Stosowany przez autorów witryn WWW głównie w celu: poprawy wyglądu stron walidacji danych z formularzy wykrywania typu przeglądarki tworzenia
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
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:
Programowanie WEB PODSTAWY HTML
Programowanie WEB PODSTAWY HTML Najprostsza strona HTML tytuł strony To jest moja pierwsza strona WWW. tytuł strony
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
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
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ć
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
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
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
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
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
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
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
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
plansoft.org Zmiany w Plansoft.org
Zmiany w Plansoft.org Mapy Google... 1 Tworzenie mapy... 2 Wprowadzanie szerokości i długości geograficznej... 2 Tworzenie mapy... 2 Dostosowanie wyglądu mapy... 3 Ograniczanie liczby zasobów do wyświetlenia
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
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
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.
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.
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
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
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:
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
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ęć,
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]](/thumbs/63/50009339.jpg "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ą
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
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
Pierwsza strona internetowa
HTML i CSS Pierwsza strona internetowa Rozpoczynając pracę na swoim komputerze powinieneś posiadać: dowolny edytor tekstowy (np. Notatnik), dostęp do Internetu, Microsoft Visual Studio. Podstawy formatowania
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
Tablica zawierająca odniesienia do znajdujących się w dokumencie obiektów typu Anchor.
Obiekt document służy do reprezentacji wczytanego do przeglądarki dokumentu HTML oraz zawiera szereg właściwości i metod pozwalających na jego modyfikację. Poprzez ten obiekt można otrzymać dostęp praktycznie
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...