dilluns, 27 de desembre de 2010

Capturant pantalles

Una de les coses que fem més sovint els que fem manuals, tutorials i suport a l’usuari és capturar pantalles, i és interessant i útil que l’aplicació que fem anar resulti senzilla i a la vegada ens doni opcions de captura: tota la pàgina, la vista actual, o només una selecció; també que ens permeti afegir-hi gràfics i/o comentaris (fletxes, cercles, etc.).

Read more ...

dijous, 16 de desembre de 2010

Ara que l'any s'acaba

Nou web: Botigueta dels Desitjos
Regala desitjos personalitzats als teus amics i coneguts


Read more ...

Aprenentage i formació online.

Eines que ens poden ajudar a l'hora de crear un curs online o una demo d'una aplicació o pàgina web.
A l'hora d'escollir un programa per fer vídeos de demostració cal que fem un estudi de  les aplicacions que esn ofereix el mercat i que aquestes compleixin amb les expectatives següents:

  • Bona qualitat d'imatge i vídeo
  • Fàcil de fer anar 
  • Possibilitat de personalització de les presentacions
  • Vídeo resultant de poc pes per poder-lo penjar en una pàgina web

Us presento una petita comparativa de tres aplicacions per fer captura de pantalla en viu.

Captivate

  • Fàcil de fer anar.
  • Software propietari
  • Captura la pantalla en forma de frames /imatges en jpg. el vídeo resultat en un swf. Això fa que el vídeo es vegi a cops i les animacions es veuen desenfocades. El swf resultant és excessivament pesant, un vídeo de 50 segons pot arribar a pesar 10 megas.
  • Permet una bona personalització del vídeo.

Wink

  • Fàcil de fer anar.
  • Software lliure
  • Captura la pantalla en forma de frames /imatges en jpg. el vídeo resultat en un swf. Això fa que el vídeo es vegi a cops.
  • Permet molt poca personalització del vídeo (globus, textos, subtítols, barra de navegació)

Camtasia Studio

  • Fàcil de fer anar.
  • Software propietari
  • Captura la pantalla en format de vídeo/pel·lícula.
  • La reducció de mida del vídeo no afecta a la qualitat de les imatges.
  • Permet una gran personalització de la interfície i del vídeo resultant. (globus, textos, subtítols, barra de navegació)
  • El vídeo resultant són diferents arxius (mp4, javascript, swf). 
  • El fitxer swf resultant és molt lleuger.


A partir d'aquí i veient les característiques de cadascuna de les aplicacions podem escollir una o altra depenent de les prestacions que ens ofereixen, la butxaca, o l'afinitat que tinguen per una o altra marca.
Read more ...

dimarts, 14 de desembre de 2010

Estàndard Xforms

L'estàndard Xforms és un nou llenguatge d'etiquetatge per a formularis Web, dissenyat per ser el substitut dels formularis tradicionals HTML , i que va a permetre als desenvolupadors de formularis Web distingir entre el propòsit del formulari i la seva presentació. Aquesta separació clara entre contingut i presentació ofereix grans avantatges en termes de:

  • Reutilització: ja que els mòduls XForms poden reutilitzar-se independentment de les dades que recullen
  • Independència de dispositiu: gràcies a que els controls de la interfície d'usuari són abstractes i només s'indiquen les seves característiques genèriques, la qual cosa permet la seva representació en diferents dispositius
  • Accessibilitat: en separar presentació i contingut la informació està disponible de forma més senzilla per als usuaris que precisin d'ajudes tècniques per a la navegació en la Web.

Què podem fer amb XForms que no podem fer amb els vells formularis HTML? XForms pot fer tot el que fan els formularis HTML, però a més permet:
  • Comprovar automàticament els valors de les dades mentre l'usuari els introdueix.
  • Indicar que certs camps són obligatoris i que el formulari no podrà ser enviat sense aquesta informació.
  • Enviar formularis de dades com XML , ja que XForms és XML.
  • La integració amb Serveis Web, per exemple, usant SOAP i XML RPC.
  • Enviar el mateix formulari a diferents servidors (per exemple, la recerca d'una paraula s'envia a diferents motors de recerca).
  • Desar i restaurar valors en i des d'un arxiu.
  • Utilitzar el resultat d'un enviament com a entrada per a un formulari posterior.
  • Obtenir les dades inicials per a un formulari a partir d'un document extern.
  • Deduir valors des d'altres valors presents en el formulari, per exemple que el camp "quantitat total" contingui la suma de totes la compres individuals.
  • Forçar valors perquè apareguin de determinada forma, per exemple obligant al fet que els valors estiguin compresos en un rang determinat.
  • Construir formularis a l'estil de "cistella de la compra" i "assistents" sense necessitat de programar.
  • Utilitzar nous mètodes d'enviament en comparació dels formularis HTML. Tots ells són mètodes HTTP estàndard per enviar dades a través de la xarxa.
  • Millorar l'experiència dels usuaris.
  • Combinar tecnologies XML existents.
  • Aconseguir la Independència de Dispositiu.
  • Facilitar la creació de formularis complexos.

Traducció de la "Guía breve de XForms"
Més informació W3C XForms
Read more ...

diumenge, 12 de desembre de 2010

Criteris d'accessibilitat que han de seguir els formularis d'entrada de dades

Al web de Inteco trobareu la Guía de comprobación de accesibilidad en formularios que ens parla sobre com podem comprovar l'accessibilitat dels formularis d'introducció de dades i si aquests van correctament etiquetats i la manera de fer-ho. Us en faig un petit resum:


Etiqueta Label: Tots els controls del formulari cal que s'identifiquin amb l'etiqueta LABEL (excepte els botons)
Col·locació de les etiquetes: associació implícita o explícita.
  • Associació implícita:  L'etiqueta ha d'estar col·locada immediatament abans o després del seu control en la mateixa línia (o damunt del control si la línia és diferent) o el control ha d'estar dins de l'etiqueta.
  • Associació explícita: L'associació ha d'indicar-se expressament a través dels atributs id i for.

Ordre de tabulació lògic
Agrupació de la informació elements FIELDSET i LEGEND: Per realitzar una agrupació de diversos controls, s'utilitza l'element FIELDSET i per a la descripció del grup obligatòria, l'element LEGEND.
En les llistes desplegables cal agrupar els valors amb l'element OPTGROUP, que millorarà la localització i comprensió de les dades
Read more ...

dissabte, 11 de desembre de 2010

Aviary: suite gratuita d'eines de creació web en línia



Aviary és una suite gratuïta d'eines de creació web en línia. Amb Aviary podem editar fotos, logos, plantilles web, plates de colors, capturar pantalles etc.


L'editor d'imatges Phoenix. Phoenix és una eina d'edició d'imatges online.
Talon és un capturador de pantalla en el que pots afegir una URL per capturar-la o també instal·lar l'addon pel Firefox. El capturador permet escollir la resolució, qualitat, regió (pàgina completa)
Raven editor de dibuix vectorial
Peacock editor d’efectes
Roc Music creator
Falcon Image Markup
Myna Editor d’àudio
Toucan editor de paletes de colors
Les eines d’edició d’imatges es poden cridar entre elles de manera que poden editor una imatge amb el Phoenix i afegir-hi fletxes, cercles, textos amb el Falcon. El web ens proporciona exemples de treballs fets amb les eines d’Aviary i ens dóna la possibilitat d’editar-les per veure com funcionen les eines.
100% recomanable.
Aviary Editor d'HTML5 pel nostre lloc web!!!

Chuck Norris ens la recomana
Read more ...

divendres, 10 de desembre de 2010

Criteris d'usabilitat que han de seguir els formularis d'entrada de dades

Criteris d'usabilitat que han  de seguir els formularis d'entrada de dades


Comprensió del formulari
L’usuari ha de veure clarament per a que serveix aquell formulari (registre, entrar, etc.)
Les etiquetes dels camps cal que expliquin clarament què cal introduir en cada camp.
Els camps de text d'entrada cal que indiquin la quantitat i el format de dades que ha d'introduir.
Quan les etiquetes siguin en forma de preguntes, aquestes cal que es presentin en un llenguatge clar i senzill.

Funcionament del formulari
Es aconsellable que els camps en els formularis continguin suggeriments, exemples o models de respostes per demostrar l'entrada esperada.
Cal que els formularis estiguin validats abans d'enviar el formulari.
Facilitar la correcció d'errors, per exemple situant el cursor allà on es requereix correcció
Els quadres de text cal que tinguin la longitud adequada per a la resposta esperada.

Ordenació del formulari
El camps del formulari s'agrupen de forma lògica, i cada grup té un títol.
És important no barrejar conceptes i que aquests estiguin ordenats.

Més informació a User focus Forms Checklist
Read more ...

dimarts, 7 de desembre de 2010

Implementant altres tipus de lletra en la web

Gràcies a diverses eines i APIs a l'hora d'escollir un tipus de lletra pel nostre web, ja no cal (en principi) fer anar els tipus de lletra de sistema, ja sabeu: Arial, Verdana, Times New Roman etc.
Per poder-ho fer cal seguir un sèrie de recomanacions que ens evitaran mals de cap a l'hora d'utilitzar altres fonts.

  • Podem utilitzar tot tipus de fonts a les webs (tenint en compte llicència, llegibilitat, etc.), i s'ha d'ajustar el disseny a la posterior maquetació.
  • A l'hora de fer el disseny, mai s'han d'escalar les fonts, sempre s'han d'utilitzar com a font/text i no com a imatge vectorial.
  • Junt amb el disseny cal que existeixi la llista de fonts utilitzades i les seves mides i atributs.
  • Per poder utilitzar una font qualsevol a un disseny s'ha de disposar com a mínim dels arxius en format TrueType i EOT.

Formats dels arxius de fonts segons els navegadors:

  • TrueType Fonts: Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT fonts: Internet Explorer 4+
  • WOFF fonts: Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG fonts: iPad and iPhone

Explicació del codi CSS per inserir arxius de fonts al web
Paulirish.com



Generador de codi Font Squirrel
Font Squirrel ens proporciona un generador online i un llistat de fonts per a que les puguem utilitzar en els nostres dissenys i les nostres webs. Aquí teniu un exemple del generador de codi:


Codi CSS per tenir una font disponible

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 23, 2010 05:08:36 AM America/New_York */


@font-face {

font-family: 'KingthingsGothiqueRegular';

src: url('Kingthings_Gothique-webfont.eot');

src: local('☺'),
url('Kingthings_Gothique-webfont.woff') format('woff'),
url('Kingthings_Gothique-webfont.ttf') format('truetype'),
url('Kingthings_Gothique-webfont.svg#webfontfcLqx2uM') format('svg');

font-weight: normal;

font-style: normal;

}


Codi CSS per utilitzar una font

h1.fontface {font: 60px/68px 'KingthingsGothiqueRegular', Arial, sans-serif;letter-spacing: 0;}
Read more ...