Iconmoon.io App

Posted on por
Responder

En un post anterior hablamos sobre los Font Icons, que tiene una gran ventaja en comparación de los íconos en formato imagen.

Pero, nos compensa descargar una fuente de íconos que por un lado pesa lo suyo y que por otro trae una gran cantidad de íconos que no llegaremos a usar en su totalidad.
Muchas veces utilizas solo relacionados a las redes sociales mas utilizadas.

Para evitar esa sobrecarga de peso y opciones tenemos IcoMoon.io y su App, que además de permitirnos crear nuestros propios íconos también nos permite filtrar los que queremos usar, crear los archivos de fuentes necesarios y descargarlos en un archivo .zip que nos ofrece una demo y un style.css con el ejemplo de como integrar la fuente en nuestro proyecto.

Y que mejor que unas capturas :)

El pase de diapositivas requiere JavaScript.

Aspectos a tener en cuenta en un proyecto web responsive

Posted on por
Responder

Vamos a analizar en que pensar cuando queremos hacer una web responsive como dios manda.

Por supuesto en el Diseño. A la hora de pensar en el diseño debemos tener en cuenta que debe poder adaptarse a los diferentes dipositivos como móviles, tablets, etc.. en algunos casos encontramos frameworks en los que primero se diseña la versión móvil, luego se va a la versión tablet y es al final cuando diseñamos la versión desktop.

Pero claro, luego están los diferentes formatos de pantalla a tener en cuenta, con lo que que debemos saber que podríamos mostrar vídeos o fotografías de mayor tamaño a mayor tamaño de pantalla, o ajustar un diseño específico para laptops.

Y que pasa con los SO?
Podemos mostrar contenido sólo para iOS o sólo para android o Windows Phone  sabiendo que los “selects” funcionan de manera diferente en cada caso y teniendo en cuenta que algunos efectos que van bien en desktop como los “mouseover”,”rollovers” o “dropdowns” en “mobile” no van bien.

Y los iconos o gráficos?
Pues éstos se tienen que hacer para cada dispositivo, porque un icon para iphone 3G no tiene el mismo tamaño y resolución que un icon para “iphone retina” o “ipad retina”, incluso ahora que hay macbook retina hay que hacer el ícono adaptado a su tamaño. Además todos los íconos deben estar en un sprite para que la web cargue una sola imagen con todos los elementos. Este sprite se va mejorando y editando mientras se maqueta.

Por otro lado, es una buena opción es usar fonticons, lo que permite controlar los íconos como si fuesen fuentes tipográficas, controlando así su tamaño, color o permitiendo algún efecto CSS3 o de animación de forma mas fácil. Aunque esto no remplaza el usar íconos de imágenes para casos donde no exista una fonticon aplicable. Algo que por ejemplo se debería preparar para diferentes resoluciones de pantalla sería el logotipo de tu página o algún simbolo especialmente diseñado.

OJO: Esto no se aplicaría a las fotos que se suban al sistema, es decir al repositorio de Media del mismo WP, sólo a las fotos que se carguen desde el CSS y no desde el CMS.

Debemos también saber que hay dos tipos de slider, fluidos y responsive.

  • En el fluido el alto del slider se ajusta según el ancho de la imagen que varía según el ancho de la pantalla del dispositivo. Ej: Orbit de foundation.
  • En el responsive el alto no varía y se ve mas o menos imagen según el ancho de la pantalla. Ej: Ver spacebox.

 

Importante la tipografía. Aquí entramos en un aspecto complejo ya que no sólo hay que controlar el tamaño de las fuentes, sino decidir el tamaño adecuado según el tamaño de monitor. Teniendo en cuenta que la distancia que tiene la pantalla de un portátil a los ojos del usuario no es la misma que la distancia que hay con la pantalla de un móvil, una tablet o de un monitor en sus diferentes tamaños, sin hablar ya de una SmartTV.

Por otro lado y como una buena opción podemos usar webfonts, las cuales se pueden cargar desde servicios de terceros o desde el mismo CSS como archivos de fuentes usando @font-face.  

Elegir un Framework con el que te sientas cómodo Debemos intentar encontrar un framework que nos aporte un entorno agradable a fin de usarlo también en futuros proyectos los que nos facilitará bastante la vida. Una vez que nos hemos familiarizado con uno en concreto podemos evolucionar con él y usarlo de la forma mas efectiva.

Yo cada vez me decanto mas por foundation, para íconos Font-Awasome, jQuery, Less, Sass y algún que otro minified (reductores de peso de archivos).

Usar foundation no nos limita a fijar el ancho de la web a 960px ni a sólo 12 columnas con un espaciado de 30px cada una, podemos definir nuestro grid y crearlo. Ej: 18 col, 10px gutter, fluid + fix.

Foundation Icons Fonts - ZURB Playground - ZURB.com

Nunca olvidemos el Contenido & SEO Esencialmente todo el contenido será gestionable, TODO, aunque luego al cliente le demos acceso a unas partes y otras no. Podemos crear todo tipo de campos y funcionalidades, pero hay que definir bien que creamos y como funcionará.

El análisis SEO del contenido se debe aplicar en el Theme, y es necesario que el diseño indique que tipo de tag usa, H1, H2, a, ul, ol, etc. Necesitaríamos el informe de análisis SEO para aplicar las keywords también en el código si así lo indica el analista.

Sin olvidar los PSDs Un psd bien organizado ahorra mucho tiempo.

Enlaces:

miniEntrevista : Paula Gual

Posted on por
1

Una de las maravillas de WordPress es lo fácil que es empezar a usarlo, dar los primeros pasos como instalar un Theme, Instalar y Activar plugins es algo que la comunidad ha puesto mucho esfuerzo en hacerlo entendible para todo tipo de público. Así es como nacen nuevas y frescas ideas, ideas que necesitan de un dominio, pasión y dedicación. Y así es como Paula Gual que no tiene nada que ver con el mundo de la programación o online ha puesto en marcha un blog donde nos cuenta algo que le apasiona, y de eso van los blogs, gente apasionada por algo que toma la iniciativa de comunicarlo. Paula nos cuenta su experiencia así:

El pasado 4 de marzo lancé el blog de utensilios de cocina el www.elpelagambas.com . Es un blog compartido con otra bloguera, Susana. Y estoy planificando la migración de otras dos webs de la empresa.

 

 

¿Porque te decidiste por WordPress?

WordPress en mi opinión, es el CMS para blogs más completo y versátil. Me proporciona todas las opciones que necesito tanto en lo que es el diseño, teniendo en cuenta que no soy diseñadora, como en la parte tecnológica, teniendo en cuenta que no soy informática ni programadora.

¿Que fue lo mas complicado de hacer en tu blog?

Creo que lo más complicado fue elegir el nombre aunque pueda parecer una tontería. Y en cuanto a WordPress elegir un theme que cumpliera con los requisitos predefinidos (ligero, opciones en theme, responsive, etc).

¿Cuantos plugins utilizas y cual consideras mas útil?

  • Los plugins que utilizo en el blog son:
  • Shareholic: para que se pueda compartir en redes sociales.
  • Related Posts by Zemanta: para los posts relacionados.
  • Word Press Popular Posts: para los posts más leídos
  • All in one SEO: para el SEO
  • Google XML Sitemaps: para crear los sitemaps automáticamente
  • CodeStyling Localization: para traducir el theme, los plugins y los widgets
  • Akismet: para el SPAM

Más útil, pues un poco todos, si no no los usaría. Pero el Related Posts me sorprendió por la cantidad clics que tiene. Creo que es una buena manera de aumentar las páginas vistas por visita.

 

¿Como consigues la información para publicar en tu blog?

Los utensilios de cocina son en sí uno de mis hobbys, de un viaje puedo volver antes con un utensilio de cocina raro que con una miniatura de algún monumento local. Así que muchas de las cosas que aparecen las tengo, o las quiero tener.

Por otra parte, ahora que tengo que generar contenidos más allá de mi propia experiencia, tengo una lista de fuentes (algunas con rss y otras que consulto periodicamente) que me dan contenido. Algunos ejemplos son los blogs de cocina, las propias marcas de utensilios, blogs de otros países, etc…

 

¿Cuanto tiempo dedicas a tu blog?

Fueron aproximadamente tres meses de trabajo para la puesta en marcha, dedicándoles unas 3-4 horas a la semana.

Ahora, son unas 3-4 horas semanales a escribir. Por otra parte, otras 2 horas al mantenimiento del blog, depende de las actualizaciones de WordPress, Theme y Pluggins que haya. Comentarios que contestar, etc.

Por suerte en nuestro caso somos dos personas en el blog, así que nos repartimos ambos trabajos – escribir y back office – si no sería prácticamente imposible para sola mi sacar 6 posts semanales.

 

 

Para saber mas de Paula puedes seguirle en tu twitter @elpelagambas o visitar su www.elpelagambas.com.