open-pitu, el blog lliure en català » HTML5

Deck.js – Presentacions en HTML5

Pitu Sabadí — Mon, 29 Aug 2011 14:31:03 +0000

Es tracta d’una llibreria JavaScript per a crear presentacions, de manera fàcil i senzilla en HTML5. Aquestes presantacions funcionen molt bé usant la pantalla completa del navegador i ens permeten l’interacció amb les fletxes del teclat.

Per a crear una presentació cal crear les diapositives. Cada una seria un div de la classe slide. Es poden definir diferents tipus de transició entre les diferents diapositives. A més, usant els plugins corresponents podem posar-hi elements de control, com serien fletxes per a canviar de diapositiva o un input per accedir directament a la que volguem.

En aquest enllaç podeu veure una presentació d’exemple on s’explica com usar de manera bàsica aquesta eina, dóna l’opció de descarregar-ne el codi i així mateix poder veure el resultat obtingut.

Es tracta d’una eina molt útil, ja que d’aquesta manera no es depèn de la màquina per a veure la presentació, ja que no s’usa ni MS Office ni OO, sinó que senzillament funciona en el nostra navegador web.

Mozilla presenta WebAPI

Pitu Sabadí — Wed, 24 Aug 2011 21:55:27 +0000

De la mà de Genbeta he vist la notícia de la presentació de WebAPI. Es tracta d’un projecte de Mozilla encarat al desenvolupament d’aplicacions per a mòbil en HTML5. La gràcia del projecte és que permetrà accedir a les components del dispositiu tal i com si es tractés d’una aplicació nativa. L’avantatge d’aquestes aplicacions seria que serien vàlides per a qualsevol plataforma.

La intenció de la Fundació Mozilla és proposar a W3C que estableixi WebAPI com un estàndard. Avui en dia el projecte encara està molt verd, però segur que faran una bona feina. Esperem que els desenvolupadors d’aplicacions mòbil tinguin en compte aquesta nova possibilitat.

Cal tenir present que ara pot ser una tasca molt feixuga mantenir una versió d’una aplicació relativament senzilla en com a mínim dues plataformes totalment diferents. Així mateix, ja hi ha llibreries que comencen a treballar en aquest sentit, com per exemple PhoneGap, però el fet de poder tenir un estàndard és la gran gràcia. D’aquesta manera ja no es dependria de llibreries fetes per tercers. Com ho veieu?

Font de la notícia: Genbeta

Voleu treballar en aquest projecte?

Des de la pàgina oficial es pot accedir a la oferta de treball per a participar en el desenvolupament d’aquest projecte. Realment és un projecte molt engrescador, a tots aquells desenvolupadors que coincideixin en el perfil que busquen i que no tenen feina o que volen fer un canvi d’aires jo els recomanaria enviar el currículum. Pot ser una molt bona experiència professional.

Podeu veure l’oferta de treball.

Codeanywhere.net, desenvolupa des del núvol

Pitu Sabadí — Wed, 20 Jul 2011 21:41:37 +0000

Fa uns dies vaig topar amb aquesta aplicació web. Encara no l’he acabat d’usar del tot, degut a que no he tingut el temps material per haver comprovat la qualitat en l’experiència de l’usuari. A continuació farem una presentació de les capacitats que té i per a què serveix. Principalment va destinat a aquells desenvolupadors webs que volen poder accedir al seu codi des de qualsevol lloc, en qualsevol moment i amb un IDE de prou qualitat.

Es tracta d’una eina, com ja s’ha dit, destinada als desenvolupadors web, ja que poden treballar amb els formats més populars: HTML, XML, PHP, CSS i JavaScript. Per a poder-hi treballar és necessari disposar de connexió a Internet. L’editor conta amb el ressaltat de sintaxi, autocompletat de codi, tabuladors il·limitats, eina de cerca i remplaçament.

Així mateix, té integrat un client FTP o SFTP, en el qual és el que treballes. L’usuari pot tenir configurats diferents servidors i editar els fitxers (crear, esborrar, reanomenar, copiar, moure…). La mateixa aplicació inclou connexió HTTPS per a la seguretat de l’usuari. Com sempre, en les aplicacions al núvol, ens dóna l’opció de poder accedir al nostre codi des de qualsevol ordinador, només amb el navegador web.

Actualment ja hi ha versió Android i a la seva pàgina oficial anuncien que properament també hi serà per a iPhone. Com era d’esperar, segons les captures de pantalla, l’editor no està massa treballat, no té ressaltat de sintaxis ni tantes opcions com el de versió web. Així mateix, sempre és positiu poder accedir des de qualsevol dispositiu el nostre codi.

Opcions d’ús

Codeanywhere ens permet una conta gratuïta, en la qual podem tenir sincronitzats fins a tres servidors en FTP, un servidor SFTP, fins a 10 fitxers oberts i 60MBytes al mes d’ample de banda. Així mateix hi ha una conta premium de 5€ al mes, en la que podrem tenir un nombre il·limitat de servidors FTP i SFTP, nombre de fitxers oberts il·limitats i sense publicitat. De manera que a l’any sortiria per 60€. Tot i així tenen una oferta premium anual, en la que t’estalvies 10€.

Google Chrome i les aplicacions web

Pitu Sabadí — Tue, 19 Jul 2011 22:06:57 +0000

Des de fa temps les aplicacions web van guanyant terreny, i mica en mica van agafant un espai fins ara reservat a les aplicacions d’escriptori. Aquestes ofereixen serveis que no ens donen les altres. Per una banda, el ja conegut núvol, és a dir que podem accedir a la nostra informació des de qualsevol ordinador, sense que importi la plataforma. Per altra banda, i més important, el canvi de concepte.

Històricament tots hem treballat amb aplicacions d’escriptori per després compartir aquell document mitjançant el correu electrònic. Mica en mica, en hem anat acostumant a usar el Google Docs, quan diverses persones havíem de treballar en un mateix document. Així mateix, per a compartir fitxers s’ha popularitzat Dropbox i Grooveshark té la seva sortida en la música.

Cada cop ens costa menys pensar, en que en el futur, en local tindrem ben poca cosa. Si més no pel què fa a informació. No té cap sentit guardar-se els documents al disc dur del portàtil o a un USB si podem tenir aquells documents des de qualsevol lloc. En aquesta línia hi ha projectes com Ubuntu One, Dropbox o, anant més enllà, EyeOS.

Ahir, vaig descobrir una funcionalitat de Google Chrome que ens fa fer un pas mes en aquest món. Des de qualsevol pàgina ens podem crear un accés directe. Aquest accés directe, no és el típic preferits dels navegadors, sinó que a partir d’aquell icona (del menú, la barra de tasques o del menu d’aplicacions) podem obrir una finestra sense aparença d’usar un navegador web sinó amb la d’aplicació nativa.

Realment, no és una cosa espectacular, però sí molt pràctica. Molts de cops tanquem aquella pestanya que volem perquè n’estem tancant moltes de cop, o inclús ens molesta tenir oberta aquella pestanya tota l’estona, quan realment només la tenim en “background”. A més, ens elimina el tema de les pestanyes i la barra de direcció.

Pot ser tecnològicament no és molt innovador, però sí que ajuda molt en el moment d’usar aplicacions web pensades donant molt de pes a la paraula aplicació i poc a la web. Estem parlant d’aplicacions web com GrooveShark, Code Anywhere o HootSuite. Així mateix, també ens pot ser molt útil per a gMail, gMaps, gReader…

Com fer un accés directe

Per a poder fer aquests enllaços, cal que clickem a l’icona d’opcions de Google Chrome, un cop allà ens desplacem fins a Eines, per tal de que es desplegui el submenú. Un cop aquí seleccionem “Crear dreceres d’aplicacions” i seleccionem les opcions que desitjem.

A la versió de Windows, ens dóna les opcions per a crear la drecera a l’escriptori, a la barra de tasques o al menú d’aplicacions. En funció del que desitjem triem. No he pogut penjar cap imatge amb Windows perquè ja sabeu que la meva religió no em permet usar aquest sistema operatiu.

Per als usuaris de Linux, sapigueu que només podeu seleccionar les opcions d’escriptori i menu d’aplicacions. El procediment per a crear un enllaç a la barra de tasques, seria crear la drecera a l’escriptori i a partir d’aquí incloure’l al dock d’Unity. Una recomanació, si no voleu tenir l’icona a l’escriptori, és que el mogueu a una carpeta del vostre home i després el porteu a la barra d’aplicacions.

Per als mateixos usuaris de Linux, si voleu canviar la imatge que es mostra, obriu el gEdit i obriu la drecera amb aquest programa. En una de les darreres línies veureu que hi ha la direcció d’on carrega l’icona. Per tant, podeu substituir aquella línia pel path absolut de la icona que voleu mostrar.

Captures d’aplicacions

Google Maps

GrooveShark

Code Anywhere

3 aplicacions web a destacar

Pitu Sabadí — Wed, 06 Jul 2011 22:46:14 +0000

En aquest post comentarem tres aplicacions webs que estan molt ben fetes i són útils. Estem en uns moments en què les aplicacions webs estan evolucionant de manera molt ràpida i cada cop són més sofisticades. En aquest cas en tocarem una de meteorologia, una altra de notes i una altra per a fer presentacions. Prometo fer més entrades comentant altres aplicacions webs destacades com CodeAnyWhere, EyeOS, Jolicloud… Si serà per aplicacions!

Full Screen Weather

Es tracta d’una aplicació meteorològica gratuïta basada en Google Maps. Detecta la ubicació actual del client i mostra la informació referent als pròxims dies. La localització es fa mitjançant IP de manera que no sempre és exacta. En el cas que no hi hagi dades del poble o ciutat en el que ens trobem podem triar les de les localitats més properes.

URL: Full Screen Weather

SimpleNote

Es tracta d’una aplicació molt senzilla però útil alhora. Es tracta de la típica per a escriure’ns notes per recordar (llista de tasques a fer, llista de la compra…) i són accessibles des de tot arreu. La gràcia és que també hi ha l’aplicació per a iPhone, de manera que ens podem fer la llista des de l’ordinador, i accedir-hi des del mòbil des de qualsevol lloc.

URL: SimpleNote

SlideRocket

Es tracta d’un editor de presentacions al més pur estil Power Point. No és el què he provat aquesta aplicació però fa pinta a poder fer la presentació de manera bastant ràpida i amb uns resultats bastant vistosos.

URL: SlideRocket

Espero que us siguin útils i que mica en mica aquests tipus d’aplicacions es vagin integrant a les nostres vides, ja que realment és molt còmode poder usar aquestes aplicacions des de qualsevol lloc, sense instal·lació… Entres a una web i ja tens el què necessites. I l’evolució que tindran en els següents anys!

Resum gràfic d’HTML5

Pitu Sabadí — Mon, 04 Apr 2011 22:46:03 +0000

De la mà de TechKing tenim un resum gràfic a mode d’infografia en la que podem veure totes les opcions que ens ofereix. Podem veure les novetats d’HTML5, les opcions que es mantenen respecte la versió anterior i els que han queda en desús. Així mateix veurem al final de tot quines opcions suporten els navegadors més usats, cosa bastant útil en aquest món com ja sabreu.

Ens pot ser molt útil en el nostre dia dia mentre encara no tinguem ben assimilat el nou llenguatge i necessitem fer petites consultes de comprovació.

Validació de formularis amb HTML5

Pitu Sabadí — Tue, 29 Mar 2011 00:02:30 +0000

Un dels aspectes més comentats com a gran millora de l’HTML5 és la validació de formularis a la banda del client. És a dir, és una primera comprovació, però recordeu que sempre s’ha de fer també a la banda del servidor. En aquest article veurem les opcions que ens dóna aquest nou tipus de validació de formularis.

Primer de tot, veurem quins són els nous tipus d’entrada per als formularis:

Nom:
E-mail:
URL:
Missatge:

Així mateix, podem definir estils diferents per a cada un dels estats en què es troaba aquella entrada:

input:required { … }
input:disabled { … }
input:checked + label { … }
input[type=button]:default { … }
input:invalid { … }
input:read-only { … }

A continuació aquest codi en funcionament:

Realment és molt còmode per fer una primera validació sense haver d’escriure res de JavaScript. De moment tot el què he provat d’HTML5 funciona molt bé!

Font de l’article: Dev.Opera

Elements editables en HTML5

Pitu Sabadí — Tue, 22 Mar 2011 12:45:44 +0000

L’HTML5 ens aporta una gran quantitat de novetats, que mica en mica ens hem d’anar familiartizant. En aquest sentit hi ha la utilitat de que els elements puguin ser editables. En aquest document veurem com fer que un element sigui editable i com podríem guardar aquest text.

Primer de tot el què farem serà definir un paràgraf que pugui ser editable i un botó per a que l’usuari pugui indicar que vol desar els canvis que ha efectuat.

Aquest contingut serà editable.
DESA!

Un cop tenim això podem definit el JS que ens permetrà obtenir el contingut i enviar-l’ho al servidor (per exemple).

$(‘#desa’).click(function(){
var aux = $(‘#text’).html();
alert( aux );
});

A continuació podem veure com el contingut d’un div és editable:

AQUEST CONTINGUT ES POT EDITAR.

Aquesta funcionalitat pot ser molt ben rebuda per la comunitat de desenvolupadors, ja que pot solucionar la creació de múltiples pantalles (una que mostra la informació entrada i una altra per si es vol modificar) ja que tot es pot fer amb la mateixa pantalla.
Podeu provar aquesta nova funcionalitat de manera dinàmica gràcies a Rendera.

Dissenyant un blog en HTML5

Pitu Sabadí — Thu, 17 Mar 2011 23:40:45 +0000

Normalment quan es parla d’HTML5 es parla de les grans novetats que ens porta per a fer més fàcil la interacció en les aplicacions web, els fulls d’estils o la integració multimèdia que ens dóna. En aquest post, farem una introducció dels nous elements que ens proporciona per a la web semàntica.
Com molts haureu comprovat, he actualitzat el disseny d’open-pitu, i l’he passat a HTML5. En aquest procés vaig necessitar investigació per veure quines estructures necessitava usar i com es feia. Vaig consultar molt blogs i llocs d’Internet, però un dels que em va anar millor va ser 5doctor.
En l’article enllaçat (en anglès), s’explica acuradament com cal fer un blog en el nou llenguatge web. En aquest sentit, a part de les explicacions que són molt útils i que si teniu interès en el tema us recomano que us llegiu, vull destacar aquestes dues imatges, que ens mostren d’una manera molt gràfica com han canviat les estructures dels blogs:

Abans	HTML5

D’aquesta manera ens podem fer una idea ràpida de quina estructura ens hem de muntar per tal de ser coherents amb el nou llenguatge. La veritat és quan estàs desenvolupant et sents molt còmode, ja que visualment tot queda molt més ben endreçat que amb els divs típics.
Mica en mica miraré d’anar afegint més articles d’aquest nou llenguatge, que mica en mica tots anirem descubrint.