Arhiva pentru tagul “HTML”

Twitter Bootstrap: informaţii plutitoare

Informaţii plutitoare sună prea abstract? Nu şi dacă aţi privit la captură (exemplul live e aici), de unde cel puţin cu termenul tooltip v-aţi luminat. Vom vedea mai încolo şi ce e cu popover, dar să o luăm cu începutul. Navigatoarele oferă implicit un sistem de tooltip, pur şi simplu indicând un title la link, imagine… Dar nu e foarte estetic, nici configurabil. Ei bine, cu Twitter Bootstrap lucrurile se simplifică puţin. Trebuie însă să folosim puţin JavaScript, linia esenţială fiind $(‘[rel=ajutor]’).tooltip();

imagine

După cum bănuiţi, în loc de [rel=ajutor] putem pune ce selector dorim. Eu am pus acesta, astfel că un link cu rel="ajutor" va avea automat arătat ce este în title ca şi tooltip. Foarte simplu. Şi tot …


Twitter Bootstrap: tabele, formulare, imagini

Continuăm incursiunea-reclamă pentru Twitter Bootstrap cu alte câteva elemente foarte-foarte comune în mai orice pagină web: tabele, formulare şi imagini. Şi ca să începem cu sfârşitul, vă invit să vedeţi ceea ce mai jos este doar captură dând click aici. Vreţi şi un bonus? Redimensionaţi fereastra cu acea pagină şi observaţi cum elementele se adaptează lăţimii disponibile. Da, fără nici o bătaie de cap toate aceste structuri incluse se vor redimensiona corespunzător, sau vor trece una sub alta când nu mai există lăţimea necesară. Cool!

imagine

Să o luăm rapid la rând câte un element. Desigur, pe scurt. Despre tabele mai întâi (documentaţia oficială): totul porneşte de la a pune clasa table la un tabel şi …


Twitter Bootstrap: butoane, butoane, butoane

O să îmi permit să mai scriu despre Twitter Bootstrap dintr-un considerent cumva egoist: aşa îl descopăr şi eu mai bine :). Sper însă să fie o reclamă bună, care să prindă la webmasterii ce ar putea fi interesaţi de acest minunat proiect. Iar acum vă propun să vedem ce varietate de butoane arătoase, dar atât de simplu de implementat, ne oferă Bootstrap. Dacă vreţi să vedeţi exemplul live, deschideţi această pagină. Noi în cele ce urmează vom lua pe rând cele ilustrate în captură.

imagine

Şi pentru început să spunem că un buton poate fi implementat atât cu tagul button, cât şi cu tagul a folosit pentru linkuri. Totul e să punem class="btn" şi atunci vom avea …


HTMLDrive: o resursă bogată

Era o vreme… poate chiar înainte de anul 2000… când unul dintre siturile pe care le vizitam periodic era DynamicDrive.com. Prin 2004 am şi scris un material de prezentare. Era vremea când un sit îl scriam din cap în coadă, adică fără generatoare, fără CMS-uri. De fapt singurele linii de cod nescrise de mine erau de pe DynamicDrive, de unde luam de exemplu meniuri frumoase – dar nu numai. Apoi situl a cam apus, deşi din când în când mai publică scripturi noi. Mai pe val pare însă HTMLDrive.net, pe care vi-l recomand acum.

imagine

Situl oferă aproximativ 250 de soluţii pentru meniuri; similar pentru slideshow-uri şi scroller-e; aproape 150 de scripturi pentru efecte pe imagini; …


JSDo.it: comunitate cu coduri

Vă amintiţi de JSFiddle? Rămâne un serviciu extraordinar şi poate tocmai de aceea nu lipsesc clonele. Dar aş fi răutăcios să numesc JSDo.it o simplă clonă. Este o comunitate care foarte probabil e predominant asiatică, precum autorii sitului. Membrii pot să scrie cod (HTML, JavaScript, CSS…) şi să îl ruleze spre verificare, iar apoi pot să îl facă public, comunităţii dar şi în afara ei. După cum vedeţi mai jos, interfaţa e aerisită. Scrii cod şi când apeşi Ctrl+S pentru salvare ţi se actualizează previzualizarea din dreapta. Se pot integra şi biblioteci JavaScript.

imagine

Puteţi răsfoi coduri ale altor membri ai comunităţii şi studia cum au realizat anumite lucruri (ex: simple jocuri JavaScript). Există şi o …


Webmasteri: articole şi resurse utile (IV)

Vă invit să vedem două clipuri NetTuts (şi nişte linkuri la final). Primul e legat de HTML5 şi poate vă amintiţi că din aceeaşi sursă şi tot legat de HTML5 am semnalat ceva în iunie a.c. Ei bine, acum materialul se referă la stocarea pentru offline. Da, da, deja ştiţi/aţi auzit că HTML5 permite stocarea unor informaţii, chiar pagini întregi, astfel că vizitatorul poate avea acces la ele şi fără internet. Ce porţi deschide această revoluţionară mişcare!!! Dar… cum se face? Vedeţi mai jos, explicat foarte clar. Felicitări autorului. Sursa: Quick Tip: Getting Offline Access with HTML5 Application Cache. (Dacă vă pasionează tema vă recomand şi Building Persistent Sticky Notes with Local Storage, ce merită de asemenea văzut, precum şi Using HTML5 Web Storage).


HTML5Games: (probabil) era şi timpul

Uite că HTML5 nu e încă nici bine bătut în cuie şi nici bine suportat de navigatoarele moderne că a apărut totuşi un sit precum HTML5Games.com. Situl se prezintă a fi – cum altfel? – “un mare director de jocuri online create prin folosirea HTML5”. E important să reţinem că nu doar situl e la început dar tehnologia în sine nu e încă teribilă (privitor la jocuri, desigur), aşa că nu vă aşteptaţi la ceva care să bată jocurile flash prezentate de regulă de noi la rubrica “de relaxare”. Priviţi mai degrabă ca un promiţătoare promisiune despre viitorul jocurilor HTML(5). Şi veţi găsi acolo cam toate cele de bază (adică Mine Sweeper, Pacman, ba chiar şi un Tetris 3D).


Webmasteri: articole şi resurse utile (III)

Ar trebui să fiu mai prompt cu articolele utile pentru webmasteri. Îmi trec multe prin faţa ochilor, dar puţine ajung semnalate individual. De exemplu m-a entuziasmat articolul 25 HTML5 Features, Tips, and Techniques you Must Know apărut acum două zile pe NetTuts+. L-am parcurs punct cu punct (iar autorul vrea să facă în timp din 25 tocmai 100), iar unele lucruri le-am şi testat. Uite aşa s-a mai înnorat optimismul meu, dat fiind că nu toate facilităţile sunt egal suportate de navigatoare. Dar va veni şi ziua aceea când toate 90% dintre facilităţi vor fi suportate de navigatoarele majore, de ultimele lor versiuni.

imagine

Apropo de această inegalitate dintre navigatoare, HTML5test.com ne ajută să vedem care cum se descurcă. Există …


YouTube, HTML5, Opera 10.60

Astăzi Opera a mai avansat puţin, ajungând la versiunea 10.60, care, citez introduce noi facilități, navigare mai rapidă, calitate şi stabilitate îmbunătăţite. Nou în Opera 10.60: Motorul JavaScript este acum semnificativ mai rapid. Suportul îmbunătăţit pentru standarde avansate precum HTML5 şi video WebM este acum inclus. Opera vă poate solicita divulgarea locaţiei unde vă aflaţi, aducând un plus de utilitate siturilor web cu suport pentru geolocaţie. Sugestiile de căutare pentru furnizorii selectaţi vă ajută să găsiţi rezultatele mult mai uşor. Am fost curios să văd cum merge Opera cu video WebM şi… merge.

imagine

Ionuţ ne explică aici că primul pas pentru a activa formatul video WebM propus de Google în YouTube este să mergem …


HTML5 Rocks! spune Google

Şi nu poţi să nu fii de acord. HTML5 vine cu multe elemente revoluţionare (acum câteva zile am văzut câteva trucuri minore, dar de efect) şi atenţia de care se bucură e complet justificată după mine. Rămâne doar ca navigatoarele să se alinieze acestui nou standard, suportându-i pe cât posibil toate elementele. Ieri, pe blogul Google Code a apărut anunţul lansării unui sit special dedicat de Google minunăţiei numite HTML5. Iar acestui sit îi spune… HTML5Rocks.com. Şi dacă vreţi să începeţi aventura HTML porniţi tocmai de la prezentarea interactivă.

imagine

Vreţi să treceţi la lucruri mai concrete? Există un “loc de joacă” unde aveţi o serie de coduri ce pot fi imediat studiate, dar mai …