PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Podobne dokumenty
PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Kompresja stron internetowych

Nazwa implementacji: CSS i box model. Autor: Opis implementacji: Poznajemy podstawy CSS oraz dowiadujemy się o rozmieszczaniu elementów na stronie.

Laboratorium 1: Szablon strony w HTML5

Sierpień 2015 rozwiązanie plik: index.htlm

Innowacja pedagogiczna Pasja programowania ZESPÓŁ SZKÓŁ W CHOROSZCZY

JQuery. $('#pierwszy').css('color','red').hide('slow').show(3000); $(document).ready(function() { //... tutaj nasze skrypty jquery //...

Podstawy (X)HTML i CSS

PLAN WYNIKOWY PROGRAMOWANIE APLIKACJI INTERNETOWYCH. KL III TI 4 godziny tygodniowo (4x30 tygodni =120 godzin ),

Technologie internetowe w programowaniu

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

Przykład integracji kalkulatora mbank RATY na platformie IAI

O stronach www, html itp..

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

PORADNIK KODOWANIA: CSS

Tworzenie Stron Internetowych. odcinek 9

WYKŁAD 5 BIBLIOTEKA JQUERY CZĘŚĆ 1

Programowanie w Sieci Internet jquery - nowy aromat kawy angular.js. Kraków, 24 października 2014 r. mgr Piotr Rytko Wydział Matematyki i Informatyki

Aplikacje internetowe

Specyfikacja techniczna dot. mailingów HTML

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>

HTML5 i CSS. Deklaracja <!DOCTYPE> musi być na początki dokumentu napisanego w HTML5 przed tagiem <html>.

Elementarz HTML i CSS

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

CSS - layout strony internetowej

Rozwiązania zadań EGZAMINACYJNYCH- WITRYNY

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

Proste kody html do szybkiego stosowania.

Hyper Text Markup Language

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

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs

Responsywne strony WWW

Systemy internetowe HTML + CSS - dodatki

za pomocą: definiujemy:

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Projektowanie aplikacji internetowych. CSS w akcji

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

Instrukcja platformy wideo

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

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

Z CSS3 szybciej i przyjemniej

2. Prezentacja wizualna

Mailingi HTML. Specyfikacja techniczna

XML extensible Markup Language. część 3

plansoft.org Zmiany w Plansoft.org

Laboratorium 6 Tworzenie bloga w Zend Framework

Bootstrap to tzw. front-end framework, czyli platforma ułatwiająca projektantom błyskawiczne przystąpienie do tworzenia interfejsu strony WWW.

- dodaj obiekt tekstowy: /** Maciej */ Stage { title : "First JavaFX App" scene: Scene { width: 300 height: 300 content: [ ] } }

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

Witryny i aplikacje internetowe


Szczegółowy opis zamówienia:

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

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

HTML5 - informacje. Źródło. Struktura. Elementy. Atrybuty SVG.

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Przedmiot: Grafika komputerowa i projektowanie stron WWW

W ogólności znaczniki mogą również posiadać atrybuty które pozwalają wpływać i manipulować własnościami znaczników lub przenosić dodatkowe informacje:

AUDYT DOSTĘPNOŚCI STRONY INTERNETOWEJ

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

XHTML Budowa strony WWW

Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony różnych stylów.

Tworzenie Stron Internetowych. odcinek 8

Nie utrudniaj sobie życia skorzystaj z biblioteki jquery! Abecadło, czyli jak korzystać z dobrodziejstw biblioteki jquery Interfejs API biblioteki

Imię, nazwisko i tytuł/stopień KOORDYNATORA (-ÓW) kursu/przedmiotu zatwierdzającego protokoły w systemie USOS Dr Adam Naumowicz

Tworzenie stron internetowych w kodzie HTML Cz 5

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

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Tworzenie Stron Internetowych. odcinek 5

Referat z przedmiotu Technologie Internetowe SPIS TREŚCI

Systemy internetowe Wykład 2 CSS

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

Krok 1: Stylizowanie plakatu

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

Podstawy technologii WWW

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

KURS XHTML I CSS - PODSTAWY

Programowanie WEB PODSTAWY HTML

Podstawy HTML i styli CSS. selektor {właściwość1: wartość1; właściwość2: wartość2}

1. Otwórz app_advanced.html i skopiuj i wklej następujący kod bezpośrednio w tagach <head>:

Rysunek otaczany przez tekst

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

Wykład 1: HTML (XHTML) Michał Drabik

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

Bazy danych. dr Radosław Matusik. radmat

PROGRAM NAUCZANIA DLA ZAWODU TECHNIK INFORMATYK, O STRUKTURZE PRZEDMIOTOWEJ

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Wordpress: Joomla! Drupal.

Budowa aplikacji wielowarstwowych. Zastosowanie Kaskadowych arkuszy stylów (CSS)

REFERAT O PRACY DYPLOMOWEJ

Idź do. Spis treści Przykładowy rozdział Skorowidz. Katalog książek. Katalog online Zamów drukowany katalog. Twój koszyk.

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

Programowanie. programowania. Klasa 3 Lekcja 9 PASCAL & C++

I. Pozycjonowanie elementów

Tworzenie Stron Internetowych. odcinek 5

Dokument hipertekstowy

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

Ćwiczenia laboratoryjne nr 8 Podstawy języka XML.

XML extensible Markup Language. część 5

Transkrypt:

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 IMG CONTENT_ARTICLE WIDTH:80% CONTENT_ASIDE WIDTH:20% IMG FOOTER (COPYRIGHT INFO, CREATE DATE) SIDEBAR_RIGHT WIDTH:15% NO BACKGROUND H4

LOGO HOME DROPDOWN Między blokami głównymi (zielonymi) należy dodać odstępy Lista UL Lista UL Lista UL np. css -> margin Wszystkie linki należy kierować do pustego elementu tj. <a href= # >text linku</a> H4 W widgetach należy zaokrąglić rogi (wszystkie cztery) oraz ustawić kolor (lub obrazek) na tło nagłówka h4. Każdy widget powinien być objęty div em np.

MENU ROZWIJANE MENU ELEMENT MENU ELEMENT SUB-MENU ELEMENT 1 SUB-MENU ELEMENT 2 SUB-MENU ELEMENT 3 <ul class= menu > <li class="dropdown"> <a href="#" class= dropbtn">menu element</a> <ul class="dropdown-content"> <li><a href= # >Sub-menu element 1</a></li> ( ) </li> </ul>

Punkty: stworzenie poprawnej struktury strony - 3 pkt stworzenie poprawnej struktury strony bez widgetów - 2 pkt struktura z błędami - 1 pkt brak struktury - 0 pkt dodanie działającego rozwijanego menu (1 poziom) - 1 pkt brak menu - 0 pkt

JQUERY jquery jest to biblioteka języka JavaScript Główne zalety tej biblioteki: Mała objętość skryptów, prosta składnia Mała objętość samej biblioteki Bardzo dużo dodatkowych pluginów

DODAWANIE BIBLIOTEKI Google CDN <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> lub z lokalnego dysku (podobnie jak pliki css) <script src= js/jquery-3.3.1.min.js ></script> https://code.jquery.com/jquery-3.3.1.min.js https://code.jquery.com/jquery-3.3.1.js

POBIERANIE ELEMENTÓW $('.czerwony') //pobranie div o klasie czerwony $('div p.podpis ) //wszystkie p o klasie podpis zawierające się w div $('div#cont > p') //wszystkie p mieszczące się bezpośrednio w div o id cont $('p, span, div.czerwony') //pobranie wszystkich p, span oraz divów o klasie czerwony

SKŁADNIA JQUERY $('.box-hide').css('color','red').show(3000); identyfikator jquery dodanie właściwości css obiekt do pobrania dodanie efektu

ROZPOCZYNANIE TWORZENIA SKRYPTU $( div.ukryj ).click(function() { $(this).hide( slow ); }); $(document).ready(function() { }) //kod jquery

ANIMACJE JQUERY show (speed, callback_function) hide (speed, callback_function) fadein (speed, callback_function) toggle () fadeout (speed, callback_function) slidedown (speed, callback_function) slideup (speed, callback_function) slidetoggle (speed, callback_function) $( div.box ).click(function() { $( div.box ).hide(`slow`); }); $( div.box2 ).click(function() { $(this).fadeout(`slow`); });

animate (wlasciwosci, czas, rodzaj animacji, funkcja zwrotna) <button id= start >Start</button> <div id= blok >Blok</div> #blok{ width:100px; height:100px; background-color:green; } <script> $(document).ready(function(){ $("#start").click(function(){ $("#blok").animate({ width: "500px", opacity: 0.4, }, 1500 ); }); }); </script> <link rel="stylesheet" type="text/css" href="style.css">

Java C C++ Pierwsze 5 języków może być w parach Python C# JavaScript PHP Objective-C Ruby Perl R Go Swift Scratch programowanie obiektowe