Convertir una plantilla de blogger en responsive y no morir en el intento

Aviso, este post va a ser un poco técnico y quejica. Necesito desahogarme como buena informática que soy y dejar constancia de cómo a veces la menor chorrada hace que pierdas horas de trabajo para luego solucionarlo en… 1 hora como mucho ¬¬

Esta semana, después de la gracia de 000whebhost, he estado intentando crear una nueva versión de la web difunta, pero esta vez con Blogger.

La primera web estaba hecha en wordpress con un theme responsive que me gustaba, así que esa propiedad no quería perderla. Además ahora Google penaliza si tu web no se ve bien en dispositivos móviles, así que había que currárselo un poquito.

Al final ha resultado que no he tenido que currármelo un poquito, sino un muchito. En un principio la plantilla que había escogido, aunque no indicaba explícitamente que era responsive, por código se veía que algo hacía 

<voz_en_off> Eso es… MENTIRA</voz_en_off>

Las etiquetas de Blogger no parecía que se percataran de cuándo se estaba accediendo a través de un dispositivo móvil, así que no podía elegir qué elementos se mostraba según el tipo de pantalla. Revisé blogs y más blogs para probar las diferentes soluciones que sugerían y ninguna me funcionaba. Al final iba a tener que morir al palo de usar las plantillas de móvil que Blogger te ofrece por defecto, aunque fuera fea rematada.

Por suerte, no sé cómo, llegué a un blog que decía que las etiquetas tipo <b:if cond=blog.mobile> no funcionan a la hora de presentar por pantalla. Aaaaaaaargh! Tres tardes intentando apañar el diseño con esas etiquetas para nada… Así que nada, a tirar de estilos y a hacer media queries.

Yo he creado tres tipos de pantalla: escritorio, tablet y móvil. Algo así:

<!-- = / Responsive / = -->

<style>

    @media screen and (max-width: 2000px) {

           /*tus estilos aqui

      }

    @media screen and (max-width: 780px) {

      /*tus estilos aqui

      

    }

    @media only screen and (max-width : 640px) {

         /*tus estilos aqui

      }
</style>

Y oye! mano de santo! Todo empezó a funcionar como yo quería y en muy poco rato conseguí que se mostrara contenido cómo y cuándo quería.

Así que ya sabéis, si alguien está en fase desesperación con la plantilla, a respirar hondo y a hacer todo por CSS.

Mis recomendaciones son:

1. Paciencia. Y prueba y error
2. Saber qué quieres mostrar en la versión mobile.
3. Usar diseño líquido, creando todos los estilos con %, nada de medidas absolutas
4. Jugar con display:none en las versiones para móvil, para quitar elementos no deseados (sliders que ocupan mucho y no dicen nada, elementos exclusivos para pantallas grandes...) y display:inline/block para mostrarlo cuando toque.
5. Tamaño de letra adecuado
6. Indicar que las imágenes como mucho son max-width:100%, para evitar el feo scroll horizontal

Espero que os sea útil. ¡Feliz domingo!

Seguir leyendo..

HTML5

Ayer acabé el curso el curso de HML5 y CSS3 que estaba realizando.¡Me ha encantado! Me ha abierto un nuevo mundo de posibilidades... Es muy triste que haya necesitado obligarme a hacer un curso (aunque fuera online) para meterme en este tema, porque además me gusta.

La idea de dar significado semántico al contenido... ya era hora! Todo lo añadido son cosas que caen de cajón (por fin esquinas redondeadas sin utilizar imágenes!, por fin se pueden utilizar degradados!, etc etc etc)

Con muy poco código/propiedades consigues unos efectos espectaculares. La lástima es que no todos los navegadores lo soportan, pero todo se andará! Ahora a practicar y a tunear las webs utilizando lo aprendido.

Seguir leyendo..

Redescubriendo javascript

El segundo curso online que estoy haciendo es "Diseño web avanzado con HTML5 y CSS3". La verdad es que este me está gustando más que el de Android que estoy haciendo. Supongo que el tema web me llama más, no se... O la forma de impartirlo que es más ameno que  ver videos y luego hacer los ejercicios, como ocurre con la plataforma Miriada X.

El primer módulo, que ya he acabado, es una introducción a Javascript. Siempre, por temas de accesibilidad, lo había visto como una peste. Pero que en el propio curso te indiquen que la página debe funcionar sin js activado, como hacerlo... gana puntos :) También hacer algo más que alerts y validaciones de formularios hace mucho :D

Así que ahí estoy. La semana que viene empezamos con HTML5, a ver que cambios trae. Hace días que quería tocar este tema, pero la vagancia me podía. Ahora no tengo excusa!!!!!!

Feliz jueves a tod@s

Seguir leyendo..