Página 3 de 7«1234567»
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Algunas cositas interesantes y útiles (trátalas si quieres)
Algunas cositas interesantes y útiles
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 31 | 3:54 PM
Galerías de Imágenes con Scriptaculous: Lightbox para paginas web

Muchas veces los diseñadores de páginas web necesitan crear galerías de imágenes para mostrar los productos de nuestros clientes o cualquier tipo de imágenes, que muestran una serie de thumbnails que tienen un enlace a la versión ampliada de la misma. En ciertas ocasiones, es necesario que la apertura de la imagen se haga en una ventana más pequeña, para lo que es frecuente que se utilicen las ventanas emergentes o pop-ups, para que no se cambie la página y el usuario no tenga que utilizar los botones de navegación.

En otros casos, se utilizan galerías de imágenes totalmente desarrolladas empleando simplemente HTML y CSS. Pero en ciertas ocasiones, ninguna de estas opciones satisfacen plenamente las necesidades del diseño. Es para ello que se han desarrollado algunas técnicas basadas en JavaScript, que permiten la visualización de las imágenes sin salir de la página y sin emplear ventanas emergentes.

Se trata de una técnica muy sencilla y que por estar basada en librerías JavasCript (Jquery, MooTools, Prototype, etc.), por lo que no es intrusivo y el código que se genera en la página es limpio. Algunas plantillas de WordPress, Joomla y Drupal incluyen este tipo de recursos, además de encontrarse componentes y plugins que también cumplen la misma función.

Esta técnica fue inventada por Lokesh Dhakar, y el original fue sustituido por “Lightbox2” y está basado en Prototype. Luego aparecieron varios clones, algunos de los cuales superan en calidad al original. Algunos de estos clones son gratuitos, los hay de pago, mientras que otros ofrecen una versión de pago y una versión gratuita con menos funcionalidades.

Lightbox 2
Para utilizar este lightbox, en primer lugar debemos descargarlo, lo que pueden hacer desde este enlace: Descarga

Una vez descargado, se debe descomprimir el archivo en la raíz de la página (para poder ubicarlo en otra carpeta, es necesario hacer modificaciones en algunos archivos del script). Luego se deben colocar los siguientes links en el mismo orden en que se encuentran aquí:

Quote
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

También se debe incluir en el encabezado de la página un link al archivo CSS que viene incluido, para lo que colocaremos la siguiente línea de código:

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

Finalmente se debe colocar rel=”lightbox” en el enlace del texto o la imagen donde se activará. A continuación, veremos un ejemplo de la utilización de “Lightbox2”:

Quote
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
<title>Lightbox</title>
<link rel="stylesheet" type="text/css" href="archivos/estilo.css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="imagenes/amarillo.jpg" rel="lightbox" title="amarillo">
<img src="imagenes/amarillo.jpg" alt="Amarillo" class="chica" />
</a>
<a href="imagenes/leoncito.jpg" rel="lightbox" title="amarillo">
<img src="imagenes/leoncito.jpg" alt="Amarillo" class="chica" />
</a>
<a href="imagenes/pluma.jpg" rel="lightbox" title="amarillo">
<img src="imagenes/pluma.jpg" alt="Amarillo" class="chica" />
</a>
</body>
</html>

Colocando el nombre de las imágenes por las que se utilicen, pueden probar el funcionamiento del lightbox. En caso de que se desee crear un grupo de imágenes que sean visibles con el mismo lightbox (utilizando botones de navegación que aparecen posando el puntero sobre la imagen), se debe colocar el nombre del grupo entre corchetes, pudiendo utilizarse cualquier cantidad de imágenes:

Quote
<a href="imagenes/amarillo.jpg" rel="lightbox[grupo]" title="amarillo">
<img src="imagenes/amarillo.jpg" alt="Amarillo" class="chica" />
</a>
<a href="imagenes/leoncito.jpg" rel="lightbox[grupo]" title="amarillo">
<img src="imagenes/leoncito.jpg" alt="Amarillo" class="chica" />
</a>
<a href="imagenes/pluma.jpg" rel="lightbox[grupo]" title="amarillo">
<img src="imagenes/pluma.jpg" alt="Amarillo" class="chica" />

Light Window 2.0
Otra versión del script anterior que permite la utilización de videos de YouTube, películas Quick Time y cualquier otro tipo de archivos multimedia, animaciones Flash, páginas externas, se puede utilizar como marcos, para presentar formularios (en cualquier posición), con contenido HTML, permite scroll y varias otras funcionalidades muy interesantes.

Para utilizarlo, se debe colocar en el encabezado de la página los siguientes links:

Quote
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

Para que funcione con imágenes, basta con colocar en el enlace “class=”lightwindow“. Para utilizar otros medios, se deben emplear algunas de las siguientes líneas de código:

Películas:

Quote
<a href="http://peliculas/nombre_pelicula.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290" >Nombre del enlace</a>

Flash:

Quote
<a href="animacion.swf " class="lightwindow" params="lightwindow_width=800,lightwindow_height=345" title="Animación de ejemplo" >Nombre del enlace</a>

Archivo PDF:

Quote
<a href="ejemplo.pdf" class="lightwindow">Nombre del enlace</a>

Página externa:

<a href="http://www.lawebera.es/" class="lightwindow" title="Diseño de páginas web" caption="Portal del diseñador web">Nombre del enlace</a>

Como puede apreciarse, se trata de un script que permite generar lightbox casi con cualquier contenido. Al igual que en el caso de Lightbox2, se deben descargar los archivos y descomprimirlos en la raíz de la página. Se puede descargar desde aquí: Descarga

Se debe tener en cuenta que cuando se descomprimen los archivos, los mismos están dentro de una carpeta contenedora, de la que deben ser copiados y colocados “sueltos” en la raíz de la página. Si se coloca la carpeta con todo el contenido en la raíz del sitio, no funcionará a menos que se modifiquen los enlaces descritos más arriba.

Modificaciones en la configuración
En todos los casos, con algunos conocimientos elementales es posible modificar algunos parámetros, como la opacidad, los tiempos de los efectos, etc. Modificando el archivo CSS que contienen ambos scripts, es posible personalizar la forma en que se ven los lightbox.

Otros lightbox
Existen muchos otros lightbox, con mayor o menor cantidad de funciones y diferentes pesos. A continuación haremos una breve descripción de los mismos y las respectivas descargas.

  • Lightbox+. Gratuito, basado en Prototype. Solo para imágenes, sobre las que se puede hacer zoom.
  • GreyBox. Gratuito, solo para imágenes. Muy pequeño.
  • TripTracker. De pago. La versión estándar cuesta $25, mientras que la versión Premium tiene un valor de $500. Sólo es para imágenes.
    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 32 | 7:02 PM
    CSS: Sencillo truco para alinear el texto en sentido vertical

    Alinear el texto en vertical no es un recurso muy usado en estos días, pero suelen darse ocasiones donde puede ser útil. Para realizarlo, recurrimos a varios métodos, como la utilización de imágenes o Javascript.

    Pero existe un sencillo truco que nos permitira lograr esta alineación de texto en unas pocas lineas de código, utilizando CSS y valiéndonos de los espacios en blanco entre caracteres. ¿Quieres verlo?

    Este es el código que debes utilizar. Debes colocarlo bajo el tag head de tu código HTML:

    Quote
    <style>
    h1 { white-space: pre; }
    </style>

    Luego, dentro del body, debes utilizar el tag h1 al que le hemos dado el estilo con CSS, para lograr el efecto:

    Quote
    <h1>
    J
    E
    F
    F
    R
    E
    Y
    </h1>

    Básicamente, hemos colocado un espacio en blanco luego de cada carácter, y luego, al colocar cada espacio en blanco como pre con el código CSS que añadimos, le indicamos al texto que debe comportarse como si tuviese un tag pre. Y así es como se logra este efecto de la manera más sencilla y rápida.

    Haz clic en este enlace para ver una demostración >>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 33 | 4:05 PM
    La importancia de validar los códigos HTML y CSS

    Desde hace tiempo está instalado el debate acerca de la importancia de que los códigos de las páginas web sean válidos o no respecto de los estándares de la W3C. Si pensamos en una página web como un elemento que debemos posicionar en los buscadores para obtener una buena rentabilidad o difundir nuestros contenidos a la mayor cantidad de personas, seguramente llegaremos a la conclusión de que la validación de los código carece de relevancia, ya que los buscadores no tienen en cuenta este aspecto, tal como lo aseguran los propios directivos de los mismos.

    Pero detrás de la validación se encuentran otros aspectos que se deben tener en cuenta. Uno de los más sutiles, es que los desarrolladores y diseñadores formamos una comunidad, la que para su comunicación emplea determinados lenguajes. Si en una comunidad humana las personas que la integran emplearan el lenguaje en forma antojadiza, seguramente la comunicación entre ellos se volvería imposible al tiempo.

    Lo mismo sucede con la web. Los navegadores interpretan el código que contienen las páginas web para que los ordenadores entreguen las imágenes correspondientes a los usuarios. Esto se logra gracias a que los diseñadores y los desarrolladores emplean los mismos lenguajes, basados en un estándar creado, revisado y validado por la W3C.

    Basta para entender esto con saber que se utilizan diferentes doctype para declarar el lenguaje empleado, de forma que los navegadores sepan cómo interpretarlo y que una declaración incorrecta puede hacer que la página se vea de forma diferente.

    Todos los diseñadores conocen los problemas que se generan gracias a la incorrecta implementación de los lenguajes por algunos navegadores (Internet Explorer), y esto es solo porque se manejan en forma diferente algunos conceptos menores. Si cada navegador tuviera una forma de interpretar los códigos, habría que pensar en diseñar páginas específicas para cada uno de ellos, para que todos los usuarios pudieran acceder a los contenidos.

    Esto quiere decir que los desarrolladores y los diseñadores somos los responsables de sostener un lenguaje común que permita a todos los usuarios acceder a todos lo que se publica en la web, por lo que la correcta utilización de los estándares se vuelve casi un asunto social.

    Google y Facebook no validan. ¿Por qué mi página debe hacerlo?
    Muchas de las páginas más importantes de la web no pasan la validación porque no interesa para lo que fueron creadas. Las grandes compañías pueden darse el lujo de hacer lo que quieren con lo que quieren. El ejemplo más claro lo ha dado la propia Microsoft, que durante años tuvo sometidos a todos los diseñadores al doble trabajo de primero diseñar para los estándares y luego para sus navegadores.

    Sin embargo, debemos reconocer que lo que está mal es malo independientemente de quien lo haga. Si el no cumplimiento con los estándares no es bueno, simplemente debemos cumplirlos porque está bien hacerlo. Un diseñador que cumple con los estándares, hace mejor las cosas que las grandes empresas que muestran estos errores en sus páginas web.

    ¿Y por qué no hacen que sus páginas sean válidas? Este es un gran misterio. Si le hacen la validación a estas web, encontrarán que muchos de los errores que aparecen son producto de faltas de prolijidad o desatenciones. Muchos de estos errores los soluciona fácilmente una persona con conocimientos básicos de HTML.

    Pero si nos parece mal que estas páginas no sean válidas por este tipo de errores, mal haríamos nosotros si generáramos códigos y no nos tomáramos la molestia de pasar por el validador y verificar que todo esté en condiciones. Desde el momento en que se establece el Doctype en una página, se supone que el diseñador acepta y respeta los estándares que lo rigen.

    ¿Qué problemas generan los códigos no válidos?
    Compatibilidad con navegadores
    El hecho de que un código no valide, deja abierta la posibilidad de que la página no se vea en forma correcta en algunos navegadores. Por ejemplo, si utilizamos algunas propiedades de CSS3, el código generado no será válido, pero además, es altamente probable que no sean visibles por algunos navegadores.

    Otro ejemplo es la necesidad de utilizar diferentes prefijos para algunas propiedades de CSS3 para cada tipo de navegador, lo que obliga a colocar varias líneas de código para conseguir un mismo efecto.

    Visualización correcta
    Escribiendo códigos válidos nos aseguramos que la página que estamos creando será visible en forma correcta en la mayoría de los navegadores. Hoy en día, la tendencia es a hacer que los navegadores tomen en cuenta las recomendaciones de la W3C, como es el caso de Internet Explorer, que en su versión 8 presenta una casi completa compatibilidad con los estándares, algo totalmente diferente a lo que sucedía con las versiones anteriores.

    Facilidad de mantenimiento
    Un código válido es mucho más simple de mantener que uno que no lo es. El desarrollo de códigos limpios y válidos simplifica en forma notoria la tarea de realizar modificaciones posteriores, tanto por parte del diseñador como de otra persona. Si durante el desarrollo del código se estila dejar comentarios para orientar a aquellos que necesitan interpretarlo para su mantenimiento, mejor aún es hacer un código prolijo, fácil de entender y que respeta los estándares.

    Menor cantidad de “hacks” y condicionales
    Para que los diseños sean visibles por todos, muchas veces los diseñadores deben recurrir a sentencias condicionales o a “hacks” (el término define códigos que son adaptadas a un navegador específico para mostrar un elemento de la forma en que otros navegadores lo hacen).

    El hecho de que todos los navegadores actuales estén convergiendo hacia los estándares de la W3C, hace que este tipo de recursos en algún momento pasen a ser obsoletos, lo que representará un ahorro enorme para los diseñadores de páginas web.

    Las razones subjetivas para validar
    También existen otros tipos de razones para crear códigos HTML y CSS que sean completamente válidos. Por ejemplo, el simple hecho de saber que las cosas se hacen bien, más allá de su funcionalidad. Si se pueden obtener los mismos resultados con códigos válidos que con códigos no válidos, no existe la necesidad de utilizar elementos que no pasen la validación, y en todo caso, hacer las correcciones necesarias solo puede hacernos perder unos minutos.

    Otro argumento en este sentido, es que un código válido da la impresión de estar desarrollado con profesionalismo y prolijidad, lo que habla muy bien de quien lo ha realizado. Teniendo en cuenta esto, la generación de códigos válidos en las web que desarrollemos, puede servir de carta de presentación de nuestro trabajo.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 34 | 1:31 PM
    jQuery: Gran efecto animado para mostrar citas en tu sitio

    Si tu intención es mostrar citas célebres de autores reconocidos en tu sitio, pero quieres hacerlo con estilos, este efecto realizado en jQuery es justo lo que estás buscando.

    Haz clic en este enlace para ver una demostración del efecto >>

    Comencemos con el esqueleto del efecto, es decir, el HTML:

    Quote
    <div id="quotebox">
    <p class="quotemark leftquote">‘‘</p>
    <div class="quote"></div>
    <p class="quotemark rightquote">’’</p>
    </div>

    Toma nota de las clases e IDs usadas, ya que habrá que mencionarlas luego en el CSS y JavaScript. A la cita, por otro lado, se le brindará el contenido a través de jQuery.

    Se prefirió utilizar la comilla simple en lugar de la doble comilla, ya que al aumentarse el tamaño, los espacios entre sí utilizando una comilla doble hubiesen sido gigantescos. Pero utilizando la comilla simple y un poco de CSS, podemos lograr que una comilla esté cercana a la otra.

    Quote
    .quote { display:none; float:left; height:69px; }
    .quotemark { display:none; float:left;
    font:bold 300px Helvetica; letter-spacing:-35px; line-height:300px; }

    Como puedes ver aquí, configuramos el espacio entre caracteres a un valor negativo para ubicar las comillas más juntas.

    Finalmente, queda el jQuery. Primero, definimos algunas variables para cambiar fácilmente el comportamiento del script:

    Quote
    var quoteSpeed = 500;

    var quoteContainerSpeed = 1000;

    var showQuoteSpeed = 5000;

    var cleanScreenSpeed = 500;

    var quoteBoxWidth = "300px";

    var quotes = [ {
    "quote" : "Las computadoras son buenas siguiendo instrucciones, pero no lo son <br />leyendo tu mente.",
    "author" : "- Donald Knuth"
    }, {
    "quote" : "Copiar y pegar<br />es un error de diseño.",
    "author" : "- David Parnas"
    }, {
    "quote" : "Si resaltas todo,<br />nada estará resaltado.",
    "author" : "- Art Webb"
    }, {
    "quote" : "Primero, resuelve el problema. Luego, escribe el código.",
    "author" : "- John Johnson"
    }
    ];

    var currentQuoteIndex = 4;

    Como puedes ver, los valores pueden cambiarse fácilmente. También podemos agregar comillas a la variable de comillas.

    Ahora que el documento está listo, necesitamos comenzar la animación. Esto está colocado en una llamada al método por separado, ya que tendremos que volver a usarlo luego.

    Quote
    // Document ready
    $(document).ready(function()
    {
    startAnimation();
    });

    /* Starts the animation */
    var startAnimation = function() {
    setTimeout(function() {
    showLeftQuote();
    }, quoteSpeed);
    }

    Ahora encadenaremos llamadas a funciones, con el objetivo de hacer que el script funcione. Como puedes ver, llamaremos a la función showLeftQuote luego del tiempo configurado. Al encadenar funciones luego de un tiempo determinado, podemos ejecutar la función en el momento indicado.

    Quote
    var showLeftQuote = function() {
    $(".leftquote").show();

    setTimeout(function() {
    showRightQuote();
    }, quoteSpeed);
    };

    var showRightQuote = function() {
    $(".rightquote").show();

    setTimeout(function() {
    showQuoteContainer();
    }, quoteSpeed);
    };
    Ya tenemos las comillas izquierdas, y las derechas visualizándose. Ahora nos queda expandir la caja.

    var showQuoteContainer = function() {
    $("<p />")
    .html(quotes[currentQuoteIndex].quote)
    .css({ "display" : "none"})
    .appendTo($(".quote"));

    $("<p />")
    .addClass("author")
    .html(quotes[currentQuoteIndex].author)
    .css({ "display" : "none"})
    .appendTo($(".quote"));

    $(".quote")
    .show()
    .animate({ width : quoteBoxWidth }, quoteContainerSpeed, function() {
    showQuote();
    });
    }

    También inyectamos el contenedor de la cita con el actual texto de índice. Expandimos el ancho de la caja de cita, y luego cuando la animación haya terminado, revelamos la cita.

    Quote
    var showQuote = function() {
    $(".quote").children().fadeIn();

    setTimeout(function() {
    clearQuote();
    }, showQuoteSpeed);
    }

    Sólo un simple efecto de fundido, y tanto la cita como el autor se mostrarán. El último paso de este bucle es despejar la cita actual, y comenzar nuevamente.

    Quote
    var clearQuote = function() {
    // Determine the curren quote index
    if(currentQuoteIndex == quotes.length - 1) {
    currentQuoteIndex = 0;
    }
    else {
    currentQuoteIndex++;
    }

    // Fade out the quotation marks
    $(".quotemark").fadeOut();

    $(".quote")
    .empty()
    .css({ width : "0px" });

    setTimeout(function() {
    startAnimation();
    }, cleanScreenSpeed);
    });
    }

    Como ya hemos configurado currentQuoteIndex, este bucle entero comenzará de nuevo con la siguiente cita.

    Y eso es todo. Recuerda probarlo en varios navegadores, ya que las fuentes se renderizan distinto dependiendo del navegador.

    Haz clic en este enlace para ver una demostración del efecto >>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 35 | 6:08 PM
    Zen Coding: Escribiendo HTML y CSS como un Maestro Zen

    Probablemente el título suene capcioso pues los Maestros Zen no se dedicarían a este tipo de cosas, pero si lo hiciera, estoy seguro que no gastarían sus valiosos segundos escribiendo a mano decenas de líneas en HTML y CSS sino que aplicarían el Zen Coding.

    Zen Coding no es más que un método de abreviación de código que se escribe con una sintaxis muy similar a la de CSS, por lo que si conoces este y HTML, estás casi preparado para comenzar a facilitar tu vida.

    Ejemplos de código creado con Zen Coding
    Antes de empezar me gustaría presentarles este Demo online de Zen Coding, en el cual podrán probar los siguientes ejemplos o por si simplemente desean "jugar".

    En un caso práctico, si quisiéramos crear el marcado para un menú tendríamos claro que necesitamos un tag de navegación y luego una lista, esto supondría mínimo unas 7 líneas de código escritas a mano, pero podrían reducirse a menos de 15 caracteres con Zen Coding del siguiente modo (para el cual solo bastaría presionar Ctrl+, para expandir):

    Quote
    nav>ul>li.item*5>a

    Quote
    <nav>
    <ul>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    </ul>
    </nav>

    Donde nav, ul, li y a son los nombres de los tags tal y como los conocemos; el signo de mayor que (>) indica que el tag anterior posee tags hijos, en este caso nav es padre de ul, así como ul es padre de li.

    El uso del punto (.) sirve para crear clases, por lo que .item crea una clase llamada ítem, del mismo modo en que el signo de gato (#) sirve para crear ids por lo cual #main crearía un id llamado main.

    También se puede observar el uso del asterisco (*) con el fin de multiplicar un tag, asi li*5>a crea 5 tags li que contienen a su vez cada uno un link. Asimismo es posible agregarle el signo de dólar ($) al nombre de clase o id para enumerar los ítems, usando el ejemplo anterior:

    Quote
    nav>ul>li.item$*5>a

    Quote
    <nav>
    <ul>
    <li class="item1"><a href=""></a></li>
    <li class="item2"><a href=""></a></li>
    <li class="item3"><a href=""></a></li>
    <li class="item4"><a href=""></a></li>
    <li class="item5"><a href=""></a></li>
    </ul>
    </nav>

    Crearía el mismo marcado salvo porque los ítems ahora tendrán números consecutivos como item1, item2

    Algunos pensarán que es más tardado ahora dar click en el espacio vacío para rellenarlo, pero no es necesariamente así, pues puedes generar código envolviendo texto. En el caso de tener la lista de ítems del menú como la siguiente:

    Inicio
    Portfolio
    Contacto

    Solo bastaría seleccionar todo y presionar Ctrl+H y escribir la siguiente abreviatura:

    Quote
    nav>ul>li.item$*>a

    Quote
    <nav>
    <ul>
    <li class="item1"><a href="">Inicio</a></li>
    <li class="item2"><a href="">Portfolio</a></li>
    <li class="item3"><a href="">Contacto</a></li>
    </ul>
    </nav>

    Lo anterior envolvería a cada ítem con su respectivo li y a en una lista de menú. Se aprecia que sólo se elimina la cantidad de ítems a generar pues eso lo decidirá Zen Coding al momento de generar la lista.

    Poniendo otro ejemplo, por lo general el marcado básico de una página se compone por un tag html que contiene un head y un body, el cual a su vez contiene header, section y footer, para crear el marcado con Zen Coding sólo es necesaria una línea como la siguiente:

    Quote
    html:5>header+section+footer

    Quote
    <!DOCTYPE HTML>
    <html lang="es_ES">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <header></header>
    <section></section>
    <footer></footer>
    </body>
    </html>

    Con la cual aprendemos además que el signo de mas (+) sirve para crear tags hermanos y que Zen Coding obvia por nosotros el crear todo el marcado “obligatorio” que se compone de html, head y body; incluso creando el doctype y meta necesarios.

    Descargar Zen Coding
    Zen Coding
    está disponible para una gran cantidad de Editores, entre ellos los más comunes en las tres plataformas (Mac, Windows y Linux), entre los cuales destacan los siguientes por ser desarrollados directamente por el equipo detrás de Zen Coding puesto que cuentan con todas las características posibles:

    • Aptana/Eclipse
    • TextMate
    • Coda
    • Espresso
    • Komodo Edit/IDE
    • Notepad++
    • PSPad

    Pero también es posible obtenerlos de desarrolladores ajenos, lo cual no brinda una garantía de funcionamiento completo pero por lo general deberían de funcionar bien, como es el caso de los plugins para:

    • Dreamweaver
    • Sublime Text
    • UltraEdit
    • Top Style
    • GEdit
    • BBEdit/TestWrangler
    • Visual Studio
    • EmEditor
    • Sakura Editor
    • NetBeans

    Todos los anteriores pueden ser descargados desde el sitio oficial de Zen Coding en Google Code.

    Donde aprender más de Zen Coding
    Probablemente te interese seguir leyendo la wiki oficial del proyecto, o una deliciosa "chuleta" (cheatsheet) con las abreviaciones de Zen Coding.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 36 | 5:08 PM
    Animación por medio de ActionScript 3


    Las interpolaciones básicas en Flash realizadas manualmente son útiles para cuando es algo sencillo y rápido. Pero son tediosas si son muchos objetos, si esos objetos dependen de un evento, si sus cualidades son adquiridas dinámicamente etc. Para dar solución a esto recurrimos a la animación mediante el uso de código.
    Cuando trabajamos con una extensa cantidad de objetos en nuestra lista de visualización y los mismos requieren movimiento o transformación de sus características como tamaño, transparencia o color, o detectar eventos como un clic del Mouse, la interpolación tradicional es una desventaja ya que la misma se vuelve excesivamente pesada e incontrolada en algún punto. También en muchos proyectos nos encontramos con la necesidad de mover elementos según su estado anterior por ejemplo la posición de un punto a otro aleatoriamente.

    Ventajas
    Sin dudas las ventajas son mucho mas a la hora de programar movimiento mediante código, lo seguro que si la experiencia es buena, es que jamás se vuelva a crear interpolaciones manuales, ya que descubrirá que al final se tiene mejor control sobre los objetos, mejor calidad y menos tiempo de corrección.

    Veamos el ejemplo más simple: Se nos requiere mover un objeto en el escenario de un punto x a otro con un total de tiempo de 3 segundo para la animación completa.

    En modo tradicional es muy simple, agregamos el objeto al escenario, creamos una interpolación de imagen, nos fijamos en cuantos cuadros por segundos esta la película y multiplicamos por ejemplo 24 cuadros por 3 segundo, esto nos da la cantidad total de nuestro próximo fotograma clave (key frame) donde finalizara nuestra interpolación.

    Muy bien! El objetivo fue cumplido satisfactoriamente y nos podríamos sentir que algo tan simple no debería presentar problemas a ninguna persona que viese nuestra animación. Pero comienza a surgir los primeros problemas, como por ejemplo el equipo (hardware): Las animaciones manuales dependen mucho de el tipo de hardware donde se este ejecutando el player, en un equipo con poca memoria RAM y un video pobre, sin dudas que los cuadros por segundos que definimos en 24/s caerá abruptamente a mas de la mitad, por lo tanto nuestra animación estimada en 3 segundo finalizara en aproximadamente 5.

    En la animación por código no sucede eso ya que se define la velocidad en cuadros o en tiempo, por lo tanto la sincronización es realizada por el player según las prestaciones de donde se ejecute.

    Otro problema es si el cliente nos pide una modificación en la distancia recorrida. Aquí no solo vamos a tener que editar los puntos de inicio y fin sino también ajustar la cantidad de frames. En contrapartida desde código con unos 10 segundos de nuestro tiempo nos alcanzara para editar ese cambio.
    Pero como la realidad supera la ficción nuestro cliente nos sugiere que el movimiento no sea tan lineal, que prefiere por ejemplo un rebote al final.
    Hasta aquí en lo tradicional nos tomaría un buen rato entre frames y movimientos para lograr algo “parecido”. Desde código con solo indicar la física en una línea logramos resultados óptimos.

    Principios Básicos
    Cualquier tipo de animación mediante código requiere un medio donde ejecutarse linealmente, así como un objeto sobre el escenario utiliza la línea de tiempo, en código usaremos la constante ENTER_FRAME del paquete flash.events y hereda de Event, para desencadenar un evento por cada pasada del cabezal en un fotograma.

    Actionscript:

    Quote
    Pelicula_mc.addEventListener(Event.ENTER_FRAME,enterFrameEvent)

    Aunque en la línea de tiempo solo tengamos 1 frame la película ejecutara la pasada del cabezal las veces que indiquemos en los fotogramas por segundos. Al crear un objeto como por ejemplo un movieClip desde Actionscript el mismo hereda su línea de tiempo (time line) propia con las mismas propiedades de la línea principal del escenario. Por ejemplo los frames por segundos. Utilizando el evento ENTER_FRAME podemos entonces aplicar por cada entrada a un frame una propiedad al objeto, como desplazarlo en un eje, por lógica ya estamos creando una interpolación de movimiento. Los eventos ENTER_FRAME son agregados a los objetos heredados de InteractiveObject (Stage, Sprite, MovieClip, TextField, etc.) mediante un listener (escuchadores), podemos tener cuantos escuchadores y objetos en el escenario o un ENTER_FRAME en el Stage para administrar todos los objetos.

    Actionscript:

    Quote
    this.addEventListener(Event.ENTER_FRAME,enterFrameEvent)

    function enterFrameEvent (e:Event):void {
    trace("acción por cada pasada del cabezal")
    }

    El evento ENTER_FRAME no cuenta con las fases de captura ni de propagación así que por lo tanto dicho evento se agrega a cualquier elemento heredado de InteractiveObject este o no en la lista de visualización.

    Otra de las ventajas que se cuenta con la animación mediante código es el incremento de rendimiento que se logra con respeto a la animación tradicional.
    El procesador y placa de video son mejor administrados por el FlashPlayer y en su última versión 10.1 incorpora aceleración por hardware.

    Es importante destacar que al agregar un listener ENTER_FRAME a un objeto este no deja de emitir el evento hasta que el mismo no sea removido, por lo tanto es una muy buena costumbre de que aquellos ENTER_FRAME que no utilicemos los removamos, esto incrementara el rendimiento del player.

    Actionscript:

    Quote
    stage.addEventListener(MouseEvent.CLICK,stageClick);
    stage.addEventListener(Event.ENTER_FRAME,enterFrameEvent);

    function enterFrameEvent(e:Event):void
    {
    trace(this.mouseX);
    }

    function stageClick(e:MouseEvent):void
    {
    stage.removeEventListener(Event.ENTER_FRAME,enterFrameEvent);
    trace("click")
    }

    El siguiente ejemplo elimina el evento ENTER_FRAME al hacer clic en el escenario. Eliminado el evento nuevamente puede ser creado indefinidamente.


    Al mover objetos mediante código el siguiente paso será realizar sin dudas un efecto de física, como por ejemplo rebote, elasticidad o gravedad.

    Para estos efectos no hay más opción que recurrir a las matemáticas y transcribir aquellas operaciones a funciones que simulen dicha realidad en un campo virtual.

    Los efectos físicos sobre un objeto son innumerables, desde el movimiento lineal o ondulatorio, sea con aceleración o des aceleración en cualquiera de sus etapas inicial o final.

    También sin dejar de lado todas las variantes que se pueden conseguir sumando gravedad y fricción de un objeto. Analizaremos los casos más comunes de la física, ya que los mismos son los mas recurrentes a la hora de realizar animaciones.

    Aunque contemos con un solo fotograma el cabezal pasa por ese mismo cuantas veces indiquemos en los frames por segundos.

    Aceleración
    La aceleración de un objeto puede ser lineal y proporcional en su velocidad en la que se realiza el efecto. Un claro ejemplo de aceleración lineal es el siguiente.

    Para este ejemplo se requiere un clip de película en el escenario con el nombre de instancia “peli_mc”.

    Actionscript:

    Quote
    peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
    function EventEnterFrame(e:Event):void
    {
    peli_mc.x += 5;
    }

    El movimiento lineal sea cualquiera su dirección se da proporcional e igual su velocidad de desplazamiento. (+=)

    Aquí ya tenemos una simple interpolación donde el objeto se mueve linealmente y con una velocidad proporcional por cada pasada del cabezal.

    Pero de seguro que la idea es lograr una aceleración y desaceleración del objeto, sea al principio, final o ambas.

    Si por ejemplo queremos que un objeto de desplace a un punto indicado inicialmente rápido y se detenga gradualmente tendríamos que calcular la distancia entre ambos puntos, dividir la distancia en por un factor y a dicho resultado sumar a la posición actual del objeto, luego dividir ese segmento nuevamente por el mismo valor y sumar la posición actual del objeto, así sucesivamente hasta que no queda mas distancia. El ojo percibirá un efecto de desaceleración al final de la interpolación.

    Actionscript:

    Quote
    var destinoX:uint = stage.stageWidth - peli_mc.width;
    var velocidad:uint = 5;
    peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
    function EventEnterFrame(e:Event):void
    {
    peli_mc.x += (destinoX- peli_mc.x)/velocidad;
    }

    Fíjese en el ejemplo que agregamos dos variables nuevas, una de ellas es el punto de destino final, el cual es el ancho del escenario menos el ancho del objeto.

    El factor de velocidad, cuanto mas grande el numero el efecto demorara mas en completarse.

    Cuando el objeto este mas próximo al destino final, su velocidad se reduce proporcional.

    Elasticidad:
    Este tipo de interpolación se destaca por el rebote en la animación, la que puede ser al inicio, final o en ambos extremos de la animación. El rebote esta dado por la multiplicación de sus valores relativos de posición por un factor asignado. Luego por cada ciclo repite los pasos de aceleración.

    Actionscript:

    Quote
    var destinoX:uint = stage.stageWidth - peli_mc.width;
    var velocidad:Number = 8;
    var locationObj:Number = 0;
    var rebote:Number = 0.8;
    peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
    function EventEnterFrame(e:Event):void
    {
    var distancia:Number = (destinoX-peli_mc.x)/velocidad;
    locationObj += distancia;
    locationObj *= rebote;
    peli_mc.x += locationObj;
    }

    La elasticidad la simulación de un elástico, el objeto se pasa y vuelve de su destino final hasta detenerse. También puede darse en sentido inverso o en ambos.

    Gravedad:
    El efecto de gravedad esta dado por varios factores que deben igualar la realidad de la vida cotidiana. Uno de ellos es el factor de fuerza y peso del objeto. También interviene un valor que representa el rebote del objeto para darnos una mejor experiencia sobre el efecto buscado.

    Por lo tanto en este caso vamos a tener que declarar los valores iniciales como fuerza, peso y también los valores finales de tope o piso y también el factor de rebote. Sin dudas que si analizamos podemos ver como desde la animación simple lineal del primer ejemplo fuimos agregando efectos físicos sin muchos problemas y con resultados muy buenos sin incrementar la cantidad de frames de nuestra película.

    Actionscript:

    Quote
    var destinoY:uint = stage.stageHeight - peli_mc.height;
    var velocidad:Number = 0;
    var rebote:Number = 0.9;
    var gravedad:Number = 5;
    peli_mc.addEventListener(Event.ENTER_FRAME, EventEnterFrame);
    function EventEnterFrame(e:Event):void
    {
    velocidad = velocidad + gravedad ;
    peli_mc.y += velocidad/5;
    if (peli_mc.y> destinoY) {
    peli_mc.y = destinoY ;
    velocidad *= -rebote ;
    }
    }

    Como se puede observar aquí se declaran nuevas variables como velocidad, rebote y gravedad. La variable velocidad se va incrementando gradualmente mientras la animación se completa.

    El rebote es el factor que se resta de la distancia por cada ciclo de movimiento, el mismo debe ser menor a 1 para que el objeto de la sensación de perdida de fuerza. Si lo dejamos el valor en 1 el objeto no deja de rebotar. Si en cambio lo incrementamos el objeto rebotara cada vez más lejos del límite o piso que indicamos.

    La variable gravedad es la encargada de manejar la velocidad con la cual es atraído el objeto al punto final.

    Nota: El punto final o destino fue definido en la línea.

    Actionscript:

    Quote
    var destinoY:uint = stage.stageHeight - peli_mc.height;

    Estos tres principios básicos de física son los que mas se requieren a la hora de animación por código, o en su defecto son los más recurrentes para lograr otros efectos. Mezclando cualquiera de ellos o modificándolos levemente se puede lograr entornos muy realistas de simulación. No hay limites a la hora de simular formulas físicas en Actionscript, solo se requiere un poco de matemáticas y lógica.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 37 | 5:18 PM
    Como centrar una pagina web

    Cada vez hay monitores más grandes y con mayor resolución, y eso es algo que hay que tener en cuenta eso al momento de diseñar un web.

    ¿Páginas centradas?
    Me refiero a que por defecto, el contenido de las páginas está alineado a la izquierda, es decir, el contenido de tu página está pegado al borde izquierdo de la ventana del navegador.

    Esto nunca fue un problema cuando la mayoría usaba monitores de 800 x 600, pero ahora (y desde hace bastante tiempo) este tipo de resolución casi ha desaparecido, entonces conviene diseñar pensando en monitores con resoluciones mayores.

    Es mucho más fácil darse cuenta de esta diferencia con una imagen, aquí te muestro cómo se vería una web centrada y alineada a la izquierda…


    Como centrar una página web en el navegador
    Ahora que ya sabes que hay una gran diferencia, es hora de ver cómo hacemos para centrar un diseño web… en realidad es bastante fácil.
    Lo primero que hay que hacer es encerrar todo el contenido de la página en un elemento <div> y darle un atributo id, en este caso usaré:

    Quote
    id="content"

    Luego vamos a la hoja de estilos y agregamos esto:

    Quote
    #content { width: 990px; margin: 0 auto; }

    Lo que estamos haciendo aquí es primero que nada darle un ancho al elemento, esto es lógico ya que cuando quieres centrar algo dentro de otra cosa tienes que saber de que tamaño son.

    margin: 0 auto; significa que ese elemento tiene un margen de 0 arriba y abajo, y un margen automático para izquierda y derecha, este margen automático es el que lo centra.

    Te darás cuenta con esta imagen:

    Eso es lo básico al momento de centrar una página web, de hecho hay muchas cosas más, pero la idea es dejar este post lo más sencillo posible.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    emmanuelb11
    Mensajes: 204
    Reputación: 3
    Mensaje Nº 38 | 4:57 PM
    Quote
    Como centrar una pagina web
    muy interesante GUARAGUAO, no sabia que podrian ver mi web asi si no esta centrada

    Compartir es vivir :)
    Administrador
    Mensajes: 44
    Reputación: 0
    Mensaje Nº 39 | 8:43 PM
    Muy bueno, lo que más me ayudo y planeo implementar próximamente en mi web sera "aumentar o disminuir la fuente".
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 40 | 12:58 PM
    Crear banderas onduladas y cintas en Illustrator

    En el presente post vamos a crear unas cintas usando Adobe Illustrator de una manera sencilla y practica.

    Inicialmente creamos un nuevo documento especificando el tamaño del área de trabajo. En este tip el tamaño de dicha área será de 400 x 300 px.

    Ahora seguimos los siguientes pasos:

    1. Creamos un circulo de tamaño considerable en el área de trabajo, quedando de la siguiente manera:

    2. Ahora lo que debemos hacer es al circulo que acabamos de crear aplicarle el efecto de Extrusión y Biselado (Menú Efecto -> 3D -> Extrusión y Biselado) y hacemos los siguientes ajustes (los que aparecen en círculos rojos) y damos clic en OK:

    3. Ahora vamos a crear tres rectángulos verticales similares, pero con colores de relleno diferentes y sin color de borde, quedando de la siguiente manera:

    4. Ahora seleccionamos las tres barras que creamos, y las arrastramos hacia el bloque de la parte derecha que se llama Simbolos:

    NOTA: En caso de no tener esa ventana de símbolos, para mostrarla debemos ir al menú Ventana y escogemos donde dice: Símbolos.

    5. Al momento de soltar las barras, se nos abre un pequeño cuadro de diálogo, el cual vamos a dejar como aparece a continuación.

    6. Ahora procedemos a borrar las barras que tenemos en el área de trabajo y seleccionamos el circulo que tenemos creado. En el lado derecho de la pantalla buscamos la pestaña que se llama Apariencia y damos doble clic donde dice: Extrusión y Biselado 3D.

    NOTA: En caso de no tener esa pestaña de Apariencia, para mostrarla debemos ir al menú Ventana y escogemos donde dice: Apariencia.

    7. Al momento de dar doble clic se nos abrirá la ventana de propiedades del efecto Extrusión y Biselado 3D, en la cual hacemos clic en el botón “Mapear Ilustración” y en la ventana que se nos abre la dejamos de la siguiente manera:

    Fíjense que el símbolo que escogemos es el que creamos en los pasos anteriores, la superficie que debemos tomar es la última que nos muestre, y una vez esté el símbolo lo giramos para que quede en la posición que está en la figura, y damos clic en OK en ambas ventanas.

    Y listo, nuestra cinta está terminada y nos quedó de la siguiente manera:

    Solo basta que ustedes hagan pruebas con otras opciones a ver cómo les quedan y espero les haya servido este pequeño tip.

    Saludos!


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 41 | 1:13 PM
    Textos con textura en Illustrator CS5

    Hoy un cliente me pidió rediseñar un logo que el ya tenía, pero me dijo que le gustaría que usara la textura de una piedra como parte del texto del nombre de su compañía. Después de querer convencerlo que es preferible usar logos con colores sólidos, el intento fue infructuoso.

    Empezaremos con Photoshop. Lo primero que tenemos que hacer es crear o retocar la textura de la piedra, en mi caso me pedían usar la imagen de una piedra especifica (La piedra de los 12 ángulos, creo que habrán escuchado de ella, sino pues les cuento que es una piedra incrustada en un mural inca en el Palacio de Manco Inca en Cusco – Perú). Así que después de retocar la imagen la exporto en formato jpg.

    Vamos a Illustrator y al meollo de asunto. Abrimos un nuevo archivo AI, vamos a Archivo – Colocar elegimos la imagen y le damos en Colocar. Seguramente la imagen se ve algo grande, pues vamos a redimensionarla un poco para que este dentro de las dimensiones de nuestro nuevo archivo AI. Le damos clic derecho sobre la imagen elegimos Transformar – Escala, para mi caso use la opción Uniforme y agregas el porcentaje de las dimensiones que sean correctas.

    Ahora nos fijamos en la parte superior debajo del menú principal la opción que dice Incrustar, le damos clic y vemos que se desaparecieron las líneas en forma de X que habían sobre la imagen. Para terminar arrastramos la imagen hasta el panel de Muestras y listo, ya podemos usar nuestra textura en los textos.

    Tip para texturas en Illustrator

    También es posible aplicar todas las opciones de transformación a la textura (mover, rotar, reflejo, escala y distorsionar) solo tienen que deshabilitar la pestaña de Objetos y elegir la opción Motivos.

    Si les sirvió o no, me hacen saber aunque me contentaría saber que al menos lo hayan leído, hasta pronto.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 42 | 1:16 PM
    Crear texto con imagen de relleno en Illustrator

    Con el presente tip lo que vamos a hacer es que nuestro texto tenga de relleno una imagen usando Illustrator CS3, de una manera rápida y sencilla muy diferente a la mencionada en este tip pero para CS5.

    Los pasos a realizar son los siguientes:

    1. Creamos un nuevo documento en Illustrator, en nuestro caso es de 800x600px.

    2. Ahora vamos a pegar la imagen que va a quedar de fondo, y encima de ella colocamos el texto, quedando de la siguiente manera:

    3. Luego vamos a seleccionar tanto la imagen como el texto y nos vamos al menú Objeto -> Máscara de Recorte -> Crear, y nos quedará algo como esto:

    4. Y para finalizar vamos a colocarle un borde negro para dar más realce al texto, para ello vamos a la ventana de Color (F6) y escogemos el color negro, en donde nos quedará algo como:

    Y listo eso es todo… podemos hacer lo mismo con diversas imágenes y textos. Otros ejemplos serían:

    Espero les sea de utilidad y cualquier cosa no duden en comentar..


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 43 | 2:20 PM
    HTML y CSS: Ejemplos de layouts

    Establecer los elementos dentro de un diseño web (maquetación) empleando CSS correctamente, puede ser algo bastante complicado para los novatos. Y esto sucede porque no siempre se comprende en forma correcta. Por esta razón comenzamos una serie de artículos relacionados con la creación de layouts, en todas las formas posibles de hacerlo.

    Por supuesto que lo más sencillo y más empleado es la creación de layouts fijos, que es con lo que comenzaremos en este artículo. Para comprender mejor el desarrollo en cada paso, hemos optado por darle colores brillantes a las diferentes capas, con la finalidad de que puedan ver como se comportan los elementos.

    Para todos los casos, utilizaremos la distribución clásica, colocando un “header”, una capa central donde van los contenidos divididos en columnas y un pie de página. Lo único que variaremos serán las capas que se encuentran en la capa central. De esta forma, podemos ya establecer la primera distribución de capas y el encabezado de la página de ejemplo, que tiene el siguiente código HTML:

    Quote
    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>Layout fijo</title>
     <link href="css/estilo.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
     
     <!-- Contenedor para toda la página -->
     <div id="contenedor">
     
     <!-- Capa destinada al header -->
     <div id="cabecera">
     
     </div>
     
     <!-- Capa de contenidos, columnas, etc. -->
     <div id="principal">
     
     </div>
     
     <!-- Capa para el pie de página -->
     <div id="pie">
     
     </div>
     
     <!-- Cierre del contenedor de toda la página -->
     </div>
    </body>
    </html>

    Dado que se trata de una página de ancho fijo, debemos en primer lugar, establecer el ancho de toda la página, además de los márgenes automáticos para que la misma quede centrada. Es por ello que hemos establecido una capa contenedora (div id=”contenedor”). También es posible hacerlo en cada una de las capas hijas (“header”, “principal” y “pie”), pero resulta más sencillo y lleva menos líneas de código de esta forma.

    Quote
    body  {
      margin: 0;
      padding: 0;
      background: #777;
      font-family: arial, helvetica, sans-serif;
      }
     
    #contenedor {
      width: 900px;
      margin: 0 auto;
      }
     
    #cabecera {
      background: #f60;
      }
     
    #principal  {
      background: #fff;
      display: table;
      }
     
    #pie  {
      background: #f60;
      }

    Para que las capas sean visibles, será necesario que tengan algo de contenido, por lo que de momento no podrán visualizar nada en el navegador, a pesar de que hemos dado el color de fondo a todas las capas para que posteriormente sean claramente diferenciables.

    Ahora agregaremos el título de la página dentro de las etiquetas <h1> y </h1> dentro de la capa “header”, y algo de contenido en el pie de página, que es todo lo que llevarán en este ejemplo. Para darle algo de formato a estos elementos, agregaremos las siguientes líneas al archivo CSS:

    Quote
    #cabecera h1  {
      margin: 0;
      line-height: 90px;
      text-align: center;
      }
     
    #pie p  {
      margin: 0;
      text-align: center;
      line-height: 40px;
      }

    Como puede apreciarse, ambas capas tienen su tamaño determinado por el elemento contenedor, a través de la propiedad “line-height”. Se han colocado los márgenes a cero para evitar que la capa contenedora se “mueva” con los márgenes que los elementos <h1> y <p> tienen por defecto.

    Estructura a dos columnas
    Hay muchas formas de conseguir la misma distribución, pero para este ejemplo hemos elegido la siguiente forma de hacerlo. Primero determinamos las capas, empleando dos divs con identificador “izquierda” y “central” y le agregamos algo de contenido de ejemplo para que adquieran algo de volumen para ver el ejemplo. Luego le agregamos las siguientes líneas al archivo CSS:

    Quote
    #izquierda  {
      width: 200px;
      padding: 10px;
      display: table-cell;
      background: #fff;
      }
     
    #central  {
      padding: 10px;
      background: #0f6;
      display: table-cell;
      width: 660px;
      }

    Determinamos el ancho de las capas de forma tal que sumadas ocupen todo el ancho de la capa contenedora, teniendo en cuenta que los márgenes y rellenos (padding) que les demos a cada una de ellas también deben ser sumados. En el caso del presente ejemplo, el ancho de la capa contenedora es 900px, y las dimensiones de las capas “izquierda” y “central” son:

    Capa “izquierda”: 200px (width) + 10px (padding-left) + 10px (padding-right) = 220px
    Capa “central”: 660px (width) + 20px (padding derecho e izquierdo) = 680px
    220px + 680px = 900px

    Importante: Esta forma de tomar las dimensiones es válida para los navegadores modernos. Para Internet Explorer 6 o anterior, los rellenos no deben ser sumados, por lo que las capas deberán ser de 220px y 680px de ancho respectivamente. Para ello, deberán crear otro archivo CSS para este navegador y crear el link condicional al mismo en forma de comentario.

    Para que ambas capas se coloquen una al lado de la otra, hemos optado por darle el valor “table-cell” a la propiedad “display”, aunque pueden hacerse con ambas capas flotantes, o con una capa flotante dentro de la otra. Como dijimos antes, hay varias formas de hacerlo, pero hemos optado por este ejemplo por resultar más sencillo.

    Luego, simplemente agregamos algo de contenido a ambas capas, como en el ejemplo, y tendremos el layout de ancho fijo a dos columnas. Pasar a un diseño a tres columnas es muy sencillo.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 44 | 12:08 PM
    Coloca un mapa de Google Maps como imagen de fondo de tu web

    Google Maps, se ha convertido en un elemento prácticamente imprescindible en nuestras aplicaciones webs, para que todos nuestros usuarios puedan saber donde nos encontramos. Pero que pensarían si les damos la opción de ponerlo como fondo de nuestra web.

    Para lograr hacer esto, debemos de jugar con algunas propiedades de hojas de estilos, como son z-index o position: absolute.

    Lo primero que debemos de hacer, es obtener el API Key de Google Maps. Para ello debemos de hacer clic en el siguiente enlace y cumplimentar lo que nos pida. Se tarda muy poco.

    Lo siguiente que debemos de hacer, es configurar los archivos HTML y CSS de nuestro sitio, para lograr nuestro objetivo.

    Como ya hemos indicado, debemos de hacer uso de la propiedad z-index y absolute, para poder alinear y posicionar todo de forma correcta.

    Nos podemos descargar el documento html desde el siguiente enlace.

    Como puede ver, con el fin de conseguir este efecto, al id "map_canvas" (que genera el mapa de google - ver el archivo JSMapa aquí) le asignamos el estilo en línea de la posición absoluta con su superior/ derecha / izquierda / abajo todos los parámetros establece en 0 y luego también el z-index a 0. Es necesario colocarlo en el elemento BODY como el último elemento antes de la etiqueta.

    El documento CSS lo puedes ver aquí.

    Para los otros elementos DIV de la página, hemos creado el contenedor #countdown_dashboard, y le hemos dado posición absoluta y el valor de 100 a la propiedad z-index.

    De esta forma tan sencilla, podemos colocar nuestro mapa como fondo en nuestra aplicación.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 45 | 1:49 PM
    Javascript: Reproductor de música a pantalla completa en tu sitio web… ¡Gratis!

    Nos hemos topado con un hermoso reproductor de música a pantalla completa. Se trata, básicamente, de una manera original de presentar un playlist de archivos MP3 que alojes en tu sitio. Tan sólo por este mes, su descarga es gratuita, y aquí te decimos cómo obtenerlo.

    Haz clic aquí para ver una demostración >>

    Lo primero que debes hacer, es registrarte en el sitio web Codecanyon, lo cual es extremadamente sencillo. Haz clic aquí para registrarte en Codecanyon >>

    Una vez registrado, y habiendo iniciado sesión, debes descargar los archivos del reproductor desde aquí >>

    Ahora, tan sólo debes subir esos archivos al directorio de tu servidor, y enlazar los archivos Javascript y CSS necesarios, añadiendo las siguientes lineas al código de tu web:

    Quote
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="fullScreenMusic/soundmanager/script/soundmanager2.js"></script>
    <script type="text/javascript" src="fullScreenMusic/ttwFullScreenMusic.js"></script>
    <link rel="stylesheet" type="text/css" href="fullScreenMusic/css/style.css"/>

    Luego, deberás inicializar SoundManager, de esta manera:

    Quote
    soundManager.flashVersion = 9;
    soundManager.useHighPerformance = true;
    soundManager.wmode = 'transparent';
    soundManager.useFastPolling = true;
    soundManager.url = 'fullScreenMusic/soundmanager/swf/';
    soundManager.debugMode = false;

    Cómo último paso, debes comenzar el plugin a pantalla completa, así:

    Quote
    soundManager.onload = function () {
    $('.playlist').ttwFullScreenMusic({style:'fullscreen')};
    }

    Y eso es todo. Para que el reproductor sea funcional, debes colocar en tu código:

    Quote
    $(’.playlistSelector’).openMediaPlaylist({options});

    Y listo. En caso de tener alguna duda, dentro del archivo comprimido que descargarás puedes encontrar la documentación requerida (en inglés). Recuerda, debes apresurarte ya que la promoción sólo estará vigente durante el mes de abril. ¡Esperamos que lo disfrutes!

    Haz clic aquí para ver una demostración >>


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Algunas cositas interesantes y útiles (trátalas si quieres)
    Página 3 de 7«1234567»
    Búscar: