Fonts i tipografies

201610_Fonts201610_Fonts_NotoLes tipografies i fonts en els ordinadors és un dels temes que més problemes dona alhora de dissenyar pàgines webs, documents i similars. Ja que un cop realitzat, t’arrisques a que si no és una tipografia estàndard o disponible per tothom, després es produeixin efectes nodesitjats.

Ja fa temps que per documents interns intento treballar amb OPEN SANS o amb UBUNTU FONT. Són dues fonts obertes, i que m’agraden la frescor o disseny que incorporen.

Avui, he vist una notícia de que google ha lliberat una nova tipografia o font, lliure, la qual intentarà recollir tots els caracters de totes les llengues del món. La tipografia és diu NOTO i la podeu veure i descarregar aquí. M’ha semblat interessant no perdre l’enllaç. No treballo habitualment amb caràcters d’altres idiomes, però mai està de més tenir aquesta referència a mà. 

 

 

 

 

 

 

 

Infografies professionals

infografies_Si alguna vegada necessites crear alguna infografia de caire professional, existeixen webs de pagament i lliures que et permeten partir de plantilles i faciliten l’arrancada de la mateixa.

Aquí van tres webs on pots començar de manera gratuïta amb il·lustracions força interessants:

 

Error al iniciar apache amb MAMP i Yosemite

M’he trobat ja en dues màquines diferents que amb el sistema operatiu MAC OSX Yosemite, al intentar iniciar apache amb MAMP, aquest es queda aturat i al log no mostra gaire informació.

Pel que sembla és un error d’un dels arxius de configuració i el que és renombrar-lo per què el sistema no localitzi l’esmentat arxiu.

Per solventar-ho és fàcil, només cal anar a:
– Aplicacions / Mamp / bin / apache2 / bin
i un cop allà renombrar l’arxiu envvars per _envvars per exemple. Tornar a iniciar el servei apache i ara ja no tindrem problemes.

Via: http://wpshed.com/quick-tip-mamp-pro-apache-failed-start-os-x-yosemite/

Afegir galeria d’imatges flickr a una web

Segurament, si ets usuari de flickr, t’has trobat en aquell dilema de fer una petita sel·lecció de fotos i penjar-les en una altre pàgina web.

Havia trobat plugins de tots els tipus i colors que et permetien fer o bé un iframe o bé algun component flash que feia un pase de fotografies (slideshow). Dels que havia trobat mai m’havia acabat de convèncer cap.

Ahir, per una altre història vaig trobar una opció que val la pena no perdre: http://flickrit.com. En aquesta web, pots crear ràpidament un component bé sigui iframe o bé el codi html per afegir al teu artícle d’una web, al codi font d’una pàgina html, etc.  Permet filtrar les fotos per etiquetes, per usuari, per galeria… o sigui genial. I a més, el contingut, no necessàriament és un flash player, amb el que això implica que la usabilitat del component serà total: utilitza html5, és adaptatiu, no necessites instal·lar res… el que diriem: bueno-bonito-barato.

URLs automàtiques amb drupal

Per tenir URLs automàtiques amb drupal hi ha un mòdul molt conegut que es diu pathauto. Té moltes funcionalitats lligades sobre tot amb Token, per tal que pots lligar o vincular la URL d’un node o tipus de contingut a la seva ubicació, la data de creació, etc..

En moltes ocasions, necessites crear un seguit de contingut estàtic, jeràrquic i és fàcil o bé que t’oblidis de quina jerarquia té, o que estiguis pensant en blocs i submenús que apareguin en moments concrets… amb el que és genial que drupal et gestioni automàticament el camí de cada pàgina estàtica.

Per fer això, configurarem amb pathauto que la construcció de les URLs sigui:  [node:menu-link:parents:join-path]/[node:title]

D’aquesta manera una pàgina on tinguem per exemple el contingut Organització\Membres\Equip1.htm  ens gestionarà automàticament la construcció d’aquesta URL en funció del menú o ubicació de la pàgina estàtica.

Si això ho lligo amb el mòdul menu_block podem aconseguir que només aparegui un menú secondari en les pàgines que continguin la URL Organització\* facilitant així la navegació i funcionalitat.

 

Vagrant, puphet, vagrantbox… màquines virtuals per desenvolupar

Si desenvolupeu aplicacions, és habitual tenir problemes en el moment de la possada en marxa.  Aquests problemes acostumen a venir donats per les diferències entre l’entorn de desenvolupament i l’entorn final de producció.  Diferències de sistema operatiu, diferències en el motor de base de dades, etc.    Per resoldre això, és habitual tenir màquines virtuals amb configuracions similars.  Normalment he fet això o amb virtualbox o amb vmware (workstation, fusion, esx…).

Em van parlar de vagrant (http://www.vagrantup.com), i té molt bona pinta. A l’estil de drush, però per crear ràpidament un a màquina virtual amb els recursos mínims i igualant al màxim amb el teu equip de producció. I per configurar una màquina ràpidament,  dos recursos molt bons: https://puphpet.com per crear ràpidament un script per vangrantd amb tots els serveis php i base de dades (i a més compatible amb màquines locals, digitalocean, rackspace i amazon o sigui no hi ha excusa), i un segon: http://www.vagrantbox.es on podrem trobar plantilles estàndards de màquines virtuals amb serveis ja instal·lats.

Cada cop hi ha menys excuses per possar-se a desenvolupar en php, en ruby&rails, per drupal, amb symfony, o l’entorn que necessitem.

Testejant l’editor de text sublime text 2

Des de fa temps vaig fent servir textmate o textwrangler com a editors de text ràpids, o eidtors de html i php.   Avui però m’han parlat de Sublime Text 2 i penso que val la pena donar-li una oportunitat.

Primer de tot per què el seu cost “és gratuït” i multiplataforma.  Lo de gratuït va entrecomillat per què pots comprar una llicència per relativament poc cost i ajudar al seu desenvolupament.  I en segon terme, m’ha agradat l’editor per la seva versatilitat i rapidesa alhora de modificar i editar parts reiteratives d’un arxiu (o sigui canviar moltes coses a la vegada).

Hi ha un grapat de videotutorials sobre aquest editor aquí: https://tutsplus.com/course/improve-workflow-in-sublime-text-2/

 

Caixa d’eines per desenvolupament web

http://www.thetoolbox.cc/ és una pàgina web amb un recull d’eines ràpides d’ús per desenvolupament de pàgines web. Utilitats que poeden anar des de la modificació del tamany d’unes imatges amb un navegador, a gestionar codi font java, validació o generació de css…

En definitiva, un enllaç per no perdre per moments de desesperació o de no tenir a mà les eines habituals.

Nou disseny de elpais.com

aelpais.com
elpais.com

Avui s’ha estrenat un nou disseny web de el diari elpais.com.  Ja havia patit alguns petits re-estilings des de que al novembre del 2006 (sí 2006 i sembla una eternitat) va estrenar el disseny anterior i que vaig comentar aquí.

Coses destacables per mi: primer de tot que fan resenya a la portada web del canvi de disseny, dedicant alguns apartats a explicar les novetats.  No entren en aspecte que m’agradarien a mi com eiens per controlar l’accessibilitat, motor o gestor de continguts, rendiment, màquines o servidors per darrera… però sí en alguns aspectes d’usabilitat: ara el menú superior estarà diferenciat per colors.

Si en l’anterior evolució es va canviar de www.elpais.es a www.elpais.com ara, almenys m’ha donat a mi la sensació amb els diferents navegadors que he tafanejat s’ha perdut les tres www. Genial, és una nova tendència que està començat a correr (des de els navegadors com firefox que ho amaguen, a adreces que fan alies o redirigeixen els dominis treien les tres www).

Altre questió a destacar, és que fan servir html5. Genial! les apostes de futur.  Tot i això segueix fent servir flash pels banners publicitaris.  I malgrat les intencions, segueixen apareixent alguns errors de validació en el seu còdi font.

errors elpais.com
errors html5 elpais.com

Malgrat tot, estic convençut que és un canvi més que estudiat i que farà crèixer encara més aquest portal de notícies.

Guia de referència drupal

De guies de referència sobre drupal, n’hi ha moltes i de molt bones. De les millors segur que estan a la documentació de drupal.org, però avui tafanejant n’he trobat una de la universitat de yale que no té desperdici, per la seva simplicitat  i per lo complerta de la mateixa. Enllaç per no perdre: http://drupal.yale.edu/content/getting-started

Editar estils css amb drupal

Si el css no és el teu fort i necessites tocar coses concretes d’un tema desenvolupat amb drupal, t’hauràs trobat amb la sensació que estàs més estona intentant trobar quin div, quina zona o quin element és el que vols tocar que modificcant-lo en sí.

Personalment, tinc una còpia local del lloc que vull editar, i amb el firebug, cssedit i alguna altre eina més acostumo a ensortirme’n.   Avui però he trobat una utilitat que pot facilitar encara més aquest procès.

Es tracta del mòdul sweaver (http://drupal.org/project/sweaver), el qual d’una manera visual permet editar paràmetres i aspectes css del teu lloc “en calent”, o sigui sense haver de pujar/baixar els fitxers css afectats per els teus retocs.

A més, a la web del projecte faciliten un parell de videotutorials per tenir més visió del que es pot fer:

http://www.vimeo.com/15106873 integració drush i sweaver

http://www.vimeo.com/13281932 dissenya el teu theme per drupal en 10 minuts.

dreamweaver i drupal

Ara que surt la versió CS5 de Dreamweaver, veig que realment incorpora funcionalitats que caldrà valorar si es compra o no. Bàsicament per què permet per fi editar de manera “visual” els CSS, i sobre tot per què segons comenten a la web d’adobe s’integra també en diferents CSM com drupal.  Genial.

Doncs avui trobo també de casualitat una pàgina web on han desenvolupant una extensió per dreamwever (mxp) que incorpora tota la api de drupal directament a dreamweaver.   Vamos, que ja no hi ha excusa per fer-los treballar conjuntament. A part d’aquesta extensió hi ha d’altres totes elles interessants.  Enllaç per no perdre’l: http://xtnd.us/

actualitzant wordpress

Farà ja uns dies que per la xarxa es parlava de la sortida de la nova versió del gestor de blogs (i continguts) wordpress.  Cada cop que hi ha una nova versió la mandra s’apodera de mi i queda pendent per dies més relaxats l’actualització d’aquest i d’altres blogs.

Doncs em fa molta ràbia haver de reconèixer que el “petit” dels gestors de continguts actualment de moda li passa la mà per la cara en quant a facilitat per actualització. Ni Drupal, ni Joomla són complicats d’actualitzar (poder joomla és més complexe que drupal), però impliquen certs coneixements (que si ftp, que si script de base de dades…).   En canvi aquesta vegada l’actualització del motor de wordpress ha sigut un clic de ratolí: actualitzar.  I com si d’un sistema operatiu MAC OSX es tractès ha fet l’actualització del gestor de continguts ell mateix: s’ha descarregat al servidor els nous fitxers, ha actualitzat la base de dades i ha aixecat el lloc sense problemes.  Wuau!  i a més han saltat les alertes que alguns dels plugins que faig servir també tenen disponibles actualitzacions per a la versió 2.8 de worpress.

En resum, super fàcil actualitzar.   Molt per aprendre a altres sistemes més robustos -i de pagament- on una actualització és igual a mals de caps i funcionalitats que desapareixen.

Easy CSS Styler

easycssstyler1 Interessant editor CSS on-line (http://www.combine-lab.com/styler/). Per resoldre dubtes ràpids o per anar visualitzant un ID o un bloc concret sense haver de partir de zero. Molt interessant per què a més et permet copiar el codi generat o descarregar-lo. Qui no modifica un css és ja per mandra, no per falta d’eines disponibles a la xarxa. Personalment faig servir el CSSEdit al mac però potser serà qüestió de començar a considerar aquesteines per fer proves de manera més ràpida sense afectar a llocs en producció.

Modificar plantilles de drupal, joomla, wordpress…

Si vols modificar sense gaires complicacions una plantilla d’algun dels teus gestors de continguts favorits (drupal, wordpress..), existeix una eina anomenada  Artisteer força bona que et facilita molt la feina inicial. L’eina és de pagament, però si no vols dedicar gaire temps a la teva web és una bona alternativa.    A més, podeu veure un video-tutorial molt bo de com funciona l’aplicació: http://www.nosolocodigo.com/artisteer-herramienta-para-crear-plantillas-de-joomla-wordpress-y-drupal.

Si de totes maneres prefereixes fer a maneta les modificacions o conèixer més a fons com funciona el tema de les plantilles en joomla pots veure com modificar la plantilla en 1 hora: http://design-notes.info/tutorial/joomla/turn-html-into-a-joomla-template-in-one-hour/ interessant per conèixer com funciona per dintre el sistema de plantilles.