Web savjeti (2) – Naučite HTML 5 na vrijeme

Ovo je drugi dio Web savjeta, logičan nastavak na prvi dio. U ovom dijelu savjetujem vam da naučite HTML 5 i da budete spremni kada on bude u upotrebi.

HTML 5 nije teško naučiti, treba se samo naviknuti na korištenje novih elemenata, što naučite za koji dan. No, uvijek je dobro biti spreman, pa krenimo.

Novi strukturni elementi

Trenutno vam je normalno da strukturirate sadržaj pomoću DIV elemenata kojima onda dajete klase i ID-e. Tako za header imate npr. <div id=”header”>. HTML 5 uvodi niz novih, semantičkih (iako bi se o ovome dalo još raspravljati) elemenata, koje ću vam sada predstaviti.

  • <header> Trebao bi se koristiti za bilo kakva zaglavlja, uključujući header dokumenta (logo, navigacija, pretraga).
  • <nav> Ovaj element treba koristiti za dijelove stranice sa navigacijskim linkovima. Obuhvaća glavnu navigaciju, te bilo koje druge linkove koji pomažu u navigaciji siteom (npr. breadcrumb).
  • <section> Ovo je element dosta sličan DIV-u. Koristi se za grupiranje dijela sadržaja na web stranici (npr. <section id=”related-content”>).
  • <aside> Ovaj element, iako tako djeluje na prvu, uopće nije namijenjen za sidebare, iako se može koristiti i za njih. On bi se trebao koristiti za bilo kakav dodatan sadržaj koji je povezan sa sadržajem koji okružuje.
  • <footer> Ovaj element koristi se footer stranice i podnožja članaka gdje se prikazuje tko je autor, tagovi članka, broj komentara, itd.

Video i audio

Video (<video>) i audio (<audio>) novi su elementi HTML-a koji omogućuju ubacivanje video i audio sadržaja bez posredovanja Flash playera. Mislim da ćemo podršku za njih najduže čekati jer se proizvođači browsera ne mogu dogovoriti oko standardnog formata koji će svi podržavati.

Spremni ste…

Eto, u ovom kratkom članku, koliko-toliko ste spremni za tehnologiju koje dolazi u slijedećih nekoliko godina. Naravno, sada znate elemente, a pravo korištenje tih elemenata shvatit ćete nakon što neko vrijeme provedete u novom HTML-u. Možda još uvijek ne možete takve siteove objaviti, ali probajte privatno, za sebe, prekodirati neki dizajn u HTML 5.

I da, još sam vam zaboravio spomenuti, DOCTYPE novog HTML-a jako je jednostavan i lako pamtljiv:

<!DOCTYPE html>

Uživajte…

Oglasi

Firefox 3.6a1pre

Danas sam saznao da je vani Pre-Alpha verzija Firefoxa 3.6 – 3.6a1pre – “Namoroka” i znatiželjan kakav jesam skinuo sam ju da vidim što od noviteta donosi. Noviteta zasada nema puno (to je ipak pre-alpha), ali ima jedan. Umjesto standardne liste tabova s desne strane sada se (barem na Visti, nemam XP pa ne znam kako to izgleda na njemu) otvara prozirni zamućeni prozor sa thumbnailovima stranica koji izgleda poput Vistinog Alt-Taba.

Preglednik tabova

Preglednik tabova

Okruženje, instalacija…

Firefox 3.6a1pre instaliran je na laptop sa Vistom SP2 zajedno uz Firefox 3.5b4 i Firefox 3. Puno je to Firefoxa, znam. Aktivno sam koristio Firefox 3.5b4. Instalacija je prošla brzo, poput bilo kojeg drugog Firefoxa. Nakon instalacije na Desktopu se pojavila ikona Minefielda.

Minefield ikona

Minefield ikona

Nakon instalacije pitao me želim li ga postaviti kao defaultni browser. Rekao sam mu ne. Provjerio je kompatibilnost instaliranih ekstenzija. Ovo su ekstenzije koje nisu bile kompatibilne s njim:

  • AVG Safe search 8.5
  • Delicious Bookmarks 2.1.041
  • DownThemAll! 1.1.3
  • Easy Youtube Video Downloader 1.6
  • Firebug 1.4.0b2
  • FireFTP 1.0.4
  • iPox 2.20090109
  • PDF Download 2.2.0.2

Niti jedna od njih nije imala verziju koja je kompatibilna s ovom verzijom. Nakon toga malo sam pročačkao po tom Firefoxu, primjetio male promjene u temi (malo je svjetlija) i odlučio ga deinstalirati. Tu su uslijedili problemi. Nakon deinstalacije Firefoxa 3.6, verzija 3.5 nije mogla pročitati bookmarke niti bilo kakve podatke iz profila. Kasnije sam otkrio da je vjerojatno ta 3.6-ica generirala 7 GB error i backup .sqlite datoteka u korisničkoj mapi. To sam pobrisao. Firefox 3.5 nikako nije uspijevao pročitati podatke, čak niti nakon reinstalacije, dok je Firefox 3.0 sve vidio normalno. Sada koristim Firefox 3. Očito dvije nestabilne inačice programa stvaraju probleme (tako mi i treba, kad volim biti na rubu :), a ne želim niti zamišljati što bi bilo da se sve to odvijalo na testnoj inačici Windowsa, Sedmici.

Što bi nam trebao donijeti Firefox 3.6

Surfanjem sam otkrio i što bi nam ta, nova verzija Firefoxa trebala novog donijeti. Novi Firefox bit će baziran na Gecko 1.9.2 engineu. Planiraju se poboljšati performanse i brzina samog browsera. Od zanimljivijih noviteta bit će i mogućnost kreiranja više korisnika (profila) i promjena tema bez restartanja samog browsera. Pročitao sam da će novost biti i about:me portal, koji se ne pojavljuje u trenutnoj Pre Alpha inačici i nije mi baš jasno što bi on trebao biti, iako pretpostavljam da bi to mogla biti personalizirana početna stranica.

Nova verzija također će omogućiti kreiranje, spremanje i korištenje grupe tabova, kao i pretragu među trenutno otvorenim tabovima. Novi download manager dobit će opcije poput brisanja, rezanja i lijepljenja (cut-paste). Nova će verzija također biti bolje integrirana sa Windowsima 7 (pretpostavljam Aero Peek svakog taba pojedinačno).

U svakom slučaju, noviteta će biti puno. I previše za verziju koja će imati broj 3.6

Preporuka? Ne.

Svakako da, ali tek kad izađe beta sa barem dijelom noviteta. Ovu verziju nikome ne preporučam, jer je napravila više štete nego koristi, a jedino što sam novo vidio je ono što vidim svaki dan kad pritisnem Alt-Tab. Definitivno, ne. Ta Pre-Alpha uopće nije zanimljiva i jednaka je testiranju npr. Windows 7 Build 6519 koja je skoro jednaka Visti. (Ja sam počeo sa instaliranjem sedmice tek od verzije 6801, a to je ona za koju je postojao alat za otključavanje novog taskbara i Aero Peek-a.)

Život web dizajnera

Ovaj post inspiriran je jednim upitom na Google s kojeg je došao posjet na moj blog. Upit glasi: “Život web dizajnera”.

Život web dizajnera… hmmm… je isti kao i život svih ostalih ljudi. Osim svega vezanog uz web :). Život web dizajnera već je opisan u tekstovima “Budućnost web dizajna”, a uglavnom se sve svodi na konstantno i cijeloživotno učenje novih tehnologija, jezika i tehnika ili novih načina primjene starih tehnologija.

Sada ću ukratko dati i primjere za to:

Kao web dizajneri stalno moramo učiti nove tehnologije. U prvom procesu učenja savladamo HTML. I mislimo, to je to. Radimo dizajn s tablicama, bez pomisli na CSS. Onda smo ubrzo “prisiljeni” naučiti i CSS (nova tehnologija). Nakon što smo naučili definirati CSSom fontove, backgrounde i ostale stvari moramo odbaciti primjenu HTML-a za izradu dizajna i naučiti primjeniti CSS za dizajn stranice bez tablica (novi način primjene tehnologije). Neki će tu stati. Ali onda ćete ubrzo shvatiti i da bez Photoshopa nema ništa – inače imate jednostavne plohe. Ako ništa, neki barem nauče napraviti gradient i staviti background-repeat u CSS-u pa da nije sve jednobojno. No, Photoshop treba savladati (nova tehnologija).

E sad, naučili smo osnove. Pazite, koliko već znamo, a to su samo osnove. Dalje, trebali bismo naučiti i JavaScript (opet nova tehnologija). Usput ćemo naučiti i jQuery za Javascript, ako zbog nečega, onda barem zbog onih animacija (nije komplicirano). Oni koji više idu na back-end trebali bi naučiti i AJAX (što je nova primjena stare tehnologije). Dakako, da ne zaboravimo, trebalo bi znati i napraviti osnovnu strukturu RSS XML dokumenta.

Ukoliko biste željeli raditi dinamičke stranice trebat ćete naučiti PHP. Vjerojatno ćete željeti odvojiti dizajn od logike, pa će vam trebati i neki template sustav (opet ponovno učenje). Da bi vaša stranica bila još dinamičnija tu vam treba i MySQL (opet nova tehnologija). Trebalo bi naučiti i povezati PHP sa MySQL-om (opet nova primjena postojeće tehnologije).

I kako pišem ovaj tekst zaboravio sam uz HTML spomenuti i optimizaciju za 500 browsera, nekoliko operacijskih sustava, pobrinuti se da site dobro izgleda bez CSS-a, dodati poseban CSS file za print, napraviti verziju za iPhone (dobro, ovo nije obavezno, ali lijepo je), također site treba barem nekako funkcionirati i bez Flasha i JavaScripta.

Optimizacija za 500 browsera i nije baš optimizacija za 500, ali ima ih. I još na različitim sustavima. Ipak, najveće probleme stvara IE6. Ostali su donekle podnošljivi.

Eh, sad, svi koji ovdje nabrojane tehnike znate činit će se kako ne morate ništa više učiti. Ali, pripremajte se za CSS 3 i HTML 5. Da budete spremni kada se budu šire koristili.

Niti jedno zanimanje nije toliko dinamično i zanimljivo kao što je web dizajn. I što je najbolje, opstaju samo oni koji stvarno vole web dizajn, jer ostali ne mogu pratiti sve trendove ako im je to opterećenje. ;)

Budućnost web dizajna (2)

Nakon napisanog teksta o budućnosti web dizajna u kojem sam zapravo htio govoriti samo o izgledu stranica, a dok sam pisao nešto me vuklo da idem i dalje od dizajna, pa su tako spomenuti i Silverlight, jQuery, HTML5 i još poneka sitnica.

Eto, sad mi je bilo dosadno, pa rekoh, ajde da napišem i drugi dio ovog teksta. Naslov copy-pastean i dodano u zagradi broj 2. Da se vidi da je drugi dio. Planiram editirati i prvi dio kako bih dodao na kraj link na ovaj drugi. No to kad završim pisanje ovog posta. :)

OK, nakon malo offtopica, ide pravi tekst.

Da vas prvo podsjetim. Rekao sam da se nadam kako će sa web stranica nestati i vertikalni scrollbar te će se sve moći prikazati bez potrebe za scrollanjem (onda možemo iščupati kotačiće iz miša :). Veliki portali koristit će auto scrollere (lijevo – desno npr.), tabove i sve to pomoću jQueryja ili sličnog Javascript frameworka. Na taj način može se donijeti mnogo informacija bez potrebe za scrollom. (Naravno, ukoliko krene taj trend, a ja tvrdim da hoće). Još sam rekao i kako će se web dizajnerima olakšati život dolaskom tehnologija HTML5 i CSS3. Poseban je tu CSS3 pomoću kojeg ćemo moći konačno napraviti opacity, shadow ili te zaobljene rubove bez potrebe za otvaranjem Photoshopa. No naravno, kad se CSS3 počne širiti i postane nam tako lagano napraviti npr. zaobljene rubove oni će izaći iz mode, a izmislit će se nešto novo. Onda ćemo ponovno Photoshopirati i kad nam najave da će nam olakšati izradu tog određenog efekta u CSS4 onda ćemo jedva čekati CSS4. Kad dođe CSS4 taj efekt zamijenit će se nekim za koji ćemo čekati CSS5, itd.

Zašto će se to događati? Zato jer kad nešto postane lako dostupno za izradu počet će se zloupotrebavljati i onda će postati iritantno (Marquee, anyone?). Mogu samo misliti koji će se kaos događati sa custom embedded fontovima. Počet će nam nabijati na nos hrpetinu jedva čitljivih i odvratnih fontova. Naravno, profesionalni web dizajneri znat će dobro iskoristiti tu opciju, te nam više neće biti potreban sIFR. No, zamislite ovo. Hrpetina stranica koje dizajniraju ljudi koji nemaju pojma o dizajnu. Svatko stavlja svoj neki ludi font. Ljude počinju živcirati ti custom fontovi. Razvija se Custom-Font Blocker (kao i pop-up blocker, samo za blokiranje custom fontova). Ljudi to počinju koristiti i mi koji ćemo to znati pametno iskoristiti nećemo moći jer su ljudi uključili Custom-Font blockere. Sjetite se samo, i pop-up je nekad trebao biti koristan, ali većina je pop-up prozore počela zloupotrebljavati i razvijeni su pop-up blockeri.

Postoji i jedna stvar koju bih htio povući. Nažalost, nakon određenog razmišljanja kažem da Silverlight neće uspjeti. Kad malo razmislim, ipak je to Microsoftova tehnologija, a kod njih uvijek nešto po zlu. Ne znam niti koliko ljudi ima instaliran Silverlight, samo znam da ga od mojih poznanika nema nitko. Meni dovoljno. Nisam razmišljao. Meni se svidio Silverlight i još uvijek mi se sviđa nakon što sam vidio onu izvedbu Bug TV-a u Silverlightu. Kada malo više istražim o Silverlightu onda ću početi o njemu govoriti sa sigurnošću.

OK. Idemo malo detaljnije na HTML5. On nam donosi nove tagove poput <audio> i <video> za umetanje audio i video elemenana na stranice bez upotrebe Flasha ili Silverlighta. Dalje, možemo zaboraviti na <div class=”header”>, <div class=”clanak left”>, itd. Zamijenit će ih novi elementi <header>, <content>, <article>, <aside> i <footer>. To bi ukratko bilo to o HTML5.

I za kraj, malo o browserima. Pokušajte pogoditi što će se dogoditi nakon što svi browseri prođu ACID 3. Da, bravo, pogodili ste. Počet će utrka browsera za ispravnim renderiranjem ACID 4 testa. Naravno, svi će raditi nešto, ali nitko neće postići ništa dok jedan od njih ne uspije prvi. Onda kreće utrka ovih ostalih. I tako će to uvijek biti. Kad svi “polože” ACID 4 doći će ACID 5. Baš kao i sa primjerima već navedenima u tekstu.

Oho, counter riječi već pokazuje veliku brojku. Mislim da je ovo kraj. Ukoliko se pitate postoji li mogućnost za treći dio ovog teksta, da postoji. Čim utvrdim o čemu ću pisati u trećem dijelu, koji će vjerojatno biti nadovezivanje na ovaj, drugi dio, baš kao što se ovaj nadovezuje na prvi.

Ajde sad, gotovo, kraj, nema više. Odite prosurfati po drugim postovima ovdje, valjda ima još nešto zanimljivo.

I najavljujem slijedeći post… uskoro (a samo ja znam kad je to ;)

Napomene:

  1. Trenutni broj draft postova mi je nula. Tak da… čekajte :)
  2. Nije mi se dalo prolaziti (čitati ponovno tekst) koji pokazuje tretnutno 740+ riječi.
  3. (Odnosi se na točku broj 2.) Zbog toga slobodno recite sve riječi koje su krivo napisane ili rečenice koje vam nemaju smisla. Da ih mogu ispraviti.
  4. Stvarno nisam pročitao cijeli tekst. Krenuo sam ga pisati prije možda pola sata do sat vremena i sad je gotov. Ne da mi se čitati.
  5. Komentirajte. Želim znati što vi mislite.