Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009
Dnešní přednáška 1 Kaskádové styly css 2 Dynamické prvky stránek 3 Internetové vyhledávače 4 Grafické formáty pro web
Válka prohĺıžečů Netscape Microsoft
css kaskádové styly css Cascading Style Sheets Pokročilý vzhled stránek Motivace oddělit strukturu dokumentu od vzhledu Velké množství výhod
Kaskádové styly historie 1994 První náznaky 1996 css 1 Netscape 4.0 Internet Explorer 4.0 1998 css 2 Pozicování prvků???? css 3
Kaskádové styly Soupis vlastností značek z html Mnohem rozsáhlejší než parametry html Např. color: blue; font-size: 20pt; Parametr style Např. <p style="color: blue; font-size: 20pt;"> Nebo značka <style></style> v hlavičce dokumentu
Kaskádové styly třídy a identifikátory Sdružení vlastností do skupiny Účinné vytváření vlastního vzhledu
Kaskádové styly pozicování prvků Html značky <div></div>, <span></span> Uzavřou obsah do bloku Nastavíme jim pozici Nastavení pozice Absolutně Relativně Staticky
Kaskádové styly blokový model Obsahový okrajový model rozdíl, co je šířka a výška 1994 Netscape k <img> přidána šířka, výška, ohraničení Obsahový model 1995 Netscape k <table> přidána šířka, výška Okrajový model
Definice DOCTYPE Údaj, v jaké verzi je dokument zapsán Rozlišení režimů BackCompat CSS1Compat <!DOCTYPE html PUBLIC -//W3C//DTD hlavní značka veřejné DTD XHTML 1.0 Transitional//EN verze DTD (nejdůležitější) http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd > adresa dokumentu s definicí DTD Méně problémů s odlišnostmi Nutná pro validaci http://validator.w3.org
Kaskádové styly shrnutí + Rozsáhlé možnosti + Snadno udržují konzistenci dokumentu + Jednoduché provádění změn + Vytváření šablon + Rychlé zpracování Různé chování prohĺıžečů
Dynamické prvky skriptovací technologie Skript = malý program spustitelný přímo Skripty na straně klienta CGI skripty (Common Gateway Interface) JavaScript VBScript Serverové skripty PHP Hypertext Preprocessor ASP Active Server Pages Perl, Python...
Javascript 1995 Brendan Eich Netscape Vyvinut podle C++ a Javy Objektový model Vhodný např. pro tvoření rozbalovacích menu
Formuláře v html Kontakt s uživatelem <form></form> Prvky formuláře html značka <input></input> různých typů <input type="text">, <input type="radio">, <input type="checkbox">,... každý má své jméno parametr name="jmeno"
Odesílání dat Metoda GET Dvojice název1=hodnota1&název2=hodnota2... Součást adresy za otazníkem Omezená velikost Metoda POST V hlavičce http Není omezená Dají se přenášet soubory Posílání dat z formuláře Tlačítko <input type="submit">
Technologie LAMP Linux + Apache + MySQL + PHP Operační systém + webový server + databáze + skriptovací jazyk Výkonný systém Internetové obchody Velmi rozšířená technologie
Internetové vyhledávače Google www.google.com Yahoo www.yahoo.com Seznam www.seznam.cz Atlas www.atlas.cz
Google Googol = 10 100 1996 Sergey Brin + Larry Page 1998 začátek provozu 21.9. 1999 konec betaverze Googlu
Zajímavosti o Googlu 3 miliardy prohledávaných stránek Odpověd na dotaz se prohledává nejenom v html stránkách ale i v pdf, ps, xls, doc, rtf, txt,... 200 milionů dotazů denně Přes 73,5 milionů unikátních uživatelů za měsíc Vyhledávač obrázků - přes 425 milionů Zaměstnává přes 1000 zaměstnanců Hovoří 88 jazyky a v 35 nabízí výsledky
Google Indexování stránek Larry Page a Sergey Brin PageRank Pavouk prolézá sít Počítají se odkazy na stránku (URL) Ostatní kritéria neveřejná Označme π A hodnotu PageRank stránky A, C A počet odkazů mířících ze stránky A a s i, i = 1... m všechny stránky odkazující na stránku A. Platí π A = 1 d ( πs1 + d + π s 2 + + π ) s m, n C s1 C s2 C sm kde d je daný koeficient mezi 0 a 1 a n celkový počet indexovaných stránek.
Google jak ovlivnit výsledky vyhledávání Cloaking Jiný obsah pro robota než pro uživatele Doorway Page Automatické přesměrovávání Skrytý obsah Např. bílé písmo Odkazové farmy Soubor stránek obsahující odkazy na požadovanou stránku
Grafické formáty pro web Potřeba šetřit místem Úpravy se dělají předem Fotogalerie se zmenšeninami obrázků
Grafické formáty pro web GIF CompuServe Graphics Interchange Format 80. léta Lempel, Ziv 256 barev Na grafiku ve stránkách JPEG Joint Photographics Expert Group Ztrátová komprese 16,78 milionů barev Na fotky PNG Portable Network Graphics Format Náhrada za GIF Na fotky a obrázky