Dwie perspektywy responsive web design: user experience i front-end developer

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

Download "Dwie perspektywy responsive web design: user experience i front-end developer"

Transkrypt

1 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 K r a k ó w l u t y

2 R O Z D Z I A Ł 0 1 Czym jest responsive web design?

3 Czym jest responsive web design? Responsive web design (w skrócie RWD) to podejście do projektowania WWW, w którym dokument HTML jest przygotowany tak, aby był optymalnie wyświetlany na każdym urządzeniu (od monitora komputera stacjonarnego po ekran telefonu komórkowego). Dwie perspektywy responsive web design: User Experience i Front-end Developer

4

5 Mobile first Dwie perspektywy responsive web design: User Experience i Front-end Developer

6 ROZDZIAŁ 02 Elementy responsive web design

7 Elementy responsive web design Media queries pozwalają na używanie osobnych reguł CSS bazując na charakterystyce urządzenia na którym strona WWW jest wyświetla, najczęściej jest to szerokość przeglądarki. /* ipads (landscape) only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { ( ) } /* Large screens only screen and (min-width : 1824px) { ( ) } /* iphone 4 only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { ( ) } Dwie perspektywy responsive web design: User Experience i Front-end Developer

8 Elementy responsive web design Koncepcja fluid grid (elastycznej siatki) zakłada ustalanie rozmiaru elementów strony bazując na jednostkach względnych takich jak procenty i EM zamiast jednostek absolutnych którymi są piksele i punkty..grids [class*="grid-"] { display: inline-block; ( ) }.grid-1 { width: 6.15%; }.grid-2 { width: %; }.grid-3 { width: %; } ( ).grid-12 { width: %; margin: 0; } Dwie perspektywy responsive web design: User Experience i Front-end Developer

9 Elementy responsive web design "Elastyczne" elementy multimedialne (obrazy, klipy) również są wymiarowane względnie tak aby ich rozmiar nie przekraczał 100% szerokości elementu w którym są umieszczone. img, object, embed { max-width: 100%; } img { height: auto; }.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Dwie perspektywy responsive web design: User Experience i Front-end Developer

10 ROZDZIAŁ 03 Best practice w RWD

11 Unobtrusive JavaScript *.HTML <input type="text" name="price" onchange="validateprice()" /> *.HTML <input type="text" name="price" id="price" /> *.JS Zepto(function($){ $('#price').change(validateprice); }) Dwie perspektywy responsive web design: User Experience i Front-end Developer

12 Progressive enhancement cake strategy Progressive enhancement to strategia z naciskiem na accessibility, semantyczny HTML, style CSS w osobnych plikach i technologie skryptowe. Gorsze urządzenia-> dostęp do podstawowej treści Lepsze urządzenia -> dostęp do rozbudowanej treści Dwie perspektywy responsive web design: User Experience i Front-end Developer

13 Wyzwania i inne podejścia Luke Wroblewski - stworzył wzorce którymi należy kierować się w 'uniwersalnym' projektowaniu multi-device. Zaproponował podejście RESS (Responsive Web Design with Server Side Components), które to jest lepiej 'zoptymalizowane' pod urządzenia mobilne. Np. implementacja dynamicznego CSS'a (Sass) może być częścią tego podejścia. Dwie perspektywy responsive web design: User Experience i Front-end Developer

14 ROZDZIAŁ 04 Warsztat współczesnego front-end developera

15 Sublime, Emmet, Autosave Sublime Text 2 Sublime Package Control Emmet CodeKit Chrome DevTools Autosave https://github.com/nv/chrome-devtools-autosave Strategia social media

16 Sass Sass Bourbon Compass Scout Strategia social media

17 LESS LESS LESS Hat Lots of Love for LESS WinLess Strategia social media

18 Node.js Nodefront GRUNT Yeoman Brunch Strategia social media

19 Dziękujemy. Lemon Sky Spółka z ograniczoną odpowiedzialnościa S.K.A. ul. Fabryczna Wrocław NIP: ul. Elżbiety Drużbackiej Warszawa

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

Responsive Web Design

Responsive Web Design Responsive Web Design Zmieniamy Internet na plus Adrian Gadzina Kilka słów o mnie Autor bloga 7pl.pl Web is Brutal Miłośnik Androida Pasjonat kolarstwa (MTB + szosa) Programista aplikacji mobilnych i stron

Bardziej szczegółowo

SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper)

SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper) Katalizator Innowacji - usługi doradcze dla biznesu realizowane w modelu audytu benchmarkowego. Projekt współfinansowany przez Unię Europejską z Europejskiego Funduszu Rozwoju Regionalnego. Dotacje na

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Agenda. Co to jest RWD? Dlaczego warto myśleć o RWD w kontekście aplikacji biznesowych? Przykłady. ericpol.com 2013-06-20 2

Agenda. Co to jest RWD? Dlaczego warto myśleć o RWD w kontekście aplikacji biznesowych? Przykłady. ericpol.com 2013-06-20 2 Agenda Co to jest RWD? Dlaczego warto myśleć o RWD w kontekście aplikacji biznesowych? Przykłady 2013-06-20 2 Ericpol Ericpol - fakty Na polskim rynku od 22 lat Siedziba w Łodzi Biura: Kraków, Warszawa

Bardziej szczegółowo

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów...

Spis treści. Konwencje zastosowane w książce...5. Dodawanie stylów do dokumentów HTML oraz XHTML...6. Struktura reguł...9. Pierwszeństwo stylów... Spis treści Konwencje zastosowane w książce...5 Dodawanie stylów do dokumentów HTML oraz XHTML...6 Struktura reguł...9 Pierwszeństwo stylów... 10 Klasyfikacja elementów... 13 Sposoby wyświetlania elementów...

Bardziej szczegółowo

Wprowadzenie do PhoneGap / Cordova

Wprowadzenie do PhoneGap / Cordova Wprowadzenie do PhoneGap / Cordova Urządzenia mobilne a desktopowe W 2010 roku Mary Meeker opublikowała raport, w którym przewidywała, że w 2014 roku ilość użytkowników mobilnych przekroczy liczbę osób

Bardziej szczegółowo

Arkusze stylów CSS Cascading Style Sheets

Arkusze stylów CSS Cascading Style Sheets Arkusze stylów CSS Cascading Style Sheets HTML a CSS HTML odpowiada za strukturę tworzonej witryny internetowej i poszczególnych dokumentów (ich stronę semantyczną) CSS odpowiada za wizualną prezentację

Bardziej szczegółowo

Układy witryn internetowych

Układy witryn internetowych 1. CEL ĆWICZENIA Celem ćwiczenia jest zapoznanie się z możliwościami kaskadowych arkuszy stylów CSS w zakresie kontrolowania położenia elementów na stronie. 2. MATERIAŁ NAUCZANIA W normalnym układzie opartym

Bardziej szczegółowo

Zaawansowane projektowanie stron w CSS

Zaawansowane projektowanie stron w CSS Jak budować strony zgodnie ze standardami i nie zwariować? momat@man.poznan.pl Poznańskie Centrum Superkomputerowo-Sieciowe 2005-04-11 1 Wprowadzenie 2 CSS layout Design i tabelki Metody pozycjonowania

Bardziej szczegółowo

Responsive Web Design:

Responsive Web Design: Responsive Web Design: jeden serwis, wiele urządzeń Konferencja i warsztaty 26.06.2014 Warszawa Organizator: Polski reprezentant UXAlliance Zaprojektowaliśmy responsywne serwisy między innymi dla: Responsive

Bardziej szczegółowo

WYKŁAD 1 TECHNOLOGIE FRONT-END CZĘŚĆ 1

WYKŁ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ółowo

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

Studia Podyplomowe Grafika Komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW. Ćwiczenia Responsive Web Design Praca własna dr inż. Robert Banasiak Wprowadzenie Coraz więcej użytkowników korzysta z Internetu w urządzeniach mobilnych w celu przeglądania stron internetowych. Warto

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

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości.

Box model: Content. Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model Box model: Content Content - obszar zawartości określany jest za pomocą deklaracji wysokości i szerokości. Box model: Padding Content Content - obszar zawartości określany jest za pomocą deklaracji

Bardziej szczegółowo

Zbuduj robota. Wprowadzenie HTML & CSS. W tym projekcie nauczysz się, jak wstawiać obrazki, by stworzyć własnego robota! Zadania do wykonania

Zbuduj robota. Wprowadzenie HTML & CSS. W tym projekcie nauczysz się, jak wstawiać obrazki, by stworzyć własnego robota! Zadania do wykonania HTML & CSS 1 Zbuduj robota Każdy Klub Kodowania musi być zarejestrowany. Zarejestrowane kluby można zobaczyć na mapie na stronie codeclubworld.org - jeżeli nie ma tam twojego klubu sprawdź na stronie jumpto.cc/18cplpy

Bardziej szczegółowo

LESS - CSS dla leniwych

LESS - 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ółowo

Bezbolesny wstęp do CSS

Bezbolesny 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ół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

Agenda. Wstęp Zmiany Co nowego dla web developerów? Nowości we front-end developingu Czego spodziewać się może końcowy użytkownik?

Agenda. Wstęp Zmiany Co nowego dla web developerów? Nowości we front-end developingu Czego spodziewać się może końcowy użytkownik? Agenda Wstęp Zmiany Co nowego dla web developerów? Nowości we front-end developingu Czego spodziewać się może końcowy użytkownik? Podsumowanie Drupal 8 w liczbach 26 nowych modułów 6 608 plików 247 597

Bardziej szczegółowo

Podstawy pozycjonowania CSS

Podstawy pozycjonowania CSS Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika

Robert Szmurło. Projektowanie Graficznych Interfejsów Użytkownika Projektowanie Graficznych Interfejsów Użytkownika Robert Szmurło 1 Prototypowanie jako środek wytwarzania (implementacji) projektu wizualnego Analiza Projekt Wizualny Prototyp Zrealizowany System Z http://www.blender.pl/cpg/albums/userpics/10505/normal_carprototypeconcept1b.jpg

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Krótki przegląd własności języka CSS

Kró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ółowo

Sass Rewolucja w CSS +

Sass 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ół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

Szybko, prosto i tanio - ale czy na pewno?

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Proces projektowania i wdrożenia serwisu internetowego

Proces projektowania i wdrożenia serwisu internetowego Proces projektowania i wdrożenia serwisu internetowego Kluczowe etapy projektu 9 1 Rozwój i optymalizacja Analiza celów, potrzeb i konkurencji 8 Szkolenie IMPROVE THINK Wireframe i prototyp (UX) 2 7 Testy

Bardziej szczegółowo

Krzyżówka Hot Potatoes JCross

Krzyżówka Hot Potatoes JCross Krzyżówka Hot Potatoes JCross Moduł Cross służy do przygotowywania krzyżówek, które mogą byś wykorzystywane jako samodzielne zadania (w plikach HTML), a także można je umieszczać w kursach na platformie

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

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

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

Krok 1: Stylizowanie plakatu

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

Bardziej szczegółowo

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

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

Bardziej szczegółowo

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

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

Załącznik nr 2 do uchwały Nr XXII/ 141 /2013 Rady Gminy Bojszowy z dnia 13.03.2013r.

Załącznik nr 2 do uchwały Nr XXII/ 141 /2013 Rady Gminy Bojszowy z dnia 13.03.2013r. <?xml version=1.0 encoding=utf-8?> Załącznik nr 2 do uchwały Nr XXII/ 141 /2013 Rady Gminy Bojszowy z dnia 13.03.2013r.

Bardziej szczegółowo

Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.

Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r. Załącznik Nr 2 do Uchwały Nr XXIX/181/2014 Rady Gminy Bojszowy z dnia 17 stycznia 2014 r.

Bardziej szczegółowo

Prezentacja dokumentów XML

Prezentacja 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ółowo

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

Języki programowania wysokiego poziomu. HTML cz.2. Języki programowania wysokiego poziomu HTML cz.2. Model pudełkowy HTML Elementy blokowe w tym table oraz div są wyświetlane według tzw. modelu pudełkowego: Zawartość Odstęp (padding) Obramowanie (border)

Bardziej szczegółowo

Pozycjonowanie elementów

Pozycjonowanie elementów Pozycjonowanie elementów Dzięki pozycjonowaniu w CSS, możesz umieścić element dokładnie tam gdzie tylko chcesz. Razem z efektem pływania pozycjonowanie daje ci nieograniczone możliwości tworzenia zaawansowanego

Bardziej szczegółowo

PROJEKTOWANIE STRON WWW

PROJEKTOWANIE STRON WWW Studia Podyplomowe Grafika komputerowa i Techniki Multimedialne, 2015/2016, semestr II, dr inż. Robert Banasiak Projektowanie Stron WWW dr inż. Robert Banasiak PROJEKTOWANIE STRON WWW RESPONSIVE WEB DESIGN

Bardziej szczegółowo

Efektywne tworzenie aplikacji webowych z wykorzystaniem AngularJS, HTML5 i JavaScript

Efektywne 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ółowo

Kaskadowe arkusze stylów cz. 2

Kaskadowe arkusze stylów cz. 2 Formatowanie wyglądu tekstu Właściwości związane z czcionką Wybór czcionki Tworzenie czcionki pochyłej Pogrubianie czcionki Określanie wielkości czcionki Wykorzystanie kapitalików Określanie wysokości

Bardziej szczegółowo

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

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

Bardziej szczegółowo

Programista aplikacji internetowych. Junior Web Developer z certyfikatem Programming in HTML5 with JavaScript and CSS3

Programista aplikacji internetowych. Junior Web Developer z certyfikatem Programming in HTML5 with JavaScript and CSS3 Programista aplikacji internetowych. Junior Web Developer z certyfikatem Programming in HTML5 with JavaScript and CSS3 WSB Gdynia - Studia podyplomowe Opis kierunku Branża IT w Trójmieście, zaraz po Warszawie,

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

Prezentacja dokumentów XML

Prezentacja 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ół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

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

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

Bardziej szczegółowo

Grafika PHP dla początkujących

Grafika PHP dla początkujących Instrukcja numer 03 Grafika PHP dla początkujących Zaawansowane techniki tworzenie stron WWW Dynamiczne tworzenie obrazków w PHP zadanie_10.php

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

Tworzenie stylów w HTML

Tworzenie stylów w HTML Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron

Bardziej szczegółowo

Michał Bielecki, KNI 'BIOS'

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

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium HTML + CSS Celem ćwiczenia jest przygotowanie prostej aplikacji internetowej składającej się z zestawu stron w języku HTML. Ćwiczenia można wykonać na dowolnym komputerze,

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

Hosting WWW Bezpieczeństwo hostingu WWW. Dr Michał Tanaś (http://www.amu.edu.pl/~mtanas)

Hosting WWW Bezpieczeństwo hostingu WWW. Dr Michał Tanaś (http://www.amu.edu.pl/~mtanas) Hosting WWW Bezpieczeństwo hostingu WWW Dr Michał Tanaś (http://www.amu.edu.pl/~mtanas) Zakres tematyczny 1. Wstęp 2. Protokoły komunikacji 3. Serwer WWW Apache 4. Aplikacje server-side PHP 5. Firewall

Bardziej szczegółowo

DOTACJE NA INNOWACJE INWESTUJEMY W WASZĄ PRZYSZŁOŚĆ

DOTACJE NA INNOWACJE INWESTUJEMY W WASZĄ PRZYSZŁOŚĆ Projekt współfinansowany ze środków Unii Europejskiej w ramach działania 8.1 Wspieranie działalności gospodarczej w dziedzinie gospodarki elektronicznej 8. osi priorytetowej. Społeczeństwo informacyjne

Bardziej szczegółowo

SPECYFIKACJA FORM REKLAMOWYCH

SPECYFIKACJA FORM REKLAMOWYCH SPECYFIKACJA FORM REKLAMOWYCH Spis treści I. ZAŁOŻENIA OGÓLNE... 3 II. PODSTAWOWE FORMATY REKLAMOWE... 4 III. FORMATY RICH MEDIA... 5 IV. DOBRE PRAKTYKI KREACJE RICH MEDIA... 7 2 I. Założenia ogólne 1.

Bardziej szczegółowo

*Kaspersky Internet Security 2016PL Box 1Desktop 1. Model : *Kaspersky Internet Security 2016PL Box 1Desktop 1. ram sp. j.

*Kaspersky Internet Security 2016PL Box 1Desktop 1. Model : *Kaspersky Internet Security 2016PL Box 1Desktop 1. ram sp. j. OPROGRAMOWANIE > Model : 107237 Producent : - Rodzaj Bezpieczeństwo Wersja Box Licencja Akademicka Dla małych firm Do użytku domowego Komercyjna Czas trwania 1 rok Liczba stanowisk / jednostek 1 Architektura

Bardziej szczegółowo

Języki programowania wysokiego poziomu CSS

Języki programowania wysokiego poziomu CSS Języki programowania wysokiego poziomu CSS Kaskadowe Arkusze Stylów CSS (ang. Cascading Style Sheets) to język służący do formatowania dokumentów WWW, utworzonych w językach HTML oraz XHTML. CSS stworzono

Bardziej szczegółowo

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie sposobu wizualnej prezentacji dokumentu w przeglądarce

Bardziej szczegółowo

www.fwrl.pl/szkolenie

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

Bardziej szczegółowo

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

Bardziej szczegółowo

Usługi Otwartej Administracji w przestrzeni miejskiej. Dariusz Janny, Bartosz Lewandowski Konferencja i3, Wrocław, 2.12.2010r.

Usługi Otwartej Administracji w przestrzeni miejskiej. Dariusz Janny, Bartosz Lewandowski Konferencja i3, Wrocław, 2.12.2010r. Usługi Otwartej Administracji w przestrzeni miejskiej Dariusz Janny, Bartosz Lewandowski Konferencja i3, Wrocław, 2.12.2010r. Plan Wprowadzenie eusługi w Poznaniu Przepis na Otwartą Administrację Podsumowanie

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 8

Tworzenie 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ół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

Dokumentacja Skryptu Mapy ver.1.1

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

Bardziej szczegółowo

UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile.

UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile. UX ma znaczenie. O różnych podejściach do projektowania interakcji na mobile. K r a k ó w, 2 4. 0 5. 2 0 1 3 Agenda 1. Co to jest UX? 2. Benchmark vs Badania 3. Guidelines vs my way 4. Silosy vs Team 5.

Bardziej szczegółowo

SterBox. Przygotowanie Strony Użytkownika

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

Bardziej szczegółowo

Jak projektować dostępne strony

Jak projektować dostępne strony Jak projektować dostępne strony Przemysław Marcinkowski e-mail: przemek@iart.com.pl Plan prezentacji 1. Dlaczego powstał dokument WCAG? 2. Priorytety 3. Tworzenie tekstów 4. Linki 5. Nawigacja 6. Grafika

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

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

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

Bardziej szczegółowo

kaskadowe arkusze stylów

kaskadowe arkusze stylów Autor: Marek Buła bulkas@poczta.onet.pl CSS kaskadowe arkusze stylów CASCADING STYLE SHEETS Validator (X)HTML Validator CSS CSS CSS level 1 (1996, 1999) contains properties for fonts, margins, colors,

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

Netkata. Design of digital products. Netkata Interactive Media Marketing

Netkata. Design of digital products. Netkata Interactive Media Marketing Netkata Design of digital products AGENDA O firmie Netkata Nasi klienci Wybrane projekty Jak pracujemy Dlaczego Netkata? Porozmawiajmy! Co oferuje Netkata? Projektujemy i realizujemy strony www, aplikacje

Bardziej szczegółowo

think. create. improve.

think. create. improve. 1 think. create. improve. Jesteśmy niezależną agencją interaktywną Myślimy i działamy globalnie 2 Wyróżniają nas liczby... 3 16 11 49 45 lat doświadczenia na rynku polskim lat na rynku zagranicznym nagród

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

Projektowanie aplikacji internetowych. CSS w akcji

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

Bardziej szczegółowo

MAILING REKLAMOWY DO BAZY UŻYTKOWNIKÓW INTERAKTYWNIE.COM. Oferta reklamowa www.interaktywnie.com/reklama

MAILING REKLAMOWY DO BAZY UŻYTKOWNIKÓW INTERAKTYWNIE.COM. Oferta reklamowa www.interaktywnie.com/reklama MAILING REKLAMOWY DO BAZY UŻYTKOWNIKÓW INTERAKTYWNIE.COM www.interaktywnie.com/reklama Profil użytkownika Interaktywnie.com Zawód/branża: dział marketingu portal/wydawca internetowy agencja interaktywna

Bardziej szczegółowo

Programowanie internetowe

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

Bardziej szczegółowo

Architektura serwisu GG.pl

Architektura serwisu GG.pl Architektura serwisu GG.pl Przemek Łącki GG Network S.A. Aula Polska #56, 18 listopad 2010 rok, Warszawa Architektura serwisu GG.pl Przemek Łącki Scrum Master PAI (przemek@gg.pl) Aula 18.11.2010 Agenda

Bardziej szczegółowo

Politechnika Poznańska, Instytut Informatyki, TWO/GE. Programowanie dla ios

Politechnika Poznańska, Instytut Informatyki, TWO/GE. Programowanie dla ios Politechnika Poznańska, Instytut Informatyki, TWO/GE Programowanie dla ios 13 stycznia 2012 Urządzenia ios Urządzenie Data prezentacji iphone 9.01.2007/06.2007 ipod touch 5.09.2007 iphone 3G 9.06.2008

Bardziej szczegółowo

PROJEKTOWANIE STRON WWW

PROJEKTOWANIE STRON WWW PROJEKTOWANIE STRON WWW Wykład 1 Paweł Woszkowski SWSIM, 2010 PLAN ZAJĘĆ technologie, proces powstawania strony www, podstawowe zasady, xhtml, css, projektowanie, publikacja, hosting, promocja. STRONA

Bardziej szczegółowo

Programowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska

Programowanie 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ółowo

Dobre praktyki w tworzeniu dostępnych stron www zgodnych ze standardem WCAG 2.0

Dobre praktyki w tworzeniu dostępnych stron www zgodnych ze standardem WCAG 2.0 Dobre praktyki w tworzeniu dostępnych stron www zgodnych ze standardem WCAG 2.0 Marcin Luboń Fundacja Widzialni Projekt współfinansowany ze środków Unii Europejskiej w ramach Europejskiego Funduszu Społecznego

Bardziej szczegółowo

Netkata. PROCES projektowy Interfejsu Użytkownika. Spis treści. Netkata Interactive

Netkata. PROCES projektowy Interfejsu Użytkownika. Spis treści. Netkata Interactive Netkata PROCES projektowy Interfejsu Użytkownika Spis treści Projekt efektywnego UI... 2 1. Analiza biznesowa... 3 2. Analiza funkcjonalna... 3 3. Architektura informacji... 4 4. Interaktywne makiety...

Bardziej szczegółowo

HTML5 i CSS. Deklaracja musi być na początki dokumentu napisanego w HTML5 przed tagiem .

HTML5 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ółowo

Blok dokumentu.

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

Bardziej szczegółowo

I. Pozycjonowanie elementów

I. Pozycjonowanie elementów Wykład 4 - część I. I. Pozycjonowanie elementów 1 I. Pozycjonowanie elementów Model blokowy Każdy element użyty w kodzie XHTML tworzy na stronie blok. W związku z tym strona XHTML w rzeczywistości składa

Bardziej szczegółowo

Dostępność stron internetowych dla osób niepełnosprawnych

Dostępność stron internetowych dla osób niepełnosprawnych Grzegorz Zawal Dostępność stron internetowych dla osób niepełnosprawnych Tekst stanowi wstęp teoretyczny do pracy inżynierskiej pt. Budowa serwisów internetowych dostępnych dla osób niepełnosprawnych,

Bardziej szczegółowo

Asynchroniczne interfejsy WWW

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

Bardziej szczegółowo

Aplikacje webowe wspomagające działalność przedsiębiorstwa na przykładzie przychodni stomatologicznej

Aplikacje webowe wspomagające działalność przedsiębiorstwa na przykładzie przychodni stomatologicznej Aplikacje webowe wspomagające działalność przedsiębiorstwa na przykładzie przychodni stomatologicznej Małgorzata Barańska Wydział Informatyki i Zarządzania, Politechnika Wrocławska Beata Laszkiewicz Wydział

Bardziej szczegółowo

JavaFX. Technologie Biznesu Elektronicznego. Wydział Informatyki i Zarządzania Politechnika Wrocławska

JavaFX. Technologie Biznesu Elektronicznego. Wydział Informatyki i Zarządzania Politechnika Wrocławska JavaFX - wprowadzenie JavaFX Wydział Informatyki i Zarządzania Politechnika Wrocławska Definicja JavaFX - wprowadzenie Definicja Historia JavaFX Script Rich Internet Application JavaFX - rodzina technologii

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

Tworzenie własnych Smart Mobile Apps dzięki MobileHMI. ICONICS Worldwide Customer Summit - 2013

Tworzenie własnych Smart Mobile Apps dzięki MobileHMI. ICONICS Worldwide Customer Summit - 2013 Tworzenie własnych Smart Mobile Apps dzięki MobileHMI Agenda Przemiany Technologiczne Urządzenia mobilne PC Phone Browser Do 2016 By 2020 1/3 światowej populacji połączona przez ponad 20 miliardów urządzeń

Bardziej szczegółowo