Diseña una jarra de cristal en Cinema 4D

En este tutorial, aprenderás cómo modelar una jarra en Cinema 4D.

En este video voy a demostrar el modelado de la jarra con una spline NURBS Torno y, lo que es editable y manipular los puntos para crear el labio superior. Con el uso de la explosión fx deformador, se añadió espesor de las paredes de la jarra. Por último, voy a cubrir el modelado de la manija con NURBS barrido y controlar el grosor de las curvas de escala.

Cómo exportar desde 3d Max para After Effects

El uso de un maxscript descargable, sacamos elementos como la luz, la cámara y los objetos nulos de 3ds Max ambiente en After Effects para composición adicional. 

Una de las características más esperadas cada usuario de 3ds Max anhela de su aplicación es tener que interactuar sin problemas con After Effects, al igual que aplicaciones 3d similares por ahí puede. 

Se recomienda una idea moderada de After Effects para esta sesión.

Diseña un ojo en 3DSMax

3DSMax es un software que proporciona una solución completa de modelado, animación, renderización y composición en 3D a los creadores de juegos, cine y gráficos de movimiento. 3ds Max 2014 aporta nuevas herramientas para generar multitudes, animar partículas e igualar perspectivas

Cómo interviene un diseñador dentro del diseño web

La idea principal es cubrir las etapas del diseño de una web y analizar cuál es el modo de proceder al acometer un proyecto en el momento actual de la web, caracterizado por la afluencia de dispositivos, algo que todavía se acentuará en el futuro. Además, se trata de comentar las herramientas que un diseñador debe utilizar para mejorar la calidad de su trabajo y su productividad.

Este recorrido por el trabajo del diseñador, sus herramientas y etapas, que podrás aplicar a la mayoría de los proyectos web, forma la tercera clase del Curso de Introducción al Desarrollo Web y está impartida por Daniel Martínez @Wakkos, diseñador profesional en CoolVillage, creador de los webcast #designIO y profesor enEscuelaIT, entre otras ocupaciones.

Daniel comienza formulando una pregunta interesante, que para muchos aún tiene la misma obsoleta respuesta, ¿quien usa Photoshop para producir el diseño de una web?

La mayoría de las personas que responden usan Photoshop o alguna herramienta similar, pero la realidad del diseño web hoy la ha dejado poco aconsejable. Entre otras muchas razones que @Wakkos nos comenta en su clase, cuando diseñas con Photoshop estás dejando de lado los móviles y lo que vas a producir es un diseño que nunca vas a poder cumplir, porque en el panorama actual existen muchos tamaños de pantallas y la experiencia de usuario no será la misma desde un ordenador de Escritorio que desde un móvil.

Nota: Pero ojo, no es que Photoshop no sea una excepcional herramienta para diseño gráfico, a nivel de bitmap, sino que no responde a la realidad de la web de hoy. En el vídeo de la clase se explica mejor, lo que nos anima Daniel es a usar otros medios, que explicará, para diseñar el prototipo de una web.

Esta clase te ayudará tanto si tienes un proceso de trabajo definido, pues encontrarás que quizás tengas que modernizarlo, para ajustarlo a la realidad actual y aprovechar las herramientas más útiles para cubrir tus necesidades y ser más productivo.lo Si no tienes claro cuáles podrían ser los pasos para acometer un diseño web de la mejor manera, este vídeo te dará un buen punto de partida.

Encontrarás que durante el trabajo como profesional desarrollas unas costumbres y cada cual define unas etapas para la producción de un diseño propias. En este sentido debes intentar que tu proceso sean tan dinámico como puedas, o necesites. Haz de ese proceso de diseño y del dominio de las herramientas "tu propio framework", que podrás aplicar de una u otra medida en cada proyecto. Pero atención, esto no quiere decir que debas pasar por todos los pasos del proceso, tienes que ir aplicando los que cada trabajo requiera realizar, pero ten siempre en cuenta una cosa: el diseño lo vas a hacer directamente en HTML y CSS.

Esta es la introducción y declaración de intenciones de esta clase, "El proceso de diseño web", en la que Daniel expone, documenta y aporta herramientas para cada una de las etapas que él implementa en los proyectos de diseño. Según su experiencia son las siguientes.

Inventario de contenido

Wireframings

Estructurar contenido

StyleGuides & Pattern Libraries

Diseño linear, comenzando por el móvil., para jerarquizar y estructurar descartando lo superfluo y definiendo los espacios.

Gráfico de los breakpoints. 

En este punto es especialmente destacable la afirmación "o es responsive o no es una web", puesto que según @Wakkos, "el diseño web es diseño responsive".

Prototipo en HTML. 

Es una tarea técnica, en el que te guias por lo que has definido en los pasos anteriores. El espacio para la creatividad lo has cubierto antes. por lo que no debería ahora hacerse demasiado larga o demasiado incierta esta fase. Tardarás un tiempo que dependerá sobre todo de tu habilidad y rapidez. Para eso están las herramientas, como editores o los programas y librerías que te ayudan en el proceso de producción para poder aumentar la productividad como los Preprocesadores CSS o para ver la web en todos los dispositivos a la vez que la estás editando con Gostlab.

Presentar screenshots del prototípo

Revisar y volver a producir, presentar screentshots

Documento para producción"Sobretodo debemos de tener en cuenta al usuario", debes ser amigable con el futuro y utilizar los lenguajes y tecnologías al alcance de los diseñadores para crear respaldos (fallback) de modo que diseñes un sitio para hacerlo "a prueba de futuro".

En esta clase debe quedarte claro que Desarrolladores y diseñadores deben conocer y dominar el "front" (el frontend, todas las tecnologías para maquetación web y programación del lado del cliente). Ese el punto de unión y el idioma en común de estos colectivos. Si tanto diseñadores como desarrolladores conocen el "front" los dos se pueden coordinar y colaborar mejor en los proyectos. "Equipos de trabajo son buenos cuando diseñadores y desarrolladores dominan el Front".

Vea el Proceso de Diseño a continuación en el siguiente enlace

Aprende a usar Phyton paso a paso

Python es un lenguaje de programación de propósito general, cuya expansión y popularidad una apuesta por la simplicidad, versatilidad y rapidez de desarrollo.

Python es un lenguaje de scripting independiente de plataforma y orientado a objetos, preparado para realizar cualquier tipo de programa, desde aplicaciones Windows a servidores de red o incluso, páginas web. Es un lenguaje interpretado, lo que significa que no se necesita compilar el código fuente para poder ejecutarlo, lo que ofrece ventajas como la rapidez de desarrollo e inconvenientes como una menor velocidad.

                    

Sigue aprendiendo más con los siguientes tutorial2 , tutorial3 , tutorial4 , tutorial5 , tutorial6

Diseña tu propia caricatura con Photoshop

 En primer lugar, tenemos que tener en cuenta la perspectiva. Unas pocas imágenes se toman y se compararon con el empate con el fin de probar la altura, la proximidad, el ángulo y los tipos de lentes '. Para esta caricatura, coloqué la cámara alrededor de 1 metro de distancia, ajustar la altura aproximadamente a la nariz. Cabeza y cuerpo son ligeramente girado en ¾, así que tenemos una perspectiva de dos puntos, por lo tanto, tengo que llamar la atención a la alineación de los ojos y las comisuras de la boca. Respecto a la iluminación, he utilizado sólo la luz difusa. La fuente de luz más fuerte, el que está en el lado derecho de la cabeza, es relativamente cerca y tiene una tonalidad amarillenta, casi blanco. La luz secundaria proviene del entorno, al volver del fondo amarillo, techo, paredes y suelo. Su color es más saturado, pero su luminosidad es más débil.

                     

Trato de precisar la perspectiva que marca, el escorzo, formas, anatomía y yo superposición también buscar una mejor organización en la página. Evito colocar la imagen centralizada porque el centro de la tela es una región fuerte y tiende a hacer que la figura rígida. . Prefiero moverme a uno de los lados y quizás un poco hacia arriba o abajo para tener una composición más interesante de luz y color antes de crear la paleta de colores, analizo la relación entre la luz y la oscuridad y se dividen en dos grupos: la luz lado y lado oscuro. El lado de la luz es la que está bañada por las más intensas luces. En él, encontramos brilla, los colores más claros y menos saturada (en general, pero tenemos excepciones) y el tono medio. En el lado oscuro, las sombras proyectadas y la forma, los tonos más oscuros y saturados (de nuevo, hay excepciones) y la la luz reflejada. Distinguir claramente estos dos grupos es la clave para obtener el volumen y la intensión del espacio a cualquier forma. Generalmente, tomo 3 a 6 colores para cada elemento de la imagen, como el pelo, la piel, los ojos, la boca, la camiseta y así sucesivamente . Estos colores se dividen en los dos grupos que he mencionado antes. A medida que la pintura va, añadir y cambiar algunos colores de acuerdo con los nuevos resultados y mezclas que tengo, pero yo siempre trato de pegarse a los colores que previamente elija. Consejo: creo la paleta de colores en la otra capa y bloquearlo para no pintar en forma accidental. Color de bloqueo que considero uno de los pasos más importantes, y si se hace bien, la pintura será mucho más fácil. En este paso, no ampliar y reducir no me preocupo por sacar las pinceladas. La idea principal es poner el color correcto en el lugar correcto y ajustar la paleta de colores si es necesario. creo una capa debajo de la capa del dibujo y pinto elemento de cada foto con su respectivo medio tono. A continuación, añadir las sombras y las luces poco a poco. Es importante realizar el bloqueo con calma porque es fácil perder el contacto con la pintura e ir demasiado pronto en los valores más oscuras o más claras. Consejo: Constantemente me entrecerrar los ojos y tratar de identificar a todas las áreas que necesitan ajuste. Escudriñando los ojos hace que sólo vemos las grandes formas ignorando los detalle       

         

 

            
                


        

Perfeccionamiento de los bordes

estar satisfecho con el color de bloqueo, puedo reducir la opacidad de la capa de dibujar y crear una nueva capa por encima. Pinto todas las áreas con aparezcan las líneas del drenaje, suavizar las pinceladas y determinar dónde hay esquema con más o menos contraste. Consejo: Siempre trato de variar los bordes añadiendo o quitando contraste, así que tengo dos, bordes perdidos y encontrados bordes. Estos cambios dan vitalidad a la pintura. Trabajo Organizado Durante el proceso de Trato de mantener mis capas el más simple y el más organizado posible. Hasta la mitad del proceso de pintura, trabajo con sólo 2 o 3 capas: una para el fondo, otra para la figura y una temporal. Se trata de una capa de seguridad, por lo que trabajo en la pintura, sin afectar lo que hay en la capa inferior y cuando me contento con el resultado puedo combinar y crear otra capa temporal para continuar con la sesión de pintura. La lista de capas aumenta sólo en la etapa final de la pintura . Este es el paso donde pinto los ojos, dientes, pelo, texturas, brillos y detalles oscuros. Puedo crear grupos de capas para cada elemento. Los grupos son grandes para organizar y visualizar rápidamente lo que estás trabajando.

Crea mapas 3D atractivos con Photoshop

3D Map Generator es un conjunto de acciones, estilos, PSD e iconos con los cuales podremos crear atractivos mapas en 3D en Photoshop con muchisimas variantes.

Una vez seleccionado el mapa que deseamos (en diferentes capas se encuentra una gran cantidad de mapas) daremos rienda suelta a la acción para que cree el efecto de 3D. Luego podremos decorar nuestro mapa con los diversos elementos que encontraremos en grupos por tema, sean estos edificaciones, señaladores, clima, etc.

Para que se entienda un poco mas su funcionamiento, aquí va un video mostrando como utilizar este recurso:

Cómo insertar imágenes en HTML

En esta lección verás como insertar imágenes en HTML, además como hacer una imágen de sustitución, crear vínculo a esa imágen y crear un fondo en degradado en Photoshop para pasarlo como imagen de fondo de nuestra pagina web.

Las imágenes de sustitución las hacemos con la ayuda de Dreamweaver puesto que codificar todo el procedimiento es un tanto engorroso y Dreamweaver codifica todo por nosotros, la idea de una imagen de sustitución es que muestre una imagen distinta cuando se pase el Mouse encima de ella, muy util cuando pensamos en un Menú de Navegación que cambie los colores.

Por su parte utilizamos imágenes degradado para aplicar una apariencia distinta al blanco de fondo en una pagina web, los navegadores reproducen infinitamente una imagen para que abarque el total del ancho y alto de la pantalla del monitor que visualiza la pagina, si utilizamos esta propiedad a nuestro favor podremos tener una imagen de menos de 1Kb de peso para que ocupe toda la pantalla sin que esto interfiera en la carga total del sitio.

Sigue aprendiendo en el siguiente video 

Cómo vincular una imagen en Dreamweaver

En este tutorial de html, verás como crear un vinculo en una imagen, pero el vinculo vamos a insertar en una zona de la imagen y no en toda.

Antes de ello debes saber como crear vínculos en html igualmente te mostré en otro tutorial como agregar imágenes en una pagina web.

La técnica de Mapear una imagen, se trata nada más de delimitar a zonas en una imagen para insertar vinculos que lleven a otra pagina web o a un correo electrónico. Como parte del curso de páginas web aprenderás a mapear una imagen y vincular cualquier area de una imagen a otro sitio web, una página web interna de tu sitio o un Email

 Dreamweaver realiza esta tarea por nosotros, en el video veremos como mapear una imagen para enlazarla con las paginas web internas de nuestro sitio y hacer este navegable.

El mapeo sirve no solamente para menus de navegacion, sino para enlazar zonas de una imagen (foto tuya) con tu sitio web, por ejemplo.

Es importante que tener en cuenta que los enlaces resultantes no son rastreables por Google, te lo digo solo para que lo sepas.

Otro aspecto a mensionar es que Dreamweaver inserta al final de tu código html y antes de cerrar el BODY la etiqueta MAP, el codigo del ejemplo es el siguiente:

<img usemap=”#Map” src=”images/barranavegacion.gif” border=”0″ alt=”" width=”800″ height=”73″ />
<map id=”Map” name=”Map”>
<area shape=”rect” coords=”133,41,212,62″ href=”pagina1.html” />
<area shape=”rect” coords=”231,42,312,65″ href=”lipsum.html” />
<area shape=”rect” coords=”329,39,412,64″ href=”leccion3.html” />
<area shape=”rect” coords=”435,43,514,65″ href=”leccion4_vinculos.html” />
<area shape=”rect” coords=”533,41,606,64″ href=”leccion5_imagenes.html” />
</map>

Crea un menú desplegable para tu web con CSS y Jquery

En este tutorial verás como armar un menú desplegable para pagina web con una tabla como elemento desplegado, con ayuda del CSS para darle forma a los elementos de la table y Jquery que hace toda la magia de permitir tablas y otros elementos HTML en el menú desplegable.

Lo interesante de este código es que también nos permite insertar imágenes dentro del menú, puedes compartir columnas y filas, colocar imagen al centro, etc, todo en aras de mejorar la estética de la pagina web.

Tutorial Megamenu

 Megamenu de GeekTantra,  version 2 del Megamenu ya con correcciones y es la version usada para el siguiente  menú.

Tambien puedes insertar videos de youtube dentro del menu desplegable:

y por supuesto las tablas:

Para que todo funcione primero debes llamar las librerias necesarias esto lo hacemnos en el HEAD de nuestro documento html, no omito manifestar que no estoy utilizando HTML5.

Luego en el BODY escribes todo el codigo que vayas a utilizar para el menu:

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td class="logotipo"><table width="980" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="620" height="75">&nbsp;</td>

<td class="buscador">&nbsp;</td>

</tr>

<tr>

<td colspan="2" style="padding-left:100px;">

<ul class="megamenu">

<li>

<a href="http://www.photoshopytutoriales.com">inicio</a>

</li>

<li>

<a href="javascript:void(0)">Diseño de Páginas web</a>

</li>

<li>

<a href="javascript:void(0)">Schedule</a>

<div style="width: 300px;">

<table width="300" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td>Sunday</td>

<td><a href="sd-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-sunday-a.html" class="linkcontenidodias">A</a> - <a href="sd-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-sunday-c.html" class="linkcontenidodias">C</a> - <a href="sd-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Monday</td>

<td><a href="sd-monday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-monday-a.html" class="linkcontenidodias">A</a> - <a href="sd-monday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-monday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-monday-c.html" class="linkcontenidodias">C</a> - <a href="sd-monday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Tuesday</td>

<td><a href="sd-tuesday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-tuesday-a.html" class="linkcontenidodias">A</a> - <a href="sd-tuesday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-tuesday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-tuesday-c.html" class="linkcontenidodias">C</a> - <a href="sd-tuesday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Wednesday</td>

<td><a href="sd-wdn-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-wdn-a.html" class="linkcontenidodias">A</a> - <a href="sd-wdn-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-wdn-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-wdn-c.html" class="linkcontenidodias">C</a> - <a href="sd-wdn-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Friday</td>

<td><a href="sd-friday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-friday-a.html" class="linkcontenidodias">A</a> - <a href="sd-friday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-friday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-friday-c.html" class="linkcontenidodias">C</a> - <a href="sd-friday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Saturday</td>

<td><a href="sd-saturday-aa.html" class="linkcontenidodias">AA</a> - <a href="sd-saturday-a.html" class="linkcontenidodias">A</a> - <a href="sd-saturday-ba.html" class="linkcontenidodias">BA</a> - <a href="sd-saturday-bc.html" class="linkcontenidodias">BC</a> - <a href="sd-saturday-c.html" class="linkcontenidodias">C</a> - <a href="sd-saturday-d.html" class="linkcontenidodias">D</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Standings</a>

<div style="width: 120px;">

<table width="120" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td><a href="standings-sunday.html" class="linkcontenidodias">Sunday</a></td>

</tr>

<tr>

<td><a href="standings-monday.html" class="linkcontenidodias">Monday</a></td>

</tr>

<tr>

<td><a href="standings-tuesday.html" class="linkcontenidodias">Tuesday</a></td>

</tr>

<tr>

<td><a href="standings-wednesday.html" class="linkcontenidodias">Wednesday</a></td>

</tr>

<tr>

<td><a href="standings-friday.html" class="linkcontenidodias">Friday</a></td>

</tr>

<tr>

<td><a href="standings-saturday.html" class="linkcontenidodias">Saturday</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Stats</a>

<div style="width: 300px;">

<table width="300" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td>Sunday</td>

<td><a href="stats-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-sunday-a.html" class="linkcontenidodias">A</a> - <a href="stats-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-sunday-c.html" class="linkcontenidodias">C</a> - <a href="stats-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Monday</td>

<td><a href="stats-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-sunday-a.html" class="linkcontenidodias">A</a> - <a href="stats-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-sunday-c.html" class="linkcontenidodias">C</a> - <a href="stats-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Tuesday</td>

<td><a href="stats-tuesday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-tuesday-a.html" class="linkcontenidodias">A</a> - <a href="stats-tuesday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-tuesday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-tuesday-c.html" class="linkcontenidodias">C</a> - <a href="stats-tuesday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Wednesday</td>

<td><a href="stats-wed-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-wed-a.html" class="linkcontenidodias">A</a> - <a href="stats-wed-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-wed-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-wed-c.html" class="linkcontenidodias">C</a> - <a href="stats-wed-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Friday</td>

<td><a href="stats-friday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-friday-a.html" class="linkcontenidodias">A</a> - <a href="stats-friday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-friday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-friday-c.html" class="linkcontenidodias">C</a> - <a href="stats-friday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Saturday</td>

<td><a href="stats-saturday-aa.html" class="linkcontenidodias">AA</a> - <a href="stats-saturday-a.html" class="linkcontenidodias">A</a> - <a href="stats-saturday-ba.html" class="linkcontenidodias">BA</a> - <a href="stats-saturday-bc.html" class="linkcontenidodias">BC</a> - <a href="stats-saturday-c.html" class="linkcontenidodias">C</a> - <a href="stats-saturday-d.html" class="linkcontenidodias">D</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Teams</a>

<div style="width: 300px;">

<table width="300" border="0" cellspacing="3" cellpadding="2" id="tabular-content">

<tr>

<td>Sunday</td>

<td><a href="teams-sunday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-sunday-a.html" class="linkcontenidodias">A</a> - <a href="teams-sunday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-sunday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-sunday-c.html" class="linkcontenidodias">C</a> - <a href="teams-sunday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Monday</td>

<td><a href="teams-monday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-monday-a.html" class="linkcontenidodias">A</a> - <a href="teams-monday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-monday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-monday-c.html" class="linkcontenidodias">C</a> - <a href="teams-monday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Tuesday</td>

<td><a href="teams-tuesday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-tuesday-a.html" class="linkcontenidodias">A</a> - <a href="teams-tuesday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-tuesday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-tuesday-c.html" class="linkcontenidodias">C</a> - <a href="teams-tuesday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Wednesday</td>

<td><a href="teams-wed-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-wed-a.html" class="linkcontenidodias">A</a> - <a href="teams-wed-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-wed-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-wed-c.html" class="linkcontenidodias">C</a> - <a href="teams-wed-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Friday</td>

<td><a href="teams-friday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-friday-a.html" class="linkcontenidodias">A</a> - <a href="teams-friday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-friday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-friday-c.html" class="linkcontenidodias">C</a> - <a href="teams-friday-d.html" class="linkcontenidodias">D</a></td>

</tr>

<tr>

<td>Saturday</td>

<td><a href="teams-saturday-aa.html" class="linkcontenidodias">AA</a> - <a href="teams-saturday-a.html" class="linkcontenidodias">A</a> - <a href="teams-saturday-ba.html" class="linkcontenidodias">BA</a> - <a href="teams-saturday-bc.html" class="linkcontenidodias">BC</a> - <a href="teams-saturday-c.html" class="linkcontenidodias">C</a> - <a href="teams-saturday-d.html" class="linkcontenidodias">D</a></td>

</tr>

</table>

</div>

</li>

<li>

<a href="javascript:void(0)">Inserta Videos</a>

<div style="width: 320px;">

<iframe width="300" height="225" src="http://www.youtube.com/embed/jjp_LF29Xso" frameborder="0" allowfullscreen></iframe>

</div>

</li>

<li>

<a href="javascript:void(0)">Una imagen en el menu</a>

<div style="width:320px;">

<a href="http://www.photoshopytutoriales.com/tutoriales-photoshop-cs4-indice/"><img src="http://www.photoshopytutoriales.com/wp-content/uploads/2010/06/cursodephotoshopcs4enespanol.jpg" width="300"></a>

</div>

</li>

</ul></td>

</tr>

</table></td>

</tr>

</table>

Lo importante de destacar es que todo funciona con listas, es decir, el concepto de menu desplegable utilizando listas se mantiene, esto es por la relevancia que le da Google y por la facilidad de armado.

La estructura básica de cada uno de los items del menu es:

<li>Titulo del Menu<div>Aqui escribes el contenido a desplegar</div></li>

Para una mejor comprensión y para que tengas acceso al codigo en todo momento puedes descargar la version original desde Nettantra.

A continuación una versión simplificada y ya lista para usar: Desde Aqui, o bien Ver el Demo del ejercicio.