Internet 2 – css, skriptovanı, dynamicke prvky
Martin [email protected]
http://kmlinux.fjfi.cvut.cz/∼hejtmmar
Pocıtacovy kurs Univerzity tretıho veku na FJFI CVUTZnalci
26. brezna 2009
Dnesnı prednaska
1 Kaskadove styly – css2 Dynamicke prvky stranek3 Internetove vyhledavace4 Graficke formaty pro web
http://pcu3v.fjfi.cvut.cz
Valka prohlızecu
• Netscape × Microsoft
http://pcu3v.fjfi.cvut.cz
css – kaskadove styly
• css – Cascading Style Sheets
• Pokrocily vzhled stranek
• Motivace oddelit strukturu dokumentu od vzhledu
• Velke mnozstvı vyhod
http://pcu3v.fjfi.cvut.cz
Kaskadove styly – historie
• 1994 Prvnı naznaky
• 1996 css 1• Netscape 4.0• Internet Explorer 4.0
• 1998 css 2• Pozicovanı prvku
• ???? css 3
http://pcu3v.fjfi.cvut.cz
Kaskadove styly
• Soupis vlastnostı znacek z html• Mnohem rozsahlejsı nez parametry html• Napr. color: blue; font-size: 20pt;
• Parametr style• Napr. <p style="color: blue; font-size: 20pt;">
• Nebo znacka <style></style> v hlavicce dokumentu
http://pcu3v.fjfi.cvut.cz
Kaskadove styly – trıdy a identifikatory
• Sdruzenı vlastnostı do skupiny
• Ucinne vytvarenı vlastnıho vzhledu
http://pcu3v.fjfi.cvut.cz
Kaskadove styly – pozicovanı prvku
• Html znacky <div></div>, <span></span>• Uzavrou obsah do bloku• Nastavıme jim pozici
• Nastavenı pozice• Absolutne• Relativne• Staticky
http://pcu3v.fjfi.cvut.cz
Kaskadove styly – blokovy model
• Obsahovy × okrajovy model – rozdıl, co je sırka a vyska
• 1994 Netscape – k <img> pridana sırka, vyska, ohranicenı• Obsahovy model
• 1995 Netscape – k <table> pridana sırka, vyska• Okrajovy model
http://pcu3v.fjfi.cvut.cz
Definice ”DOCTYPE”
• Udaj, v jake verzi je dokument zapsan
• Rozlisenı rezimu BackCompat × CSS1Compat
<!DOCTYPE html PUBLIC ”-//W3C//DTDhlavnı znacka verejne DTD
XHTML 1.0 Transitional//EN”verze DTD (nejdulezitejsı)
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>adresa dokumentu s definicı DTD
• Mene problemu s odlisnostmi
• Nutna pro validaci – http://validator.w3.org
http://pcu3v.fjfi.cvut.cz
Kaskadove styly – shrnutı
• +© Rozsahle moznosti
• +© Snadno udrzujı konzistenci dokumentu
• +© Jednoduche provadenı zmen
• +© Vytvarenı sablon
• +© Rychle zpracovanı
• –© Ruzne chovanı prohlızecu
http://pcu3v.fjfi.cvut.cz
Dynamicke prvky – skriptovacı technologie
• Skript = maly program spustitelny prımo
• Skripty na strane klienta
• CGI skripty (Common Gateway Interface)• JavaScript• VBScript
• Serverove skripty• PHP – Hypertext Preprocessor• ASP – Active Server Pages• Perl, Python ...
http://pcu3v.fjfi.cvut.cz
Javascript
• 1995 Brendan Eich – Netscape
• Vyvinut podle C++ a Javy
• Objektovy model
• Vhodny napr. pro tvorenı rozbalovacıch menu
http://pcu3v.fjfi.cvut.cz
Formulare v html
• Kontakt s uzivatelem• <form></form>
• Prvky formulare• html znacka <input></input> ruznych typu• <input type="text">, <input type="radio">,<input type="checkbox">, ...
• kazdy ma sve jmeno – parametr name="jmeno"
http://pcu3v.fjfi.cvut.cz
Odesılanı dat
• Metoda GET• Dvojice nazev1=hodnota1&nazev2=hodnota2 ...• Soucast adresy za otaznıkem• Omezena velikost
• Metoda POST• V hlavicce http• Nenı omezena• Dajı se prenaset soubory
• Posılanı dat z formulare• Tlacıtko <input type="submit">
http://pcu3v.fjfi.cvut.cz
Technologie LAMP
• Linux + Apache + MySQL + PHP• Operacnı system + webovy server + databaze + skriptovacı jazyk
• Vykonny system
• Internetove obchody
• Velmi rozsırena technologie
http://pcu3v.fjfi.cvut.cz
Internetove vyhledavace
• Google – www.google.com
• Yahoo – www.yahoo.com
• Seznam – www.seznam.cz
• Atlas – www.atlas.cz
http://pcu3v.fjfi.cvut.cz
• Googol = 10100
• 1996 Sergey Brin + Larry Page
• 1998 zacatek provozu
• 21.9. 1999 konec betaverze Googlu
http://pcu3v.fjfi.cvut.cz
Zajımavosti o Googlu
• 3 miliardy prohledavanych stranek
• Odpoved’ na dotaz se prohledava nejenom v html strankach ale i v pdf,ps, xls, doc, rtf, txt, ...
• 200 milionu dotazu denne
• Pres 73,5 milionu unikatnıch uzivatelu za mesıc
• Vyhledavac obrazku - pres 425 milionu
• Zamestnava pres 1000 zamestnancu
• Hovorı 88 jazyky a v 35 nabızı vysledky
http://pcu3v.fjfi.cvut.cz
Google – Indexovanı stranek
• Larry Page a Sergey Brin
• PageRank• Pavouk proleza sıt’• Pocıtajı se odkazy na stranku (URL)
• Ostatnı kriteria neverejna
Oznacme πA hodnotu PageRank stranky A, CA pocet odkazu mırıcıch zestranky A a si , i = 1 . . .m vsechny stranky odkazujıcı na stranku A. Platı
πA =1− d
n+ d ·
(πs1
Cs1
+πs2
Cs2
+ · · ·+πsm
Csm
),
kde d je dany koeficient mezi 0 a 1 a n celkovy pocet indexovanych stranek.
http://pcu3v.fjfi.cvut.cz
Google – jak ovlivnit vysledky vyhledavanı
• Cloaking• Jiny obsah pro robota nez pro uzivatele
• Doorway Page• Automaticke presmerovavanı
• Skryty obsah• Napr. bıle pısmo
• Odkazove farmy• Soubor stranek obsahujıcı odkazy na pozadovanou stranku
http://pcu3v.fjfi.cvut.cz
Graficke formaty pro web
• Potreba setrit mıstem
• Upravy se delajı predem
• Fotogalerie se zmenseninami obrazku
http://pcu3v.fjfi.cvut.cz
Graficke formaty pro web
• GIF – CompuServe Graphics Interchange Format• 80. leta – Lempel, Ziv• 256 barev• Na grafiku ve strankach
• JPEG – Joint Photographics Expert Group• Ztratova komprese• 16,78 milionu barev• Na fotky
• PNG – Portable Network Graphics Format• Nahrada za GIF• Na fotky a obrazky
http://pcu3v.fjfi.cvut.cz
