Alejandra Martes, 15 de Julio de 2008 a las 14.11

Taller de Adobe Dreamweaver: Preguntas frecuentes

Flash, html, formulario, XHTML, Talleres, dreamweaver, tutorial dreamweaver, curso dreamweaver, taller dreamweaver, HTTP

Dreamweaver Hola a todos. Esta vez vamos a responder las preguntas que estuvieron dejando en los comentarios de las clases anteriores. Esta clase se irá actualizando con nuevas respuestas, así que estén al tanto por futuros agregados.

Dentro de las preguntas verán definiciones útiles, tutoriales, consejillos y algunas recetas para optimizar nuestra forma de trabajar. ¡Si necesitas que profundicemos en algún tema, no te olvides de dejarnos tu comentario!

¿Cuál es la diferencia entre XHTML, HTML y HTTP?
¿Existen atajos de teclado en Dreamweaver? ¿Cuáles son?
¿Cuál es la mejor herramienta para poner texto sobre un fondo, ya sea un color pleno, en gradiente o sobre una imagen?
¿Cómo puedo hacer un degradado en los bordes de una página sin tener que pegar una imagen completa y que de ambos lados quede igual?
¿Cómo inserto un botón de Adobe Flash con Adobe Dreamweaver y asegurarme de que funcione?
¿Puedo hacer que un link me lleve a otra parte del mismo HTML? ¿Qué etiqueta uso?
Receta para hacer un formulario. ¿Qué debo poner en la parte de accion? ¿Cómo validar?

1. Diferencia entre XHTML, HTML y HTTP

HTTP significa HyperText Transfer Protocol (Protocolo de Transferencia de HiperTexto) y es el protocolo desarrollado por W3C para las acciones que se realizan en la web. A través de este protocolo es que se definieron la sintaxis y la semántica de la comunicación, estructurando la web y todos los elementos que forman parte de ella –del lado del servidor y del cliente– para posibilitar la relación entre ambas partes.

HTML significa HyperText Markup Language. HTML es un lenguaje basado en etiquetas o tags. La sintaxis de este lenguaje tiene varias reglas:

Se escribe con estructura tree o de árbol (ver imagen)
Todo tag debe cerrar: <a>texto</a>
Los tags deben cerrar en orden inverso al que fueron abiertos: <p><strong>texto</strong></p>
Los tags pueden contener atributos: <tag atributo="valor">
Debe haber una raíz obligatoria. Esto significa que tiene que existir un tag que encierre al resto: <html>

XHTML es la evolción del HTML en un lenguaje mucho más estricto. Esta evolución se debe principalmente a la diferencia entre los navegadores. Los navegadores no son más que intérpretes de código. Sin embargo, los desarrolladores que crearon los navegadores se tomaron el trabajo de interpretar el código y amoldarlo para que se “vea bien”, aceptando algunos errores. Por ejemplo, antes se podía poner <body>texto</body. Con XHTML estricto el texto debe ir siempre dentro de una etiqueta de párrafo: <body><p>texto</p></body>. Existe un XHTML transicional que admite algunos errores de este tipo, sin embargo el XHTML no, y directamente no valida los archivos con errores.

2. Atajos de teclado en Dreamweaver (varias versiones)

Todas las versiones de Dreamweaver incluyen una ayuda para saber cuáles son los atajos del teclado. Para ver este listado debes ir al menú de Edición (Edit) y seleccionar la opción Métodos abreviados de teclado (Keyboard Shortcuts). Estos atajos pueden cambiar de una versión a otra y más aún de un SO a otro.

3. Texto sobre fondo: color pleno, gradiente e imagen

No es muy difícil lograr ubicar texto sobre un fondo. Los tres tratamientos de fondo son muy similares: Haz clic aquí para ver el HTML

<div style="background-color:#FAFF33; width:100px; height:70px; float:left”><p style=”padding:5px; font-family:’Trebuchet MS’, Verdana, Arial; text-align:left”> hola</p></div>

En el primer div el fondo se da con color pleno: background-color:#FAFF33

<div style="background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_gradiente.jpg); background-repeat:repeat-x; width:100px; height:70px; float:left”><p style=”padding:5px; font-family:’Trebuchet MS’, Verdana, Arial; text-align:left”>hola</p></div>

En el segundo div se ve un gradiente. El div mide 100px x 70px. El gradiente se genera con una imagen del 70px de alto y 1px de ancho que está subida a nuestro servidor: background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_gradiente.jpg)

Después es necesario indicar que la imagen de fondo se repite sobre el eje de x: background-repeat:repeat-x

<div style="background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_imagen.jpg); width:100px; height:70px; float:left”><p style=”padding:5px; font-family:’Trebuchet MS’, Verdana, Arial; text-align:left”>hola</p></div>

En el último div, la imagen tiene las mismas dimensiones que el div. Esta imagen también está en nuestro servidor y se indica así: background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/div_imagen.jpg)

4. Degradado en los laterales de una página

El degradado en los bordes de una página se hace utilizando el mismo recurso anterior. La estructura de tu página puede estar dividida en 3 divs. El div del medio es el que posee el contenido de la página, mientras que los dos laterales únicamente incluyen un degradado.

gradientes laterales

Haz clic para ver el HTML

Para lograr un resultado similar, el código sería algo parecido a esto:

El primero es el div de la izquierda, con la imagen “gradiente_izq.jpg” que se repite en y: background-repeat:repeat-y

<div style=" background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/gradiente_izq.jpg); background-repeat:repeat-y; width:60px; height:600px; float:left"></div>

Este es el div donde se ubica el contenido del sitio:

<div style="background-color:#c0c0c0; width:680px; height:600px; float:left">contenido</div>

Este es el div de la derecha, con la imagen “gradiente_der.jpg” que también se repite en y: background-repeat:repeat-y

<div style="background-image:url(http://www.elwebmaster.com/wp-content/uploads/2008/07/gradiente_der.jpg); background-repeat:repeat-y; width:60px; height:600px; float:left"> </div>

5. Insertar un botón de Adobe Flash en HTML

Para incorporar un objeto de Adobe Flash en un HTML deberás “embeber” ese objeto. Primero necesitas tener el archivo SWF subido a tu servidor. Luego, en tu archivo HTML agregarás el siguiente código

<embed src="http://www.elwebmaster.com/wp-content/uploads/2008/07/botonera.swf” width="600" height="30" quality="high" pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash” type=”application/x-shockwave-flash” bgcolor="#6699CC"></embed>

El código de color naranja deberás reemplazarlo por la URL de tu SWF.

El código de color celeste son variables visuales: el ancho y alto del SWF y el color de fondo.

Haz clic para ver el HTML con la botonera de Adobe Flash

6. Anclas: enlaces dentro de un mismo HTML

Las anclas son enlaces o links que nos llevan a partes del mismo documento HTML. ¿Les suena conocido? Es el mismo sistema que utilizamos para enlazar las preguntas del listado con las respuestas.

En el HTML tendremos dos partes:

El enlace (Ej.: Pregunta 1)
El destino del enlace (Ej.: Respuesta 1)

A cada parte se le agrega un código diferente:

Al enlace: <a href="#ancla1">¿Cuál es la diferencia entre XHTML, HTML y HTTP?</a>

Al destino del enlace:<a name="ancla1">La diferencia entre estos tres términos...</a>

Lo más importante es que el nombre del ancla sea el mismo, en este caso: ancla1.

7. ¿Cómo hacer un formulario?

En elWebmaster, nuestros talleres de Dreamweaver y PHP dieron sus respectivas clases para la creación y validación de formularios, tanto desde el front-end (Dreamweaver) como desde el back-end (PHP).