Internet 2 css, skriptování, dynamické prvky

Internet 2 – css, skriptov´an´ı, dynamick´e prvky Martin Hejtm´anek [email protected] http://kmlinux.fjfi.cvut.cz/∼hejtmmar ˇ Poˇ c´ıtaˇ cov´ y kurs Univerzity tˇret´ıho vˇ eku na FJFI CVUT Znalci

26. bˇrezna 2009

Dneˇsn´ı pˇredn´aˇska 1 2 3 4

Kask´adov´e styly – css Dynamick´e prvky str´anek Internetov´e vyhled´avaˇce Grafick´e form´aty pro web

http://pcu3v.fjfi.cvut.cz

V´alka prohl´ıˇzeˇc˚ u • Netscape × Microsoft

http://pcu3v.fjfi.cvut.cz

css – kask´adov´e styly • css – Cascading Style Sheets • Pokroˇ cil´y vzhled str´anek • Motivace oddˇ elit strukturu dokumentu od vzhledu • Velk´ e mnoˇzstv´ı v´yhod

http://pcu3v.fjfi.cvut.cz

Kask´adov´e styly – historie • 1994 Prvn´ı n´ aznaky • 1996 css 1 • Netscape 4.0 • Internet Explorer 4.0 • 1998 css 2 • Pozicov´ an´ı prvk˚ u • ???? css 3

http://pcu3v.fjfi.cvut.cz

Kask´adov´e styly • Soupis vlastnost´ı znaˇ cek z html • Mnohem rozs´ ahlejˇs´ı neˇz parametry html • Napˇr. color: blue; font-size: 20pt; • Parametr style • Napˇr.

• Nebo znaˇ cka <style> v hlaviˇcce dokumentu

http://pcu3v.fjfi.cvut.cz

Kask´adov´e styly – tˇr´ıdy a identifik´atory • Sdruˇ zen´ı vlastnost´ı do skupiny

´ cinn´e vytv´aˇren´ı vlastn´ıho vzhledu • Uˇ

http://pcu3v.fjfi.cvut.cz

Kask´adov´e styly – pozicov´an´ı prvk˚ u • Html znaˇ cky

, <span> • Uzavˇrou obsah do bloku • Nastav´ıme jim pozici • Nastaven´ı pozice • Absolutnˇ e • Relativnˇ e • Staticky

http://pcu3v.fjfi.cvut.cz

Kask´adov´e styly – blokov´y model • Obsahov´ y × okrajov´y model – rozd´ıl, co je ˇs´ıˇrka a v´yˇska • 1994 Netscape – k pˇrid´ ana ˇs´ıˇrka, v´yˇska, ohraniˇcen´ı • Obsahov´ y model • 1995 Netscape – k pˇrid´ ana ˇs´ıˇrka, v´yˇska • Okrajov´ y model

http://pcu3v.fjfi.cvut.cz

Definice ”DOCTYPE” ´ • Udaj, v jak´e verzi je dokument zaps´an • Rozliˇsen´ı reˇ zim˚ u BackCompat × CSS1Compat

adresa dokumentu s definic´ı DTD • M´ enˇe probl´em˚ u s odliˇsnostmi • Nutn´ a pro validaci – http://validator.w3.org

http://pcu3v.fjfi.cvut.cz

Kask´adov´e styly – shrnut´ı • + Rozs´ahl´e moˇznosti • + Snadno udrˇzuj´ı konzistenci dokumentu • + Jednoduch´e prov´adˇen´ı zmˇen • + Vytv´aˇren´ı ˇsablon • + Rychl´e zpracov´an´ı • – R˚ uzn´e chov´an´ı prohl´ıˇzeˇc˚ u

http://pcu3v.fjfi.cvut.cz

Dynamick´e prvky – skriptovac´ı technologie • Skript = mal´ y program spustiteln´y pˇr´ımo • Skripty na stranˇ e klienta • CGI skripty (Common Gateway Interface) • JavaScript • VBScript • Serverov´ e 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 • Objektov´ y model • Vhodn´ y napˇr. pro tvoˇren´ı rozbalovac´ıch menu

http://pcu3v.fjfi.cvut.cz

Formul´aˇre v html • Kontakt s uˇ zivatelem • • Prvky formul´ aˇre • html znaˇ cka r˚ uzn´ych typ˚ u • , , , ... • kaˇ zd´y m´a sv´e jm´eno – parametr name="jmeno"

http://pcu3v.fjfi.cvut.cz

Odes´ıl´an´ı dat • Metoda GET • Dvojice n´ azev1=hodnota1&n´ azev2=hodnota2 ... • Souˇ c´ast adresy za otazn´ıkem • Omezen´ a velikost • Metoda POST • V hlaviˇ cce http • Nen´ı omezen´ a • Daj´ı se pˇren´ aˇset soubory • Pos´ıl´ an´ı dat z formul´aˇre • Tlaˇ c´ıtko

http://pcu3v.fjfi.cvut.cz

Technologie LAMP • Linux + Apache + MySQL + PHP • Operaˇ cn´ı syst´em + webov´y server + datab´aze + skriptovac´ı jazyk • V´ ykonn´y syst´em • Internetov´ e obchody • Velmi rozˇs´ıˇren´ a technologie

http://pcu3v.fjfi.cvut.cz

Internetov´e vyhled´avaˇce • Google – www.google.com • Yahoo – www.yahoo.com • Seznam – www.seznam.cz • Atlas – www.atlas.cz

http://pcu3v.fjfi.cvut.cz

Google • Googol = 10100 • 1996 Sergey Brin + Larry Page • 1998 zaˇ c´atek provozu • 21.9. 1999 konec betaverze Googlu

http://pcu3v.fjfi.cvut.cz

Zaj´ımavosti o Googlu • 3 miliardy prohled´ avan´ych str´anek • Odpovˇ ed’ na dotaz se prohled´av´a nejenom v html str´ank´ach ale i v pdf,

ps, xls, doc, rtf, txt, ... • 200 milion˚ u dotaz˚ u dennˇe • Pˇres 73,5 milion˚ u unik´atn´ıch uˇzivatel˚ u za mˇes´ıc • Vyhled´ avaˇc obr´azk˚ u - pˇres 425 milion˚ u • Zamˇ estn´av´a pˇres 1000 zamˇestnanc˚ u • Hovoˇr´ı 88 jazyky a v 35 nab´ız´ı v´ ysledky

http://pcu3v.fjfi.cvut.cz

Google – Indexov´an´ı str´anek • Larry Page a Sergey Brin • PageRank • Pavouk prol´ ez´a s´ıt’ • Poˇ c´ıtaj´ı se odkazy na str´anku (URL) • Ostatn´ı krit´ eria neveˇrejn´a

Oznaˇcme πA hodnotu PageRank str´anky A, CA poˇcet odkaz˚ u m´ıˇr´ıc´ıch ze str´anky A a si , i = 1 . . . m vˇsechny str´anky odkazuj´ıc´ı na str´anku A. Plat´ı   πs1 1−d πs2 πsm πA = +d · + + ··· + , n Cs1 Cs2 Csm kde d je dan´y koeficient mezi 0 a 1 a n celkov´y poˇcet indexovan´ych str´anek.

http://pcu3v.fjfi.cvut.cz

Google – jak ovlivnit v´ysledky vyhled´av´an´ı • Cloaking • Jin´ y obsah pro robota neˇz pro uˇzivatele • Doorway Page • Automatick´ e pˇresmˇerov´av´an´ı • Skryt´ y obsah • Napˇr. b´ıl´ e p´ısmo • Odkazov´ e farmy • Soubor str´ anek obsahuj´ıc´ı odkazy na poˇzadovanou str´anku

http://pcu3v.fjfi.cvut.cz

Grafick´e form´aty pro web • Potˇreba ˇsetˇrit m´ıstem

´ • Upravy se dˇelaj´ı pˇredem • Fotogalerie se zmenˇseninami obr´ azk˚ u

http://pcu3v.fjfi.cvut.cz

Grafick´e form´aty pro web • GIF – CompuServe Graphics Interchange Format • 80. l´ eta – Lempel, Ziv • 256 barev • Na grafiku ve str´ ank´ach • JPEG – Joint Photographics Expert Group • Ztr´ atov´a komprese • 16,78 milion˚ u barev • Na fotky • PNG – Portable Network Graphics Format • N´ ahrada za GIF • Na fotky a obr´ azky

http://pcu3v.fjfi.cvut.cz