Apple v  svojih napravah, kot so iPhone in iPad  za zagon aplikacij uporablja ikone. Uporabniki iPhonov in iPadov pa si lahko na namizje svojih naprav shranijo tudi povezave do svojih priljubljenih strani, ki se pojavijo v enaki obliki, kot ostale aplikacije, in sicer z ikono. Zaradi tega nam je Apple omogočil specificiranje slednje s pomočjo kode, ki jo umestimo v našo spletno stran.

Kako ustvarimo ikono

Ikono lahko ustvarite z različnimi grafičnimi programi oziroma vam najbližjim. Prednost takšnih ikon je to, da ni potrebno skrbeti za »glossy« preliv in zaobljene robove, saj nam slednje iOS doda avtomatsko.

Edina skrb, ki jo imate je velikost ikone. Apple je namreč poleg iPhona in iPada izdal še iPhone z večjo resolucijo zaslona – »retina display«. Zaradi tega imamo na volje naslednje tri velikosti:

• iPhone 57 x 57 px (apple-touch-icon-57x57.png ),
• iPad 72 x 72 px (apple-touch-icon-72x72.png) in
• iPhone 4 114 x 114 px (apple-touch-icon-114x114.png).

Vse datoteke se morajo nahajati v root direktoriju vaše spletne strani oziroma moramo pot do njih specificirati v HTML kodi.

Specificiranje ikon v HTML datoteki

Ob uporabi svojih imen, različnih lokacijah datotek ali celo različnih ikon posameznih strani pa je potrebno uporabiti HTML kodo.

Primer kode za eno ikono

Če želimo samo eno ikono na celotni strani oziroma vseh straneh ne glede na resolucijo iOS naprave potrebujemo naslednjo kodo:

Primer kode za več ikon (različne resolucije)

Z nekaj dodatnih vrstic HTML kode pa lahko dosežemo tudi podporo različnim resolucijam iOS naprav.

Če atribut »sizes« ni definiran bo uporabljena standardna velikost 57x57px. Če želite, da iOS ne doda svojih stilov na ikono/e pa je potrebno zamenjati »apple-touch-icon« z »apple-touch-icon-precomposed«.

Dodatne informacije o ikonah:

• http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW11
• http://www.iosing.com/2011/10/ios-icon-design-icon-sizes/?t=1320174593

Jeremy Keith | The Design of HTML5 | Fronteers 2010

Jeremy Keith | The Design of HTML5 | Fronteers 2010 from Fronteers on Vimeo.

Paul Irish | The State of HTML5: Inaugural Address | Fronteers 2010

Paul Irish | The State of HTML5: Inaugural Address | Fronteers 2010 from Fronteers on Vimeo.

Steve Faulkner & Hans Hillen | HTML5 Accesibility: is it ready yet? | Fronteers 2010

Steve Faulkner & Hans Hillen | HTML5 Accesibility: is it ready yet? | Fronteers 2010 from Fronteers on Vimeo.

http://fronteers.nl

HTML5 periodni sistem je ustvaril Josh Duck in vsebuje 104 elemente, ki so trenutno uporabljajo v HTML5 in dva predlagana(označena z *). Elementi so urejeni v skupine, ki se med seboj razlikujejo v barvi. Ob kliku na posamezen element se nam izpiše kratek opis HTML5 značke in povezava do več informacij.

Vsebuje tudi orodje, ki nam ob vpisanem URL naslovu vrne HTML5 elemente, ki jih vpisana stran vsebuje. Tako lahko enostavno preverite kdo že uporablja HTML5 značke in kdo ne.

http://joshduck.com/periodic-table.html

Zadnje čase so pri različnih oglaševalskih akcijah vse popularnejša ozadja na katere je mogoče klikniti. Sliši se dokaj enostavno, ampak pri sami izvedbi se zgodba hitro zaplete.

Namreč povezavo je narediti precej težje, kot si mislimo. Obstaja več rešitev, najenostavnejša je, da naredimo ob vsaki strani razširljiva DIV polja na katera dodelimo povezavo. Veliko bolj elegantna rešitev pa je, da imamo eno DIV polje, ki povezava nanj pa umestimo celotno našo stran.

Problem slednje rešitve je, da postane celotna vsebina povezava, se pravi kar koli kliknemo (besedilo, ozadja, ...) se odpre povezava. Zato si moramo pomagati z Javascript kodo, ki preverja kam smo kliknili. Primer rešitve si lahko ogledate tu - ozadje povezava - background link.

Primer kode:

Stran občutljivo na čas lahko naredimo na več načinov. Ogledali si bomo primer, kjer se za preverjanje časa uporablja Javascipt koda in na podlagi tega vklopi CSS datoteko s stili.

Primer kode:

Opis kode:
Javascript kodo moramo dodati v glavo HTML datoteke. V prvem delu določimo spremenljivke katerim dodelimo trenuten čas. Nadaljujemo z IF zanko, kjer vklopimo določen CSS stil na podlagi ure. Če je ura večja od 7. ure in manjša od 19. ure se vklopi CSS stil »dan«. Drugače se vklopi CSS stil »noc«.
V primeru, če uporabnik nima podprtega Javasripta pa se vklopi alternativni CSS stil.

Prenesi kodo - Pomagalnik-JS_dan_noc

Ostali podobni primeri za časovno občutljivo stran:

• Javascript metoda: http://www.katgal.com/2007/03/time-sensitive-css-switcher-change.html
• PHP metoda: http://blog.strawberrysoup.co.uk/2010/01/07/dynamic-css-creating-time-sensitive-sites/

Pri postavljanju različnih vsebin velikokrat srečamo tabele. Postopek preoblikovanja slednjih pa ni najlažji. Potrebno je veliko poskušanj in testiranja. "On-line" aplikacija - HTML and CSS Table Border Style Wizard nam olajša prav ta del, saj omogoča avtomatsko kreiranje stilov tabel.

Postopek je enostaven, izberemo vse željene CSS značke, ki si jih lahko sproti ogledujemo na vzorčnem modelu. Ko dosežemo zadovoljivo postavitev si CSS in HTML kodo enostavno presnamemo. Na voljo imamo tudi nekaj splošnih navodil in napotkov.

HTML and CSS Table Border Style Wizard

Splošno o HTML/CSS tabelah

Tabele se uporabljajo v obliki HTML značk <table>, <tr>, <td>, ... Značka <table> označuje začetek oz. konec tabele. Značka <tr> označuje vrstice v tabeli, in značka <td> označuje polja tabele. Slednje pa oblikujemo s pomočjo CSS stilov.

Dodatne informacije: http://www.w3schools.com/html/html_tables.asp

Najpogostejši ASCII znaki v uporabi:

• - presledek brez preloma &nbsp; ali & #160; ali & #xA0;
• © - znak "copyright" & copy; ali & #169; ali & #xA9;
• ™ - "trademark" & trade; ali & #153; ali & #x99;

Vir in dodatne informacije o ASCII znakih: http://webdesign.about.com/od/charactersets/a/aa112906.htm in http://webdesign.about.com/od/localization/l/blhtmlcodes-ascii.htm.

ASCII znaki so kombinacija določenih znakov s katerimi lahko prikažemo vse ostale znake. Spodnja tabela vsebuje vse ASCII znake, ki jih potrebujemo pri izdelavi spletnih strani.

Zapisi so v numeričnem in šestnajstiškem zapisu. Vsi brskalniki ne podpirajo vseh ASCII znakov, zato jih vedno pred objavo preverimo oziroma testiramo. Pametno je uporabiti tudi "Unicode" zapis za nastavitev znakov v glavi HTML strani.

Koda za v glavo HTML strani

Nabor ASCII znakov

Sidra ponavadi uporabljamo pri daljših besedilih, npr. na začetku izpostavimo poglavja, ki so "polinkana" na besedilo nižje. Druga bolj pogosta uporaba sidre pa je povezava Na vrh (TOP), ki nas ponavadi iz noge spletne strani pripelje na vrh.

Primer kode za označbo, kam naj povezava kaže:

Primer povezave:

V povezavo lahko navedemo tudi spletno stran:

Enako velja za celotne URL-je, kadar "linkamo" iz drugi mest, kjer je potrebno na koncu dodati oznako za sidro, npr.: http://www.domena.com/ime_datoteke.html#POGLAVJE_1.

Dodatne informacije: http://www.w3schools.com/HTML/html_links.asp

Vsebino najlažje centriramo, če ustvarimo DIV polje, ki mu določimo širino,  višino, pozicioniranje, odmike in »margin«. Za lažje predstavljanje  si bomo ogledali samo kodo.

Primer centriranja po horizontali in vertikali:

Opis kode:

width:600px;  // Širina polja
height:300px;  // Višina polja
position:absolute;  // Pozicioniranje
top:50%;  // Odmik od zgornjega roba
left:50%;  // Odmik od sponjega roba
margin:-150px 0 0 -300px; // Margin, zgornji odmik za polovico višine polja, desno nič, spodaj nič in levo polovični odmik širine
border:1px solid black;  // Obroba, ni potrebna za delovanje