Internet 2 { css, skriptov an , dynamick e prvkykmlinux.fjfi.cvut.cz/~hejtmmar/docs/web2.pdf · Zaj mavosti o Googlu 3 miliardy prohled avan ych str anek Odpov ed’ na dotaz se prohled

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


css – kaskadove styly

• css – Cascading Style Sheets

• Pokrocily vzhled stranek

• Motivace oddelit strukturu dokumentu od vzhledu

• Velke mnozstvı vyhod


Kaskadove styly – historie

• 1994 Prvnı naznaky

• 1996 css 1• Netscape 4.0• Internet Explorer 4.0

• 1998 css 2• Pozicovanı prvku

• ???? css 3


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


Kaskadove styly – trıdy a identifikatory

• Sdruzenı vlastnostı do skupiny

• Ucinne vytvarenı vlastnıho vzhledu


Kaskadove styly – pozicovanı prvku

• Html znacky <div></div>, <span></span>• Uzavrou obsah do bloku• Nastavıme jim pozici

• Nastavenı pozice• Absolutne• Relativne• Staticky


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


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


Kaskadove styly – shrnutı

• +© Rozsahle moznosti

• +© Snadno udrzujı konzistenci dokumentu

• +© Jednoduche provadenı zmen

• +© Vytvarenı sablon

• +© Rychle zpracovanı

• –© Ruzne chovanı prohlızecu


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 ...


Javascript

• 1995 Brendan Eich – Netscape

• Vyvinut podle C++ a Javy

• Objektovy model

• Vhodny napr. pro tvorenı rozbalovacıch menu


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"


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">


Technologie LAMP

• Linux + Apache + MySQL + PHP• Operacnı system + webovy server + databaze + skriptovacı jazyk

• Vykonny system

• Internetove obchody

• Velmi rozsırena technologie


Internetove vyhledavace

• Google – www.google.com

• Yahoo – www.yahoo.com

• Seznam – www.seznam.cz

• Atlas – www.atlas.cz


Google

• Googol = 10100

• 1996 Sergey Brin + Larry Page

• 1998 zacatek provozu

• 21.9. 1999 konec betaverze Googlu


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


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.


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


Graficke formaty pro web

• Potreba setrit mıstem

• Upravy se delajı predem

• Fotogalerie se zmenseninami obrazku


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


Internet 2 { css, skriptov an , dynamick e prvkykmlinux.fjfi.cvut.cz/~hejtmmar/docs/web2.pdf · Zaj mavosti o Googlu 3 miliardy prohled avan ych str anek Odpov ed’ na dotaz se prohled

Documents