Przegląd technologii
|
|
- Włodzimierz Wojciech Mikołajczyk
- 8 lat temu
- Przeglądów:
Transkrypt
1 rzegląd technologii 1/34 Przegląd technologii Tworzenie serwisów Web 2.0 dr inż. Robert Perliński Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 29 marca 2015
2 Przegląd technologii 2/34 Pregląd technologii Web 2.0 HTML, dzisiaj HTML5 i jego serializacja do XML a (XHTML5) CSS3 z wieloma możliwościami, np. udostępnianie animacji Preprocesory CSS (LESS, SASS/SCSS, STYLUS,...) Responsieve Design JavaScript i AJAX jquery - chodź już dzisiaj odchodzi się od tej biblioteki SPA - Single Page Application (większość logiki jest w JavaScript, modele danych w JSON) JavaScript Frameworks (niektóre to: AngularJS, Ember, React (Facebook), NODE.JS) JavaScript na serwerach - NODE.JS (protokół http ale dane przesyłane przez JSON)
3 Przegląd technologii 3/34 HTML5 alternatywa dla XHTML 2 kompatybilność wsteczna dodanie nowych elementów nowe typy wejściowe nowe atrybuty elementów formularzy brak elementów prezentacyjnych rozbudowane API: video, audio, drag and drop,...
4 Przegląd technologii 4/34 CSS3 na chwilę obecną wspierany w większości przez większość przeglądarek (CanIUse CSS3) czasem wymaga stosowania specjalnych prefiksów firefox moz Chrome webkit Safari webkit Opera o IE ms zapewniona wsteczna kompatybilność pierwszy ze standardów CSS podzielony na moduły już powstaje css4
5 Przegląd technologii 5/34 Dostępność HTML5 i CSS3 - Can I Use Dostępność najnowszych technologii dotyczących wyglądu stron interetowych i funkcjonowania front-end u (HTML5, CSS3, SVG, JS API) ale nie tylko, można sprawdzić na stronie Can I use dostarcza aktualne informacje o wspieraniu najnowszych technologii webowych dotyczących front-endu na komputerach stacjonarnych czy przeglądarkach urządzeń mobilnych. Dane są dostępne w postaci tabel. Jest możliwość wyboru kraju, kontynentu, określonej przeglądarki, dla której wspieranie wybranych technologii chcemy sprawdzić.
6 Przegląd technologii 6/34 Dostępność HTML5 i CSS3 - Can I Use Przykład sprawdzenia dostępności znacznika nav w Can I Use:
7 Przegląd technologii 7/34 Dostępność HTML5 W chwili obecnej HTML 5 jest wspierany (częściowo, choć w różnym stopniu) przez większość dostępnych na rynku przeglądarek internetowych: Firefox (wspierany w 79%) Chrome (wspierany w 91%) Safari 7.1, 8 (wspierany w 79%) Opera (wspierany w 93%) IE (wspierany w 50%) Android Browser (wspierany w 86%) Dane z
8 HTML 5 Nowości W HTML5 wprowadzono nowe elementy semantyczne pozwalające na definiowanie różnych części strony internetowej: article aside details figcaption figure footer header main mark nav section summary time Przegląd technologii 8/34
9 Projekt strony w XHTML 1.0/HTML 4.01 Przegląd technologii 9/34
10 Projekt strony w HTML 5 Przegląd technologii 10/34
11 Czy article może być złożone? Przegląd technologii 11/34
12 Przegląd technologii 12/34 Czym jest section? Element section określa ogólną sekcję strony, nie jest natomiast kontenerem. Jeżeli jest wymagany kontener należy wykorzystać div. Element ten zgodnie z tworzonym standardem ma określać ogólny zarys strony. Zalecane jest tworzenie sekcji w sytuacjach, kiedy naturalne wydaje się użycie nagłówka najwyższego stopnia. Nowe roboty internetowe kładą znaczący nacisk na sekcje.
13 Przegląd technologii 13/34 Jak definiować dokument HTML 5 XHTML 1.0: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en" lang="en»... </html> HTML 5: <!DOCTYPE html> <html>... </html>
14 Przegląd technologii 14/34 Jak uruchomić HTML5 w IE 8, 7, 6? IE 8 ma na dzień dzisiejszy blisko 3% udziału w rynku. IE 7 i IE 6 mnej niż 0.25%. Korzystamy z dziury... W przypadku przeglądarek IE istnieje możliwość utworzenia własnych elementów składni HTML z zastosowaniem javascript. document.createelement( header ); Jak włączyć tylko w IE? <!--[if lte IE 8]> <script src="html5.js"type="text/javascript"> </script> <![endif]-->
15 Przegląd technologii 15/34 Przykładowe elementy HTML5 canvas command details dialog embed figure mark output progress source video
16 Wybrane elementy CSS3 W CSS 3 możliwe jest przypisanie kilku obrazów dla elementu. Wybrane elementy CSS3: border-radius box-shadow border-image (w IE wspierany dopiero w wersji 11) background-size (CSS2 nie ma możliwości zmiany rozmiaru) background-origin content-box padding-box border-box background-clip (określa obszar wypełnienia) text-shadow (w IE wspierany od wersji 10) word-wrap text-justify text-overflow Przegląd technologii 16/34
17 Przegląd technologii 17/34 Wybrane elementy CSS3 word-break (Chrome, Opera wspiera i.otf, IE w wersji 8 tylko.eot transform (w IE dopiero od wersji 9) rotate translate scale skew matrix transition (IE wspiera od wersji 10) obsługa animimacji obsługa kolumn możliwość rozszerzania elementów
18 Przegląd technologii 18/34 Preprocesory CSS Preprocesory CSS to narzędzia, które pozwalają pisać kod CSS z wykorzystaniem dodatkowych możliwości. Każda poprawna składnia CSS jest interpretowana przez preprocesory. Oprócz tego można posłużyć się wieloma dodatkowymi poleceniami, które w czystym CSS nie będą już poprawne. Bardziej znane preprocesory: {less} - sass - stylus -
19 Przegląd technologii 19/34 Preprocesory CSS - zasada działania Jak działają preprocesory CSS Tworzy się plik dla preprocesora z odpowiednim rozszerzeniem, np. *.less czy *.scss. W takim pliku tworzy się kod CSS korzystając z dodatkowych możliwości preprocesora którego używamy. Aby uzyskać wynikowy plik *.css należ skompilować plik w którym prcujemy (*less, *.scss,...). Wynikowy plik *.css dodajemy do strony aby był interpretowany przez przeglądarkę. Istnieje możliwość prostej automatyzacji procesu kompilacji do plików *.css i ich podmiany w odpowiednim miejscu. Automatyczna kompilacja i podmiana pliku jest wykonywana po każdorazowym zapisie pliku źródłowego (*.less, *.scss).
20 rzegląd technologii 20/34 Niektóre cechy preprocesora Less Używanie zmiennych #5B83AD; + #111; #header { } CSS #header { color: #6c94be; }
21 Przegląd technologii 21/34 Niektóre cechy preprocesora Less Zagnieżdżanie struktur Zagnieżdżanie struktur pozwala na czytelniejsze i bardzej odpowiadające układowi znaczników HTML określanie wyglądu niż kaskadowy opis w samym pliku CSS. Less #header { color: black;.navigation { font-size: 12px; }.logo { width: 300px; } } CSS #header { color: black; } #header.navigation { font-size: 12px; } #header.logo { width: 300px; }
22 Przegląd technologii 22/34 Inne preprocesory - SASS Zagnieżdżanie, pomijanie niektórych elementów CSS W niektórych preprocesocha, np. SASS czy STYLUS można pomijać klamry, średniki czy nawet dwukropki. nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none
23 Przegląd technologii 23/34 Niektóre cechy preprocesora Less 5%; color: #888 / 4; + #111; height: 100% / 2 Less pozwala na operacje na liczbach, kolorach, zmiennych. Rozpoznaje różnice między kolorami i 1px + 5; Powyższy przykład zawiera wynik 6px;
24 rzegląd technologii 24/34 Niektóre cechy preprocesora Less Wykorzystanie funkcji Less pozwala na wykorzystanie różnorodnych funkcji, które zmieniają kolory, manipulują napisami, przeliczają dane 0.5;.class { width: percentage(@width); // returns 50% color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); } Powyżej mamy konwersję wartości 0.5 do 50%, zwiększają nasycenie koloru bazowego o 5%, a także rozjaśniają kolor tła o 25% względem bazowego i przesuwają odcień o 8 stopni.
25 Przegląd technologii 25/34 Niektóre cechy preprocesora Less Zasięg zmiennych i importowanie Zasięg zmiennych działa bardzo podobnie jak ma to miejsce w językach programowania - najpierw są poszukiwane zmienne lokalne, a jak takie nie zostaną znalezione, to są poszukiwane zmienne red; #page white; #header { // white } } Impotrowanie działa, tak jakby można tego oczekiwać. Można zaimportować plik *.less razem ze zmiennymi, które będą "library"; // "typo.css";
26 Przegląd technologii 26/34 Źródła W wykładzie wykorzystano informacje dostępne w internecie: Wprowadzenie do preprocesorów CSS Strona preprocesora stylus Strona preprocesora Less Wikipedia: Framework Angular, Backbone czy Ember? Czyli jak wybrać framework JavaScript
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ółowoPrzygotowanie do nowoczesnego programowania po stronie przeglądarki. (HTML5, CSS3, JS, wzorce, architektura, narzędzia)
Program szkolenia: Przygotowanie do nowoczesnego programowania po stronie przeglądarki (HTML5, CSS3, JS, wzorce, architektura, narzędzia) Informacje: Nazwa: Kod: Kategoria: Grupa docelowa: Czas trwania:
Bardziej szczegółowork 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ółowoLESS - CSS dla leniwych
LESS - CSS dla leniwych Tomasz Dziuda Główny programista w GavickPro dziudek@gmail.com Twitter: @dziudek zebymniezapomnial.tumblr.com Czym jest LESS? Alternatywy 1. SASS (Ruby) 2. Turbine (PHP) 3. CSS
Bardziej szczegółowoNowoczesne 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ółowoFront-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ółowoHTML 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ółowoSass Rewolucja w CSS +
Sass Rewolucja w CSS + Problemy CSSa Brak zmiennych Brak możliwości wykonywanie obliczeń Brak zagnieżdżeń Brak możliwości wykorzystania kodu ponownie Zarządzanie dużymi projektami jest uciążliwe Prefiksy
Bardziej szczegółowoSystemy 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,
Bardziej szczegółowoDzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.
Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu
Bardziej szczegółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 5 Box model i layouty mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Wysokość i szerokość domyślna szerokość elementu inline jest związana z jego zawartością
Bardziej szczegółowoHTML5 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ółowoBootstrap. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl
ootstrap 1/15 Bootstrap Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 11 kwietnia 2015 Bootstrap 2/15
Bardziej szczegółowoWYKŁ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ółowoPROJEKTOWANIE 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ółowoSpis 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ółowoXHTML - 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ółowoDokument hipertekstowy
Dokument hipertekstowy Laboratorium 1 mgr inż. Krzysztof Wróbel Katedra Lingwistyki Komputerowej Kontakt http://wierzba.wzks.uj.edu.pl/~kwrobel/ k.wrobel@epi.uj.edu.pl konsultacje, pokój 3.211 2 Bilans
Bardziej szczegółowoEfektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript
Kod szkolenia: Tytuł szkolenia: HTML5/ANG Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript Dni: 5 Opis: Adresaci szkolenia: Kurs przeznaczony jest dla programistów
Bardziej szczegółowoAplikacje internetowe
Aplikacje internetowe HTML 5 Wprowadzenie Autor Roman Simiński Kontakt roman.siminski@us.edu.pl www.siminskionline.pl Niniejsze opracowanie zawiera skrót treści wykładu, lektura tych materiałów nie zastąpi
Bardziej szczegółowoHTML, Javascript, CSS oraz Bootstrap
HTML, Javascript, CSS oraz Bootstrap Adresaci szkolenia: Kurs przeznaczony jest dla programistów pragnących poszerzyć swoje kompetencje w zakresie tworzenia aplikacji webowych. W ramach szkolenia zostaną
Bardziej szczegółowo2. 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ółowoANIMACJE 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ółowoWYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1
WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1 TROCHĘ HISTORII strona internetowa Webmaster - grafika, baza, programowanie, layout (Photoshop, MySQL, PHP, HTML, CSS, JS) strona internetowa Grafik - grafika (Photoshop,
Bardziej szczegółowoPodstawy (X)HTML i CSS
Inżynierskie podejście do budowania stron WWW momat@man.poznan.pl 2005-04-11 1 Hyper Text Markup Language Standardy W3C Przegląd znaczników Przegląd znaczników XHTML 2 Cascading Style Sheets Łączenie z
Bardziej szczegółowoYoung Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2
Young Programmer: HTML+PHP Dr inż. Małgorzata Janik, Zajęcia #2 Ramowy program warsztatów Zajęcia 1: Zajęcia wprowadzające, HTML Zajęcia 2: Style CSS (tabele i kaskadowe arkusze stylów) Zajęcia 3: Podstawy
Bardziej szczegółowoplansoft.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
Bardziej szczegółowoZ CSS3 szybciej i przyjemniej
1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki
Bardziej szczegółowoHTML, 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
Bardziej szczegółowoPLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ),
PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ), Program 351203 Opracowanie: Grzegorz Majda Tematyka zajęć 1. Wprowadzenie do aplikacji internetowych
Bardziej szczegółowoDwie perspektywy responsive web design: user experience i front-end developer
Dwie perspektywy responsive web design: user experience i front-end developer M O B I L E T R E N D S C O N F E R E N C E & A W A R D S 2 0 1 3 K r a k ó w 2 1-2 2 l u t y 2 0 1 3 R O Z D Z I A Ł 0 1 Czym
Bardziej szczegółowoWprowadzenie. 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
Bardziej szczegółowoExulto Software House
Exulto Software House Oferta i cennik współpracy programistycznej biuro@exulto.pl Tworzymy autorskie aplikacje internetowe, z wykorzystaniem nowoczesnych technologii. Przygotowanie aplikacji internetowej,
Bardziej szczegółowoProjektowanie aplikacji internetowych. CSS w akcji
Projektowanie aplikacji internetowych CSS w akcji Tak to ma wyglądać Strona : 2 Założenie Treść strony ma być oddzielona od informacji o jej wyglądzie. Kod HTML nie powinien zawierać żadnych informacji
Bardziej szczegółowoBezbolesny wstęp do CSS
CZĘŚĆ 1 Bezbolesny wstęp do CSS... 1 1 HTML i CSS: skupmy się na podobieństwach... 3 Krótka historia HTML i CSS... 5 Udokumentowane początki HTML...5 Odziedziczone po HTML ograniczenia... 5 Obejścia i
Bardziej szczegółowoLaboratorium 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ółowoXHTML2 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ółowoWYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1
WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1 TROCHĘ HISTORII strona internetowa Webmaster - grafika, baza, programowanie, layout (Photoshop, MySQL, PHP, HTML, CSS, JS) strona internetowa Grafik - grafika (Photoshop,
Bardziej szczegółowoDokumentacja Skryptu Mapy ver.1.1
Dokumentacja Skryptu Mapy ver.1.1 2 Dokumentacja Skryptu Mapy ver.1.1 Spis treści Dokumentacja skryptu... 3 Dodatkowe informacje i kontakt... 7 3 Dokumentacja Skryptu Mapy ver.1.1 Dokumentacja skryptu
Bardziej szczegółowoI. 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ółowoSzczegółowy opis zamówienia:
Szczegółowy opis zamówienia: Rok 2016 budowa stron w html5 (8h v + 4h ćw) 8 szt. html5 - zaawans. (7h v + 5h ćw) 8 szt. programowania w java script (9h v + 7h ćw) 8 szt. java script zaawans (8h v + 4h
Bardziej szczegółowo2 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ółowoHTML. 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
Bardziej szczegółowoKrok 1: Stylizowanie plakatu
HTML & CSS 1 Wanted! Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy
Bardziej szczegółowoAngular, cz. II. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl
ngular, cz. II 1/24 Angular, cz. II Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 10 kwietnia 2015
Bardziej szczegółowoE.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ółowoNazwa 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
Bardziej szczegółowoAplikacje 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ółowoPowtórzenie materiału: CSS3 Spis treści
Powtórzenie materiału: CSS3 Spis treści Kolory...2 Jednostki...3 Czcionka...3 Elementy blokowe...3 Cienie...5 Gradient...5 Zgodność z przeglądarkami...6 Kolory Wartości kolorów w CSS podawać można na 4
Bardziej szczegółowoCSS & SASS / SCSS - Wprowadzenie do stylów, techniki zaawansowane oraz preprocesory
Kod szkolenia: Tytuł szkolenia: CSSSASS CSS & SASS / SCSS - Wprowadzenie do stylów, techniki zaawansowane oraz preprocesory Dni: 3 Opis: Adresaci szkolenia Adresatami szkolenia są wszystkie osoby posiadające
Bardziej szczegółowoĆwiczenie 9 - CSS i wstawianie CSS
Ćwiczenie 9 - CSS i wstawianie CSS Wprowadzenie: Od tego ćwiczenia zajmować się będziemy CSS czyli Kaskadowymi Arkuszami Stylów (Cascading Style Sheets). CSS stanowią uzupełnienie dla HTML-a. HTML odpowiada
Bardziej szczegółowoWydział Ekonomiczno-Informatyczny w Wilnie. 1. Podstawy programowania strukturalnego (C) 2. Wstęp do programowania obiektowego
Podstawy programowania w internecie nazwa A. Informacje ogólne Tę część wypełnia koordynator (w porozumieniu ze wszystkimi prowadzącymi dany przedmiot w jednostce) łącznie dla wszystkich form zajęć (np.
Bardziej szczegółowowww.fwrl.pl/szkolenie
STRONA www.fwrl.pl/szkolenie MS WORD HTML HTML i dostarczają informację dla silnika przeglądarki o tym jak ma być zbudowana i wyświetlona strona HTML HTML HTML (warstwa logiczna co i gdzie ma być) (wastwa
Bardziej szczegółowoTworzenie Stron Internetowych. odcinek 6
Tworzenie Stron Internetowych odcinek 6 CSS kaskadowe arkusze stylów CSS (Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów "stylów" "arkusze" Reguły opisujące wygląd dokumentu opisanego za pomocą
Bardziej szczegółowoPERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ?
PERFORMANCE W JOOMLA! JAK SPRAWIĆ ABY STRONA DZIAŁAŁA SZYBCIEJ? Piotr Nalepa Joomla Day Polska 2014 BLOGER I WEBDEVELOPER Kilka słów o mnie SPORTOWIEC AMATOR 2 Perfomance + Joomla =? 3 Google PageSpeed
Bardziej szczegółowoDariusz Brzeziński. Politechnika Poznańska, Instytut Informatyki
Dariusz Brzeziński Politechnika Poznańska, Instytut Informatyki Język programowania prosty bezpieczny zorientowany obiektowo wielowątkowy rozproszony przenaszalny interpretowany dynamiczny wydajny Platforma
Bardziej szczegółowoANGULARJS TWORZENIE APLIKACJI INTERNETOWYCH
ANGULARJS TWORZENIE APLIKACJI INTERNETOWYCH szkolenie dla webdeveloperów ze znajomością przynajmniej podstaw HTML i JavaScript INFORMACJE PODSTAWOWE AngularJS to framework JavaScript stworzony przez inżynierów
Bardziej szczegółowoAUDYT 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ółowoKrótki przegląd własności języka CSS
Krótki przegląd własności języka CSS Stosując arkusze stylów CSS, w sposób wyraźny oddziela się formatowanie dokumentu XHTML od jego warstwy znaczeniowej umieszczonej w sekcji . Niżej zestawiono
Bardziej szczegółowoHTML5 - informacje. Źródło. Struktura. Elementy. Atrybuty SVG.
HTML5 - informacje Źródło http://www.w3.org/tr/html5 Struktura example document example paragraph
Bardziej szczegółowoWybrane działy Informatyki Stosowanej
Wybrane działy Informatyki Stosowanej JSP - Java Server Pages dr hab. inż. Andrzej Czerepicki a.czerepicki@wt.pw.edu.pl http://www2.wt.pw.edu.pl/~a.czerepicki 2019 Aplikacje i skrypty WWW klasyfikacja
Bardziej szczegółowoSzkolenie wycofane z oferty. Programowanie w JavaScript (zawiera jquery)
Szkolenie wycofane z oferty Program szkolenia: Programowanie w JavaScript (zawiera jquery) Informacje: Nazwa: Kod: Kategoria: Grupa docelowa: Czas trwania: Forma: Programowanie w JavaScript (zawiera jquery)
Bardziej szczegółowoResponsive web design : projektowanie elastycznych witryn w HTML5 i CSS3 / Ben Frain. Wyd. 2. Gliwice, cop Spis treści
Responsive web design : projektowanie elastycznych witryn w HTML5 i CSS3 / Ben Frain. Wyd. 2. Gliwice, cop. 2016 Spis treści Zespół wydania oryginalnego 11 O autorze 13 O korektorach merytorycznych 15
Bardziej szczegółowoWydział Ekonomiczno-Informatyczny w Wilnie. 1. Podstawy programowania strukturalnego (C) 2. Wstęp do programowania obiektowego
Podstawy programowania w internecie nazwa SYLABUS A. Informacje ogólne Tę część wypełnia koordynator (w porozumieniu ze wszystkimi prowadzącymi dany przedmiot w jednostce) łącznie dla wszystkich form zajęć
Bardziej szczegółowoDefilada - 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ółowoZdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp.
Style CSS Wstęp Zdefiniowane style mogą określać układ treści na stronie i sposób jej formatowania np. kolor czcionki, pogrubienia, tło tabel, rysunków itp. Podstawową zaletą i zadaniem stylów jest oddzielenie
Bardziej szczegółowoPlan dzisiejszego wykładu. Narzędzia informatyczne w językoznawstwie. XML - Definicja. Zalety XML
Plan dzisiejszego wykładu Narzędzia informatyczne w językoznawstwie Perl - Wprowadzenie do XML Marcin Junczys-Dowmunt junczys@amu.edu.pl Zakład Logiki Stosowanej http://www.logic.amu.edu.pl 16. kwietnia
Bardziej szczegółowoProgramowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska
Programowanie gier 3D w HTML5 Andrzej P.Urbański Politechnika Poznańska Moje marzenie Od dawna jest znany pakiet Open GL napisany w C++ i bardzo ułatwiający tworzenie gier 3D Zaproponowałem kiedyś jako
Bardziej szczegółowoLaboratorium 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ółowoTworzenie Stron Internetowych. odcinek 8
Tworzenie Stron Internetowych odcinek 8 CSS jednostki Jednostki miary stosuje się w poleceniach dotyczących np. wielkośd czcionki lub rozmiarów marginesów. Zapis składa się z znaku "+" (domyślny) lub "
Bardziej szczegółowoProgramowanie internetowe
Programowanie internetowe Wykład 1 HTML mgr inż. Michał Wojtera email: mwojtera@dmcs.pl Plan wykładu Organizacja zajęć Zakres przedmiotu Literatura Zawartość wykładu Wprowadzenie AMP / LAMP Podstawy HTML
Bardziej szczegółowoFull Stack JavaScript z Angular i Nest. Dni: 5. Opis: Adresaci szkolenia
Kod szkolenia: Tytuł szkolenia: DED/FSJS Full Stack JavaScript z Angular i Nest Dni: 5 Opis: Adresaci szkolenia Kurs przeznaczony jest dla programistów posiadających podstawową wiedzę w zakresie JavaScript,
Bardziej szczegółowoPORADNIK KODOWANIA: CSS
PORADNIK KODOWANIA: CSS Przygotowane przez Jakuba Skórzyńskiego SPIS TREŚCI Wstęp... 3 Jak zacząć?. 4 Składnia 5 Klasy i unikaty.. 7 Rzeczy ważne 8 Najważniejsze komendy 9 Porady i Triki. 11 2 Wstęp Nazywam
Bardziej szczegółowoOczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>
Język html to język znaczników inaczej tagów, czyli słów lub skrótów pochodzących z języka angielskiego ujętych w nawiasy ostrokątne , np.. . W większości przypadków spotykamy znaczniki początku (inaczej
Bardziej szczegółowoktóra metoda jest najlepsza
która metoda jest najlepsza dr inż. Marek Żabka Instytut Matematyki Wydział Matematyki Stosowanej Politechnika Śląska 20 września 2012r Nowa metoda tworzenia grafiki na stronie internetowej: element,,canvas
Bardziej szczegółowoElementarz HTML i CSS
Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych 1 Elementarz HTML i CSS Znaczniki przydatne w pracy redaktora stron internetowych Treść, korekta, skład i oprawa graficzna
Bardziej szczegółowoHTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.
Dokumenty HTML5 Każda przeglądarka dostępna na rynku obsługuje HTML5 w różnym stopniu. Możesz sprawdzić swoją testerem dostępnym pod adresem (http://html5test.com). HTML5 wprowadza cały zestaw zupełnie
Bardziej szczegółowoProgram szkolenia: JavaScript Craftsmanship
Program szkolenia: JavaScript Craftsmanship Informacje: Nazwa: Kod: Kategoria: Grupa docelowa: Czas trwania: Forma: JavaScript Craftsmanship Craft-practices-js-craft Craftsmanship developerzy architekci
Bardziej szczegółowoFacelets ViewHandler
JSF i Facelets Wprowadzenie JSP (JavaServer Pages) są natywną i najczęściej używaną technologią do tworzenia warstwy prezentacyjnej dla JSF (JavaServer Faces) Istnieją alternatywne technologie opisu wyglądu
Bardziej szczegółowoPrezentacja dokumentów XML
Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Arkusze stylu Rozdzielenie treści od wygladu Przypisanie stylu do dokumentu CSS
Bardziej szczegółowoSzybko, prosto i tanio - ale czy na pewno?
Szybko, prosto i tanio - ale czy na pewno? Krzysztof Ścira Adrian Gadzina Kilka słów o nas Krzysztof Ścira Absolwent studiów pierwszego stopnia i jednocześnie student studiów 2 stopnia na AGH Zawodowo
Bardziej szczegółowoZajęcia nr 15 JavaScript wprowadzenie do JavaScript
Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko Wprowadzenie do jsfiddle.net Uruchom Chrome i wejdź na stronę http://jsfiddle.net.
Bardziej szczegółowoCo to jest Flexbox, zalety Wsparcie dla przeglądarek, wady Dostępność a Flexbox Przykłady, zastosowanie Test
FLEXBOX Co to jest Flexbox, zalety Wsparcie dla przeglądarek, wady Dostępność a Flexbox Przykłady, zastosowanie Test FLEXBOX W3C Last Call Working Draft model pozycjonowania elementów blokowych kolejna
Bardziej szczegółowoMODUŁ 3. WYMAGANIA EGZAMINACYJNE Z PRZYKŁADAMI ZADAŃ
MODUŁ 3. WYMAGANIA EGZAMINACYJNE Z PRZYKŁADAMI ZADAŃ E.14. Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami 1. Przykłady zadań do części pisemnej egzaminu dla wybranych umiejętności
Bardziej szczegółowoDOM (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
Bardziej szczegółowoDanuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu
Bardziej szczegółowoDOKUMENTY CYFROWE. Waldemar Korłub. Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska
DOKUMENTY CYFROWE Waldemar Korłub Aplikacje i Usługi Internetowe KASK ETI Politechnika Gdańska 2 Agenda Dokumenty cyfrowe 3 Prezentacja stosu języków i technologii webowych Charakterystyka elementów kluczowych
Bardziej szczegółowoMultimedia 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ółowoCSS. Kaskadowe Arkusze Stylów
CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać
Bardziej szczegółowoPrzykł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ółowoWstęp 5 Rozdział 1. Informacje podstawowe 9
Wstęp 5 Rozdział 1. Informacje podstawowe 9 Co to jest internet? 9 Co to jest WWW? 10 Jak komunikują się komputery w internecie? 11 Surfowanie i przeglądarka 12 Jeszcze kilka słów o adresach URL 13 Co
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ółowoResponsywne strony WWW
www.math.uni.lodz.pl/ radmat Ćwiczenie 1 Proszę zaprojektować następujący layout strony, oparty na DIV-ach: Aby osiągnąć powyższy efekt, w pliku CSS powinniśmy utworzyć reguły: #cala_strona width: 780px;
Bardziej szczegółowoZakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów
Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy
Bardziej szczegółowoImię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz
SYLLABUS na rok akademicki 01/013 Tryb studiów Studia stacjonarne Kierunek studiów Informatyka Poziom studiów Pierwszego stopnia Rok studiów/ semestr II/4 Specjalność Bez specjalności Kod katedry/zakładu
Bardziej szczegółowoPRZEWODNIK PO PRZEDMIOCIE
Nazwa przedmiotu: Kierunek: Informatyka Rodzaj przedmiotu: moduł specjalności obowiązkowy: Inżynieria oprogramowania, Programowanie aplikacji internetowych Rodzaj zajęć: wykład, laboratorium I KARTA PRZEDMIOTU
Bardziej szczegółowoPrezentacja dokumentów XML
Prezentacja dokumentów XML Patryk Czarnik Instytut Informatyki UW XML i nowoczesne technologie zarzadzania treścia 2007/08 Patryk Czarnik (MIMUW) 06 Prezentacja XML 2007/08 1 / 33 Plan 1 Arkusze stylu
Bardziej szczegółowoPROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński
PROGRAMOWANIE LOGO CONTACT NAV CONTENT SIDEBAR FOOTER PRACA DOMOWA CONTENER LOGO HOME CONTACT DROPDOWN DROPDOWN CONTENT_WRAP Lista UL Lista UL Lista UL SIDEBAR_LEFT WIDTH:20% NO BACKGROUND WIDTH:65% H4
Bardziej szczegółowo