4. Webové technologie Martin Krčál Brno, KISK FF MU, Kurz pro studenty oboru Informační studia a knihovnictví.

Slides:



Advertisements
Podobné prezentace
Přehled internetových technologií
Advertisements

Web Michal Žůrek Jak se na něj dívám já..
Využití cloudových služeb ve školství
Obsah prezentace 1.Co je RSS 2.Možnosti využití RSS 3.Popis systému cíleného doručování vědeckých a odborných článků 4.Ukázka systému 5.Závěr.
Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy.
Tvorba webových stránek
Tvorba WWW stránek ÚVOD
Martin Holý.  HTML  xHTML  CSS  JavaScript  PHP.
David Pejčoch XML (Extensible Markup Language) Semistrukturovaná data Obecný značkovací jazyk Vyvinut a standardizován konzorciem W3C Zjednodušená.
WEBMASTER Jakub Koželuh. Student Informatiky (ČZU) Student Informatiky (ČZU) ICQ: ICQ:
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Martin Krčál RSS aneb buďte stále v obraze Ústřední knihovna FSS MU ÚK FSS MU, místnost 1.30,
SEMANTICKÝ WEB. Semantický Web WWW – Tim Berners-Lee, CERN, univerzum propojených HTML stránek, prostor hyperlinkovaných dokumentů – Informace jsou zobrazeny.
TVORBA WEBOVÝCH STRÁNEK
Vedoucí:Dr.Ing.Bronislava Horáková Řešitel:Bc.Ondra Richard.
XML, RDF a Dublin Core Petr Žabička
XHTML Tvorba webových stránek. Vývoj značkovacích jazyků HTML – HyperText Markup Language  Značkovací jazyk pro vytváření www stránek. Pomocí značek.
Adobe Dreamweaver CS4 Ing. Martin Dosedla.
Tvorba webových aplikací
Moderní formy tvorby webových stránek Martin Šebela, 9.A vedoucí práce: Mgr. Jan Kříž.
Tvorba WWW stránek HTML - XHTML Každá Internetová stránka (WWW stránka) je vytvořena pomocí programovacího jazyka HTML (Hypertext Markup Language). Každá.
Návrh a tvorba WWW Přednáška 1
Aplikace VT v hospodářské praxi internetové technologie Ing. Roman Danel, Ph.D. VŠB – TU Ostrava.
Metainformační systém založený na XML Autor: Josef Mikloš Vedoucí práce: Ing. Jan Růžička, Ph.D. V/2004.
SIPVZ – Státní informační politika ve vzdělávání w w w. e - g r a m. c z E-gram E-gram Informační a komunikační web SIPVZ 1. Původní web:
Maturitní okruh 22: Úvod do HTML. Značkovací a klasické jazyky Klasické: převládá strukturovaný text (programovací kód), skripty jsou prováděny na straně.
Návrh a tvorba WWW Cvičení 4
WebMathematica MathMl.CDF aneb ZASE JEDEN POVEDENÝ PROJEKT Petr Bělaška OA aVOŠE Zlín.
Jazyk PHP Programovací jazyk PHP (Hypertext preprocessor) je skriptovací jazyk, který běží na straně serveru. KLIENT - SERVER Server posílá do vašeho počítače.
Dokumentace objektů a zveřejnění funkcí
Internetový prohlížeč
Web 2.0 Štěpán Bechynský Microsoft. Web 2.0 aplikace.
GIS??? Ve státní správě Karel Charvát. GIS?????? Je správné používat v souvislosti s využíváním prostorových informací ve státní správě, ale i v komerčním.
AJAX nejmodernější webová technologie… seminář pro učitele ZŠ a SŠ Mgr. Marek Osuchowski Ostravská univerzita © 2011.
Úvod do JavaScriptu JavaScript je p JavaScript je programovací jazyk, který se používá na webových stránkách. JavaScript je typu KLIENT - KLIENT To znamená,
uložené procedury (stored procedures) triggery, sekvence, pohledy, funkce, parametrické dotazy (prepared statements) komplexní agregace a SQL dotazy jiné.
WWW stránky – Úvod Mgr. Lenka Švancarová.
Web 2.0, folksonomie a uživatelská rozhraní Lenka Němečková Eliška Pavlásková Založeno mimo jiné na prezentacích prof. B. Whitea „The Promise of Rich User.
TNPW1 Technologie pro publikování na webu Cvičení č. 2 Překlad URL na fyzickou adresu stránky Editor Macromedia Homesite „Hello world“ v XHTML (úvod do.
Vzdálené počítačové sítě a programování v prostředí Windows Okruhy ke zkoušce z předmětu: Ing. Zdeněk Votruba LVALVA.
Tvorba efektních www stránek pro každého Od historie až po současnost… Úvod Porovnání Validace Prohlížeče Závěr.
Vít Profant Obhajoba bakalářské práce
InstantAtlas dynamické webové interaktivní atlasy.
Přístup do IS z mobilních zařízení Tomáš Tureček Katedra Informatiky FEI VŠB-TU Ostrava.
Webové služby pro komunikaci s informačním systémem eQuip Martin Širajch.
Jazyk XML v geoinformatice
PHP Programy pro tvorbu WWW stránek - 01
Petr Šmíd Obsah prezentace Co je to XML ?
Web services. Co jsou webservices Součinná spolupráce počítačů v síti Technologie pro vzdálené volání procedur (RPC) Nezávislá na platformě Data v XML.
Kurz pro studenty oboru Informační studia a knihovnictví 3. Webové technologie Martin Krčál Brno, FF MU,
Prezentace diplomové práce
Ověření Možnosti Využití Jazyka XML a Formátu SVG Pro Potřeby Metainformačního Systému CAGI Zpracovatel:tomáš duchoslav Vedoucí: ing. Jan růžička.
Tvorba metainformačního systému pro prostorová data s využitím Internetových technologií Zpracovatel: Tomáš Duchoslav Vedoucí: Dr. Ing. Bronislava Horáková.
10. Webové technologie Martin Krčál Brno, KISK FF MU, Kurz pro studenty oboru Informační studia a knihovnictví.
Školák.cz Piš a sdílej své sešity, jednoduše, rychle, v pohodě. Autoři: Jiří Hon a Lukáš Helebrandt.
Jak fungují webové stránky Úvod do HTML (1). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická.
Tvorba WWW stránek. Hyperlink Odkaz, bývá označený jinou barvou a podtržený Odkaz, bývá označený jinou barvou a podtržený Reaguje na událost myši – Reaguje.
Školák.cz Piš a sdílej své sešity, jednoduše, rychle, v pohodě. Autoři: Jiří Hon a Lukáš Helebrandt.
EU peníze školám Registrační číslo projektu CZ.1.07/1.4.00/ Název projektu Inovace školství Šablona - název Inovace a zkvalitnění výuky prostřednictvím.
Internet. je celosvětový systém navzájem propojených počítačových sítí („síť sítí“), ve kterých mezi sebou počítače komunikují pomocí rodiny protokolů.
Pojmy internetu - test Gymnázium a Jazyková škola s právem státní jazykové zkoušky Zlín Tematická oblastInternetové technologie, programování Datum vytvoření2013.
Zahradnická fakulta v Lednici S4U – Seminář o Univerzitním informačním systému 23. – 25. dubna 2008 S 4 U – Seminář o Univerzitním informačním systému.
Návrh a tvorba WWW Cvičení 1 HTML 5. Pracovní prostředí Vývojové prostředí NetBeans ( Webový server Apache (
1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
XML a datový standard Zdeněk Jirkovec Softwarové Aplikace a systémy.
Programovací jazyk JavaScript
Značkovací jazyk HTML Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN.
Programovací jazyk JavaScript
Webové aplikace Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jitka Vlčková. Dostupné z Metodického portálu ISSN
Tvorba webových stránek
Transkript prezentace:

4. Webové technologie Martin Krčál Brno, KISK FF MU, Kurz pro studenty oboru Informační studia a knihovnictví

Náplň hodiny  webové technologie  XML a od něj odvozené formáty  budoucnost webu

Webové technologie

Jazyk HTML  základem tvorby stránek  HyperText Markup Language  odvozen od SGML  rozvržení dokumentu a odkazů  Tim Berners Lee - CERN (1990)

Vývoj HTML  nepodporuje grafický režim (1991)  formuláře a podpora grafiky (1994)  nekoncepční, Netscape (1995)  tabulky, styly, W3C (1997)  frames, sémantika, W3C (1998)  opravuje chyby, W3C (1999)

XHTML  eXtensible Hypertext Markup Language  W3C (od 2000)  původně nástupce HTML 4.01  založeno na XML

Verze XHTML  1.0 (2000, revize 2003) - tři varianty:  Strict - struktury, obsahu, grafika  Transitional - přechodná varianta, umožňuje používání překonaných tagů  Frameset - jako Trans + podpora rámců  nejpřísnější XHTML  návrh specifikace

Základní rozdíly mezi HTML 4.01 a XHTML 1.0  správné zanoření tagů  <p><strong>text</strong></p>  <p><strong>text</p></strong>

Základní rozdíly mezi HTML 4.01 a XHTML 1.0  všechny tagy uzavřené  text<br />  <p>text</p>  <a href=“index.php” title=“text”>text<br>

Základní rozdíly mezi HTML 4.01 a XHTML 1.0  hodnoty atributů se píší do uvozovek  <a href=“index.php”>odkaz</a>  <a href=‘index.php’>odkaz</a>  <a href=index.php>odkaz</a>

Základní rozdíly mezi HTML 4.01 a XHTML 1.0  tagy a atributy se píší malým písmenem  <A HREF=“index.php”>odkaz</A>  <a href=“INDEX.PHP”>odkaz</a>  <a href=index.php>odkaz</a>

Základní rozdíly mezi HTML 4.01 a XHTML 1.0  krácení atributů  <option disabled></option>  <option disabled=“disabled”></option>

Základní rozdíly mezi XHTML 1.0 Strict a XHTML 1.1  nový atribut id nahradil původní name  u všech tagů odstraněn tag lang a nahrazen xml:lang  přidána kolekce ruby  definice zkratek  definice výslovnosti

HTML 5.0  vytvořena pracovní skupina HTML  založeno na Web Applications 1.0 a Web Forms 2.0 z iniciativy WHATWG  odkazy  - specifikace  - agregátor  

HTML 5.0

Zdroj:

Zdroj: MAVRODY, Sergey. Sergey's HTML5 & CSS3 Quick Reference. 2nd ed. Belisso Corp., ISBN

HTML 5.0  podpora prohlížeči  rozšíření na mobilních platformách  40+ Useful HTML5 Examples and Tutorials 40+ Useful HTML5 Examples and Tutorials  Podpora v prohlížečích 

Validita zdrojového kódu  specializované nástroje  validator.w3.org (W3C) validator.w3.org  rozšíření do prohlížeče (např. HTML Validator, Web Developer Toolbar)HTML ValidatorWeb Developer Toolbar  off-line validátory (HTML Tidy)HTML Tidy

Web Developer Toolbar

HTML Validator

Kaskádové styly (CSS)  Cascading Style Sheets (W3C)  formátování (X)HTML  cíl  oddělit vzhled dokumentu od jeho struktury a obsahu  verze CSS2 vs CSS3  CSS3  definice sloupců, stínování, oblé rohy, animace,... (W3Schools, css3generator.com)W3Schools css3generator.com

Proč používat CSS  širší možnosti formátování textu  jednoduché přestylování  konzistentní styl  rychlejší načítání stránky  různé styly pro různá výstupní zařízení  tiskový styl, PDA, mobil, internetový prohlížeč

Nevýhody stylů  nejednotná podpora v prohlížečích  stejný kód se může načíst v různých prohlížečích různě  problémy zejména ve starších verzích IE  např. IE a max-width, min-width  dříve různě počítaná šířka elementů v IE a FF při použití paddingu

Ukázka fungování CSS 

JavaScript  vytvořil Brendan Eich (Netscape)  objektově orientovaný skriptovací jazyk  provádí se na straně klienta  od roku 1997 standardizován (ECMA a ISO)  ECMAScript (od něj odvozen např. ActionScript)

JavaScript  využití javascriptu:  ovládání interaktivních prvků (ověřování formulářů, dynamické menu)  efekty (přechody stránek)  animace (létající šipky, padající sníh)  nevýhoda - možnost vypnutí podpory JS v prohlížeči

JS - zajímavé odkazy     

jQuery  js knihovna  malý, ale mocný nástroj  využívá množství webů a scriptů  animace  efekty s obrázky a texty (fading, scrolling, slide text,...) 

DOM  Document Object Model  rozhraní pro přístup k jednotlivým částem nebo prvkům (X)HTML  využívá JavaScript  3 úrovně (level 1,2,3)  základem DHTML

AJAX  Asynchronous JavaScript and XML  mění obsah stránek bez znovunačtení  HTML, JavaScript, XML, XMLHttpRequest  cíl  uživatelský komfort  vyžadují použití moderních prohlížečů

AJAX  výhody  odstranění nutnosti načtení stránek při každé operaci (server posílá pouze tu část stránky, která se změnila)  snižování zátěže webových serverů a sítí  nevýhody  vazba na moderní prohlížeče  při nevhodném užití snižují použitelnost

Využití AJAXu v praxi  služby Googlu  Google Maps  Gmail  Microsoft  Outlook Web Access  jiné  našeptávače, ankety, formuláře apod.

Praktické ukázky Ajaxu  fotogalerie fotogalerie  upoutávka upoutávka  efekty s obrázky efekty s obrázky  vyhledávání (našeptávač) vyhledávání  tag clouds tag clouds  tabulky tabulky  hlasování hlasování

Flash  technologie pro vektorové animace  Adobe Flash CS6  ActionScript 3.0  interaktivní animace, prezentace, hry  složité animace, ale malé soubory  ideální pro web???

Proč se Flashi vyhnout  špatná indexace vyhledávači  nevhodné pro handicapované  špatná podpora starších prohlížečů, mobily  obtížnější aktualizace  nevhodné pro rozsáhlejší a často aktualizované texty, RS apod.  ukázka: ShrekShrek

Programovací jazyky  pro programování dynamických stránek  webové aplikace a online služby  běží na straně serveru  nejpoužívanější PHP a ASP  propojení na databázové systémy  MySQL, Oracle, ODBC, PostgreSQL,…

PHP  programování dynamických stránek  nezávislé na platformě  vychází z Perlu, C, Javy a Pascalu  poměrně jednoduché na pochopení  LAMP = Linux, Apache, MySQL, PHP  aktuální verze , 5.5 Beta3

PHP  rozsáhlé knihovny a moduly  spolupráce s většinou databází  podpora většiny internetových protokolů  HTTP, SMTP, FTP, IMAP, POP3,…  objektové programování (od verze 5)

PHP - ukázka <?php echo "Hello, World!"; ?>

PHP scripty      

ASP  Active Server Pages  vyvíjí Microsoft  běží na serverech s OS Windows

XML

 eXtensible Markup Language  obecný značkovací jazyk (nemá tagy)  základem pro konkrétní značkovací jazyky (DC, RDF, RSS, DocBook,…)

XML a vzhled dokumentu  definuje pouze strukturu dokumentu z hlediska věcného obsahu  nezabývá se vzhledem  vzhled se definuje připojeným stylem  CSS, XSL (XSLT)

XML  definuje vazby mezi prvky  prvky nejsou pevně dané  charakter: (ne)opakovatelné  DTD - definice použitých prvků  XML parser - program pro kontrolu XML  kódování - primárně v UTF-8

Využití XML  prezentace informací  ukládání informací  výměna informací  popis informací (metadata)metadata  získávání informací

Využití XML v praxi  XHTML  DC, RDF, SMIL - metadata dokumentu  RSS - novinky na webu  DocBook - publikační styly  SVG, Jabber, SOAP, MathML, nové MS Office

Ukázky XML dokumentu   XML výstup při hledání v SRU XML výstup

Dublin Core  soubor metadatových prvků  pro popis digitálních objektů (i HTML)  usnadňuje vyhledávání e-zdrojů  založen na XML  název odvozen od města Dublin (USA)

Prvky DC  16 základních prvků  Title, Creator, Subject, Description, Publisher, Contributor, Date, Type, Format, Identifier, Source, Language, Relation, Coverage, Rights, Audience  Generátor metadat Generátor metadat  správce v ČR - KIC ICS FI MU

Výhody DC  jednoduchost  sémantická interoperabilita  mezinárodní podpora  rozšiřitelnost  modifikovatelnost

Více info o DC     ator.php ator.php

RSS  slouží ke sdílení obsahu  standardizovaný formát (XML)  pro weby s častou aktualizací  nejčastější uplatnění:  zpravodajské servery, blogy  nejpoužívanější verze RSS 0.91 a 2.0

Jak RSS funguje? Zpravodajský server Nový článek RSS Kanál Osobní RSS čtečka Agregátor RSS kanálů Agregátor RSS kanálů

RSS a návštěvnost  obava webmasterů z úbytku návštěvníků stránek  nepotvrdila se, spíše opak  větší povědomí s tím, co je na webu nového  dnes ztrácí své pozice

Možnosti využití dat z RSS kanálů  osobní RSS čtečky  agregátory RSS kanálů (mixování informací)

RSS v praxi  ukázka RSS kanálu (iDnes)iDnes  podobné formáty:  ATOM 1.0 ATOM 1.0  CDF (Microsoft, neprosadil se)

Mikroformáty = konkurence XML???  popis webových stránek  revoluce ve vyhledávání???  kratší zápis (ukázka)ukázka  problém = podpora prohlížečů  Microformats.org Microformats.org

Redakční systémy

 instantní web = web z prášku :)  WYSIWYG editory  není třeba znalost HTML, CSS, scriptovacích a programovacích jazyků  zdarma vs. komerční

Budoucnost webu

Web 2.0  Definice???

Přechod na Web 2.0  v začátcích internetu zejména statické stránky  prezentace informací  dnes přechod na online služby = služby dostupné přes internet  internet = nová platforma pro aplikace  nová generace služeb - mluvíme o fenoménu Web 2.0

Web 2.0  přístupy  nové označení webu???  marketingový trik???  internetová bublina???

Web charakteristika  hodnotu vytváří uživatelé  bohatství je v interakci uživatelů  bez uživatelů nemají služby W2.0 smysl  komunikace many-to-many  tvůrce je zároveň konzument  personalizace  wikisystémy

Web charakteristika  long tail  reputační systémy  jak dnes nakupujete???  cloud – webtop aplikace  odklon od desktopů  beta forever

Web charakteristika  mashups  propojování dat (obohacený obsah katalogů, Google Maps,...), API  nové využití dat v jiné aplikaci

Web 2.0  Znáte nějaké služby???

Web 2.0 – nejznámější služby

Web 3.0 a 4.0  Web 3.0  sémantický web  strojově čitelný web (databáze)  Web 4.0  WebOS  umělá inteligence

A na závěr…

Martin Krčál Děkuji za pozornost