Mario González
Blog sobre desarrollo web
Cuando accedéis a una web desde un móvil, lo más seguro es que el menú de navegación esté oculto para dejar más espacio disponible al contenido principal, y que haya un icono de tres líneas horizontales para desplegar el menú. A ese icono se le llama hamburguesa. En este tutorial vamos a ver cómo hacer que el icono de la hamburguesa se convierta en una cruz cuando se despliegue el menú, y que vuelva a su apariencia hamburguesil tras cerrarlo.
(más…)
Estás montando un negocio, quieres vender a través de internet o simplemente te apetece tener un blog, y no tienes ni idea de cómo se hace una web. En las farolas has visto carteles de estudiantes que hacen webs por poco más de lo que vale una cerveza, también has visto anuncios en la tele, alguien te ha hablado de una agencia que además de hacerte la web te gestiona todas tus redes sociales (que no tienes), te han dicho cuarenta veces la palabra WordPress, a ti eso te suena a blog, no sabes si una web cuesta 90€ o 6000€… A ver, ¿cómo funciona esto de contratar una web?
(más…)
Has pasado por esto multitud de veces. Instalas un WordPress, y ahí está, mirándote, la dichosa carpeta uploads (bueno, aún no está, pero sabes que aparecerá en cualquier momento). Te preguntas, como siempre, qué hacer en esta ocasión. La tentación de usar sudo y darle permisos 777 a la carpeta es muy grande. Sabes que no es recomendable y que es un agujero de seguridad, pero has intentado varias veces entender cómo funciona eso de los permisos y nunca te acabas de enterar. ¿Entras otra vez en google y te paseas por foros de frikis linuxeros que se pelean entre ellos para enterarte de una vez qué deberías hacer con la carpeta uploads? ¿O recurres, una vez más, al mágico sudo y al mágico chmod 777 para resolver todos tus problemas? En vez de eso, te invito a que leas este artículo donde probablemente te quede un poco más claro todo esto de los permisos.
(más…)
Inauguramos la nueva temporada del blog con un post sobre una de las características de CSS más nuevas (lleva algunos años con nosotros, pero no tantos siendo soportada por los navegadores) y menos aprovechadas: las variables CSS, también conocidas como Custom Properties.
Los que empezamos en esto de las webs por el backend, es decir, programando más que maquetando, recibimos con los brazos abiertos cualquier avance en el mundo del frontend que se dirija a asumir técnicas ya asentadas en el mundo de la programación. Sin variables sería imposible programar, y es una característica que echamos mucho de menos al meternos en el desarrollo HTML/CSS.
(más…)
Cuando desarrollamos una web generalmente lo hacemos para un navegador concreto. Durante el proceso (o al final de él, práctica nada recomendable si no queremos llevarnos sustos) tendremos que ir comprobando la web en el resto de navegadores. Dependiendo de varios factores (entre ellos, la calidad de nuestro código) nos llevaremos más o menos sorpresas, pero lo normal es que casi siempre encontremos inconsistencias entre navegadores.
Publicamos aquí una traducción del artículo Cross-Browser Debugging CSS, de Nicole Sullivan, en el que explica varias técnicas que nos ayudarán a la hora de depurar nuestro código y encontrar qué está haciendo que el diseño falle en algún navegador.
(más…)
En la actualidad aún no hay una solución ideal y sin problemas asociados para utlizar imágenes en responsive web design. Sin embargo, hay muchas propuestas, cada una con sus ventajas e inconvenientes, que nos permiten incluir imágenes flexibles en nuestros diseños. Podemos ver un listado de todas las técnicas que están recopilando Chris Coyier y Christopher Schmitt en esta hoja de cálculo de Google.
En este artículo vamos a hablar de una de estas soluciones: Adaptive Images. Veremos en qué se basa su funcionamiento, qué tenemos que hacer para implementarla y qué ventajas y desventajas tiene.
(más…)
Traducción del artículo Five steps to gettin’ flexy in responsive web design, de Dave Rupert, donde da una serie de consejos básicos basados en su experiencia con el responsive web design.
(más…)
En este minitutorial vamos a crear un formulario HTML en el que algunos elementos estarán ocultos y se mostrarán al rellenar o marcar otros elementos del formulario. Utilizaremos jQuery y transiciones CSS3 para mostrar y ocultar los elementos.
(más…)
A la hora de renderizar los elementos html, los navegadores siguen el llamado modelo de caja o box model. En este artículo explicaremos los fundamentos de este modelo y veremos los conceptos básicos que tendremos que aplicar a la hora de maquetar una web.
(más…)
Cuando estamos desarrollando una hoja de estilos, en ocasiones tenemos que repetir varias veces un mismo color o un mismo tamaño de letra, y muchos de los valores que establecemos como anchos o paddings son resultados de operaciones matemáticas que tenemos que hacer nosotros. Como CSS no es un lenguaje de programación, no está preparado para solucionar estos problemas. Pero en los últimos años han aparecido varios lenguajes preprocesadores de CSS, como LESS, Sass o Stylus, que añaden algunas ventajas de los lenguajes de programación al CSS. En este artículo veremos una introducción a uno de los más conocidos y utilizados: LESS.
(más…)
