10 de Julio de 2009

Estás viendo los artículos de ZonaMasters – Recursos para webmasters correspondientes al día 10 de Julio de 2009.

HTML5 | Tabla con las diferencias con HTML4

Aquí os ponemos la tabla con las diferencias con HTML4 es una traducción de la tabla que hay en w3schools:

  • 4: indica si el elemento está definido en HTML 4.01
  • 5: indica si el elemento está definido en HTML 5
Etiqueta Descripción 4 5
<!–…–> Para incrustar comentarios 4 5
<!DOCTYPE> Para indicar el tipo de documento 4 5
<a> El hipervínculo de toda la vida :) 4 5
<abbr> Para abreviaciones 4 5
<acronym> No soportado. Define un acrónimo 4
<address> Define un elemento de la dirección 4 5
<applet> No soportado. Define un applet 4
<area> Define un área dentro de un mapa de imagen 4 5
<article> Define un artículo 5
<aside> Define el contenido, aparte de contenido de la página 5
<audio> Define el contenido de sonido 5
<b> Define texto en negrita 4 5
<base> Define una URL base para todos los enlaces en una página 4 5
<basefont> No soportado. Usar CSS en lugar 4
<bdo> Define la dirección de la pantalla de texto 4 5
<big> No soportado. Define texto grande 4
<blockquote> Defines a long quotation Define una larga cita 4 5
<body> Defines the body element Define el cuerpo elemento 4 5
<br> Inserts a single line break Inserta un salto de línea 4 5
<button> Defines a push button Define un botón 4 5
<canvas> Defines graphics Define gráficos 5
<caption> Defines a table caption Define una tabla título 4 5
<center> Not supported. Defines centered text No soportado. Define texto centrado 4
<cite> Defines a citation Define una cita 4 5
<code> Define el código de texto 4 5
<col> Define las características de las columnas de la tabla 4 5
<colgroup> Define grupos de columnas de la tabla 4 5
<command> Define un botón de comando 5
<datagrid> Define los datos en una lista de árboles 5
<datalist> Define una lista desplegable 5
<datatemplate> Define una plantilla de datos 5
<dd> Define una descripción de la definición 4 5
<del> Define texto suprimido 4 5
<details> Define los detalles de un elemento 5
<dialog> Define un cuadro de diálogo (conversación) 5
<dir> No soportado. Define una lista de directorio 4
<div> Define una sección en un documento 4 5
<dfn> Define un termino definición 4 5
<dl> Define una lista de definición 4 5
<dt> Define un termino definición 4 5
<em> Define destacó texto 4 5
<embed> Define un elemento embebido de contenido interactivo 5
<eventsource> Define un objetivo para los eventos enviados por un servidor 5
<fieldset> Define un fieldset 4 5
<figure> Define un grupo de los contenidos de los medios, y su leyenda 5
<font> Obsoleto. Define texto fuente, el tamaño y el color 4
<footer> Define un pie de página de una sección o página 5
<form> Define un formulario 4 5
<frame> No soportado. Define una sub ventana (un marco) 4
<frameset> No soportado. Define un conjunto de marcos 4
<h1> a <h6> Define tamaño de la cabecera 1 a 6 4 5
<head> Provee información sobre el documento 4 5
<header> Define un encabezado de una sección o página 5
<hr> Define una línea horizontal 4 5
<html> Define un documento html 4 5
<i> Define texto en cursiva 4 5
<iframe> Define una línea sub ventana (frame) 4 5
<img> Define una imagen 4 5
<input> Define un campo de entrada 4 5
<ins> Define texto insertado 4 5
<isindex> No soportado. Define un único campo de entrada de línea 4
<kbd> Define el teclado de texto 4 5
<label> Define una etiqueta para formularios 4 5
<legend> Define un título en un fieldset 4 5
<li> Define un elemento de la lista 4 5
<link> Define un recurso de referencia 4 5
<mark> Define texto marcado 5
<map> Define un mapa de imagen 4 5
<menu> Define una lista de menú 4 5
<meta> Define la información de metadatos 4 5
<meter> Define medición dentro de un rango predefinido 5
<nav> Define vínculos de navegación 5
<nest> Define una nestingpoint en un datatemplate 5
<noframes> No soportado. Noframe Define una sección 4
<noscript> Define una sección noscript 4 5
<object> Define un objeto incrustado 4 5
<ol> Define una lista ordenada 4 5
<optgroup> Define un grupo de opciones 4 5
<option> Define una opción en una lista desplegable 4 5
<output> Define algunos tipos de producción 5
<p> Define un párrafo 4 5
<param> Define un parámetro para un objeto 4 5
<pre> Define texto preformateado 4 5
<progress> Define el progreso de una tarea de cualquier tipo 5
<q> Define una breve cita 4 5
<rule> Define las normas de actualización de una plantilla 5
<s> No soportado. Define texto tachado 4
<samp> Define el código de muestra 4 5
<script> Un Script 4 5
<section> Una sección 5
<select> Lista seleccionable 4 5
<small> Texto en pequeño 4 5
<source> Definir un recurso media 5
<span> Una sección del documento 4 5
<strike> No soportado. Define texto tachado 4
<strong> Texto en negrita 4 5
<style> Para definir un estilo 4 5
<sub> Para subíndices 4 5
<sup> Para superíndice 4 5
<table> Para definir una tabla 4 5
<tbody> Cuerpo de la tabla 4 5
<td> Una celda de la tabla 4 5
<textarea> Define una área de texto 4 5
<tfoot> Pie (Footer) de una tabla 4 5
<th> Define una cabecera de la tabla 4 5
<thead> Define una cabecera de la tabla 4 5
<time> Defina una fecha 5
<title> Para el titulo de la página web 4 5
<tr> Fila de una tabla 4 5
<tt> No soportado. Define texto teletipo 4
<u> No soportado. Define texto subrayado 4
<ul> Para listas desordenadas 4 5
<var> Para definir una variable 4 5
<video> Para indicar que queremos incrustar un video 5
<xmp> No soportado. Define texto preformateado 4

Para más información visita W3.org

Escrito por Niko | 10 de Julio de 2009 | 3 comentarios
General.

Menús desplegables con CSS

Siguiendo el tutorial de menu CSS, podremos crear desplegables usando solo CSS, aunque para que funcione correctamente en todos los navegadores (internet explorer como siempre dando la nota) deberemos insertar el siguiente código:


<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<!--[if gte IE 5.5]>
<script language="JavaScript" type="text/JavaScript">
$(document).ready(function(){
$("#navmenu-h li,#navmenu-v li").hover(
function() { $(this).addClass("iehover"); },
function() { $(this).removeClass("iehover"); }
);});
</script>
<![endif]-->

Aquí os dejamos un ejemplo


<ul id="navmenu">
<li><a href="#">Root nav item</a>
<ul>
<li><a href="#">Sub nav item</a></li>
</ul>
</li>
</ul>

Mira más menu de ejemplo.

Puedes ver también:

Plantillas CSS gratis

Visto en Anieto2k

Escrito por Niko | 10 de Julio de 2009 | 1 comentario
CSS y Diseño Web.

The Ultimate jQuery List | Ejemplos y plugins para jQuery

Si estás pensando en meterte en uno de los framework de javascript más utilizado jQuery, en esta web ofrece una gran recopilación de plugins y ejemplos práctiso para usar con jQuery.

Visita The Ultimate jQuery List
Vía Xyberneticos

Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
General.

Reset CSS

Reset CSS es una técnica para resetear todos los valores del CSS que vienen por defecto en los navegadores (margenes, aliniaciones…). La web de desarrolladores de Yahoo, podemos ver el siguiente ejemplo con el que conseguiremos resetar todos los valores.


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}

Un reset básico sería el siguiente:


* {
margin:0;
padding:0;
}

Visita Yahoo! UI Library: Reset CSS

Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web.

Tabla de colores hexadecimales

En el ordenador es común ver los colores tienen asociado un valor hexadecimal (puede tomar 16 valores cada cifra desde 0..9A..F), estos valores representan la cantida de rojo, azul y verde (RGB) dos cifras hexadecimales para cada uno, la mezcla de esos tres colores primarrios se puede sacar una gran variedad de colores.

Realmente es cómodo podemos controlar con exactitud los colores de nuestra web sean tales como los hemos preparado en photoshop (este te da el valor hexadecimal con la herramienta de cuenta gotas)

Aquí os dejo una tabla con algunos colores y su valor en hexadecimal.

Color
Hexadecimal
#FFFFFF

#000000
#000080
#0000FF
#008000
#008080
#00FF00
#00FFFF
#800000
#800080
#808000
#808080
#C0C0C0
#FF0000
#FF00FF
#FFFF00

Escrito por Niko | 10 de Julio de 2009 | 4 comentarios
CSS y Diseño Web.

jQuery lightBox plugin | Ejemplo lightBox

A estas alturas el efecto de lightBox es bastante conocido (existe hasta para videos Videobox). El plugin que os muestro en el post se puede decir que es de los más conocidos, aunque existe alternativas como jQuery.popeye, Zoomy…

Como usar el plugin:

Para comenzar necesitamos tener el javascript de jQuery y después descargar el plugin. Debemos incluir en la cabecera dos ficheros javascript:


<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

También debemos incluir el fichero CSS:


<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Incluimos las etiquetas HTML para enlazar una imagen, por ejemplo:


<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

Y por último incluimos el siguiente javascript que es el que activará el lightBox:


<script type="text/javascript">
$(function() {
// Use this example, or...
$('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
// This, or...
$('#gallery a').lightBox(); // Select all links in object with gallery ID
// This, or...
$('a.lightbox').lightBox(); // Select all links with lightbox class
// This, or...
$('a').lightBox(); // Select all links in the page
// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

Visita  lightBox plugin

Ver una Demo

Escrito por Niko | 10 de Julio de 2009 | 0 comentarios
CSS y Diseño Web y JavaScript.