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

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.

OOCSS (2a part), profunditzant en els widgets

Pitu Sabadí — Wed, 10 Aug 2011 22:12:01 +0000

Avui mirarem les recomanacions a seguir alhora d’implementar els widgets, en el nostre sistema de CSS. Primer de tot, recordar que els widgets estan formats per dues parts, per una banda la pròpia del framework, i per l’altra la pròpia de cada un dels projectes. D’aquesta manera podem especialitzar tots els nostres projectes amb el seu tema personalitzat. Primer de tot cal fer una feina de detecció dels widgets, on cada un respón a una funcionalitat, creant així la nostra llibreria de widgets.

Abans de començar us deixo els enllaços que s’han usat de font:

Enllaç a la presentació.

Enllaç a la pàgina oficial.

Crear objectes reusables

Cal crear una llibreria de components reusables independent del projecte. Per altra banda, també cal crear-ne una per al nostre projecte. La idea principal recau en identificar els objectes per tal de saber-ne fer l’extensió i que sigui reusable, de manera que han de ser extensibles, reusables i aniuables.

Si per exemple pensem en un widget butó, a la part comú de tots els projectes podem definir les propietats que sabem que seran comunes, o definir-ne unes per defecte. A partir d’aquí aquesta classe cal anar-la extenent per tal de que tingui l’aspecte desitjat a cada projecte i alhora tinguem els diferents butons que es necessiten.

Simplificar la cascada

No usar #id en els estils. Si usem aquests identificadors, trencarem la reusabilitat d’aquest codi, ja que no hi poden haver diverses intàncies en una mateixa pàgina amb un mateix identificador. Així doncs, #id queda reservat per al seu ús des de JavaScript i en formularis. Així mateix queda prohibit en els estils.

També queden prohibits els estils ens línia. Tots sabem que els estils intrusius porten problemes, però a vegades els usem en moments determinats per què ens poden ser còmodes. Ja que estem reformulant el sistema d’estils, també queden prohibits, ja que a part de no ser reusables, ens poden portar a comportaments estranys, cosa a evitar totalment.

Usar classes i no elements

No hem de ment definir els propietats a div.la-meva-classe, sinó directament .la-meva-classe. Amb la primera opció fem que la propietat només sigui vàlida per a elements div, mentre que amb la segona la classe no depèn del seu element HTML. D’aquesta manera obtenim un codi més reusable i a més no ens incorporarà comportaments estranys.

Minimitza els selectors

A partir d’una classe podem definir elements HTMLS aniuats. Tot i això cal tenir en compte que a vegades ens podem estalviar selectors per a acabar tenint un mateix comportament. D’aquesta manera permetem una millor llegibilitat al codi. Amb aquest fet a més, millorem el rendiment dels nostres CSS.

Sense dependències del context

Els estils d’un objecte són independents del lloc que ocupin de la pàgina. D’aquesta manera no hem de definir .la-mevaclasse-1 .la-meva-classe-2 {…}, ja que si ho fem així estem supeditant el comportament de la 2 a que estigui dins d’un contenidor 1. D’aquesta manera a més, sabem que podem usar un widget a qualsevol part de la pàgina i que sempre tindrà el mateix comportament.

Evitar dependències innecessàries entre objectes

En aquest sentit, no hem d’agrupar diferents widgets mitjançant comes. Ja que estem lligant aquests objectes, on un canvi a un widget provocarà canvis als altres, cosa que tard o d’hora en sortirem perjudicats. Si ens trobem que constantment necessitem agrupar-los és que alguna cosa estem fent malament, particularment en el procés d’identificació.

Extenent els objectes

S’usa el concepte d’orientació a objectes típic en els CSS. D’aquesta manera l’objecte fill hereda les propietats del pare. Comentarem, amb exemples com es fa aquesta extensió més en detall en un tercer post, com ja vam prometre.

Objectes compostos

Algunes components de la pàgina estaran formades per diversos objectes. En aquest cas no usem extensió, sinó composició. En aquest moment ens trobem en un dels majors problemes dels CSS: manca de control en l’herència i la cascada. Les regles han de ser específiques, de manera que no impliqui res l’ordre en el qual s’apliquen. Sinó és així augmentem la composició. Cal ser conscient en que tots els noms de les classes formen part del namespace global de CSS, de manera que cal ser coherent en la definició de noms.

OOCSS, Object-Oriented CSS

Pitu Sabadí — Thu, 04 Aug 2011 21:34:07 +0000

Fa uns dies vaig veure una presentació Power Point que tractava dels OOCSS. No havia tingut temps a mirar-la en detall fins avui, on realment l’he llegida atentament, i m’he mirat els exemple de la pàgina web oficial. Mitjançant aquesta tècnica, podem tenir ordenat el nostre codi CSS, i que aquest sigui plenament reusable. Tan és així, que està estructurat de tal manera que diferents projectes comparteixen un conjunt de normes CSS, és el què anomanem Framework, i una part concreta per a cada projecte, anomenat tema.

Reusables

Extensibles

Anidats

Un cop ja sabem que hi ha una part anomenada Framework i una com a tema, comentarem quina és l’estructura de cada un. El framework està format per 5 components: Reset, Base, Grid, Widgets, Helpers. El tema està format per Widgets i opcionalment per Pages. Així doncs ja podem intuir que en el Framework hi tindrem definides les propietats generals, comuns a tots els projectes, mentre que els aspectes concrets, els widgets, els podrem redefinir a cada tema.

Abans d’entrar en tema, us faig saber que queden pendents dos posts al respecte. Un explicant les bones praxis per a l’ús de OOCSS, i un altre amb alguns exemples per a fer-ho més clar, ja que un tros de codi, val més que mil paraules.

Reset + Base

Podem usar-ne d’existents. Aquestes components ens ajuden a eliminar inconsistències entre navegadors i crear una base comuna. Tot i que ens podríem fer el nostre es recomana usar-ne de ja fets i provats com: 960.gs, formalize.me, normalize.css, html5boilerplate, YUI…

Grid

Aquest és un dels aspectes més interessants del sistema. Es tracta de la definició dels layouts. En aquest sentit, es defineixen amb % la relació. De l’estil si és un 100% si són 2 50%, etc. D’aquesta manera podrem generar fàcilment els layouts. Seran reusables i cada un el podrem customitzar com volguem. Es recomana usar-ne de ja existents, tot i que ens podem crear el nostre, com per exemple: 960.gs, 978.gs, blueprint, YUI…

Widgets, objectes reusables

Els widgets poden ser independents del projecte o no. Es tracta de definir un conjunt de classes CSS relacionades, que responen a una funcionalitat determinada. En aquest sentit, està bé saber quina part és comuna i quina part forma part del tema, de manera que podrem tenir cada objecte personalitzat per projecte.

Pages, opcional per al tema

Les pages són interessants per a projectes molt concrets, en els qual es vol que cada pàgina o secció de l’aplicació o web, es vulgui mostrar amb estils totalment diferents. D’aquesta manera podríem diferenciar cada una de les pàgines usant la composició. De fet, es podrien fer amb widgets, però en els casos que sigui útil és millor fer-ho per tal de tenir

Helpers

Es tracta de classes petites, que es poden usar per tots els objectes. Els usos típics poden ser per fer elements hiddens, cantons rodos, ombres…

Enllaços a les fonts de l’article.

Enllaç a la presentació.

Enllaç a la pàgina oficial.

CSS Reloader, extensió de Chrome

Pitu Sabadí — Wed, 27 Jul 2011 21:32:05 +0000

Sempre que em passo una estona voltant per la Chrome Web Store trobo alguna aplicació o extensió que realment val la pena parar-hi una mica d’atenció. Avui he topat amb CSS Reloader, una extensió que permet recarregar els CSS sense haver de tornar a carregar tota la pàgina.

Quan treballem en temes de maquetació web, sempre s’acaba fent ús del Firebug o similar (l’eina per a desenvolupadors de Chrome va molt bé) per poder veure els canvis de les propietats CSS en temps real. Així mateix, en més d’un cas, ens podem trobar que quan recarreguem la pàgina ens hem deixat d’actualitzar algun valor i cal tornar a repetir el procés.

No l’he acabat de provar del tot, però té molt bona puntuació i fa molt bona pinta. Mitjançant el botó secundari podem recarregar les fulles d’estils CSS sense haver de carregar tota la pàgina, agilitzant molt aquest procés. Per defecte a més, podem fer-ho mitjançant la tecla F9, cosa que encara ens donarà més dinamisme.

Durant els propers dies miraré de provar-la més a fons, ja que haig de fer algunes tasques de CSS que em servirà per testejar aquesta aplicació. Ja faré una mica de feedback al respecte, tot i que les 5 estrelles que té assignades a la Chrome Web Store l’avalen.

Podem instal·lar-la accedit a la seva pàgina de la botiga de Google. Un cop instal·lada i activada ja podem usar-la. Si volem canviar la tecla que executi la funcionalitat podem fer-ho anant a l’apartat d’opcions.

Mobilizer, eina per a desenvolupadors mòbils

Pitu Sabadí — Sun, 24 Jul 2011 13:27:32 +0000

Actualment hi ha una gran quantitat de projectes que necessiten una versió mòbil. En molts casos opten per a una pàgina web en format per a smartphone. Un dels grans problemes és poder anar comprovant amb diversos dispositius com es veu, ja que tots conten amb resolucions de pantalla diferents.

Mobilizer està fet amb Adobe Air i ens permet poder visualitzar amb un iPhone 4, BlackBerry Storm, Palm Pre i HTC Evo. Podem usar-ho amb pàgines que estiguin penjades a Internet i amb projectes locals. No és una visualització perfecte de tal i com es veu, però sí que ens serveix a nivell orientatiu.

De moment encara és la versió beta, podem baixar-nos gratuïtament el programa a la pàgina oficial. Es tracta d’una aplicació multiplataforma, ja que ho podem usar amb Linux, Apple i Windows.

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!

Descobrir els temps de càrrega d’una web a tot el món

Pitu Sabadí — Sun, 03 Oct 2010 23:10:03 +0000

Hi ha moltes webs que ens mesuren el temps de càrrega de la teva pàgina web. En aquest cas, Internet Supervision ens ofereix una visió més global dels temps de càrrega. En el meu cas, no és una aplicació amb molta funcionalitat, però sí que ho pot ser quan estem davant d’un cas de pàgina amb un destinatari final a nivell internacional.

Els resultats dels tests es mostren en format gràfic (tal i com es pot veure amb l’anterior imatge) i després mitjançant la taula següent amb la informació referent al punt geogràfic, els KBytes descarregats, els segons d’espera i la connexió amb Kbps. Les imatges del post són de la prova feta amb open-pitu.

Torrific, client web BitTorrent

Pitu Sabadí — Sun, 26 Sep 2010 23:27:23 +0000

Els arxius .torrent són una bona alternativa alhora de baixar molts de programes de software lliure, tot i que s’ha popularitzat molt el seu ús per altre tipus de descàrregues. Fins al moment, només coneixia la possibilitat de fer aquestes descàrregues mitjançant un client que ens permetés baixar el programa complet.

De la mà de PixelcoBlog avui coneixo Torrific, que ens permet fer aquest tipus de descàrregues des del mateix navegador web. Aquesta funcionalitat que podem donar als navegadors pot ser molt útils en determinats moments que necessitem baixar un .torrent i no tinguem ni podem instal·lar cap client.

Per usar aquest servei us haureu de registrar gratuïtament i podreu usar-lo introduint la direcció del fitxer. Podeu accedir a aquesta aplicació mitjançant la seva web.

Aplicació web per comprovar la qualitat de les contrassenyes

Pitu Sabadí — Wed, 08 Sep 2010 10:32:10 +0000

Avui en dia, tenim moltes contes a diversos portals d’Internet, i per tant no està de més, tenir una contrassenya suficientment segura per a no patir atacs inesperats. Molts llocsi altres aplicacions d’aquest estil et mostren quina és la qualitat de la teva contrassenya amb el típic semàfor de tres colors, representant dèbil, mitjana i robusta.

La gràcia d’aquesta aplicació és que mentre vas escrivint la contrassenya et mostra el temps que trigaria un ordinador en desxifrar-la. Pots fer diverses proves i treure’n les conclusions que trobis oportunes de cara a triar una o altra contrassenya.

A part de provar les meves contrassenyes n’he provat algunes i els resultats són els següents:

1234 i asdf: Et diu que està entre les 500 contrassenyes més comunes
asdf1234: 3 dies
Contrassenya amb 2 nombres i 6 lletres: 3 dies
Contrassenya amb 2 nombres i 8 lletres: 11 anys
Contrassenya amb 3 nombres i 7 lletres: 11 anys
Contrassenya amb 2 nombres i 9 lletres: 417 anys
Contrassenya amb 3 nombres i 8 lletres: 417 anys

Per tant podem deduir que les contrassenyes comencen a ser altament segures a partir de les 10 xifres combinant lletres i nombres. A partir d’aquí feu les vostres proves i si ho trobeu necessari, canvieu la vostra contrassenya.

Enllaç a l’aplicació.

Compara la velocitat de la teva web amb altres

Pitu Sabadí — Mon, 19 Jul 2010 13:55:21 +0000

La velocitat web és un factor molt important de cara a l’experiència d’usuari que té qualsevol visitant. Fins ara només era això, però de fa un temps cap aquí ha anat guanyant importància. Tant és així que Google ja va anunciar que seria un dels factors que tindria en compte de cara el posicionament web en el seu cercador.

Amb Wich loads faster? pots fer comparatives entre la teva web i qualsevol altre per veure qui carrega més ràpid. A més ens permet fer diverses repeticions de càrrega per aconseguir valors més reals dels temps de càrrega entre els diferents sites que provis. Bona aplicació per provar-te amb altres webs i veure amb quines pots competir a nivell de velocitat i quines tenen un hosting molt més ràpid que el teu.

Finalment, has de tenir en compte que a vegades són determinats elements de la teva pàgina que relantitzen la seva càrrega, per això podries utilitzar l’extensió de Chrome, Speed Tracer, per veure quins són els elements més pesats en la càrrega i millorar-ne així el temps global.