Arxiu de la categoria "Eines i recursos "

  • 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 2 desembre 2014 per

    Aprendre disseny web (i III): com mantenir-se al dia

    Aprendre disseny web: com estar al diaDesprés d’aprendre les bases de la programació i el disseny web, i sabent ja d’on treure la inspiració, ens toca allò més difícil o que, almenys, requereix més constància: estar al dia.

    Suposo que això deu passar en moltes professions, però, en el món del disseny web, la línia d’aprenentatge és infinita. S’ha d’estar constantment llegint, veient les noves tendències, provant noves pràctiques, aprenent nous llenguatges. Pot ser realment esgotador, és veritat, però si ets prou freak com per haver-te posat en aquest jardí, segur que no et sabrà greu haver-hi d’invertir hores.

    Aquí tens una llista de les coses que pots fer per mantenir-te el dia:

    1. Tingues cura de la teva marca personal

      Si et vols dedicar a la programació o al disseny web, cada vegada és més necessari tenir cura de la pròpia marca personal. Si ets creatiu, és imprescindible crear un disseny corporatiu que t’identifiqui i també la creació d’un portfolio online. També és recomanable fer un blog, publicar-hi regularment, definir un nínxol concret a qui dirigir-se, tenir cura de les xarxes socials i publicar les diferents feines o experiments que es fan. En aquests temps en què les xarxes socials i la reputació online prenen tant protagonisme, no n’hi ha prou en fer coses, s’ha de comunicar que es fan.

      Per a treballar aquest aspecte, et recomanem aquesta guia per a crear una Marca Personal del blog de la Vilma Nuñez.

    2. Crea el teu portfolio online

      A Internet hi ha un munt de serveis que et permetran crear el teu portfolio amb facilitat. El més important és que sigui fàcil d’actualitzar, perquè no et faci mandra ni se’t faci massa carregós anar-hi publicant els teus darrers treballs. És imprescindible que estigui actualitzat. Pensa que serà la teva principal carta de presentació al món, així que ha de respondre a diverses preguntes: qui ets? què fas? I què ofereixes? Has de tenir molt clar quin és l’objectiu. Si ets freelance, voldràs trobar clients i, si cerques feina, voldràs que les empreses vegin allò que has fet i que es morin de ganes de contractar-te.

      Si vols crear el teu portfolio en línia, fes un cop d’ull a aquestes opcions gratuïtes: Carbonmade, Krop, Cargo, Dribbble, Behance o Devianart.

    3. Subscriu-te als feeds de webs i revistes online

      En l’apunt anterior et recomanàvem un munt de webs i revistes per inspirar-se, però per estar al dia cal escollir bé quins webs o blogs ens ajuden a alimentar els nostres coneixements de forma constant. La millor opció és subscriure’s als seus canals RSS.

      Des que Google va tancar el seu servei de feedsGoogle Reader -, nosaltres utilitzem Feedly, que és una eina que ens resulta molt útil per seguir amb regularitat les informacions que ens interessen. Si vols ser eficient en aquest punt, tria acuradament quins blogs o webs vols seguir. No es tracta de seguir-ne molts, perquè ja sabem el que sempre passa: que no tenim temps de llegir-ho tot. Es tracta, doncs, de fer una bona selecció dels feeds que ens permetin estar al dia.

      Seguir webs com Smashing Magazine, A List a part, Noupe, Speckyboy, Vandelay Design, Six revisions, Webdesigner Depot, Tuts+, per dir-ne algunes de les moltes que podries seguir per estar al dia. Tot depèn també del camp en el que et vulguis especialitzar (programació, disseny web, experiència d’usuari…).

      Si trobes que subscriure’s a blogs és un rotllo i que sempre et queda tot pendent de llegir, també pots provar amb aquestes perles que hem descobert. Tria la que et sigui realment útil i posa-te-la als preferits o la pàgina per defecte quan s’obre el navegador. Són molt bones!

      • Sidebar.io. Selecciona cada dia només 5 recursos. Però quins recursos, sempre súper útils!
      • Agile Designers. Us en parlàvem fa un temps al nostre blog, és un web amb tots els recursos que necessita un dissenyador web, agrupats per categories.
      • Webdesignrepo. Una altra pàgina carregada de recursos. Ho tindràs tot a l’abast de la mà en un únic web.
      • Alltop – web design. Una pàgina que ens podria estalviar de subsciure’ns a canals RSS. Tot en un únic web i amb una selecció a l’esquerra dels articles més populars.
      • Code Visually. Repositori de recursos i eines per a desenvolupadors web.
      • Web developers handbook. Un alre recull de links per tenir a mà.
      • Muzli. Una extensión de Chrome per a dissenyadors que obre una pestanya amb una multitud de recursos per inspirar-se i estar al dia.
    4. Segueix a les persones influents del sector a les xarxes socials

      A part de seguir l’activitat de les empreses del sector, també és interessant estar al cas de les publicacions de les persones més influents en el camp del disseny web a través de les xarxes socials. Twitter és una molt bona eina per estar-ne al cas. Aquí tens algunes recomanacions de perfils que podries seguir:

      A part, també pots utilitzar Linkedin i apuntar-te a diferents grups del teu sector. Torna a ser bàsic fer una bona selecció: apunta’t només a aquells grups que ofereixin informacions interessants pel teu dia a dia o per fer networking i conèixer gent de la teva professió. És vital que el dia que et sorgeixi algun dubte, ho puguis publicar al grup i rebre consells i ajuda.

    5. Llegeix, llegeix i llegeix

      A part de tot el que trobis per la xarxa, també trobaràs revistes en paper boníssimes, com la .net magazine, que també disposa d’una versió per iPad una mica més econòmica. No és una revista barata, però et permetrà estar molt al dia de tot el que passa en el món del disseny web a Europa, amb bons tutorials i articles que aprofundeixen sobre diferents temàtiques relacionades en el món del disseny web.

      Una altra opció recomanada és la descàrrega i lectura d’ebooks. En trobaràs moltíssims de gratuïts:

    6. Mira vídeos sobre conferències i tutorials de disseny web

      Si disposes de pressupost per invertir en formació hi ha un munt de serveis on et pots subscriure amb una quota mensual o per cursos concrets i realitzar els tutorials amb vídeo: Lynda, video2brain, Treehouse, Mejorando.la (en castellà), Code School (té cursos gratuïts i d’altres de pagament)…

      Però, si no vols pagar, a YouTube hi ha un munt de canals on pots fer tutorials, tant de disseny com de programació web. Només et faltarà temps!

    7. Ves a conferències i relaciona’t amb la gent del teu sector

      Seguir tutorials, mirar vídeos, subscriure’s a blogs… Tot això està molt bé, però no hi ha res millor que sortir de l’oficina i assistir a conferències i tallers. És una manera molt adequada de mantenir-se al dia, d’estar a l’aguait de les novetats del sector i també una excel·lent manera de fer networking i d’estar en contacte amb gent del sector.

      Assistir a conferències i tallers no sol ser una opció gaire econòmica, així que si no es disposa de gaires recursos, també es pot anar seguint les conferències en streaming o via Twitter, mirar-ne les presentacions a Slideshare i buscar-ne els vídeos, que molts cops acaben publicats a YouTube.

      Si has arribat fins aquí, ja podem estar segurs que t’interessa el món del disseny web. Doncs estàs d’enhorabona, perquè el proper febrer se celebra una de les conferències més importants del sector i es fa precisament a Barcelona: l’Awwwards Conference, els dies 24 i 25 de febrer de 2015. De tota manera, al llarg de l’any es fan altres conferències interessants.

    Aquests són els nostres consells, però segur que tu tens altres receptes o mètodes per mantenir-te al dia. Estarem molts contents, si ens els comentes 🙂

    , , , , ,

  • Divendres 31 octubre 2014 per

    Com saber quina tecnologia utilitza un web?

    Com puc saber quina tecnologia utilitza un web determinat?

    Segur que a vegades t’has fet preguntes com aquestes: Com està fet aquest web? Està programat en PHP, en Ruby, en .Net…? Quin gestor de continguts utilitza: WordPress, Joomla, Drupal…? Quins plugins hi ha instal·lats? Fan servir algun framework? En quin servidor està allotjat?

    Si ets curiós/a de mena, segur que moltes vegades t’has preguntat quina tecnologia utilitza un web concret. Hi ha coses que es poden veure mirant-ne el codi font, però n’hi ha d’altres que costen molt més d’esbrinar.

    Avui et volem recomanar eines que et seran molt útils per saciar la teva curiositat i, de pas, aprendre de com ho fan els demés.

    1. BuiltWith. Segurament és el servei més complet. Introdueixes una URL i et diu amb quin gestor de continguts (o CMS) està gestionat, quins sistemes de publicitat utilitza, els widgets que té en funcionament, el tipus de servidor on està allotjat, les tecnologies amb què està desenvolupat i altres dades d’aquest tipus.

      També té un apartat molt interessant en què es poden veure les tendències de la tecnologia més utilitzada. Per exemple, si busquem quin CMS és el més utilitzat, veurem en un gràfic que el que més s’utilitza és WordPress.

      A més també ofereix una extensió per a Chrome, que et permetrà consultar la tecnologia del web que estàs visualitzant en aquell precís moment. Una eina, molt, molt interessant.

    2. Wappalyzer. És una extensió de navegador disponible tant per Chrome com per Firefox. Si us la instal·leu, podreu veure la tecnologia que utilitza cadascun dels webs que visiteu, d’una manera molt subtil i gens intrusiva. Actualment detecta un bon llistat d’aplicacions, que mica en mica van ampliant.

      És molt recomanable instal·lar-se aquesta extensió, ja que no ens hem de moure del web en qüestió per saber com està feta. Pràctic al 100%!

    3. WhatWeb. Amb una interfície molt menys agradable a la vista, WhatWeb també ens permet introduir una URL i ens dóna informació sobre les tecnologies utilitzades. Respecte als anteriors, també ens dóna informació sobre el servidor, la IP, el número de les versions instal·lades, etc.

    Com saber quins plugins o temes estan instal·lats en un WordPress?

    Per aquells que treballeu amb WordPress, moltes vegades també necessitareu saber quins plugins té instal·lat un web o quin tema (theme) utilitza.

    També hi ha eines per esbrinar-ho, us en recomanem algunes:

    • Is it WordPress?. Un web súper senzill al qual introdueixes una URL i simplement et diu si es tracta o no d’un web gestionat amb WordPress.
    • WP Theme Detector. Tal i com indica el seu nom serveix per esbrinar quin tema té instal·lat un web fet amb WordPress.
    • What WordPress Theme is that? És com l’anterior, però a més ens diu – si ho detecta – quins plugins hi ha instal·lats.

    És una immensa sort tenir totes aquestes eines a l’abast de la mà per quan les necessitem: ja sigui per espiar què fa la competència, per aprendre mirant com ho fan els qui més en saben, per agafar idees de com solucionar problemes tecnològics, etc.

    Esperem que et sigui ben útil!

    (* Fotografia de Timothy Muza, via Unsplash)

    , , ,

  • Dilluns 20 octubre 2014 per

    Com optimitzar la conversió

    Com optimitzar la conversió

    En termes de màrqueting, la conversió es produeix en el moment màgic en què un usuari realitza una acció clau que ens hem marcat com a objectiu. La conversió és com el Sant Grial de l’E-commerce. Cal tenir molta cura dels petits detalls, seleccionant molt bé els usuaris als qui ens adrecem, i optimitzar constantment tot el procés que ens hi porta.

    Fa uns dies vaig assistir al Be Marketing Day, que organitzava EADA Business School per segon any consecutiu. De les més de 60 conferències que s’oferien, vaig assistir a les que s’agrupaven com a #BeOnline, específiques pel màrqueting a Internet. De totes les moltes idees que en vaig extreure, les que em van semblar més interessants van ser les relacionades amb l’optimització de la conversió. Us en deixo quatre pinzellades i un parell de presentacions.

    E-commerce: camí cap a la conversió

    Millorant cadascun dels passos que ens porten a la venda, exactament amb el mateix nombre de visites, es poden incrementar les vendes en un 58%.

    En les xerrades de Jaume Ollé i de Koke González es va parlar molt sobre la conversió i la seva optimització, per millorar els resultats a l’hora de vendre per Internet.

    Jaume Ollé va presentar unes xifres molt esperançadores per aquells qui venen per Internet, només millorant l’embut de conversió (o conversion funnel), exactament amb les mateixes visites, es pot aconseguir millorar les vendes en un 58%. Per tant, ens oblidem de portar més tràfic i ens centrem en la optimització de cadascun dels passos que hi ha fins arribar a la conversió.

    Embut de conversió

    Target: no cal que vinguin tots, només els escollits

    L’important no és aconseguir seguidors, ni RT o mencions. El que compta és que arribin al nostre web els usuaris que convertiran. Clients que ens faran guanyar diners i que, segurament, hi tornaran.

    Portar tràfic (amb SEM) cada vegada és més car i no és gens efectiu. Hem de portar tràfic dirigit i seleccionat. Tal i com explicava Koke González és vital segmentar i conèixer de primera mà quins són els nostres usuaris, per entendre’n el seu comportament.

    L’important és que l’usuari estigui dirigit i arribi a acomplir l’objectiu. Normalment quan parlem de convertir pensem en aconseguir una compra, però també podria ser subscriure’s a un newsletter o descarregar un e-book, per exemple. Així que cal optimitzar la conversió (CRO).

    Més de la meitat es perden a la cua

    Us imagineu que passaria si en un supermercat, la meitat dels compradors abandonessin la compra quan ja estiguessin fent cua per pagar?

    Koke González va explicar que la decisió de compra es produeix en 2,5 segons. Això és poquíssim!

    Per arribar a l’objectiu, l’usuari passa per diferents passos, en els quals hem d’intentar que no es perdi ni abandoni. Es diu que en el checkout s’arriben a perdre més del 50% de les visites. Us imagineu, per exemple, que en un supermercat (físic) la meitat els compradors abandonessin la compra quan ja estiguessin fent cua per pagar?

    És impensable i ningú no permetria que això seguís passant. Però en el comerç electrònic passen coses com aquestes i pitjors. En l’e-commerce l’èxit està en el detall, per això cal treballar en aquest sentit.

    Per més bé que es faci… Sempre es pot millorar!

    Algunes de les coses que es poden millorar són:

    • Aconseguir tràfic de qualitat i tenir un coneixement exhaustiu de com és el nostre visitant.
    • El mitjà: adequar-lo al públic objectiu.
    • Cura total del detall: tant del missatge com del disseny.
    • Fer crides a l’acció adequades.
    • Treballar molt les pàgines d’aterratge (o Landing Pages). Molts cops dirigim a pàgines que no són les adequades, després resulta que hem portat tràfic que no aprofitem perquè el perdem al moment. S’ha de dirigir bé aquest tràfic.
    • Optimitzar la navegació i la usabilitat del lloc web. Sobretot des de dispositius mòbils! Cal fer webs amb Responsive Web Design (o disseny web adaptatiu), perquè les experiències d’usuari des de qualsevol dispositiu siguin positives.
    • Treballar bé el procés que porta a l’usuari fins a la fitxa de producte. I també treballar cadascuna de les fitxes, el disseny, els continguts, els botons i fins i tot el color d’aquests botons. S’ha de tenir en compte que l’usuari principalment només veu la imatge principal i el primer paràgraf.
    • També són d’ajuda els breadcrumbs (o molles de pa) intel·ligents.
    • És important no mentir. Per exemple, no mentir amb la disponibilitat del producte. Cal ser el màxim de transparents.
    • En el moment d’inicialitzar el procés de compra (o checkout) no distreure amb res a l’usuari. Això és sagrat: no oferir-li res més, no posar-li menús ni links amb altres ofertes. El deixem aïllat únicament amb el que necessita per a dur a terme l’acció de compra.

    Un bucle infinit: mesurar, provar, millorar

    En la optimització de la conversió, la feina no s’acaba mai. Mesurem, fem proves, instaurem millores i tornem a començar.

    Per saber què funciona i experimentar amb nous formats, és altament recomanable l’ús de tests A/B, que ja us en parlàvem en un apunt fa temps. Amb això podem saber que canviar el color d’un botó ho pot canviar tot, o que posant-lo a la dreta en comptes de l’esquerra, variarà el nombre de conversions. Tota una ciència relacionada amb el neuromàrqueting.

    També és important que fem estudis d’analítica, que ens fixem en la taxa de rebot, que treballem amb mapes de calor (heatmaps) i amb estudis d’eyetracking, per decidir quins canvis o proves volem fer.

    En comerç electrònic portar tràfic no aporta beneficis, ens cal la conversió a la venda, per això és tan important optimitzar tot el procés que ens porta fins l’objectiu, cuidar cada detall i mesurar. Mesurar i després provar. I, segons els resultats obtinguts, aplicar les millores corresponents. I tornar a mesurar, tornar a provar. I així infinitament. La feina d’optimització no s’acaba mai.

    Les presentacions

    Les presentacions sobre embut de conversió i optimització de la taxa de conversió les podeu veure en els següents enllaços:

    A més, David Soler, organitzador i coordinador del #BeOnline, ha preparat un magnífic apunt amb el resum de cadascuna de les conferències, amb el link a les presentacions corresponents.

    Un recull de material del bo per seguir aprenent.

    , , ,

  • Dimarts 30 setembre 2014 per

    Aprendre disseny web (I): cursos i tutorials

    Aprendre disseny web en líniaDes de l’arribada d’Internet a les nostres vides a finals del segle passat, cada vegada hi ha més gent que vol aprendre disseny i programació web. S’està demostrant que l’aprenentatge del disseny web és necessari en molts camps i, fins i tot, cada vegada és més acceptada la necessitat d’ensenyar programació a nens i nenes.

    La democratització d’Internet ha creat una generació d’autodidactes que aprenem dia a dia amb els recursos que tenim a l’abast. Ens meravella saber que Internet és un autèntic paradís a l’hora de trobar i compartir coneixement. Però què passa si ens perdem en l’excés d’informació? Si volem aprendre disseny web des de zero, per on comencem? I, si a més, no tenim pressupost, on trobem els recursos gratuïts?

    Si tot just ara t’endinses en el món del disseny web, volem ajudar-te a fer un pas endavant. Hem fet un llistat de coses que pots fer per aprendre’n en línia. En aquesta primera part de l’apunt, hi trobaràs un recull de cursos i tutorials on aprendre disseny web gratuïtament. I, en els propers apunts, també t’orientarem sobre els llocs web on trobar inspiració i t’explicarem com mantenir-te al dia. Esperem que tot plegat et sigui útil, per endinsar-te en aquesta disciplina.

    On aprendre les bases del disseny web

    Fa temps us recomanàvem Hack Design, un completíssim curs de disseny online i gratuït, on grans mestres del disseny ofereixen, via email, grans lliçons setmanals. Un bon punt de partida per situar-se en el món del disseny web.

    No es pot entendre el disseny web, sense saber conceptes bàsics de tipografia i d’experiència d’usuari. Podeu fer un cop d’ull a aquests altres recursos:

    On aprendre HTML i CSS des de zero

    On aprendre programació web

    Cursos MOOC relacionats amb el món web

    Aquesta és la nostra selecció. Segur que tu coneixes altres recursos per ajudar als qui comencen, així que esperem els teus comentaris i recomanacions.

    Fins ben aviat!

    , , , , , , ,

  • Dimarts 16 setembre 2014 per

    IFTTT, fes que Internet treballi per tu!

    IFTTT, una eina per automatitzar tasques

    Què et semblaria si cada vegada que canviïs la teva foto de perfil a Facebook, automàticament també se’t canviés a la resta de xarxes socials, sense haver-ho de gestionar? O… que tots els teus tuits es guardessin automàticament en un full de càlcul? O… que quan tens una trucada perduda a la que no has donat resposta, se’t programi al calendari un recordatori per trucar-hi al vespre?

    No seria meravellós que quan publiquessis una foto a l’Instagram, aquesta es publiqués a Twitter, però incrustada al tuit i no com un enllaç? I… si poguessis afegir tots els teus seguits a Instagram en una llista de Twitter? I… si cada vegada que t’etiqueten a Facebook, la foto es guardés al teu Dropbox? O si, quan guardes un link per llegir més tard a Feedly o a Pocket, aquest es guardés com una nova nota a l’Evernote?

    Sí, sí, tot això es pot fer amb IFTTT, un automatizador de tasques online. Aquesta eina ens proposa una manera extraordinària de fer treballar Internet per nosaltres, optimitzant temps i esforços. Si encara no coneixies aquesta eina, te l’havíem de presentar, perquè és una altra perla que ens farà – seguríssim – més productius.

    IFTTT, una eina ben útil!

    IFTTT es basa en els condicionals més bàsics de qualsevol llenguatge de programació, ja que el seu nom ve de l’anglès If This Then That. Si passa això (if this…), aleshores fes això (…then that). Però no t’espantis, que ens ho posen ben fàcil.

    Ens trobem amb unes receptes ja creades, que són precisament aquest tipus d’automatitzacions (si publico a tal xarxa, guarda-m’ho a tal altra xarxa…) i nosaltres simplement hem d’escollir quines volem utilitzar.
    Actualment l’eina disposa de 129 canals que són els diferents serveis des dels quals pots automatitzar accions: Linkedin, Facebook, Twitter, Instagram, Telèfon Android, iOS, YouTube, Flickr, Tumblr, Gmail, Delicious i un llarg – de fet, llarguíssim – etcètera.

    IFTTT disposa de diversos canals

    Tenint això de base, ja pots començar! Només has de navegar per la galeria de les receptes més populars o bé anar a crear la teva pròpia recepta des de zero, seleccionant el canal i després escollint què vols que passi.

    Ja veuràs que és una autèntica delícia veure tot el que es pot fer. Remena-hi i treu-ne partit segons les teves necessitats diàries.

    Les millors receptes d’IFTTT per al teu dia a dia

    En tractar-se d’una eina tan útil, la Xarxa bull amb nombrosos reculls amb les millors receptes. Fes-hi una ullada que n’hi ha algunes que t’encantaran!

    Tot plegat suposa un estalvi de temps enorme. Doncs ara que ja sabem com funciona, si demà està previst que plogui, si us plau, que ens enviïn un mail!

    , , ,

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