maquetacion

Miércoles, 30 d enero d 2013.

Tutorial: Transforma tu web en Responsive Design

Internet no para de evolucionar en todos los sentidos, incluso en su tecnología. Hay cosas que se van poniendo de moda y luego, poco a poco, se van dejando de lado, otras en cambio llegan con suficiente fuerza como para que todos sepamos que marcan el "camino a seguir".

El "Responsive Design" o en español "Diseño adaptativo", es una de estas últimas. Un sistema basado en los estándares web actuales que permite que nuestras webs se adapten a la pantalla del usuario que está viéndolas. El Responsive Design se ha puesto muy de moda con el auge de la navegación movil, pero va mucho más allá, se trata de webs con diseños inteligentes (smart que dirían los ingleses) que facilitan la usabilidad de las webs en funcion de quien las observa.

Pero el Responsive Design no son simples añadidos a una web, es una filosofía del desarrollo del front de la misma totalmetne distinta y que abarca tal cantidad de detalles que resulta impracticable para muchas empresas y realmente complejo para otras. Realmente yo a día de hoy no recomiendo realizar webs en Responsive Design, pues no estamos preparados para ello, pero si que podemos sacar ciertos conocimientos sobre estas aplicaciones para hacer nuestras webs seudo-adaptables y mejorar la experiencia del usuario. Quizás no hasta el nivel que los diseños responsive que vamos viendo nos marcan pero si con suficiente calidad como para que el ratio "mejoría/coste" nos merezca la pena.

[...]

¿Te interesa? Sigue leyendo...

20 Comentarios, leelos

Temas Relacionados: maquetacion tutoriales

Autor:

Sábado, 19 d enero d 2013.

Aprende WPO con la documentación de HTML5 Boilerplate

Mañana de sábado, primeras horas del día, buen momento para "cotillear" entre proyectos abiertos y todos esos temas que siempre tienes que mirar y nunca te da tiempo.

Esta mañana le ha tocado a Boilerplate. El que es, junto con Bootsrap uno de los frameworks html5 más extendidos por la web. Estos frameworks no son otra cosa que un conjunto de soluciones a los problemas más comunes al desarrollar el front de nuestras webs (lease HTML5 + CSS3 + Nuevas Funcionalidades JS + Responsive Design + Otros detalles).

El caso de Boilerplate, sea o no la solución final a usar en nuestras webs, esconde muchisimas lecciones de desarrollo de fronts optimizados. Solo acercándonos un poco a él podemos sacar muchas buenas lecciones sobre como mejorar la velocidad de carga de nuestras webs. Trucos geniales y explicaciones que te hacen pensar...

[...]

¿Te interesa? Sigue leyendo...

Comenta este artículo

Temas Relacionados: Enlaces maquetacion programacion

Autor:

Viernes, 18 d mayo d 2012.

CSS3 “display:box”: Maquetación con el modelo de caja flexible

Hacía mucho que no escribía un post sobre desarrollo puro. Quizás demasiado. Esta claro que a algunos no os va a a interesar en absoluto, pero a veces hay cosas que aprendes y que debes compartir.

Como sabéis (si me leeis, claro) no me gusta quedarme en las modas y juzgar la utilidad de las nuevas tecnologías por sus aspectos más espectaculares, sino por lo que aportan en su día a día. El mundo del desarrollo web esta plagado de estas modas y valoraciones de tecnologías completas por sus detalles puntuales más vistosos. Pasó con ajax, con los frameworks javascript, con canvas y ahora con HTML5, CSS3 y las nuevas funciones de javascript.

En este caso quisiera tocar una de las mejoras más importantes que se nos vienen encima con CSS3 y que sin duda, una vez se estandarice del todo conseguirá que la mayor parte de los problemas de maquetación actuales desaparezcan: el modelo de caja flexible.

[...]

¿Te interesa? Sigue leyendo...

7 Comentarios, leelos

Temas Relacionados: maquetacion tutoriales

Autor:

Miércoles, 15 d febrero d 2012.

Maquetación SEO en HTML5: Div, Article, Section o Aside?

La maquetación en HTML5 poco a poco va imponiendose en el desarrollo web actual. La desgracia es que como tantas otras veces estamos haciendo las cosas más por modas que por que tengan algún sentido. Así pues, nos encontramos muchas webs que están creadas en HTML5 solo porque algún cliente o jefecillo ha decidido que quiere webs en HTML5 sin dar mayores explicaciones.

El problema que estamos teniendo realmente es que aunque parezca mentira -al menos, para el que entienda un poco de todo esto- actualmente empiezan a proliferar este tipo de webs:

  • Webs en HTML5 hechas con dreamweaver y en tablas
  • Webs en HTML5 con 200 "div"
  • Webs en HTML5 en las que simplemente se han reemplazado los 200 divs por 200 "section"

En mi opinión aun no estamos en el momento de desarrollar en HTML5, pero queda tan poco para que lo sea que empieza a ser importante que nos tomemos todo esto en serio.

Las etiquetas Html5 solo tienen una ventaja respecto a XHTML: Son semánticas de por si... si no vamos a usar esta semántica, ¿quiere alguien decirme que coño estamos haciendo?

[...]

¿Te interesa? Sigue leyendo...

24 Comentarios, leelos

Temas Relacionados: maquetacion seo

Autor:

Miércoles, 21 d diciembre d 2011.

SEO OnPage: Indicando los Autores del contenido

Hay tres grandes motivos por los que en SEO actual tiene mucho sentido preocuparse porque Google sepa quienes son los autores del contenido de nuestras páginas.

1. No ser penalizado erroneamente por Google Panda. Es decir, si nos preocupamos por conseguir que Google entienda quien ha escrito el contenido, habrá mucho menos riesgo de que al copiarnos un tercero Google asigne mal la autoría del Documento y se lo queden ellos penalizándonos a nosotros.

2. Conseguir el Rich Snippet de Autor (el resultado en google con la foto y nombre del autor) y así acaparar un mayor número de clicks (¡viva el CTR!)

3. Promocionar a nuestros redactores, haciéndolos más conocidos socialmente de forma que su autoría forme parte de nuestra marca. Las personas, por fin se están volviendo esenciales en Internet.

Dado que tiene mucho sentido conseguir que Google sepa asignar bien la autoría de los contenidos, seguidamente indicaré que pasos hay que dar para poder mejorar esta muchísimo...

[...]

¿Te interesa? Sigue leyendo...

6 Comentarios, leelos

Temas Relacionados: maquetacion seo tutoriales

Autor:

Viernes, 16 d septiembre d 2011.

SEO On Page: Uso de etiquetas ‘link’ para páginas relacionadas con la actual

Ayer estuve explicando entre otras cosas la existencia de las etiquetas link que existen para indicar en una página que otras páginas del dominio tienen una relación clara con la misma y así ayudar al buscador a entender mejor nuestra estructura de sita. La cosa es que va Google y casi en el mismo momento hace publico en su blog para webmasters que al menos las etiquetas de rel=pre y rel=next ya las lee y entiende perfectamente.

Sinceramente, no creo que esto sea nuevo. ¿Como no va a leer estas etiquetas que llevan ya un tiempo existiendo? Otra cosa es el caso que les hiciese que sin duda ahora será mayor. Ya que entramos en el mundo de las etiquetas en la cabcera de una página creo que lo suyo, es conocer todas las importantes y no quedarse solo en el next y prev... Por eso, quería compartir esta lista de las que considero yo las más importantes:

[...]

¿Te interesa? Sigue leyendo...

1 Comentario, leeló

Temas Relacionados: maquetacion seo

Autor:

Viernes, 06 d agosto d 2010.

Las 10 cosas que un maquetador web debería saber

¡Atención! Aquí viene uno de esos post soberbios en los que una persona que hace tiempo que no se dedica a una actividad concreta profesionalmente recomienda a la gente de la profesión los mínimos que deben cumplir si quieren creer que hacen bien su trabajo...

Bromas aparte, la profesión de maquetador web, aún hoy, no es muy entendida pero existir existe y la diferencia entre contar con uno bueno en tu equipo es asombrosa en los resultados. A todos aquellos que se dedican al ramo simplemente hacerles unas recomendaciones -totalmente subjetivas- de cosas con las que terminar de dar un toque de calidad a un trabajo que últimamente ha mejorado mucho en posibilidades.

[...]

¿Te interesa? Sigue leyendo...

20 Comentarios, leelos

Temas Relacionados: maquetacion

Autor:

Viernes, 16 d abril d 2010.

Flash debe morir (y va a hacerlo)

Flash ha sido y es algo grande en Internet. Un Internet que ha estado hasta hace poco atrasado en formatos en comparación con lo que los ordenadores y el ancho de banda de las conexiones son capaces de mover. Flash, desde sus inicios cuando Macromedia aun existía, ha permitido que Internet prosperase: ha dado dinamismo a las páginas, ha permitido incluir audio y más tarde vídeo de una forma cómoda e incluso antes de que Ajax se popularizase la carga asíncrona ya era algo común en Flash.

Sin embargo este formato trae consigo dos grandes contras por las que una gran parte de la comunidad de desarrolladores web deseamos -desde lo más profundo de nuestro ser- poder Matar de una vez todo lo que use y 'huela' a Flash.

[...]

¿Te interesa? Sigue leyendo...

6 Comentarios, leelos

Temas Relacionados: maquetacion programacion

Autor:

Lunes, 25 d enero d 2010.

Microformatos y Resultados de Google

Corría la noticia por Twitter este fin de semana: Google entre sus nuevos añadidos empieza a incorporar links directos a eventos que tengas definidos en tus páginas en sus propios resultados. El formato escogido es el siguiente:

events-rich-snippets

Como se ve, es un cambio importante que permite a los usuarios ir directamente al evento que les interesa pero que mejor aún, llama más la atención y por tanto tendrá un mejor CTR en Google. Pero este no es el único movimiento que viene haciendo Google en cuanto al formato de sus resultados, ya empiezan a ser unos cuantos los añadidos al resultado y muchos se basan en lo mismo: los microformatos.

Los microformatos son pequeños patrones a seguir al crear la maqueta html. Utilizando bien los contenedores y usando nombres de clases establecidos se informa de contenidos concretos que siempre usan las mismas unidades de información: direcciones, opiniones, productos, eventos, noticas. Las informaciones más usuales de las páginas web tienen un microformato asociado que permite indicar exactamente que representa cada linea de nuestro contenido.

Google está haciendo un esfuerzo por adoptarlos y para ello sacó en su día la Rich Snippets Testing Tool y lo que es mejor, una documentación sobre como crear los microformatos elaborada por ellos mismos. Esto, que nació como una anécdota cada vez empieza a ser más patente en los SERPS (Search Engine Results Pages) y es hora de que todos los adoptemos. La maquetación semántica ya no basta, usemos los microformatos de una vez por todas.

Con los microformatos obtendrás (o te será más fácil obtener):

  • Una línea extra en tu resultado resumiendo el microformato principal:
    Usando hcard o hreview añadimos una línea gris antes de la descripción de tu resultado. Esta resume los datos principales del hcard o la puntuación (con estrellas y todo) y el votante de la opinión/revisión.
  • Indicando la fecha de publicación:
    Ayudando a Google a entender que existe una fecha en el post (con hnews o simplemente usando la clase suelta) forzamos que aparezca la fecha al principio de nuestra descripción (aunque esto también se consigue por otros medios como por el rss).
  • Link de resultados a eventos:
    Como acabamos de ver, google ofrece/ofrecerá links directos a los eventos que se indiquen como microformatos

Pero esto seguramente no acabará aquí. Si seguimos este patrón podríamos terminar con cosas como estas (son ideas, no me toméis demasiado en serio):

  • hproduct mostraría también descripciones de productos de una tienda directamente. De hecho algunos agregadotes ya disponen de funcionalidades parecidas
  • hnews debería ayudar a clasificar mejor las noticias y los posts de un blog y por ejemplo, ofrecer sus categorías
  • hcard podría llegar a tener un formato de tarjeta de visita o responder mejor al posicionamiento por nombres propios de personas
  • hreview por el momento solo muestra la primera opinión que se encuentra en el html, pero podría llegar a desglosarse para webs de opiniones

Y a saber que más... lo importante es que ya no solo sabemos que Google entiende los microformatos, sino que empieza a ser palpable su uso.

[...]

¿Te interesa? Sigue leyendo...

19 Comentarios, leelos

Temas Relacionados: maquetacion seo

Autor:

Martes, 22 d diciembre d 2009.

¿Necesitas un SEO o un equipo de desarrollo más profesional?

A medida que vas conociendo como trabajan distintas empresas en sus desarrollos web te das cuenta de lo ciegos que están muchas veces los responsables. No es que esta ceguera no sea realmente culpa suya por no interesarse lo suficiente en lo que al fin y al cabo es SU producto, pero si que es cierto que equivocan el tiro y ni siquiera se dan cuenta. Muchos desarrollos web que incluso a día de hoy se venden, son mediocres.

Cuando te contratan para hacer SEO -o como nuevo SEO-, en este tipo de empresas, caes mal. Es inevitable, viene una persona que en un principio parece que debería dedicarse más a marketing que a otra cosa y empieza a criticar el trabajo de casi todo el equipo de desarrollo. Un SEO se da cuenta, de forma muy rápida, de todas las carencias que pueda tener un equipo de desarrollo. Además, es capaz de justificar económicamente la necesidad de arreglarlas. Es por esto que muchas veces acaba siendo el SEO el que obliga a dar ese toque de "calidad" a los desarrollos y cosas vitales para cualquier desarrollo profesional se confunden y parece que tan solo se hagan por SEO...

[...]

¿Te interesa? Sigue leyendo...

6 Comentarios, leelos

Temas Relacionados: maquetacion programacion seo

Autor: