Responsive Design: Uso de las propiedades max-width y min-width

Responsive Design: Uso de las propiedades max-width y min-width

Tres días hace ya que expliqué el uso de la etiqueta meta viewport. Hoy explicaré el uso de las propiedades max-width y min-width, dos propiedades de CSS3 que serán clave en el Responsive Design. Los nombres de estas propiedades definen bastante bien la función que realizan: max-width : Definir un ancho máximo. min-width : Definir un ancho mínimo. En Responsive Design toman mucho protagonismo porque usando estas dos propiedades en los media queries (tema que trataré en el próxima entrada) junto con la etiqueta meta viewport, van a permitir dar estilos concretos a un sitio web en función del ancho de la … Sigue leyendo

Responsive Design: Uso de la etiqueta meta viewport

Responsive Design: Uso de la etiqueta meta viewport

Hace unos días expliqué qué es el Responsive Design. También comenté que iba a hacer unas entradas en el blog explicando el uso de varias cosas de esta “filosofía” del Responsive Design. Pues esta será la primera de esas entradas, en la que explicaré el uso de la etiqueta meta viewport. Cuando una web no está adaptada a dispositivos móviles, y se quiere ver desde uno de ellos, casi seguro que ha de hacerse uso del zoom, cosa que se puede llegar a hacer muy engorrosa. Si además de tener que ir desplazándose por la web, hay que ir haciendo más o … Sigue leyendo

¿Qué es el Responsive Design?

¿Qué es el Responsive Design?

Cuando a principio de mes retomé el blog con un nuevo diseño, comentaba que el nuevo diseño lo había realizado con HTML5 y CSS3 para hacer Responsive Design, y comentaba muy por encima en qué consistía. En esta entrada trataré de explicarlo de una manera más detallada. El Responsive Design supongo que se podría definir como una “filosofía” o como “un conjunto de técnicas” con la idea de crear un solo sitio web, pero adaptable a todo tipo de plataformas. Cuando empezaron a popularizarse los teléfonos móviles, las tablets y algún que otro nuevo terminal del estilo, se puso bastante de moda el crear versiones móviles de … Sigue leyendo

Siften realiza un sorteo de compensación por los días que estuvo fuera de línea

Siften realiza un sorteo de compensación por los días que estuvo fuera de línea

Antes de empezar con el mensaje importante de esta entrada, voy a explicar un poco qué es Siften, por si alguien todavía no lo conoce. Pues bien, Siften es un sitio web dedicado a webmaster que tiene, actualmente, los siguientes dos módulos: Sitios webs: Desde el cual se puede hacer un seguimiento del Pagerank, Alexa Rank, número de páginas indexadas en los principales buscadores, keywords, etc. Intercambio social: Este módulo consta de un sistema de intercambio de me gusta de Facebook y +1 de Google por créditos, para luego intercambiarlos por me gusta y +1 en tus webs. Ahora que ya expliqué un … Sigue leyendo

Estructura básica en HTML5: nav

Estructura básica en HTML5: Nav

Como tercer capítulo de cómo hacer una estructura básica de una plantilla en HTML5, hoy voy a hablar de una nueva etiqueta del HTML5: nav (navegación). Esta etiqueta se usará para indicar en qué lugar se encuentran los menús de navegación. Se puede colocar cualquier etiqueta dentro, pero lo más recomendado es usar listas <ul>…</ul>. Bien, voy a seguir completando la estructura básica que dejé en la entrada Estructura básica en HTML5: header y footer con esta nueva etiqueta. En la mencionada entrada teníamos lo siguiente: <!DOCTYPE HTML> <html> <head> <!– Aquí irá el contenido del head. –> </head> <body> … Sigue leyendo

Estructura básica en HTML5: header y footer

Estructura básica en HTML5: Header y Footer

Como segundo capítulo de cómo hacer una estructura básica de una plantilla en HTML5, hoy voy a hablar de dos nuevas etiquetas del HTML5: header (cabecera de página) y footer (pie de página). Bien, como estructura básica, un documento .html se empieza con el Doctype (explicado ya en la entrada Estructura básica en HTML5: DOCTYPE), seguido de las etiquetas <html>…</html>, que contendrán las etiquetas <head>…</head> (cabeza) y <body>…</body> (cuerpo). Quedando construída así la estructura básica: <!DOCTYPE HTML> <html> <head> <!– Aquí irá el contenido del head. –> </head> <body> <!– Aquí irá el contenido del body. –> </body> </html> Nota: … Sigue leyendo