voragine.net » HTML http://voragine.net Autonomía digital y tecnológica. Mon, 06 Feb 2012 16:55:48 +0000 en hourly 1 http://wordpress.org/?v=3.3-RC3-19589 Formularios con efectos onclick y onfocus de JavaScript pero que utilizan solo HTML y CSS http://voragine.net/weblogs/formularios-con-efectos-onclick-y-onfocus-de-javascript-pero-que-utilizan-solo-html-y-css http://voragine.net/weblogs/formularios-con-efectos-onclick-y-onfocus-de-javascript-pero-que-utilizan-solo-html-y-css#comments Fri, 14 Oct 2011 12:37:01 +0000 skotperez http://voragine.net/?p=765 tema Twentyeleven de WordPress he encontrado una solución bien elegante para hacer formularios sin javascript pero con efectos equivalentes, que funcionan utilizando únicamente HTML y CSS. Con este código obtendrás un formulario del estilo del que puedes usar para comentar en esta página.]]> Examinando el tema Twentyeleven de WordPress he encontrado una solución bien elegante para hacer formularios sin javascript pero con efectos equivalentes, que funcionan utilizando únicamente HTML y CSS. Con este código obtendrás un formulario del estilo del que puedes usar para comentar en esta página.

Construimos el DOM utilizando las etiquetas fieldset, label, input y textarea:

<form id="form" action="http://url.de/la-accion.php" method="post">

 <fieldset>
  <label for="nombre">Nombre</label>
  <input id="nombre" tabindex="1" type="text" name="nombre" value="" size="22" />
 </fieldset>

 <fieldset>
  <label for="mensaje">Mensaje</label>
  <textarea id="mensaje" tabindex="2" name="mensaje" rows="10" cols="100%"></textarea>
 </fieldset>

 <fieldset>
  <input id="enviar" tabindex="3" type="submit" name="enviar" value="Enviar mensaje" />
 </fieldset>

</form>

Y le aplicamos los siguientes estilos CSS:

#form fieldset {
        position: relative;
        margin: 1em 0;
}
#form label {
        display: inline-block;
        left: 6px;
        min-width: 60px;
        padding: 4px 10px;
        position: relative;
        top: 28px;
        z-index: 1;
}
#form input[type="text"],
#form textarea {
        background: #fff;
        position: relative;
        padding: 10px;
        text-indent: 80px;
        width: 478px;
        border: 1px solid #000;
}
#form input[type="text"]:focus,
#form textarea:focus {
        text-indent: 0;
        z-index: 1;
}
]]> http://voragine.net/weblogs/formularios-con-efectos-onclick-y-onfocus-de-javascript-pero-que-utilizan-solo-html-y-css/feed 2 Las etiquetas article y section de HTML5 http://voragine.net/weblogs/las-etiquetas-article-y-section-de-html5 http://voragine.net/weblogs/las-etiquetas-article-y-section-de-html5#comments Mon, 10 Oct 2011 17:28:12 +0000 skotperez http://voragine.net/?p=759 Standardistas he encontrado la mejor explicación sobre cómo usar las nuevas etiquetas section y article de HTML5, que tanto debate han traído, haciendo una analogía con la estructura de un periódico: «The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.» Obvio, pero aclara saber que se pueden meter los unos dentro de los otros y viceversa.]]> En Standardistas he encontrado la mejor explicación sobre cómo usar las nuevas etiquetas section y article de HTML5, que tanto debate han traído, haciendo una analogía con la estructura de un periódico: «The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.» Obvio, pero aclara saber que se pueden meter los unos dentro de los otros y viceversa.

]]> http://voragine.net/weblogs/las-etiquetas-article-y-section-de-html5/feed 0 Cómo comprobar la compatibilidad de HTML5 en diferentes navegadores http://voragine.net/weblogs/como-comprobar-la-compatibilidad-de-html5-en-diferentes-navegadores http://voragine.net/weblogs/como-comprobar-la-compatibilidad-de-html5-en-diferentes-navegadores#comments Fri, 07 Oct 2011 08:00:16 +0000 skotperez http://voragine.net/?p=751 compatibilidad de los navegadores más extendidos con HTML5, en sus versiones estable y en desarrollo. Según esta página ningún navegador soporta por completo HTML5. Para ver concretamente los trozos de código que no cumplen con el futuro estándar abierto de la web, se pude usar el validador del W3C.]]> La página html5test.com permite comprobar la compatibilidad de los navegadores más extendidos con HTML5, en sus versiones estable y en desarrollo. Según esta página ningún navegador soporta por completo HTML5. Para ver concretamente los trozos de código que no cumplen con el futuro estándar abierto de la web, se pude usar el validador del W3C.

]]> http://voragine.net/weblogs/como-comprobar-la-compatibilidad-de-html5-en-diferentes-navegadores/feed 0 Cabecera mínima en HTML5 para WordPress http://voragine.net/weblogs/cabecera-minima-en-html5-para-wordpress http://voragine.net/weblogs/cabecera-minima-en-html5-para-wordpress#comments Thu, 06 Oct 2011 08:00:14 +0000 skotperez http://voragine.net/?p=747 teniendo en cuenta las nuevas etiquetas y atributos. En el caso de que estemos trabajando dentro del sistema WordPress además debemos integrar los comandos propios de este gestor de contenidos.]]> Con la aparición de la nueva versión de HTML, HTML5, se impone actualizar el código de muchas páginas o programar las nuevas teniendo en cuenta las nuevas etiquetas y atributos. En el caso de que estemos trabajando dentro del sistema WordPress además debemos integrar los comandos propios de este gestor de contenidos.

A continuación una cabecera mínima para WordPress que integra HTML5, comentada:

<!DOCTYPE html>

<?php // discriminamos según el navegador para hacer funcionar HTML5 en todos ?>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

<?php // almacenamos la información que vayamos a usar varias veces para no hacer varias consultas iguales a base de datos
$blogname = get_bloginfo('name');
$blogdesc = get_bloginfo('description');
$blogurl = get_bloginfo('url');
$blogtemplate = get_bloginfo('template_directory');
?>

<title>
<?php // el siguiente código devuelve el título de la página en función del contenido que se esté mostrando: home, archivos, single...
// hack del tema twentyeleven
        global $page, $paged;

        wp_title( '|', true, 'right' );

        // Add the blog name.
        bloginfo( 'name' );

        // Add the blog description for the home/front page.
        $site_description = get_bloginfo( 'description', 'display' );
        if ( $site_description && ( is_home() || is_front_page() ) )
                echo " | $site_description";

        // Add a page number if necessary:
        if ( $paged >= 2 || $page >= 2 )
                echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

        ?>
</title>

<meta content="Nombre del autor" name="author" />
<meta content="<?php echo $blogdesc ?>" name="description" />
<meta content="etiqueta1, etiqueta2, etiqueta3" name="keywords" />

<?php // el relationships meta data profile antes se incluía con un atributo de la etiqueta head que con HTML5 ha desaparecido; ahora hay que incluirlo con una etiqueta link ?>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo "$blogtemplate/style.php" ?>" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php echo "$blogtemplate/style-print.css" ?>" type="text/css" media="print" />
<link rel="alternate" type="application/rss+xml" title="<?php echo $blogname; ?> RSS Feed suscription" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php echo $blogname; ?> Atom Feed suscription" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php // este hook de WordPress es lo que devuelve las funciones complementarias necesarias para plugins y otros módulos, por ejemplo la hoja de estilos CSS de la barra que aparece cuando se ha iniciado sesión
wp_head(); ?>

</head>
]]> http://voragine.net/weblogs/cabecera-minima-en-html5-para-wordpress/feed 0 Cómo configurar el formato de las fechas con la etiqueta time de HTML5: el atributo datetime http://voragine.net/weblogs/como-configurar-el-formato-de-las-fechas-con-la-etiqueta-time-de-html5-el-atributo-datetime http://voragine.net/weblogs/como-configurar-el-formato-de-las-fechas-con-la-etiqueta-time-de-html5-el-atributo-datetime#comments Wed, 05 Oct 2011 15:07:32 +0000 skotperez http://voragine.net/?p=744 time de HTML5 podemos usar el atributo datetime.]]> Las fechas que envolvamos con la etiqueta time tienen que tener un formato determinado para que se indexen correctamente en los buscadores, un formato que no tiene por qué ser el más adecuado para un lector. Para conseguir un formato más humano en las fechas y las horas que envolvemos con la etiqueta time de HTML5 podemos usar el atributo datetime. Por ejemplo:

<time datetime="2011-10-05">5 de octubre de 2011</time>
<time datetime="2011-10-05">Hoy</time>

Si estamos trabajando con el gestor de contenidos WordPress se traduciría en lo siguiente:

<?php
$post_date_human = get_the_time('d \d\e F \d\e Y');
 $post_date = get_the_time('Y-m-d');
 echo "<time datetime="$post_date">$post_date_human</time>";
?>
]]> http://voragine.net/weblogs/como-configurar-el-formato-de-las-fechas-con-la-etiqueta-time-de-html5-el-atributo-datetime/feed 0 Construyendo una cabecera mínima pero correcta en HTML5: diferencias entre HTML4.01 y HTML5 dentro de la etiqueta head http://voragine.net/weblogs/construyendo-una-cabecera-minima-pero-correcta-en-html5-diferencias-entre-html4-01-y-html5-dentro-de-la-etiqueta-head http://voragine.net/weblogs/construyendo-una-cabecera-minima-pero-correcta-en-html5-diferencias-entre-html4-01-y-html5-dentro-de-la-etiqueta-head#comments Tue, 04 Oct 2011 11:46:46 +0000 skotperez http://voragine.net/?p=642 cabecera HTML limpia y correcta, y aprovechar todo el potencial de HTML5.]]> Con HTML5 han cambiado algunas etiquetas HTML, han dejado de ser válidos algunos atributos, han aparecido algunos nuevos, también han surgido nuevas etiquetas con sus nuevos atributos. Recopilamos aquí los cambios más significativos dentro de head, de cara a construir una cabecera HTML limpia y correcta, y aprovechar todo el potencial de HTML5.

!DOCTYPE

Con HTML5 se ha simplificado; con HTML4.01 había tres posibles doctypes, ahora solo hay uno: HTML. Más info.

<!DOCTYPE html>

html

Mediante la etiqueta html haremos la distinción entre los navegadores que soportan HTML5, los que soportan JavaScript, según recomiendan varios desarrolladores.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

</html>

head

Ha desaparecido el atributo profile. Más info.

<head>
...
</head>

title

Sin cambios.

<title>Título del documento</title>

meta

Nuevo atributo charset para definir el juego de caracteres del documento. scheme deja de estar soportado. Más info.

<meta charset="utf-8" />

El resto de la información sobre el documento se sigue especificando mediante el par de atributos name y content. Listado completo de los valores del atributo name. Se pueden definir valores diferentes para el atributo name.

<meta content="Nombre del Autor" name="author" />
<meta content="Descripción de la página" name="description" />
<meta content="etiqueta1, etiqueta2, etiqueta3" name="keywords" />

link

Las etiquetas link no necesitan ya el atributo type, pero conviene dejarlo por compatibilidad con navegadores que no soportan HTML5.

La siguiente línea es válida según HTML5:

<link rel="stylesheet" href="css/style.css" />

Y con ésta otra mantenemos la compatibilidad con navegadores que no soportan HTML5.

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />

Javier Casares explica la importancia del atributo rel de cara al SEO en HTML5.

Para incluir favicon basta colocarlo en el raíz de nuestro alojamiento web, no hace falta incluir el rel="shortcut icon".
La cabecera completa:

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

<head>
<meta charset="utf-8" />
<title>Título del documento</title>

<meta content="Nombre del Autor" name="author" />
<meta content="Descripción de la página" name="description" />
<meta content="etiqueta1, etiqueta2, etiqueta3" name="keywords" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
</html>
]]> http://voragine.net/weblogs/construyendo-una-cabecera-minima-pero-correcta-en-html5-diferencias-entre-html4-01-y-html5-dentro-de-la-etiqueta-head/feed 2 12 tutoriales para dar estilo a los formularios http://voragine.net/weblogs/12-tutoriales-para-dar-estilo-a-los-formularios http://voragine.net/weblogs/12-tutoriales-para-dar-estilo-a-los-formularios#comments Wed, 02 Dec 2009 16:05:38 +0000 follonero http://voragine.net/?p=291 12 Useful Tutorials to Style Web Forms]]> 12 Useful Tutorials to Style Web Forms

]]> http://voragine.net/weblogs/12-tutoriales-para-dar-estilo-a-los-formularios/feed 0 Tutoriales “Panic is over” de Gosquared http://voragine.net/weblogs/tutoriales-panic-is-over-de-gosquared http://voragine.net/weblogs/tutoriales-panic-is-over-de-gosquared#comments Sat, 22 Dec 2007 02:00:09 +0000 skotperez http://voragine.net/recursos/tutoriales-panic-is-over-de-gosquared Liquidicity es el blog del estudio de diseño Gosquared. Tienen una sección muy maja en la que incluyen manuales de referencia: CSS, HTML. Muy resumiditos, caben en un pantallazo. Se pueden descargar en PDF:

En colaboración con wpcandy han editado uno de estos manuales de referencia de una sola página, The WordPress Help Sheet, ideal para iniciarse y tenerla como referencia a la hora de cambiar o desarrollar plantillas.
En lordmax.org la han traducido al español.

]]> http://voragine.net/weblogs/tutoriales-panic-is-over-de-gosquared/feed 5