Ya he comentado sobre las características de este nuevo estándar, y en este momento nos concentraremos en una maqueta funcional utilizando las nuevas etiquetas y sus nuevas posibilidades. Es interesante saber que podemos utilizar elementos de HTML 5 en estos momentos aunque la mayoría de los browsers aún no lo soporten; esto se debe a que CSS puede dar estilo a cualquier etiqueta, aunque ésta prácticamente no exista (aún). Por ejemplo, si me da la gana puedo inventar una etiqueta propia y darle estilos:
<jorge></jorge>
jorge {
display: block;
width: 300px;
height: 100px;
border: 1px solid #666
}
Aunque semánticamente no va a tener valor alguno para los buscadores (y menos para los usuarios). Pero en este artículo comencemos a armar una estructura completamente en HTML 5:
<header>
<p>Header</p>
</header>
<nav>
<p>Menu</p>
</nav>
<section>
<p>Section</p>
<article>Article</article>
<article>Article</article>
</section>
<footer>
<p>Footer</p>
</footer>
Por defecto CSS asume que un elemento es inline. Para elementos definidos en HTML 4 como <div> ó <fieldset>, los estilos predeterminados por el browser para estas etiquetas los sobreponen y los hacen bloques, pero por esta vez lo haremos manualmente para las nuevas etiquetas HTML 5 que vayamos a utilizar:
header, nav, section, article, footer {
display: block;
}
Luego podremos definir los estilos para crear la estructura que nos convenga:
header {
width: 90%;
overflow: hidden;
}
nav {
width:20%;
float: left;
margin-right: 1%;
}
section {
width:67%;
float: left;
}
article {
background: #999;
}
footer {
width:90%;
overflow: hidden;
clear:both;
}
Los browsers modernos no tendrán problemas hasta ahora; sin embargo los hechos en Redmond se rehusarán a mostrar los estilos CSS hasta que tengamos que enseñarles a comportarse como se debe. Por suerte con una pequeña ayuda de Javascript crearemos estos elementos para que IE sepa qué hacer con ellos y los estilos ya definidos:
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("footer");
Ahora un ejemplo utilizando la nueva etiqueta <video />, la que (por estos momentos) utiliza el codec Ogg Theora para comprimir los videos (necesitarás Quicktime ó similar para poder exportarla en este formato). Con un poco de JS podremos manejar los botones de comando y la línea de tiempo de las películas sin mayores complicaciones, como en el siguiente ejemplo:
function Play(str) {
var video = document.getElementById(str)
video.play();
}
Ver ejemplo 3 (en Safari 4, Opera 10+, Firefox 3.5+, Chrome 2+)
Links:
]]>$(elemento)
.effects({duration: 1000, transition: Fx.Transitions.Quad.easeInOut})
.start({
’width’: 800,
’height’: 410
})
.chain(function(){
this.start({
’width’: 200,
’height’: 600
})
});
En este ejemplo estoy modificando el tamaño de un #contenedor que tiene dentro una imagen del lápiz posicionado absolutamente; con ello logro que a medida que varían las dimensiones del #contenedor mediante Javascript, simula el movimiento del lápiz con física de movimiento incluída (otra gran gracia de Mootools). Dejé el borde del #contenedor visible para que se aprecie el cambio de tamaño.
Y el resto va por cuenta de la creatividad que le quieran dar, o mejor dicho, encadenar. Pueden realizar muchas acciones y como mencionaba, incluir pausas en lapsus de milisegundos antes de desencadenar la siguiente función, como en el siguiente ejemplo:
$(elemento)
.effects({duration: 3000, transition: Fx.Transitions.Elastic.easeInOut})
.start({
’width’: 600,
height’: 210
}).chain(function(){
this.start({
’opacity’: 0.5
})
}).chain(function(){
this.start({
’opacity’: 1
})
}).chain(function(){
this.start.delay(500, this, {
’height’: 400,
’width’: 200
})
}).chain(function() {
this.start({
’opacity’: 0.5,
’width’: 100,
’height’: 100
});
}).chain(function() {
this.start.delay(1000, this, {
’opacity’: 1,
’width’: 1500,
’height’: 600
})
}).chain(function() {
this.start({
’width’: 100,
’height’: 100
})
});
Dejo claro que estoy utilizando la versión 1.11 de Mootools, que aún está mejor documentada que la más reciente 1.2 y con más ejemplos disponibles.
Links:
]]>
Lo que se va a ver aquí, será específicamente cómo abordar la estructuración de una botonera de formularios (o de cualquier otro en realidad), y cómo lograr que se estén siempre centradas a pesar de cuántos botones tengan. El ejemplo gráfico a continuación:
He visto muchas soluciones a esto, la mayoría de ellas complicadas (mi slogan siempre es facilitar la vida en su máxima expresión). Por ejemplo, se hacen class’es para cada botón (.boton_aceptar_1, .boton_aceptar_2 etc etc etc) y se posicionan absolutamente. También se hacen class’es a cada botón y se marginan, incluso negativamente (lo que IE6 no ve con buenos ojos). Imagínense si son varias páginas de formularios y los botones se repiten (por ejemplo, el ‘Aceptar’ o el ‘Enviar’ son los más comunes) pero no siempre van de a 2, sino que a veces van solos o de a 3, 4…. enfin. Hacer class’es para cada situación no es la mejor solución, ya que llenaremos la hoja de estilos de propiedades de posicionamiento en vez de aplicar una solución global, independiente de la cantidad de botones que estén involucrados. Bueno, esa es la idea de este artículo.
Es frecuente que los temas que escribo para CSSLab se den mientras estoy en algún proyecto, y me topo con dificultades que logro solucionar, y luego las muestro y explico aquí cómo se resolvió finalmente. Este es otro de esos casos, sólo que este tema lo había resuelto hacía mucho pero se dió nuevamente a manos de otro profesional web con quien trabajo. Lo ayudé con esto y finalmente me tomo el tiempo de explicarlo aquí para todos quienes tengan la misma situación.
Vamos a lo que nos reúne. Construído el lindo formulario, con <fieldset>, <legend>, varios <label>, <input /> y <textarea> quizás, llega la hora de poner los botones de Enviar y No Enviar como en el ejemplo gráfico anterior. Mi método implica utilizar listas, ya que me gustan para contener botones como menúes (aunque puede ser un <div> si quienes, incluso un <p>. Cada uno con su gusto). El HTML de la botonera:
<ul id="botonera">
<li><input type="submit" value="Enviar" /><input type="reset" value="No Enviar" /></li>
</ul>
Como habrán notado, en vez de poner cada botón dentro de un <li></li> y flotarlos a la izquierda (como usualmente se usa para los menúes horizontales), puse todos los botones dentro de un mismo <li>, caso contrario no podrían ser centrados. Entonces, si es sólo un botón, o todos los que sean necesarios, deberán ir consecutivamente uno al lado del otro dentro de un único <li></li>.
Ahora, el CSS que hará la magia:
#botonera {
width: 400px;
margin: 20px auto;
}
#botonera li {
list-style: none;
text-align: center;
}
#botonera input {
margin-left: 10px;
}
Bastante simple. Si se han fijado, lo que hace que se centren los elementos dentro del <li> es el text-align: center; ya que como <input /> es una etiqueta lineal, se alineará tal como lo haría un texto cualquiera. Ese es todo el truco. Lo otro es darle al <input /> un margin-left de unos 10px para que se separen un poco si son 2 o más botones (he visto usar para ello… no es correcto). Saco 3 conclusiones de esta solución:
- No se usa float alguno, lo que no hace el contenedor colapsar así que nos ahorramos un clearfix. Además que no puedes centrar un float.
- Se puede usar para cualquier botón, no sólo <input />: <a> y <button> también son soportados. Así que puedes también hacer un menú horizontal centrado con esta misma técnica.
- Es soportado por todos los browsers.
Para esto, con Mootools es extremadamente fácil. Primero, creamos el evento inicial que gatillará la acción cuando los elementos del HTML (DOM) estén cargados. Luego, una codicional (if/else) que me dirá si el browser es IE6, ejecuta tal acción:
window.addEvent(‘domready’, function(){
if(window.ie6){
// haz algo aquí
}
});
A seguir, una lista de las posibilidades de browsers a ser detectables:
- window: cualquier browser.
- window.ie: cualquier Internet Explorer.
- window.ie6: sólo IE6.
- window.ie7: sólo IE7.
- window.gecko: Mozilla Firefox u otro browser que use gecko (Netscape 6+, Flock, Camino, Galeon, Epiphany).
- window.webkit: Apple Safari u otro que use Webkit (iCab, Konqueror, Omniweb, Shiira, Sunrise).
- window.webkit419: Apple Safari 2.
- window.webkit420: Apple Safari 3.
- window.opera: sólo Opera.
Link
]]>
Comenzamos con el marcado HTML. Primero, un <div class="overlay"></div> el que será el fondo semi-transparente que cubrirá la página entera, y albergará la ventana del mensaje. Luego, un <div class="modal"> que contendrá el mensaje o contenido de nuestra ventana modal. Estas 2 classes, .overlay y .modal, estarán escondidas desde un principio (display: none;) y serán gatilladas desde algún link (display: block;). Después de ellas, el contenido del resto del sitio web.
<div id="fade" class="overlay"></div>
<div id="light" class="modal">
<p>Lorem ipsum dolor sit…..</p>
</div>
<p>Texto del sitio web. Con un <a href="">link</a> abriremos la ventana.</p>
Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del método cross-browser:
.overlay{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index:1001;
opacity:.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
}
Y la ventana modal del contenido mismo:
.modal {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
background: #fff;
color: #333;
z-index:1002;
overflow: auto;
}
Ahora, lo echamos a andar. A ambos div‘s debemos darle id‘s únicos, los que nos ayudarán a identificar los elementos que serán mostrados vía Javascript. La orden para ejecutarlos es en Javascript puro:
document.getElementById(‘light’).style.display=’block’;
document.getElementById(‘fade’).style.display=’block’
Y a través de Mootools:
$(‘light’).setStyle(‘display’, ‘block’);
$(‘fade’).setStyle(‘display’, ‘block’);
Lo que dice ahí, en castellano universal es: toma los elementos con el id light y fade, y agrégales estilo display: block; a cada uno. O sea, los hará aparecer desde display: none (oculto) a display: block; (visible).
Ver ejemplo funcionando con JS
Links
]]>Sigue enviando tu sitio construído con estándares. Además, puedes publicarlo en el nuevo tema de los foros, donde pueden opinar todos de tu estilo gráfico, o código generado.
Bueno, la idea es mostrar cómo se hace para que uds. puedan replicarlo según sus necesidades. Comenzaré por el HTML que se constituye de 3 partes: el menú (#menu, que lo pueden hacer cómo se les dé la gana, lo importante son los id‘s de los links), el <div> que albergará las secciones (#dentro, que están posicionadas absolutamente) y el contenedor que funciona como una ventana que esconde el resto (#envoltura esconde con overflow: hidden;):
<ul id="menu">
<li><a id="link1" href="#">Contenido 1</a></li>
<li><a id="link2" href="#">Contenido 2</a></li>
<li><a id="link3" href="#">Contenido 3</a></li>
</ul>
<div id="envoltura">
<div id="dentro">
<div id="contenido1">
<h1>1</h1>
</div>
<div id="contenido2">
<h1>2</h1>
</div>
<div id="contenido3">
<h1>3</h1>
</div>
</div>
</div>
Ya el CSS es lo que ayuda a la magia (obviaré el estilo del #menu):
#envoltura {
overflow: hidden;
height: 300px;
width: 600px;
position: relative;
}
#dentro {
width: 1600px;
height: 1600px;
background: url(imgs/fondo.jpg) center center no-repeat;
position: relative;
}
h1 {
color: #fff;
font-size: 200px;
}
#contenido1 {
position: absolute;
left: 250px;
top: 80px;
}
#contenido2 {
position: absolute;
left: 800px;
top: 1200px;
}
#contenido3 {
position: absolute;
left: 900px;
top: 550px;
}
Y finalmente lo que hace la magia, el JS. Antes que todo se linkea mootools.js, y luego el <script> que podemos configurar a nuestro gusto:
var scroll = new Fx.Scroll(‘envoltura’, {
// envoltura es el id que funciona como ventana
wait: false,
duration: 1000,
// duration es la duración de las transiciones en milisegundos
offset: {‘x’: -230, ‘y’: -20},
// offset es la distancia del eje X Y que mostrará los elementos posicionados
transition: Fx.Transitions.Back.easeInOut
// transition es el tipo de transición que tendrá, ver ejemplos en mootools.net
});
$(‘link1′).addEvent(‘click’, function(event) {
// aqui ya comenzamos a darle cada id del <a>…
event = new Event(event).stop();
scroll.toElement(‘contenido1′);
// …hasta qué id tiene que llegar.
});
$(‘link2′).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘contenido2′);
});
$(‘link3′).addEvent(‘click’, function(event) {
event = new Event(event).stop();
scroll.toElement(‘contenido3′);
});
Bueno, nuevamente les dejo el link al ejemplo final:
]]>
