Category Archives for html
Texter za Windowse (ni Textmate za Maca) …
… uporaben je pa mogoče celo še bolj …
Pred kakšnim letom sem bil blazno navdušen nad Dustinom Diazom (ki je seveda še vedno car, če vas zanima javascript, CSS,HTML, uporabnost, dostopnost, si nujno oglejte njegovo stran, tip je delal za Yahoo!, sedaj pa dela za IMVU).
No, ko sem prebiral njegove screencaste sem se navdušil nad Macovim programom Textmate*, madonca je fejst za pisat kodo (kar celo HTML stran si lahko shraniš in jih prikličeš z zaporedjem tipk, in ta-daaa, koda se pojavi v urejevalniku). Za več funkcij si oglejte zgoraj omenjeno stran ali kakšen Dustinov screencast.
No, kar nekaj časa sem iskaj (txt) editor, ki bi znal vsaj približno to kar zna Textmate, pa ga nisem našel. Do včeraj.
Texter, ki ga je razvil Adam Pash, je super zadevščina. V bistvu zamenjuje “hotstringe”, se pravi nekakšna kratka zaporedja znakov z dolgimi teksti, ki so lahko karkoli: vaš podpis v e-poštnem sporočilu, naslov, del HTML, CSS, … in je zelo uporaben v vašem priljubljenem e-poštnem klientu, v urejevalniku besedil, ali pa v kakšnem drugem tekstovnem urejevalniku za Okna.
* Textmate je skoraj edina stvar, ki bi me prepričala, da bi kupil Maca. Ne bo treba 
Continue reading
Browsershots – testiranje spletnih strani v različnih brskalnikih
BrowserShots.org je spletna aplikacija, ki naredi ekranostrele željene spletne strani v vseh pomembnejših brskalnikih (praktično skoraj v čisto vseh) na vseh pomembnejših OS-ih (Wins, Mac, Linux).
Tako najlažje preverite HTML in CSS postavitev vaše strani, če stoji prav ali ne, oz. če stoji vsaj približno prav v brskalnikih, ki so največ v uporabi.
Primer ekranostrelov za em3r10.com najdete tukaj. Aplikacija je dobrodošla za vse spletne oblikovalce / programerje / razvojnike, strokovnjake za uporabnost, skratka vse, ki se ukvarjajo s spletno produkcijo. Continue reading
Kako embedati YouTube video, da bo stran XHTML validna
Problem validiranega XHTML embedanja (ne spomnim se lepšega slovenskega izraza) za videe iz YouTube-a vsekakor obstaja, vendar je rešljiv.
YouTube-ova koda za nek video izgleda približno (okej, točno) takole:
<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/BncO57inCl0"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/BncO57inCl0" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>
Ta koda vsekakor ni validna, ker je značka (tag) embed nevaliden po XHTML 1.0 specifikaciji.
Tudi sam sem imel problem pri embedanju videa za stran DonCorleone.si, vendar je Google našel nekaj zanimivih rešitev. Po ogledu nekaj zapisov na to temo, sem vseeno imel še nekaj problemov s transparenco, vendar sem kmalu našel rešitev … štos je v tem, da je treba dodati parameter za Flash video transparenco, ki se glasi: <param name="wmode" value="transparent" />, tako potem dobimo kodo s katero bodo naši videi iz YouTube-a XHTML 1.0 Strict validni:
<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/BncO57inCl0"><param name="movie" value="http://www.youtube.com/v/BncO57inCl0" /><param name="wmode" value="transparent" /></object>
Mislim, da ni treba povdarjati, da URL ki kliče vaš video (http://www.youtube.com/v/nekineki) v obeh primerih v kodi zamenjate s svojim, video izpis pa izgleda takole:
Tadaaaa, stran je validna, sicer imamo na Embriu 1.0 Transitional, vendar dela tudi na Strict
Sedaj mi ne preostane nič drugega, kot da vsem objavljenim videom za nazaj popravim kodo. Veselo na delo Continue reading
IE7 vse bolj podoben brskalniku, vsaj pravijo tako
Dobre novice iz Redmonda! Na IEBlogu so konec avgusta (ko smo mi žurali na Trnfestu, (lahko bi ga preimenovali v Mrazfest, ker ti avgusti niso več kar so bli)) objavili seznam popravkov, ki so jih popravili v IE7, natančneje vse hrošče objavljene na PositionIsEverything.net, razen enega, pa še za tega planirajo popravek v prihodnosti. Poleg tega še veliko hroščev, ki bodo razveselili vsakega spletnega oblikovalca, ki rad oblikuje s spletnimi standardi, celo podporo za alfa kanal PNG formata bodo dodali.
Kot kaže bo IE7 (mogoče) res kul browser?! Continue reading
Povezave na druga spletna mesta z thumbnaili
Zadnjič sem že govoril, kako vizualno označiti povezave, ki vodijo na druga spletna mesta, danes pa je Gregor na Diggu našel članek, v katerem s pomočjo javascripta povezavam dodamo thumbnaile (tako, da človek vidi majhen screenshot pod povezavo).
Članek najdete na strani arc90 lab, če pa boste skript uporabljali v povezavi z Ryan Brillovo varianto označevanja povezav na druga spletna mesta, pa samo zbrišite
&& a.className.indexOf('linkthumb') >= 0
iz .js fajla … in skript bo delal tako kot na našem pejdžu. Jipi, jej Continue reading
Povezave na druga spletna mesta
Ker se po zaslugi Firefoxa že dolgo poslužujem brskanja z zavihki (ang.: tabbed browsing, ki je – uuuu – ena večjih “novosti” IE-ja 7) nimam problemov pri zapuščanju spletnega mesta A, tudi če ima spletno mesto povezave na druga spletna mesta (B, C, … X), saj ostane spletno mesto A v svojem zavihku, dokler ga s bližnjico na tipkovnici (Ctrl + W) ne zaprem sam. Dodatna dobra stvar tovrstnega deskanja je, da se mi spletna mesta, ki imajo ukaz, da se odpro v novem oknu (target=”_blank”) odprejo v novem zavihku in me dodatna okna ne zanimajo več.
Vendar pa bi bil splet veliko lepši, če bi vedeli kam nas povezava vodi: ali bomo ostali na istem spletnem mestu, ali bomo spletno mesto, ko kliknemo na neko povezavo.
Po domače se tem povezavam na druga spletna mesta reče “offsite links” in s pomočjo CSS-jev in male, a opisne slikice (npr: 
) lahko vsakemu obiskovalcu pokažete kam vodijo vaše povezave.
Ryan Brill ima rešitev, ki jo lahko aplicirate v nekaj minutah in naredite svojo spletno mesto tako za odtenek bolj uporabno.
Sicer bodo ikonice, ki označujejo “eksterne linke” videli samo obiskovalci, ki imajo brskalnike podprte s CSS3 (to so Firefox, Mozillo, Netscape in Safari), ampak če gledam statistiko za Embrio, vas 53,3 uporablja FF, Mozillo 4.9 %, Safari 0.9 % in samo 34.7 % IE).
Čestitke vsem, ki NE uporabljate IE-ja … ker IE res nima pojma o CSS-jih! Continue reading
Spletne strani za spletne oblikovalce
Tole je seznam, ki sem ga objavljal na forumu o2z2.com, objavljen v enem kosu … če kdo prideska na kakšno stran in meni, da bi morala biti na seznamu, naj pošlje komentar. Ogled seznama in strani v seznamu je primeren za začetnike, za kvaziprofesionalce in tudi za težkokategorne spletne razvijalce. Vsak dan zve človek kaj novega.
Pa začnimo …
Alistapart.com
Kakor pravjo sami: “A List Apart explores the design, development, and meaning of web content, with a special focus on designing with standards.” A je treba to sploh prevajat, oz. razlagat?!
www.alistapart.com
Webdesign.org
Tu boste našli veliko prima reči, za novince je NUJNO branje člankov na temo spletne uporabnosti in osnov spletnega oblikovanja.
www.webdesign.org
Webesignpractises.com
Tukaj najdete veliko uporabnih praks iz realnega spleta … stran je, kot pravijo snovalci, namenjena oblikovalcem, da bi razumeli katere oblikovalske prakse so trenutno v uproabi na svetovnem spletu … skratka koliko strani ima navigacijo horizontalno, koliko vertikalno, koliko to, ono. Statistika, ki vam zna priti prav.
www.webdesignpractices.com
Search ranking factors @ SeoMoz.org
V neki SEO firmi iz Seattla (SEO = search engine optimization – optimizacijo za spletne iskalnike) so napisali dober članek o faktorjih, ki vplivajo na rangiranje spletnih dokumentov pri večjih svetovnih iskalnikih.
www.seomoz.org/articles/search-ranking-factors.php
Typetester
Testiraj fonte na ekranu …
typetester.maratz.com
UseIt.com
Čeprav bi vsak spletni oblikovalec moral vedeti za Jakoba Nielsena, ni vedno tako. Oziroma … velikokrat ni tako. Zato se pojavljajo napake in tukaj je seznam 10 največjih napak pri spletnem oblikovanju za leto 2005. Aja, Jakob je guru uporabnosti (usabilitya) in je rahlo plešast, a zelo brihten možakar.
www.useit.com
Web Developer Toolbar / Extention
Orodna vrstica za vaš priljubljeni brskalnik, z premnogimi orodji, ki bodo koristili vsakemu spletnemu oblikovalcu
- verzija za Firefox, Flock, Mozillo in Seamonkey,
- verzija za Opero,
- in nazadnje verzija za IE (saj vsi vemo, kako dobro zna IE prikazovati spletne strani in kako se drži navodila W3C-ja).
W3C konzorcij
Če smo zgoraj omenili W3C, je treba razložiti, da W3C ni WTC. Standardi so standardi, in če IE skrbi, da se jih ne drži, pri W3Cju skrbijo, da bi se splet vsaj približno standardiziral …
www.w3.org
Web tutoriali Petra L. Kantorja
Tole so tutoriali enega prfoksa, od grafike, do oblikovanja, xhtml-ja, CSS-jev, XML-ja, XLS-ja, Javascripta in PHP-ja. Sicer na kolidž nivoju, ampak za razjasnitev osnovnih pojmov pa bo. Aja, … navigacija je horizontalna, čisto na vrhu jo najdete.
http://academ.hvcc.edu/~kantopet/old/
XHTML / CSS gepardi
Jeffrey Zeldman – www.zeldman.com
Cameron Moll – www.cameronmoll.com
David Shea – www.mezzoblue.com
Dan Cederholm – www.simplebits.com
John Oxton – joshuaink.com
Miha Hribar – hribar.info
Web style guide
Dober vodnik o procesu nastajanja spletnih strani, oblikovanju interfacea, spletnih, izbiri tipografij, ipd, itd. Skratka: zelo fina reč za vse vedoželjne spletne oblikovalce. Če bi vsak novinec prebral tole, ne bi imeli grdih pejdžev.
www.webstyleguide.com
24ways
24 ways to impress your friends. Vat els šud aj sej
24ways.org
Screenspire
Bodi inspiriran, glej tuje dizajne …
screenspire.com
WebDesignFromScratch
Lepo oblikovan in poučen vodnik za spletno oblikovanje (od osnov, procesa oblikovanja, arhitekture strani, dostopnosti, uporabnosti, pisanja za splet, produkcije, HTML-ja, CSS-ja, Javascripta, …), skratka poučno branje za vsakogar.
www.webdesignfromscratch.com
Nekaj povezav … za začetek upam, da bo Continue reading