Arxiu de la categoria: Desenvolupament

Foto final TEDxReus 2015. Foto de TEDxReus a a Flickr

Novembre és temps de TEDxReus

Ja t’ha arribat la notícia? El 19 novembre arriba la cinquena edició del TEDxReus. Si no coneixes aquest esdeveniment, et recomanem que donis un cop d’ull al blog, el segueixis per Twitter o Facebook i sobretot, et reservis el dissabte 19 de novembre per assistir-hi.

Els esdeveniments TED acostumen a ser màgics, el format de les xerrades —curtes, intenses, sintètiques i diverses—  és la clau. Els ponents tenen menys de 20 minuts per parlar, així que han de fer un esforç complex per extreure l’essència del seu missatge. En les xerrades TED els savis llueixen amb llum natural: entre les ponències més espectaculars i les més populars és habitual trobar propostes senzilles, subtils però plenes de llum, d’aquella llum que t’obre la ment i el cor.

TEDxReus 2015 abans de començar.

TEDxReus 2015 abans de començar. Foto de TEDxReus a a Flickr

Col·laborem amb la nostra feina

A Fesomia col·laborem amb el TEDxReus des de la primera edició. El 2002 vam fer el primer web, de disseny artesà, 100% creat a casa nostra. I és que l’artesania digital ens apassiona.

L’esdeveniment s’ha anat fent més gran en cada edició, i per aquesta cinquena ja calia una renovació general del web. Seguint la voluntat dels organitzadors, aquesta segona versió també s’ha fet sobre WordPress, però ara a partir d’un tema predissenyat.

Sempre ens agrada col·laborar fent allò que millor sabem fer, la nostra feina de cada dia. Ens fa sentir útils, ens permet contribuir a difondre iniciatives, pràctiques i missatges que compartim. A més, ens permet en alguns casos aplicar en entorns reals nous recursos que incorporem després a la feina.

En aquest sentit, aquest any calia incorporar un nou sistema de venda electrònic d’entrades i s’ha triat Tickera. Hem fet les adaptacions necessàries per polir i garantit la compatibilitat d’aquest connector i resoldre problemes; hem cavat fins al fons per descobrir les virtuts i llacunes del codi font d’aquest sistema de venda.

En fi, que estem contents, perquè col·laborar amb TEDxReus és motiu d’alegria, perquè ser útils amb la nostra feina és la nostra obsessió i perquè descobrir i ampliar coneixements és el que ens fa treballar cada dia amb delit.

Dissabte 19 de novembre ens veure a TEDxReus?

Bug Webkit contenteditable

Foto de Justin Raycraft a Flickr

Errors de format als elements contenteditable a Webkit (Chrome, Safari)

contenteditable és un atribut aparegut amb HTML5 que permet que certs elements HTML siguin editables o modificables al navegador de l’usuari. Aquesta propietat la fan servir editors de text per a pàgines web, alguns tan populars com TinyMCE.

Webkit (el motor de renderitzat de navegadors com Safari, Opera i els que utilitzen Blink com Chrome) té un problema en la manera en que gestiona els objectes contenteditable: quan s’han aplicat estils específics (per exemple al body d’un editor TinyMCE), en certes ocasions alguns d’aquests estils afegits (com line-height o font-size en ems) generen regions span indesitjades dins del codi, fet que pot comportar canvis imprevistos en el format obtingut, com diferents mides de lletra o interlineats inesperats.

El problema existeix des de fa alguns anys i ha estat reportat, tot i què no ha estat corregit mai. Sembla ser què es considera part d’una funcionalitat que compara els estils en modificar blocs i intenta mantenir-los inserint elements span en línia. Amb tot, amb Firefox, Internet Explorer i Microsoft Edge no es dóna aquest cas.

Algunes solucions

Els editors WYSIWYG més populars han anat afegint connectors o plugins o bé canvis per compensar aquest error, de manera que en molts casos només caldrà actualitzar el programari o les biblioteques corresponents.

En determinats escenaris, però, no sempre ens és possible actualitzar els editors, ja sigui per raons de compatibilitat o per què hi ha involucrades aplicacions crítiques que no podem manipular amb facilitat o amb la freqüència que voldríem. En aquests casos podem optar per altres solucions més simples, com utilitzar estils uniformes o pegats amb JavaScript.

Una de les solucions proposades a Stack Overflow és observar el DOM per controlar aquest comportament. Fixem-nos en el següent exemple: en la tercera caixa utilitzem mutation observers en comptes de mutation events, i restringim l’acció a la plataforma Webkit:

(Explora aquest codi a JSFiddle)

Berry Hard Work

"Berry Hard Work" Foto de JD Hancock a Flickr

La segmentació, per què és important en un lloc web d’empresa

Si vols que el teu lloc web corporatiu sigui realment útil i t’ajudi a contactar amb clients, és important que compleixi amb una sèrie de condicions. Avui et parlem d’una d’elles: la segmentació.

Un lloc web corporatiu eficient cal que tingui els continguts principals ben segmentats.

Què vol dir això? Doncs que cada concepte clau, cada producte o servei que ofereixes necessita d’una única pàgina.

I per què he de tenir una pàgina per a cada producte o servei?

Perquè així és més fàcil captar l’atenció. El nostre client té un problema concret per resoldre i per tant cal que focalitzem tota la seva atenció allà on li podem explicar com li donarem una solució efectiva al seu problema.

A més tindràs així un lloc web ben organitzat i a punt per a disseminar-lo a la Xarxa:

  • Si actives una campanya de publicitat de pagament (Adwords, Facebook Ads, Twitter Ads Linkedin o on vulguis) et caldrà tenir una pàgina concreta i amb informació clau on dirigir les visites que arribaran gràcies a la campanya.
  • El posicionament orgànic també és molt més efectiu quan el contingut d’una pàgina és concret i precís. De fet, només així és efectiu.
  • Després d’una primera visita comercial serà molt útil poder donar al teu possible nou client una adreça a una pàgina on s’explica amb detall les condicions, característiques i valors del producte concret pel qual s’ha interessat: molt millor si l’adreces a www.elmeuweb/producte-que-hem-comentat que no pas la pàgina d’inici del teu web.

Com s’aconsegueix tenir un lloc web ben segmentat?

És una feina de base i fonamental que es fa definint l’arbre de continguts. Atura’t a organitzar bé l’arbre de continguts del teu web, divideix i defineix bé els productes i serveis que ofereixes, segmenta’ls des del punt de vista del teu client, i fes que el teu lloc web tingui una pàgina per a cada un d’aquests productes i serveis clau.

 

Exemple d'arbre continguts per un web

Exemple d’arbre continguts per un web

Aquest és un arbre de continguts extret d’un cas real, d’una empresa que ofereix serveis tècnics per a cellers: en aquest cas la segmentació es va fer fins a detallar cada un dels serveis que ofereix, tant de serveis com de lloguer d’espais. Si vols donar-hi un cop d’ull aquí tens l’arbre al detall.

A Fesomia desenvolupem llocs web d’empresa enfocats a facilitar el contacte i les relacions comercials amb clients. Vols que t’ajudem a crear un lloc web d’empresa efectiu, sòlid, funcional i interessant? Parlem-ne!

Accelerated Mobile Pages

Breu introducció a AMP (Accelerated Mobile Pages), la proposta de Google per a fer més ràpida i rendible la Web mòbil.

Crec que en això hi estarem d’acord: és un turment llegir alguns articles i notícies amb el mòbil. Temps de càrrega interminables, botons impossibles de clicar, textos diminuts, anuncis invasius… Aquest fet tan habitual només genera usuaris frustrats, editors que perden visites i anunciants maleïts.

Per contra, els usuaris més espavilats han trobat maneres d’accedir millor a aquestes pàgines no optimitzades, com navegar amb el mode de lectura que alguns navegadors incorporen o instal·lar bloquejadors d’anuncis. El cas és que cap d’aquests sistemes agraden als editors de continguts, ja que se salten el sistema de monetització de les seves publicacions.

Google, com a empresa de publicitat, és un dels principats afectats per aquestes pràctiques i segurament per això fa uns mesos va anunciar una iniciativa per mirar de posar-hi ordre: el projecte AMP.

Què és AMP

AMP (Accelerated Mobile Pages) és un projecte de codi obert liderat per Google que té com a objectiu millorar la velocitat de càrrega i l’experiència d’usuari de les pàgines web orientades a notícies i informació. De moment es dirigeix a editors de publicacions digitals, però no es descarta que en un futur pugui ser útil per qualsevol tipus de contingut a Internet.

Actualment (dic actualment perquè aquestes coses se sap com comencen però no com evolucionen) els objectius principals del projecte són, d’una banda, fer més àgil i accessible l’accés a pàgines d’informació des de dispositius mòbils i, per una altra, facilitar la convivència entre l’accessibilitat de les pàgines i els sistemes de monetització, com els anuncis.

Com funciona

Una pàgina AMP és una versió alternativa (i canonitzada) a l’original a la qual s’accedeix afegint /amp a l’adreça de la primera. Per exemple, si l’adreça d’aquesta pàgina que estàs llegint és:

Breu introducció a AMP (Accelerated Mobile Pages), la proposta de Google per a fer més ràpida i rendible la Web mòbil.

la seva versió AMP es troba a:

https://blog.fesomia.cat/2016/03/11/amp-accelerated-mobile-pages-google/amp

La versió AMP és una pàgina construïda amb HTML5 i Javascript amb alguns components propis i CSS3 en línia no superior als 50KB.

Com aconsegueix AMP accelerar la descàrrega de les pàgines? Aquests són alguns dels punts clau:

  • Les pàgines es reformaten, es despullen de molts elements superflus.
  • Es limita la quantitat de codi Javascript i CSS.
  • Es provoca la descàrrega en paral·lel d’elements (càrrega asíncrona). Si cal mostrar publicitat, per exemple, es presenta en marcs (iframes) independents, sempre per HTTPS.
  • S’optimitzen imatges i altres elements, servint només les versions òptimes segons el dispositiu i amb les mides declarades per tal d’evitar salts (autoscrolls) durant la càrrega.
  • Es possibilita el guardat de les pàgines en memòria cau de servidors distribuïts (caching).

Com s’implementa

Google ha alliberat el codi i la informació necessària perquè qualsevol pugui implementar AMP a les seves pàgines. Els ingredients són:

  • L’etiquetatge AMP HTML, que barreja elements estàndard amb alguns de propis.
  • Certs elements CSS3
  • Una biblioteca Javascript i algunes extensions que ho orquestren tot, i que Google ofereix lliurement a través de la seva xarxa de lliurament de continguts a https://cdn.ampproject.org/
  • Google també està guardant a la seva memòria cau mundial les pàgines AMP que indexa per oferir-les més ràpidament segons la geolocalització dels usuaris.

La iniciativa compta ja amb grans socis de l’ecosistema d’Internet, d’àmbits com la premsa, les xarxes socials, la publicitat i diverses plataformes de publicació. Per exemple, Automattic ja ha publicat un connector que permet implementar AMP al WordPress de forma senzilla. En aquest blog l’estem provant.

Prioritat en Google Search

Qualsevol desenvolupador pot implementar AMP, millorar-lo o adaptar-lo com li convingui. I qui ha estat el primer a aprofitar-ho? Exacte: Google.

Fa uns dies Google va anunciar que les pàgines AMP tindran (a partir de ja, diuen) prioritat en els resultats al seu cercador en dispositius mòbils, mostrant-les en un carrusel destacat. Segons ells això significa que, en igualtat de condicions orgàniques, afavoriran les pàgines que implementin AMP en les cerques que es facin des del cercador en mòbils.

Vídeo que ha publicat Google per il·lustrar el comportament del cercador en mòbils sobre pàgines AMP

Alguns avantatges

Certament AMP pinta molt bé i pot comportar alguns beneficis evidents:

  • Millor experiència per als usuaris.
  • Disminució de l’ample de banda necessari per navegar (a veure què diuen els proveïdors de connectivitat).
  • Millor accés a la informació en regions del planeta amb poca qualitat en les connexions.
  • Tot és de codi obert i basat en Web, per contra d’alguns serveis relativament relacionats com Facebook Instant Articles o Apple News.

Algunes inquietuds

Particularment em venen al cap alguns dubtes:

  • De moment no he sabut veure al W3C per enlloc. Què deu opinar dels components no estàndards? Han dit alguna cosa al respecte?
  • Google, amb tot el seu dret, acapararà la distribució accelerada gràcies al seu imbatible CDN. Tornem a delegar als grans proveïdors l’emmagatzematge de la informació. Aquí ho deixo, que aquest punt pot ser molt llarg.
  • Tinc la sensació que el desencadenant ha estat l’intent de solucionar els coneguts problemes de relació entre els editors, la publicitat i els consumidors de continguts. No és res dolent, però sabem que els anuncis són un dels principals generadors de problemes d’usabilitat i accessibilitat en pàgines web. Amb una publicitat més ètica i respectuosa tot seria més senzill.

I per finalitzar no puc evitar reflexionar sobre si no estarem matant mosques a canonades. Caldria no oblidar que avui potser estem publicant d’una forma molt més complicada del necessari, i que de vegades les coses es poden fer més simples, molt més simples.

Tapping a Pencil. Rennett Stowe a Flickr

Foto de Rennett Stowe a Flickr

Digitalització des del minut 0

Avui el gestor ens ha enviat, per correu ordinari, un full perquè fem el registre de les hores de la jornada dels treballadors. Els pagesos que ens subministren verdura a Diguesblat deixen, dins d’una caixa de cols, un albarà escrit a mà amb la llista de les verdures que ens han servit.

Són formes de treball absolutament normalitzades. Ens passem mig dia apuntant dades a mà, i l’altre mig entrant-les al programet de gestió, al full de control… digitalitzant-les, vaja! Amb una mica de sort fem aquesta feina només 2 vegades: una a mà i l’altra digitalitzant-la, però en alguns casos aquesta feina la fem 3, 4 i 5 vegades. Un exemple:

  1. Un client apunta i envia la comanda que vol que li servim. Són 5 minuts de feina, no costa gens.
  2. Fem a mà l’ordre de comanda per passar-la al magatzem. Són 5 minuts de feina, no costa gens.
  3. A mà, la persona del magatzem anota les rectificacions. Són 2 minuts de feina, no costa gens.
  4. La persona d’administració, a mà, prepara l’albarà pel client. Són 5 minuts de feina, no costa gens.
  5. El client passa a l’ordinador, en alguna aplicació o en algun full de control, les dades de l’albarà. Són 5 minuts de feina, no costa gens.
  6. El personal d’administració passa a l’ordinador les dades de l’albarà, per a fer la factura! Són 5 minuts de feina, no costa gens.
  7. Ah calla, que hi ha un error! En el pas 4: on hi havia un 8 algú ha vist un 3 i s’ha equivocat. Cal arreglar-ho, avisar al client i passar-li l’albarà corregit. Són 20 minuts de feina, però com que l’hem fet tota la vida no passa res. I el client té 20 minuts més de feina, perquè ja tenia l’albarà entrat, però com que és normal, amb 20 minuts extres de feina el diumenge al vespre i una enrabiada, se soluciona el problema.

Final!: després d’almenys 5 passes les dades es digitalitzen i ja les tenim més o menys ben preparades per al futur: per a emetre les factures, comptabilitzar activitat de l’empresa, comptabilitzar IVA i d’altres tràmits…

I en aquest tan assumit, tan clàssic procediment de fer-ho tot a mà, sovint no parem a pensar que, encara que mantinguem el “a mi ja m’està bé així perquè em resulta més còmode” hi ha implícita una enorme pèrdua de temps, i temps són diners.

Digitalitzar la informació i les dades que emetem a l’empresa és una necessitat, ens aporta sistemàtica, ens fa estalviar temps i per tant també ens fa estalviar diners. Digitalitzar, moltes vegades només vol dir conèixer alguna aplicació de gestió i tenir quatre fitxers ben enllaçats. El cost d’organitzar els processos de treball és assumible, perquè hi ha sistemes adequats per empreses de totes les dimensions, tant en complexitat com en cost.

Digitalitzar des del moment 0 els processos de treball és fonamental. Et proposo que facis un exercici:

  • Tria un procediment de treball que encara no tingueu sistematitzat.
  • Compta quant de temps a la setmana gasteu en realitzar-lo.
  • Compta els diners que aquesta feina suposa.

Si la despesa d’un sol any que ara assumiu permetés contractar un servei per ajudar-vos a sistematitzar la digitalització d’aquest procés, vols dir que no justificaria fer el canvi? Doncs és molt possible que no necessitis tants diners per a fer aquesta millora.