Archivos de la categoría Desarrollo

Aspectos a tener en cuenta en un proyecto web responsive

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:

Font Icons y deja de usar Gif icons.

Desde hace poco la tendencia para usar íconos en un diseño web cambió al uso de fuentes, la ventaja principal al no usar GIFs es poder escalar los íconos usando el atributo Font-size dentro del CSS. El “icono” que en realidad es una Fuente se carga desde el atributo :before o :after y como content: “”; , lo que permite insertar un objeto dentro de un tag html sin necesidad de ponerlo directamente en el html. De esta forma al ser una fuete puedes cambiar el color, añadir efecto CSS3 sin necesidad de crear una nueva imagen.

 

Genericons

Son los íconos creados por el Theme Team de Automattic y son usados actualmente en el nuevo Theme TwentyThirteen.

 

FontAwsome

Está basado en Less y tiene una variedad de iconos muy amplia, originalmente pensado para trabajar con el framework BootStrap.

Font Awesome, the iconic font designed for use with Twitter Bootstrap

 

Foundation Icons

Obra de los creadores del framework Foundation Zurb (Sass + Compass). Todavía con pocos íconos.

Foundation Icons Fonts - ZURB Playground - ZURB.com

 

Symbolset (Premium)

Symbolset

Una aplicación diferente, de la mano de oak.is tenemos Symbolset, una aplicación semántica, donde la palabra que usemos cambiará por un ícono. Puedes comprar las fuentes según la necesidad, además de estar bien diseñados su calidad es impresionante.

 

Fontello (generador)

Fontello - icon fonts generator

No lo he probado aún, aunque la idea de poder generar tus propios font icons usando esta webtool es mas que interesante. ¿Alguien se anima a compartir su experiencia con esta webtool?

Pero que es Git o GitHub?, Es lo mismo?, Para que sirve?

wpoctocat

-No trabajes en caliente- Era la frase que muchos administradores de sistemas me decían cuando tocaba el código de un proyecto directamente en el FTP, hacer eso es un riesgo grande ya que puedes dejar a tu cliente sin web por estar toqueteandole las entrañas mientras la web está siendo visitada. -¿Tienes backup?- Otra de las preguntas que siempre debes hacerte a la hora de desarrollar, si usas Time Machine de OSX o cualquier sistema de backup con disco externo sabes que tienes unos backups cada hora de todo el sistema, pero si trabajas en caliente esos backups no se guardan a menos de que bajes el archivo a tu ordenador y este se incluya en las “revisiones” de Time Machine, ahora dejemos TM para el sistema ya que no es lo óptimo para trabajar en grupo y peor de forma remota. -Pero que has tocao!??- Es ese sudor frío que te recorre la médula espinal cuando tu desarrollo deja de funcionar y no sabes porque, ni quien lo modifico, ni cuando ni que linea de código o archivo.

Una de las claves de trabajar como un profesional es tener un entorno profesional y una pieza importante de ese entorno es un repositorio de versiones, ya sea SVN o Git (hay mas). Esta entrada pretende ayudarte a comprender de que se trata Git y Github. Para ello invitamos a Alfonso Alba un profesional que ha creado aprendegit.com un blog especializado en Información y Experienciassobre el uso de Git.

 

Primero. ¿Que es Git? 

Es un software de control de versiones diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones cuando estas tienen un gran número de archivos de código fuente. Wikipedia

Git es un sistema distribuido de control de código fuente o SCM (en inglés Source Code Management). Si nunca has utilizado un SCM, me imagino que la frase anterior te habrá sonado a chino. Si es así, la pregunta que te estarás haciendo ahora es ¿qué es un SCM?

Un SCM es una herramienta que nos resuelve una serie de problemas a todos aquellos que tenemos que trabajar código fuente. “Código fuente” pueden ser muchas cosas:

  • Ficheros HTML / CSS / Javascript
  • Ficheros PHP
  • Ficheros de configuración
  • Documentación
  • … y un largo etc

Si te das cuenta, todos los ejemplos que he puesto tienen una cosa en común: todo son ficheros de texto plano y todos son ejemplos de ficheros que encontrarás en tu WordPress.

¿Y qué problema resuelve un SCM?

Vamos a ponernos en situación: imagínate que acabas de comprarte un nuevo tema o plugin para tu WordPress. Está muy bien, te has gastado 60€ (o 0€ si es gratis) y con ese plugin tienes resuelto el 80% de las necesidades del proyecto que estás haciendo. Ahora sólo te falta desarrollar el 20% restante. Para hacerlo, tendrás que modificar el código fuente que has adquirido:

  • Seguramente tengas que modificar la hoja de estilos CSS y adaptarla a tu diseño
  • Tendrás que utilizar alguno de los hooks para implementar la funcionalidad que te falta
  • Quizás incluso tengas que añadir tu propio tipo de post, crear una interfaz de administración para él y seguramente hacer tu propio de shortcode

Cuando terminas, subes tu código al servidor y publicas tu nuevo proyecto o se lo entregas al cliente. En este momento, el código fuente ya no es el mismo que adquiriste, lo has cambiado. Es ahora cuando te hago las siguientes preguntas:

  • ¿Sabrías decirme dentro de 6 meses qué es exactamente lo que has cambiado del código del plugin del que partiste?
  • Resulta que tu plugin inicial se ha actualizado y ha pasado de la versión 1.5.1 a la versión 1.6 ¿Serías capaz de incorporar todas las mejoras y novedades a tu versión personalizada (en un tiempo corto, no hacerlo todo otra vez)?
  • Con el paso del tiempo el cliente te pide una actualización, se la subes a su servidor y dos días después te dice que lo dejes como estaba porque no funciona bien ¿Podrías volver atrás de forma rápida? ¿Te acordarás de qué líneas de código has modificado con precisión para depurar rápidamente dónde está el error que has introducido en el sistema?
  • El cliente llama a los tres meses diciendo que no funciona el WordPress ¿serías capaz de determinar de forma rápida si el cliente ha modificado el código fuente del proyecto por su cuenta y se lo ha cargado él? ¿o realmente es un bug que no ha salido en tres meses? La pregunta es importante porque el coste del arreglo no sería el mismo según el tipo de mantenimiento o garantía que hayas acordado con tu cliente

Un SCM es la herramienta que nos permite responder positivamente a estas preguntas, y a muchas más.

¿Qué nos aporta git?

  • Auditoría del código: saber quién ha tocado qué y cuándo
  • Control sobre cómo ha cambiado nuestro proyecto con el paso del tiempo
  • Volver hacia atrás de una forma rápida
  • Control de versiones a través de etiquetas: versión 1.0, versión 1.0.1, versión 1.1, etc. Sabremos exactamente que había en cada una de ellas y las diferencias entre cualquiera de ellas dos
  • Seguridad: todas las estructuras internas de datos están firmadas con SHA1. No se puede cambiar el código sin que nos enteremos
  • Mejora nuestra capacidad de trabajar en equipo
  • Merging y branching extremadamente eficientes

 

Segundo. ¿Y que es Github? 

GitHub es una forja para alojar proyectos utilizando el sistema de control de versiones Git. Utiliza el framework Ruby on Railspor GitHub, Inc. (anteriormente conocida como Logical Awesome).

Desde enero de 2010, GitHub opera bajo el nombre de GitHub, Inc.

El código se almacena de forma pública, aunque también se puede hacer de forma privada, creando una cuenta de pago. Wikipedia

 

¿Recuerdas la primera frase del artículo? “Git es un sistema distribuido de control de código fuente o SCM”. Que git sea distribuido quiere decir que está preparado para poder trabajar en equipos distribuidos (es decir, cada uno en su casa) de forma eficiente. Imagínate que tú estás en España y yo en Rusia ¿Cómo hacemos para coordinarnos? ¿Cómo sé yo qué código has tocado tú y viceversa?.

Este problema git lo resuelve con herramientas un poco complicadas de configurar si no tienes la experiencia y conocimientos adecuados (Servidores SSH, claves públicas y privadas, etc). Si eres administrador de sistemas y tienes tu propio servidor, no tardarías mucho en hacerlo. En caso contrario, Github te facilita toda la infraestructura para trabajar en equipos distribuidos a través de una interfaz web la mar de cómoda.

¿Y me interesa usar github si trabajo yo sólo? Yo lo hago, por la sencilla razón de que si tienes una copia de tu código fuente en github, tienes un backup de todo el proyecto completo. Ese backup incluye no sólo el código que tienes ahora sino también de todo el historial de modificaciones que el código ha sufrido desde el primer día. Esta copia la puedes recuperar en cualquier momento y continuar trabajando desde cualquier ordenador como si nada… pero esto sería ya tema para otro artículo.

 

 

Invitamos a todos visitar aprendegit.com seguir sus excelentes y fáciles tutoriales orientados al uso de Git con Apps o Línea de comandos. Gracias Alfonso 🙂

Como instalar wordpress en modo local con una App

Siempre es recomendable tener un entorno de pruebas o preproducción y otro público o de producción, esto nos ayudará a no cometer muchos errores a la hora de hacer cambios y sobre todo no trabajar en caliente, directamente en el servidor.

Buscaba una forma de trabajar en modo local de forma sencilla. El tema de poner un wordpress en modo local suele ser engorroso si no estás familiarizado con el funcionamiento y personalización de un servidor, ya que la idea de una instalación local de wordpress es tener un servidor en nuestra máquina que nos permita trabajar como si fuese el servidor web público donde está alojada nuestra página.

Esto mas otras razones me llevó a a buscar alguna forma simple o un tutorial y lo que encontré fue una de las apps mas útiles para los que nos dedicamos a trabajar con WordPress, se llama serverpress, es un programa para windows y mac que permite tener un servidor local con tan solo instalar la app, pero eso no es todo, es un servidor pensado para wordpress y la app es un “instalador” de WP, por lo que no tenemos que descargar el .zip de wp.org, crear la Base de Datos y empezar la instalación, esta ServerPress gestiona todo, tu solo le das un nombre a tu instalación, es decir el dominio, y listo, ya tienes tu WP local. Con todas las funcionalidades de un servidor web “estandar”.

Personalmente he adquirido la versión premium que permite lanzar instalaciones multisite además de poder importar o exportar una instalación, algo muy útil cuando quieres subir todos los cambios a tu server web. Una opción muy interesante ahora que casi todo proyecto debe tener su visualización móvil es que tiene una opción que te permite compartir por wifi el servidor y por lo tanto con una IP acceder a la página desde tu dispositivo móvil.

El pase de diapositivas requiere JavaScript.