Arxiu de l'autor "Bernat Lleonart "

  • Dijous 1 octubre 2015 per

    Gulp: automatització de processos

    Si et dediques al desenvolupament front-end, segurament hauràs sentit a parlar últimament sobre l’automatizació de tasques i processos. Com la majoria de feines, la de la codificació d’interfícies web està plena de tasques repetitives que hem de completar una i altra vegada, projecte rere projecte. És per això que disposem d’eines que ens poden ajudar, i d’aquesta manera podem optimitzar el temps dedicat a cada feina. Les més conegudes són Grunt, Gulp i Broccoli.

    A Antaviana apostem per Gulp, un gestor de tasques que automatitza allò que fins ara haviem de fer manualment, de forma força senzilla i amb una corba d’aprenentatge curta. Des del primer moment en podem treure profit, i mica en mica podem anar afegint noves tasques al nostre procés.

    En definitiva, Gulp serveix per configurar un fluxe de treball de forma automàtica.

    Així per exemple, aplicant l’eina a una feina de maquetació d’un web, amb una simple comanda podem:

    • Posar en marxa un servidor web on visualitzar el que estem muntant.
    • Refrescar tots els navegadors que tinguem oberts cada vegada que actualitzem un document (HTML, CSS, JavaScript o imatges).
    • Utilitzar preprocessadors com Sass o LESS, i obtenir el codi CSS minificat.
    • Optimitzar el CSS, el JavaScript i les imatges.
    • Concatenar una sèrie de fitxers JavaScript.
    • Afegir els prefixos de navegador necessaris per a les propietats de CSS.
    • Eliminar les declaracions de CSS que no s’utilitzen en el document final.
    • Compilar les plantilles d’HTML construïdes amb Jade, Handlebars, Nunjucks o similar.

    Aquesta és només una petita mostra del que podem arribar a fer amb Gulp. La llista de plugins és immensa, i segur que hi pots trobar alguna cosa que t’ajudi a millorar els teus processos.

    Si vols saber més coses sobre Gulp (instal·lació, funcionament…), pots fer un cop d’ull a aquests enllaços:

  • Dimarts 8 juliol 2014 per

    ODL, Laboratoris de dispositius oberts


    Fins fa relativament poc temps, en el món del desenvolupament web n’hi havia prou amb testejar el producte en els 4 o 5 navegadors principals per assegurar-se que tot anava bé.

    En els darrers anys, però, i amb l’explosió de la web mòbil, i sobretot el disseny adaptatiu, s’ha arribat a un punt en què es fa molt necessari poder comprovar la feina feta en quants més dispositius diferents millor. És a dir, a part de l’ordinador de sobretaula, cal comprovar que el que hem dissenyat i desenvolupat es veu i funciona correctament en diferents tipus de dispositius mòbils, sistemes operatius, fabricants, models…

    No és habitual tenir a mà tanta varietat de dispositius per comprovar la feina feta, i per això s’han creat els Open Device Labs, ODLs o Laboratoris de dispositius oberts. Aquests laboratoris són espais que diposen de la varietat de maquinetes necessària per facilitar la feina als desenvolupadors web. Un desenvolupador pot anar a un ODL i allà hi trobarà una varietat de mòbils i tauletes que li facilitaran la feina de testeig del seu web o aplicació.

    Els ODL es nodreixen d’aportacions voluntàries de gent que dóna dispositius que ja no utlitza, per tal de nodrir el laboratori i contribuïr a millorar així la feina dels desenvolupadors.

    Si busqueu un ODL prop d’on viviu, a Opendevicelab.com ho podreu fer. Aquest web és un recull dels ODL que hi ha per tot el món, amb dades sobre quins dispositius hi podem trobar, i opinions d’usuaris que hi han anat a treballar. Si tenim algun aparell que ja no utilitzem, a través del web també podem fer-ne donació a algun dels ODL que tinguem més a prop de casa.

    Labcase, un ODL a casa

    Com que no sempre és possible trobar un d’aquests laboratoris a prop, i tampoc ens podem permetre agafar un avió cada cop que ens calgui testejar la feina, s’ha creat un altre servei similar, tot i que encara no està en marxa. S’anomena Labcase, i la idea és la de portar-te el laboratori a casa. Labcase estarà disponible en principi només al Regne Unit. Quan algú faci la sol·licitud, li arribarà una maleta amb deu dispositius mòbils amb els quals treballar durant una o dues setmanes.

    Tot i que aquestes iniciatives són molt recents, sobretot per aquí a prop, no deixen de ser interessants i ens fan donar compte de la importància que té la comprovació de la nostra feina en dispositius reals. Esperem que aquestes iniciatives proliferin i ens en poguem beneficiar tots plegats.

    , , ,

  • Dijous 10 abril 2014 per

    Landmark roles: millora l’accessibilitat del teu web


    Ja sabem que un document HTML ben estructurat ens aporta sempre beneficis: si definim correctament la jerarquia mitjançant encapçalaments (h1, h2, h3…) ajudarem enormement els usuaris de tecnologies assistives a l’hora de navegar per la pàgina. Per altra banda, disposem d’una altra eina que pot ajudar a millorar el nivell d’accessiblitat d’una pàgina. Es tracta dels Landmark roles, que formen part de l’especificació WAI-ARIA del W3C.

    Aquest mecanisme ens ajuda a identificar de forma consistent seccions d’una pàgina (com la cerca, la navegació o el contingut principal), és un complement als elements que ens proporciona el llenguatge HTML en qualsevol de les seves versions, i el millor de tot és que és molt fàcil d’implementar.

    Amb els landmark roles, a les tecnologies assistives (lectors de pantalla i similars) els és més fàcil navegar per la pàgina, poden saltar a una àrea en concret simplement pulsant una tecla, per exemple.

    Podem afegir els landmark roles a qualsevol document HTML que ja tinguem construït, simplement afegint l’atribut role a un element contenidor, i especificant el valor del role més adequat al contingut d’aquest contenidor. Per exemple: <main role="main">.

    Tingueu en compte que en HTML4 i (X)HTML caldrà fer ús del següent DTD perquè el validador de sintaxis del W3C no doni errors:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

    El llistat de roles disponibles que podem afegir al nostre document són els següents:

    • application: àrea definida com a aplicació web.
    • banner: àrea de contingut relatiu al lloc web, més que a la pàgina en concret. Normalment seria la part superior de la pàgina que conté el logo principal i el cercador.
    • complementary: secció de suport al contingut principal.
    • contentinfo: àrea que aporta informació sobre el document principal, normalment la informació que trobem als peus de pàgina (copyright, polítiques de privacitat, etc.)
    • form: secció contenidora dels diferents elements que conformen un formulari
    • main: contingut principal del document
    • navigation: col·lecció d’enllaços per navegar pel document o documents relacionats.
    • search: conjunt d’elements que formen una eina de cerca.

    Aquí podeu veure com els landmark roles d’ARIA ajuden els usuaris d’un lector de pantalla:

    , ,

  • Dimarts 25 febrer 2014 per

    Walk your city, senyalització per a humans

    Walk your city
    Volem parlar-vos d’un projecte que ens ha semblat interessant pel que implica. Walk your city és un servei que pretén fer ús de les eines online per actuar sobre la vida offline i fer-la més còmoda. En aquest cas es tracta de crear la senyalització per millorar els desplaçaments a peu i en bicicleta per la nostra ciutat.

    Es tracta d’un sistema estructurat en 4 passos:

    1. Planificació i disseny de la senyalització per arribar a un determinat lloc. El web disposa d’una eina de creació de senyals basada en Google Maps. El senyal creat indica quant temps es tarda (a peu o en bicicleta) per arribar al lloc indicat.

    2. Rebuda dels senyals “físics”.

    3. Instal·lació dels senyals a la via pública.

    4. Els ciclistes i vianants poden escanejar el codi QR del senyal per obtenir indicacions sobre la ruta.

    D’aquesta manera es poden fomentar els desplaçaments a peu o en bicicleta en detriment del cotxe, i a la vegada, es presta atenció a les necessitats dels vianants, que moltes vegades es poden trobar desorientats enmig de sistemes de senyalització que només pensen en els vehicles a motor.

    ,

  • Dimecres 27 novembre 2013 per

    Ink: butlletins electrònics adaptatius

    Ja coneixiem la gent de Zurb pel seu framework Foundation, que hem utilitzat en diversos projectes, però últimament ens han sorprès amb una nova eina dedicada a estalviar-nos alguns maldecaps comuns a l’hora de muntar emails en format HTML per a l’enviament de butlletins electrònics: Ink.

    Aquesta eina pretén facilitar-nos la feina quan hem de crear un butlletí electrònic. Actualment existeix una gran varietat de clients de correu, tant d’escriptori (Outlook, Thunderbird, Lotus Notes, Apple Mail…) com via web (GMail, Yahoo! Mail, Outlook.com…), als quals s’accedeix des de diferents navegadors. Alhora, ens trobem davant una gran varietat de dispositius d’accés: smartphones, tauletes… cada un amb el seu propi sistema operatiu (Android, iOS…).

    En resum, aquesta situació implica fer un testeig exhaustiu cada vegada que es crea un nou butlletí. Sort en tenim d’eines com Litmus, que ens permeten comprovar com es veu el nostre butlletí en una varietat de clients i plataformes.

    Un altre aspecte destacable d’Ink és que aconsegueix portar les directrius del responsive web desgin al terreny dels clients de correu, i se’n surt força bé: els nostres butlletins s’adaptaran perfectament als telèfons i tauletes dels usuaris, amb la qual cosa l’accessibilitat i la usabilitat se’n veuran beneficiades.

    , ,

  • Dimecres 2 octubre 2013 per

    WCAG 2.0 de forma senzilla

    Aviat farà 5 anys de la publicació de les WCAG 2.0 (Pautes d’Accessiblitat al Contingut Web 2.0). El contingut de les pautes és farregós i en determinats punts pot arribar a ser complicat d’entendre, sobretot per part de desenvolupadors que volen fer-se una idea clara i ràpida d’algun concepte o tècnica.

    És per això que Olga Revilla va decidir escriure WCAG 2.0 de forma sencilla. Aquest llibre suposa una aproximació a les pautes d’accessibilitat més planera, amb alguns canvis en el llenguatge que les fan més comprensibles. No deixa de ser la interpretació que l’autora fa de la normativa, i en certa manera tots els conceptes, tècniques i recomanacions resulten més digeribles. En paraules d’Olga Revilla, el llibre té una finalitat didàctica, que segurament manca a les pautes del W3C.

    Aquest llibre no pretén substituir les pautes. Al contrari, en recomana la lectura. Es tracta més aviat d’un resum que va al gra, i que té com a objectiu ser una eina de referència per a professionals que treballen dia a dia en el món web, des de caps de projecte fins a dissenyadors i desenvolupadors.

    L’autora es preocupa de clarificar alguns conceptes clau de les WCAG 2.0, com poden ser el de tecnologia que possibilita l’ús accessible, i la dependència tecnològica. Aquests són punts que cal tenir clars des de bon principi abans d’endinsar-se en l’estudi de les WCAG 2.0. L’última versió de les pautes pretén ser independent de la tecnologia, i això ha requerit crear aquesta sèrie de conceptes nous al voltant dels quals giren tota la resta: principis, pautes, tècniques i errors.

    Un altre aspecte interessant del llibre és que a la part final se’ns ofereixen una sèrie d’eines interessants per evaluar un lloc web.

    • Plantilla d’evaluació
    • Plantilla de declaració de conformitat
    • Eines web per ajudar-nos en la validació de:

      • Contrast de color
      • Centelleigs
      • Simulació de discapacitats visuals
      • Nivell de lectura d’un text
      • Legibilitat

    Us recomanem aquest treball (disponible tant en format electrònic com en paper) tant si ja coneixeu les WCAG 2.0 com si no. Val la pena tenir-lo a mà en el vostre dia a dia si us dediqueu al món web.

    ,

Disseny web - Antaviana

Truca’ns +34 973 143 481

Envia’ns un correu informacio@(ELIMINAR)antaviana.cat

Piula’ns a @canantaviana

o Vine a visitar-nos