Arhiva pentru tagul “HTML5”

Twitter Bootstrap: un dar pentru webmasteri

Autor: radu.capan. Data: 16.01.2013.
Clasat la: WebDevelopment
Taguri: , , , ,
5 comentarii. 4.293 afişări.

Despre Twitter sigur aţi auzit. Dar despre Twitter Bootstrap? Probabil mulţi – webmasterii în special – au auzit, dar poate nu toţi, aşa că haideţi să vedem despre ce este vorba. Cândva prin august 2011 doi angajaţi de la Twitter lansau prima versiune a acestei colecţii de instrumente pentru webmasteri, colecţie dezvoltată desigur mult înainte, ca instrument intern, căutându-se o uniformizare a elementelor de interfaţă. Cu alte cuvinte au luat ceva de la ei şi au dăruit lumii webmasterilor. Şi ce cadou minunat!

imagine

Ce permite pe scurt această colecţie de instrumente? Să porneşti mult mai rapid o webaplicaţie. Dacă veţi studia meniul din pagina proiectului veţi vedea tot felul de ingrediente pentru paginile web care sunt oferite de-a gata, …

HTML5: despre localStorage (II)

Autor: radu.capan. Data: 29.12.2012.
Clasat la: WebDevelopment
Taguri: ,
0 comentarii. 1.608 afişări.

În articolul de ieri nu am precizat un lucru important: datele ce se memorează via localStorage (similar şi pentru sessionStorage) sunt de tip text. Evident că putem salva şi numere, doar că vor ajunge salvate ca “1234”, dar la preluare le forţăm noi să fie numere. Problema este la obiecte. Vă amintiţi formularul de data trecută? Să spunem că am avea nu doar numele ci şi localitatea şi vârsta unei persoane. Acestea ar putea forma un obiect persoana, dar care, surpriză, nu poate fi salvat ca atare. Codul pe care l-am aştepta ar fi cu liniile 10 şi 28 nemarcate, marcând în schimb 12 şi 30. Nu merge (prima captură de mai jos)!

imagine

Şi atunci? Soluţia este simplă… …

HTML5: despre localStorage (I)

Autor: radu.capan. Data: 28.12.2012.
Clasat la: WebDevelopment
Taguri: ,
0 comentarii. 1.540 afişări.

Pentru că deunăzi am vorbit despre cookies cu jQuery m-am gândit că nu am scris până acum chiar nimic despre posibilităţile oferite de HTML5 pentru salvarea de date. Drept urmare vă propun mai jos un scurt cod care merge cam pe aceeaşi idee, dar mai simplificat decât articolul de ieri, pentru că am mers pe un singur câmp (deci fără each() pentru a parcurge toate câmpurile input). Totul stă în folosirea metodelor setItem(cheie,valoare), respectiv getItem(cheie). Eventual mai putem folosi şi removeItem(cheie) şi sigur bănuiţi ce face.

imagine imagine

În codul de mai jos observaţi că am …

Aplicaţii web sau aplicaţii native?

Autor: radu.capan. Data: 22.12.2012.
Clasat la: SmartPhone, WebDevelopment
Taguri: , ,
0 comentarii. 2.187 afişări.

Într-un fel de completare la un articol de ieri, aş vrea să scriu câteva rânduri despre un subiect foarte fierbinte şi tratat intens de persoane mult mai apte decât mine. Cei care ştiţi deja multe pe această temă nu veţi găsi aici lucruri noi. Dar pe de altă parte unii webdeveloperi ar putea fi interesaţi să afle anumite lucruri, presupunând că nu le cunosc. Punctul de plecare: vrei să oferi unui anumit public o anumită aplicaţie, poate anumite servicii pe care le oferi deja la firma ta, pe situl tău; ce vei face? o webaplicaţie adaptată pentru mobile sau o aplicaţie nativă pentru mobile?

imagine

Webaplicaţia este de regulă un amestec de HTML5, CSS3 şi JavaScript. Adică ceea ce mulţi …

Mobello: pentru aplicaţii mobile

Autor: radu.capan. Data: 19.06.2012.
Clasat la: SmartPhone, WebDevelopment
Taguri: ,
0 comentarii. 1.519 afişări.

Dacă semnalez Mobello recunosc că e mai mult ca o atragere de atenţie: staţi cu ochii pe acest proiect pentru că ar putea da roade bune. Nu vreau să spun că proiectul nu este imediat utilizabil, dar trebuie să previn din start că parte din documentaţie este în… coreeană, şi chiar şi în partea de aplicaţie mai găsim câte una alta în coreeană, dar e drept că la cod totul e editabil. Şi acum lămurirea: în timp ce avem un framework pentru interfeţe de aplicaţii mobile (mai sunt cu zecile), Mobello străluceşte prin adăugarea unei aplicaţii, Mobello Studio, care să îţi uşureze viaţa.

imagine

Avem deci pe de o parte Mobello.js, care se laudă cu peste 20 de elemente de …

TheExpressiveWeb.com

Autor: radu.capan. Data: 05.08.2011.
Clasat la: Situri, WebDevelopment
Taguri: , , , ,
0 comentarii. 1.402 afişări.

Că tot am vorbit în două articole recente despre HTML5, vă invit să vedeţi situl TheExpressiveWeb. La o primă privire pare un alt showcase despre cât de puternic de HTML5 şi CSS3, dar în fapt e ceva mai mult. Dacă vreţi să vă apropiaţi de noile tehnologii, e o resursă interesantă. Să o luăm cu începutul: coloana cu fundal portocaliu este… sumarul. Citez: CSS3 Animations, CSS3 Gradients, CSS3 Shadows, CSS3 Transforms, CSS3 Transitions, CSS3 Web Fonts, HTML5 Audio, HTML5 Canvas, HTML5 Forms, HTML5 Video şi HTML5 Storare. Poate se vor adăuga şi altele?

imagine

Ce avem pentru fiecare în parte? Am luat ca exemplu HTML5 Audio. Central e demonstraţia, de fiecare dată frumos prezentată vizual şi interactivă. Aici putem asculta …

MindMaps: aplicaţie HTML5

Autor: radu.capan. Data: 05.08.2011.
Clasat la: Situri
Taguri: , , ,
0 comentarii. 1.622 afişări.

Webaplicaţiile HTML5 pot avea un atu incredibil: să lucreze offline. Iar MindMaps face aşa ceva. Am mai vorbit la începutul anului despre aplicaţii pentru diagrame: Bubbl.us sit, şi Blumind program. MindMaps e între, tocmai pentru că poate fi folosit şi offline, salvându-şi datele local. Suntem totuşi avertizaţi să nu ne bazăm total, dat fiind că vorbim de o tehnică experimentală, cu (unele) variaţii de la navigator la navigator. Webaplicaţia se prezintă frumos de la prima lansare, conducându-ne pas cu pas prin facilităţile oferite.

imagine

În principiu tot ce trebuie să facem este să tragem de bulina roşie pentru a crea ramuri (branches), respectiv să dăm dublu-click pe un nod (pe partea de text) pentru editarea textului. …

Buzz: o bibliotecă JavaScript&HTML5 pentru audio

Autor: radu.capan. Data: 05.07.2011.
Clasat la: Media, WebDevelopment
Taguri: , , , ,
0 comentarii. 1.532 afişări.

Ca webmasteri probabil au fost cazuri când v-aţi căznit să faceţi o pagină web să scoată sunete. Poate ca demo pentru nişte piese, poate pentru un joc, poate pentru o pagină intro specială… Cei mai mulţi apelează la flash, dar nu e imposibil cu JavaScript. Mai ales cu JavaScript şi HTML5. Munca e mult uşurată cu biblioteca Buzz. Deschideţi pagina şi duceţi mouse-ul peste imaginea principală: aveţi boxele pornite? atunci aţi auzit! Dar nu vă opriţi aici: mergeţi NEAPĂRAT pe pagina de demo care are un fel de joc demonstrativ foarte simpatic şi bun ca ilustrare.

imagine

Dacă vă place biblioteca JS, acelaşi autor mai are unele interesante: markItUp! universal markup jQuery editor, Vegas …

EndlessMural.com

Autor: radu.capan. Data: 20.06.2011.
Clasat la: Media, Situri
Taguri: , , , ,
0 comentarii. 1.207 afişări.

Aparent EndlessMural.com este 1) fie un Paint cu pensule mai evoluate pentru copii plictisiţi; 2) fie o demonstraţie a ce poate HTML5, chiar şi când nu ai idei foarte practice. Vor fi însă şi unii care să ştie să îl folosească cu adevărat şi care vor aprecia instrumentul din perspectivă artistică. Pentru moment, şi după pricepere, nu pot decât să mă opresc la aspectul tehnic. EndlessMural este o nouă aplicaţie ce ne arată cât de mult împinge HTML5 limitele la ceea ce, până acum, ştiam că se poate eventual doar în flash.

imagine

Situl de la deschidere ne invită pe două drumuri: cel creativ, în care noi desenăm ceva (hai, admiteţi că mai sus puteţi vag citi CNet), respectiv cel …

CamanJS: manipularea imaginilor via JavaScript

Autor: radu.capan. Data: 19.03.2011.
Clasat la: Media, WebDevelopment
Taguri: , , , ,
0 comentarii. 1.427 afişări.

Trăiască HTML5 cu al său canvas. Biblioteca CamanJS (Caman vine de la CAnvas MANipulation) oferă o serie de efecte pe imagini folosind strict JavaScript, şi evident HTML5. Cum nu depinde de vreo altă bibliotecă, poate fi folosită fără probleme în combinaţie cu jQuery sau ce folosiţi/preferaţi. Incluzând biblioteca (şi, apropo, de la Get CDN Url puteţi obţine un link extern, dacă nu vreţi să găzduiţi fişierul) mai rămâne doar să adăugaţi efectele unul după altul, după nevoie.

imagine

De exemplu pentru efectul de mai sus codul este:

<script type="text/javascript" src="caman.full.min.js"></script>

<script type="text/javascript">
Caman("images/example-image.jpg", "#example-canvas", function () {
	this
		.saturation(20)
		.gamma(1.4)
		.vintage()
		.contrast(5)
		.exposure(15)
		.vignette(300, 60)
		.render();
});
</script>

<canvas id="#example-canvas"></canvas>

Dacă mergeţi aici puteţi vedea exemple interactive: trageţi slide-ul şi apăsaţi Render pentru a vedea efectul. Sau mergeţi …