I love Street View, je tam aj oranžový panáčik

Zväčšiť mapu

Okolo celého Googleplexu v Mountain View sa v Street View predvádzajú pracovníci Googlu… a vo vyššom rozlíšení. Ak Vás to zaujíma tak si pozrite okolie celého Googlu pretože ako sami uvidíte, ľudia z Googlu sa tam prezentujú všemožnými spôsobmi.

Ako vložiť vlastné Google Street View na vlastný web?

Je to jednoduché ale samo o sebe si to možno ani nevšimnete, postup je takýto:

Nájdeme si lokáciu ktorá podporuje street view (panáčik z obrázku je oranžový) a kliknutím a ťahaním ukážeme na mapu. Na mape sa vysvietia modré trasy na ktoré je možné panáčika položiť (pri ukazovaní na modré trasy v malom okienku vidíte náhľad danej lokácie). Ak si nájdeme miesto ktoré chceme vidieť v street view tak len panáčika pustením tlačidla umiestnime do mapy na modrú trasu a mapa sa prepne do módu zobrazenia ulice.

Po prepnutí do módu ulice klikneme vpravo hore do modrej lišty na odkaz link kde sa nám zobrazí ponuka pre vloženie embedde iframu s Google Street, ak chceme vidieť náhľad tak klikneme na “Prispôsobiť vloženú mapu a zobraziť náhľad” tam sa nám zobrazí pop-up okno s podrobnejšími nastaveniami.

Takýto HTML kód len skopírujete na svoj web a hneď si môžete vychutnať perfektné Google Street View zo svojho webu.

Google stále niečo vylepšuje a časom možno všetky Street View zábery budú vo vyšších rozlíšeniach ale momentálne je to len na určitých mestách a v určitých častiach, v ktorých tak to nezistíte… narazíte na to len náhodou.  Všimnúť si tiež ale môžete, že ŠPZ áut a tváre neznámych  ľudí sú automaticky v Street View rozmazávané.

Aká je najvhodnejšia šírka pre dnešné internetové stránky? Niekto to nerieši, pre iného je to možno problém. Ja som nikdy nejak extra neskúmal aká šírka stránky je najvhodnejšia ale dávnejšie som narazil na stránku 960.gs ktorá ma presvedčila o tom, že najvhodnejšou šírkou pre dnešné weby je 960 pixelov.

Prečo je 960 pixelov najvhodnejšie?

Hlavne preto, že číslo 960 je deliteľné 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 a 480. Na stránke 960.gs je toho samozrejme viac ale 960 Grid System Vám umožní flexibilne si rozvrhnúť a rozkúskovať jednotlivé časti webu.

Základ systému

Základ systému tvoria stĺpce v celkovej šírke 960 pixelov rozdelené na 12 a 16 stĺpčekov. 12 stĺpcový systém obsahuje stĺpce šírky 60px a 16 stĺpcový šírku 40px. Každý stĺpec obsahuje 10 pixelový margin v ľavo a pravo.

K čomu je to dobré?

Vzhľadom na tento stĺpcový systém si pri tvorbe webu môžete presne rozvrhnúť jednotlivé časti webu tak, aby vždy vyplnili vhodnú šírku a zároveň pôsobili vyvážene a pekne. Stačí že jednotlivé bloky budú mať šírku vždy podľa mriežky.

Jeden z príkladov zo stránky 960.gs ktorý to pekne znázorňuje…

960 Grid systém je podľa mňa vhodné používať i keď ja to momentálne veľmi nerobievam ale snažím sa svoje zvyky odnaučiť a držať sa niečoho takéhoto. Minimálne si tým uľahčíte robotu pretože nemusíte rozmýšľať nad šírkou jednotlivých častí Vašeho webu. Viac informácií a súborov na stiahnutie na http://www.960.gs

Vytvorenie ikony

Ikonka musí mať rozmer najlepšie 57×57 pixelov vo formáte PNG, v iPhone majú tieto ikonky zaoblené rohy a zobrazujú odlesk skla. Vy to ale neriešite, o to sa postará iPhone. Vytvorte ikonku pre svoj iPhone v nejakom grafickom editore. Ja som si vytvoril niečo takéto.

Vloženie do stránky

Do stránky len nalinkujete jeden riadok HTML kódu s cestou k obrázku, to je všetko… tento kus kódu vložiť medzi tagy HEAD.

<link rel="apple-touch-icon" href="/directory/myicon.png" />

Pridanie stránky na plochu

Pridať svoju stránku ako ikonku na plochu iPhonu je veľmi ľahké. Otvorte Safari v iPhone a zadajte nejakú URL adresu (ak chcete skúste peteroravec.sk kde to funguje), kliknite na tlačidlo + (plus) a vyberte možnosť Add to Home Screen. Ikonka sa zobrazí na ploche.

Pre premiestnenie ikonky podržte stlačenú nejakú ikonku až sa všetky ostatné začnú triasť, potom len kliknutím a ťahom popresúvajte ikonky tam kde chcete, pre uloženie stlačte tlačidlo na spodku iPhonu a pozície sa uložia.

Je to drobnosť ktorá ale urobí radosť a tento článok je o tom ako ju jednoducho vytvoriť.

Ako vytvoriť FavIcon?

Moderné prehliadače akceptujú aj iný typ súboru ako ICO, my však použijeme práve ICO aby nám FavIcon fungovala aj na IE6 ktorý nám to ako vždy skomplikuje.

• Ikona o rozmeroch 16×16 alebo 32×32. Keď sa povie ikona tak NIE obrázok uložený na disk s prepísanou koncovkou ale normálne vygenerovaný súbor .ICO
• Osobne odporúčam použiť rozmer 16×16 pixelov lebo do adresného riadka aj tak zobrazuje len 16×16 pixelov a ak dáte väčšiu ikonu tak ju stlačí a vznikne nepekný deformovaný obraz.
• Vytvorenie ICO súboru je možné napríklad s photoshopm ktorý ale musí mať špeciálny plugin, jednoduchšie je napríklad si FavIcon rovno nakresliť na http://www.favicon.cc/ prípadne klasický obrázok premeniť na ICO na http://www.html-kit.com/favicon/.

Ikonu máme, umiestnenie na stránku

Na umiestnenie FavIcony na stránke je potrebný jeden riadok HTML kódu:

‹link rel="shortcut icon"
href="favicon.ico" type="image/x-icon" /›

Tento kód umiestnite do hlavičky webu (medzi tagy <head></head>). Cesta musí byť správna, tam si dajte pozor, a to je celé… V moderných prehliadačoch to uvidíte hneď po refreshi.

Funguje to aj v IE6 ale…

Ak ale toto skúsite v IE6 tak pravdepodobne ikonka sa nezobrazí, to je v poriadku za to môže IE6. Ikonka sa začne zobrazovať ak si stránku pridáte do obľúbených položiek. V budúcnosti keď na túto stránku prídete tak ikonku uvidíte.

Aký je to tabuľkový layout?

Tabuľkový layout je tvorený tagmi <table>, <td>, <tr>, a inými… Čo je na tom zlé? Práve to, že už z názvu je jasné že tabuľka je tabuľka a teda tabuľkový layout výhradne používať na zobrazovanie tabuľkových údajov.

Čo je na tom zlé keď to vyzerá oproti beztabuľkovému layoutu rovnako?

To, že tabuľky sa používali na tvorbu layoutu stránky je historicky dané tak ako sa web vyvíjal. Dnes to je síce ešte v hojnom počte používané i keď je to už zastaralí a v dnešnej dobe nevhodný spôsob tvorby layoutov.

Nevýhody tabuľkového layoutu sú:

• Neprehľadný zdrojový kód
• Viac zbytočného kódu = viac priestoru na chyby
• Viac zbytočného kódu = väčšia veľkosť súboru
• Pevne daná štruktúra ktorá sa ťažko mení
• Ak je layout tvorený tabuľkou pri zobrazovaní sa čaká kým sa nahrá obsah všetkých buniek (aj obrázkov) kým sa tabuľka zobrazí

Výhody beztabuľkového layoutu:

• Minimum zdrojového kódu
• štruktúra webu nieje priamo definovaná, nemusí byť daná tokom dokumentu (o zobrazenie štruktúry sa postará CSS)
• Ľahko udržateľný kód
• Pri beztabuľkovom layoute sa najprv zobrazí text a potom sa načítavajú obrázky (pri tabuľkách je to opačne)
• Menšia veľkosť súboru, rýchlejšie načítanie stránky

Tabuľkový layout iba na tabuľkové hodnoty

Keď objavíte možnosti beztabuľkového layoutu na tabuľky budete chcieť čo najskôr zabudnúť. Tabuľky však používajte aj naďalej (ťažko povedať ako to bude v novej verzii HTML5 či XHTML2) ale len pre zobrazenie tabuľkových hodnôt.

Pri beztabuľkovom layoute nahradia tabuľky tagy DIV a SPAN