Taller Dreamweaver

Manual de Dreamweaver
Taller de Dreamweaver
Clase 01: Introduccin Bienvenidos al curso de Dreamweaver/HTML de elwebmaster.com En este curso de 22 clases S, 22!!!, vamos a aprender el uso del programa de Adobe para maquetado de pginas web en su versin CS3, sin dejar de lado el lenguaje de tags utilizado para la creacin de las mismas. En este caso veremos el XHTML en su versin 1.0 (eXtensible Hypertext Markup Language) que es el estndar actual. A quin va dirigido este curso Este curso va dirigido tanto para los que se inician, como para usuarios avanzados de Dreamweaver y de HTML. Para cada tipo de usuario seguramente va a haber una ayuda, ya que no solo se abarcar el uso del programa o la composicin del lenguaje, sino tambin pautas a seguir para una correcta escritura, disposiciones de la W3C, y tips de ayuda a la hora de maquetar una pgina. Tambin en este curso se har una introduccin al uso de estilos, para luego intersecar con el posterior curso de CSS. Utilizacin del curso El curso constar de 22 clases semanales, en las que iremos viendo las distintas herramientas de Dreamweaver (desde ahora Dw) a la vez que las comparamos con su uso en lenguaje XHTML. Tambin haremos algunas clases taller de ser necesario. En cada clase se vern temas especficos, diferentes, en los que se darn por sentados los conocimientos de clases anteriores. Mi recomendacin personal es que todo tipo de lector, tanto avanzado como principiante, lea el curso completo, ya que algunos podrn aprender y otros repasar los temas tratados, y a su vez seguir el hilo sin quedar mal parados en ninguna de las clases. Adems recuerden que siempre se puede aprender algo nuevo! A tener en cuenta Hay ciertas cuestiones en este curso que hay que tener en cuenta. Por una cuestin de estndar, vamos a aprender Dw pero que quede claro que no es el nico programa que se puede utilizar para crear paginas web, y adems que, sabiendo HTML solo necesitaramos un editor de texto para hacerlas. El Dw es solo una herramienta que nos facilita las cosas, pero no quiere decir que sin Dw no se pueden hacer pginas web. 1
Manual de Dreamweaver Por otro lado, como la mayora de los softwares de la actualidad, automatiza muchas cosas dando por supuesto que el usuario las prefiere, y que no siempre es lo que nosotros necesitamos para nuestra pgina. Personalmente no recomiendo usar Dw sin antes saber HTML, creo que lo importante es saber HTML y usar Dw para agilizar la creacin de la pgina, y no usar el Dw para hacer pginas ms rpido de lo que sera aprender el lenguaje. No confundamos, Dw es una herramienta y no ms que eso. En el curso por cada cosa que hagamos en modo visual en Dw iremos explicando su paso en lo que sera cdigo HTML as poder aprender ambas cosas a la vez. Conclusin Bueno, entre esta introduccin y el programa que podrn visitar en esta misma seccin, ya tenemos un vistazo general del curso que, como deducirn va a ser muy completo (si no lo es en 22 clases, qu nos queda!). Empezaremos la siguiente clase con fundamentos de HTML y Dw, y luego vamos a recorrer ambos hasta manejar todas sus caractersticas a nivel avanzado. Trataremos de cubrir todos los puntos y de la mayor simplicidad posible, aunque pueden dejar sus preguntas o comentarios que van a ser respondidos o incluso incorporados en el curso!
Clase 02: Objetos de Estudio Bienvenidos otra vez! Ya estamos en la segunda clase de Dreamweaver/HTML. En esta clase veremos ms en profundidad qu es el lenguaje HTML y cmo se articula con Dreamweaver. Adems conoceremos qu aspectos trabaja este programa a la hora de crear un sitio web. Otro punto a tratar son los estndares web y cmo son interpretados por los navegadores. Manos a la obra! Qu es Dreamweaver? Bueno, calculo que a esta altura la mayora de los que estarn siguiendo este curso sabrn qu es Dreamweaver pero, como no queremos dejar a nadie afuera, vamos a presentar el programa. Dw es un editor de pginas web que tiene, entre otras, la caracterstica de poder crear las pginas web en modo visual. Las pginas se editan en HTML que en s, es texto, y para visualizar los cambios o para ver bien en donde estamos parados y qu estamos tocando, debemos hacer un refresh de la pgina en nuestro navegador para obtener una previsualizacin. Dw permite mediante su modo visual, no solamente tener lo que estamos viendo actualizado constantemente, sino que tambin nos permite, mediante sus herramientas, crear el cdigo 2
Manual de Dreamweaver HTML de manera visual. A modo de ejemplo, ya que esto lo abordaremos ms tarde, podemos dibujar un encuadre, o crear un texto, aplicar colores, etc. sin escribir nada de cdigo, utilizndolo como un programa grfico o como si se tratara de un procesador de texto. Por este modo de crear pginas se dice que Dw es un editor WYSIWYG, porque lo que vamos viendo mientras creamos la pgina, es lo que saldr en el navegador. Dw se encargar de pasar todo lo que hagamos a cdigo HTML para que sea interpretado. Vale aclarar que Dw no es el nico programa que sirve para la creacin de pginas web. Qu es HTML? El HTML es un lenguaje de marcado que nos permite preparar documentos web insertando en l, texto e imgenes en una serie de marcas (tags) que controlan los diferentes aspectos de la presentacin y comportamiento de sus elementos. Los tags de HTML se escriben entre signos mayor y menor ( <ejemplo>) y ya vienen predefinidos de acuerdo con la versin utilizada del lenguaje (nosotros usaremos XHTML 1.0). Por ejemplo para el cuerpo de una pgina web se utiliza el tag <body> (bastante deducible :P). Todas las etiquetas de un documento XHTML deben ser cerradas. Qu es cerrar una etiqueta? Es definir su campo de accin. Cuando nosotros ponemos una etiqueta como por ejemplo la que tomamos anteriormente, <body>, estamos marcando el comienzo del cuerpo de una pgina web, pero tambin debemos indicar el final, y esto es lo que hace una etiqueta de cierre. En este caso la etiqueta sera </body>, como ven lleva una barra adelante. Luego cuando abordemos el lenguaje veremos ms cuestiones de sintaxis, por ahora dejemos esto ac. Porqu el curso es de Dw/HTML? Dijimos que el Dw transformaba todo lo que hacamos en modo visual, a HTML; entonces, Para qu en el curso se incluye HTML? Bueno, en primer punto, el saber HTML ya nos desliga de usar s o s el Dw y por lo tanto permite que el curso sirva para gente que utilice diferentes programas. Adems de esto, no es muy lindo presentar problemas a esta altura del curso, pero Dw no siempre har las cosas como queremos, y vamos a necesitar meter mano en el cdigo para poder acomodarlas a nuestro gusto. Mas all de esto, otros motivos no menos importantes son, por ejemplo, saber lo que estamos haciendo y, adems, a futuro cuando tengamos que agregar cosas externas, nuestro HTML se volver mas abstracto (con menos informacin sobre su presentacin) y necesitaremos tener idea de por qu las cosas estn armadas de tal o cual manera. 3
Manual de Dreamweaver Pensemos que este curso va a arrancar por lo bajo, a nivel principiante, sin ningn requerimiento para poder entenderlo ni aprenderlo, pero tambin en su tramo final estaremos usando tanto Dw como HTML a nivel avanzado, y sin lugar a dudas para esta altura ya tendremos que manejar ambas cosas; por lo menos esta es la intencin del curso. HTML y W3C El lenguaje HTML se rige bajo ciertos estndares que permiten a los creadores de webs saber la manera correcta de maquetar sus pginas asegurndose (o casi) , que sern vistasde forma correcta en prcticamente cualquier navegador actual. Tambin permite a los creadores de navegadores web, conocer estos estndares y as prepararlos para estar siempre actualizados y sacar provecho de las ventajas de las nuevas tecnologas que van surgiendo. Establece una relacin simbitica entre los diseadores y las empresas de software para realizar siempre productos estandarizados y actuales. Estos estndares los determina la W3C que es una organizacin que esta dirigida por Tim Berners-Lee, el creador de varias tecnologas web como URL, HTTP y el mismo HTML. Conclusin Hemos llegado al final de nuestra segunda clase, en la que aprendimos las nociones bsicas de los objetos de estudio del curso. Ya podramos decir que estamos preparados para abordar el uso del Dreamweaver y empezar a crear paso a paso nuestro propio sitio web.
Clase 03: Ingresando al programa Hola! Bienvenidos a la clase nmero 3 de nuestro curso de Dreamweaver/HTML. Hoy vamos a echarle un vistazo general al programa para familiarizarnos con la interfase y para que ustedes puedan ir investigando en el transcurso de la semana. Si bien se supone que muchos an no poseen los conocimientos necesarios para crear una pgina web completa es bueno ir metindose sin miedo en cada men para tener una idea de para qu sirve cada elemento. Conociendo Adobe Dreamweaver 1- Barra de men:
File Es
el
primer
tem
de
la
barra
de
(Archivo): men. 4
Manual de Dreamweaver En l encontramos opciones que les sern familiares en su mayora ya que se encuentran en varios programas de escritorio (Word, Excel, etc). Tenemos aqu la opcin, New(nuevo), Abrir(open), Save(guardar),Close(cerrar), y otras no tan comunes, pero que veremos como acceder a ellas desde diferentes lugares que explicaremos en futuras clases. Edit(Edicin): En este men, contamos con las ya conocidas, Copy(copiar), Paste(pegar), Select All(seleccionar todo), etc. Adems de las opciones comunes ya tenemos otras que explicaremos con un poco ms de detalle a medida que las vayamos utilizando durante el curso. View(Ver): Este men tiene opciones muy importantes para utilizar a la hora de hacer un sitio web. Podemos realizar Zoom in/out, activar reglas (rulers), poner una cuadrcula (grid), o acomodar guas para poder alinear los elementos que tenemos (en modo visual). Tambien desde aqu podemos abrir otros paneles tanto del modo visual como del modo cdigo, que nos servirn para ajustar preferencias de visualizacin entre otras cosas. Estas herramientas las van a utilizar mucho y les van a ir encontrando su utilidad a medida que trabajen con el programa, echen una mirada al men para recordar las opciones y luego a la hora de usarlas ya sabrn donde estn. No se preocupen si no entienden alguna herramienta, o el programa no les permite utilizarla; cuando estemos ms avanzados en el curso haremos alguna clase-taller para uso de herramientas y comodidad a la hora de usar el programa. Insert (insertar): Aqu podremos encontrar varios tipos de objetos para poner en nuestra pgina, como tablas, imgenes, links, etc. No vamos a hablar mucho sobre este men ahora porque Dw tiene una barra de acceso rpido para insertar objetos, y explicaremos las opciones de la misma ms adelante, por lo tanto sera explicar dos veces lo mismo. Modify (modificar): Es el men indicado para editar cualquier cosa que tengamos dentro de nuestra pgina. Desde aqu podremos cambiarle el tamao a algunas cosas de nuestra pagina, alinearlas, agregarles links, o eventos (Qu son? Lo veremos mas adelante, jeje). Text (texto): En este men encontraremos todas las opciones para modificar texto como si de un procesador de texto se tratara. Podremos alinearlo, cambiar la fuente, tamao, color y algunas otras cosas que las veremos cuando comencemos nuestra primera pgina (Vamos, que no falta tanto!!).
Manual de Dreamweaver Commands: La verdad que a este men no le encontr demasiado uso. Si bien tiene algunas cosas (como la de limpiar el cdigo por ejemplo), como este curso va de la mano con HTML no veo la necesidad de estas herramientas, aunque pueden investigarlas cuando ya estemos avanzados en nuestra pgina. Sin embargo creo que hacer bien una pgina, tambin consiste en ir armndola prolijamente, y no darle un repaso al final para acomodarlo ms o menos y que siempre nos falte algo por emprolijar. Site (sitio): Este men es el que nos permite definir nuestro sitio a la hora de empezar a trabajar con Dw. Tambin tiene algunas opciones para hacernos la vida fcil a la hora de trabajar directamente sobre un servidor. Ms adelante cuando creemos y configuremos nuestro primer sitio, veremos las opciones detalladamente. Window (ventana): Este men tiene todas las herramientas referidas a nuestro espacio de trabajo. Podemos ocultar o mostrar otros menes, paneles, ventanas y ordenar nuestros espacios a gusto. Help (ayuda): Aqu encontraremos la ayuda que nos ofrece Adobe para utilizar el programa. Si bien tiene cosas interesantes, yo en mi experiencia personal, nunca us la ayuda, no slo de este programa sino de ninguno. Muchas veces porque se pasan de bsicas o se vuelven para expertos. Los casos restantes, se tornan intiles (:p). Conozco gente que la ha usado para aprender incluso el uso del programa. Yo prefiero un tutorial como los que se dan en elWebmaster.com;) hechos por gente que aprendi como uno lo esta haciendo, y que ya se top con los problemas que nos topamos nosotros a la hora de usarlo. Conclusin Llegamos al final de esta clase, como siempre los espero la semana que viene para seguir aprendiendo sobre la creacin de pginas web. Traten de ir familiarizndose con el programa, utilcenlo aunque no sepan hacer una pagina en s. Es muy importante conocer el entorno de trabajo para no volvernos locos el da que se nos ocurra hacer algo y no sepamos donde estn las cosas. senlo, investguenlo, vamos, vamos Anmense!!
Clase 04: Panel Insert, pestaa Common
Manual de Dreamweaver Buenas, buenas! Hoy vamos a presentar la cuarta clase del curso de Dw. La clase pasada vimos la barra de men con todas sus herramientas (algunas quedaron pendientes para mas adelante por su complejidad). Esta semana, vamos a ver los paneles de herramientas que, adems de tener muchas opciones que todava no conocemos, tiene accesos directos a varias de las cosas que ya vimos la clase pasada en la barra de men, pero de manera ms fcil y dinmica. Panel Insert (insertar) El panel de insertar nos provee de la gran mayora de las herramientas de diseo a la hora de realizar nuestra web. Ahora vamos a ir mostrando cada una y diciendo para que sirven. No se preocupen por los detalles porque mas adelante iremos usando cada una por separado mostrando el uso de todas sus opciones, y su manejo en HTML. Recuerden que estamos en la fase de presentacin del programa. Pestaa Common:
Aqu tenemos una vista del panel con sus pestaas y sus herramientas. Hyperlink: Mediante esta herramienta, podemos crear un enlace, por ejemplo, a un sitio externo (otra pgina), a una parte de nuestra pgina. Email-link: Con esta herramienta podemos crear un link a una direccin de email. Cuando un usuario haga clic, directamente le abrir su programa de mailing predeterminado (Outlook, Thunderbird, etc.), con la direccin que hayamos puesto nosotros en el link, listo para mandar el email. Named Anchor: Esta herramienta nos permite crear un punto de ancla para luego reconocerlo. O sea, nos permite marcar nuestra pagina, para luego poner links que vayan a esas marcas. Table: Nos permite crear una tabla con divisiones de columnas, filas, tamaos, y espaciados. Insert Div Tag: Nos permite crear el elemento Div, que es uno de los mas usados dentro del diseo 7
Manual de Dreamweaver web actual. Con el podemos crear cuadros en los que pondremos contenido, para luego ubicarlos donde a nosotros nos parezca. Images: Nos permite insertar imgenes, entre otras cosas (que veremos mas adelante). Media: Nos permite insertar animaciones Flash, y otros objetos multimedia. Date: Nos permite ingresar la hora actual en diferentes formatos (bastante intil por cierto). Server Side Include: Permite incluir un archivo de cdigo por fuera de la pagina actual (ya lo veremos tambin mas adelante, cuando lo vayamos usando). Comment: Sirve para ingresar un comentario dentro de nuestra pgina, que nos sirva de referencia a nosotros, pero que no afecte a la visualizacin (es una gua para los desarrolladores, pero el usuario que vea la pagina, no lo ver). Head: Con esta herramienta podemos incluir diferentes cosas en la cabecera de la pgina. La cabecera es la parte de la pgina que no se ver y en la que incluimos especificaciones como, por ejemplo, el ttulo de la pgina. Script: Nos permite ingresar cdigo de programacin dentro de una pgina, como por ejemplo Javascript. Templates: Esta herramienta sirve para crear un template a partir de una pgina que estemos haciendo, y marcarle regiones editables. En s, es para crear una base de pgina, sin contenido, para luego usarla con varios contenidos diferentes, si eso queremos. Tag Chooser: Sirve para seleccionar etiquetas HTML (o de otro lenguaje) e insertarlas directamente en nuestra pgina. No le veo otra utilidad que la de poder insertar una etiqueta, la cual nos hayamos olvidado el nombre. Innecesario, pero est :p . Conclusin 8
Manual de Dreamweaver Esta parte del taller es bastante larga, porque son demasiadas las herramientas a mostrar y la verdad que como este curso es para todos los niveles no quiero dejar nada afuera. Los que vengan siguiendo el curso semana a semana y no sean principiantes, tal vez se aburran un poco, aunque pueden repasar; y los que sean principiantes y no hayan encontrado nada anteriormente que puedan entender Pues ac esta la panacea del dummy webmaster!!! La semana que viene seguiremos con la exploracin de los paneles de herramientas, y luego empezaremos con nuestro sitio.
Clase 05: Panel Insert, pestala Layout
Y aqu estamos de nuevo! Volvemos con todo en nuestra clase 5. La clase pasada vimos la primer parte del panel insertar, la pestaa common. Hoy nos toca seguir con las dems pestaas, y ver hasta dnde llegamos. Me gustara que los que siguen o leen el curso enven sus preguntas o comentarios; las dudas que tengan. No se queden con las ganas, el curso est hecho para ustedes, y si no aprenden, de nada sirve el curso entonces. Entre todos podremos aprender y ensear. Panel Insert (insertar), segunda parte. Pestaa Layout:
Mode: Nos permite poner el modo de visualizacin del panel de layout. Insert Div Tag: Nos permite crear el elemento Div, que es uno de los ms usados dentro del diseo web actual. Estos son cuadros en los que pondremos contenido, para luego ubicarlos donde a nosotros nos parezca. Esta opcin ya la vimos en la pestaa common, en la que tambin se encuentra. Draw AP Div: Nos crea un elemento Div en el lugar en el que nosotros lo dibujemos a mano alzada. Se usa en modo visual como si se tratara de una herramienta rectngulo de un programa de edicin grafica. A veces no da el resultado deseado, as que conviene usar esta herramienta con cuidado. 9
Spry men bar: Nos crea una barra de men desplegable, en la que al pasar por un elemento del men, se despliega otro con ms opciones. La verdad no es la manera en la que yo la hara pero puede sacarnos de un apuro. Ms adelante veremos como hacer este tipo de menes, pero ms lindos :p . Spry tabbed panels: Esta herramienta es parecida a la anterior, pero en vez de crearnos un men desplegable, nos crea una barra de pestaas. Spry accordion: Otro de los regalitos de Dreamweaver para decorar festivamente nuestra pagina (ya me enoj con tanta cosita inservible). Esta herramienta nos agrega un men en forma de acorden, que cuando clickeamos cada una de las pestaas, el men se desplega hacia abajo abriendo un lugar en donde podemos agregar contenido. Es difcil de explicar su utilizacin, por ah lo ms prctico sera que lo prueben una vez que aprendamos a crear una pgina. Spry collapsible panel: Esta es la que ms me gusto de todas las spry. Nos crea una pestaa que cuando la cliqueamos, se nos abre una caja lentamente hacia abajo, en la que podemos poner contenido. Es una especie de spry accordion pero de un solo botn. Table: Nos permite crear una tabla con divisiones de columnas, filas, tamaos, y espaciados. Esta herramienta tambin se encuentra en la pestaa common que vimos y explicamos la clase pasada. Insert row abobe: Esta herramienta nos deja insertar una fila debajo de la fila en la que estemos parados actualmente. Siempre dentro de una tabla por supuesto. Insert row below: Al contrario de la anterior, esta herramienta nos deja incluir una fila por encima de donde estemos parados actualmente en la tabla. Insert column left: Agrega una columna a la izquierda de donde estemos parados en nuestra tabla. Insert column right: Agrega una columna a la derecha de donde estemos parados actualmente en nuestra tabla.
10
Frames: Nos permite crear frames, que son divisiones de nuestra pgina en la podremos cargar otras pginas diferentes. Iframe: A primera vista son parecidos a los frames ya que crean una divisin en nuestra pgina donde podemos cargar una segunda, aunque tienen diferencias muy importantes. Ya veremos a ambos ms adelante y sus ventajas y desventajas. Conclusin Bueno, por ahora dejemos la clase aqu. Como vern las opciones de Dw son muchas, y todava nos quedan muchas ms. Esperemos terminar pronto de verlas a todas as ya podemos crear nuestra primer pgina, empezar a ponerlas en accin, y comentar un poco ms a fondo cada una.
Clase 06: Panel Insert, pestaas Forms
Hola! Cmo andan? Preparados para otra clase de Dreamweaver? En esta clase, la numero 6, vamos a ver maaas herramientas del panel Insert. Y s son muchas herramientas, pero a no aflojarle, que esta es la parte ms pesada pe ro es importante un reconocimiento de la interfase para ya ir sabiendo por lo menos los nombres y qu son cada una de las herramientas, as cuando las expliquemos a fondo con sus usos, no nos sonarn a chino mandarn. Hoy nos toca revisar las herramientas de la pestaa Forms, y si podemos llegar a ver la pestaa Data, mejor, as sacamos esto mas rapido, y ustedes que siguen el curso tienen ms para estudiar durante la semana (me imagino que estarn probando las cosas que vemos en cada taller no? jeje).
Panel Insert (insertar), tercera parte.

Pestaa Forms:
Form: A que no saben para que sirve esta herramienta? Correcto! para insertar un formulario. Podemos usarla tanto en modo de diseo como en modo cdigo.
Los formularios nos sirven para que los usuarios puedan cargar datos, y as nosotros recibirlos desde nuestra pgina.
Cuando un formulario es enviado, enva todos los elementos del formulario con l.
11
TextField: Un textfield es un elemento de formulario, es el lugar donde se puede escribir texto, para que luego sea enviado por nuestro formulario.
Este elemento va dentro de un formulario, y cuando este se enva, enviar con l todos los textfields tambin.
Un ejemplo de un TF para que tengan una idea es el lugar donde ponen su nombre o su nickname, cuando se registran en una pgina. Hidden Field: Un Hidden Field es un TextField, slo que tiene una propiedad que lo hace oculto, as el usuario no lo puede ver, ni cargarle datos.
Sirven para nosotros, los administradores de sitios web, para poder precargarle informacin que necesitemos, un ejemplo fcil, qu navegador esta usando (en realidad es mas til que eso pero ya lo veremos). Text-Area: Un Textarea es un campo muy parecido a un textfield, slo que es ms grande, y tiene no solo una fila sino que puede tener varias.
Sirve para contener textos grandes y tambin nos ofrece barras de scroll para poder setearle un tamao, y si el texto excede el tamao del Text-Area, poder navegarlo con las barras. Checkbox: Un checkbox nos permite poner una cajita de checkeo (como las que aparecen al lado de acepta los trminos y condiciones estas sirven para que el usuario seleccione una o mas, entre varias opciones. Radiobutton: es igual que un checkbox, slo que permite elegir uno y solo uno entre varios radiobuttons. Adems, clickeando uno seleccionado, no se deselecciona (como pasa con los checkbox), aunque s lo hace cuando clickeamos otro radiobutton del grupo. Radiogroup: es un atajo que nos brinda Dw para poder poner varios radiobuttons que pertenezcan a un mismo grupo, y adems nos pone cada radiobutton entre las etiquetas label que nos permiten dar una identificacin a cada uno. List-menu: Nos permite poner un men desplegable de seleccin para que el usuario pueda elegir entre una de las opciones que le pongamos. Se usan mucho en los registros para seleccionar la fecha de nacimiento. Jump-menu: es como un list-menu, solo que sus opciones nos permiten llevar a quien las elija a otra pgina, u otro archivo.
Por ejemplo, podemos tener una lista de opciones de varias pginas, y que cuando el usuario clickee una en el men, lo lleve directamente. Image-field: Es un campo en el que podremos poner una imagen, y que al clickearlo enviara el formulario con lo que tengamos cargado.
12
En s, sirve como botn de enviar pero con la diferencia que podemos ponerle la imagen que nosotros queramos. File-field: Inserta una casilla con el botn de examinar para que el usuario pueda buscar y enviar un archivo a nuestro sitio. Button: nos permite insertar un botn, que va a tener varias funcionalidades que podremos elegir. Por ejemplo, enviar el formulario o borrar los campos del mismo entre otras cosas. Label: sirve para poner una descripcin a un campo, a modo de ejemplo: Acepta los trminos? Aquel texto es un Label de la checkbox. Fieldset: La herramienta fieldset nos permite agrupar campos de un formulario. Podemos crear un Fieldset y dentro poner los text-fields de datos del usuario, crear otro fieldset y poner los checkbox de preferencias, otro textfield y poner el boton de enviar formulario o borrar formulario. Spry validation textfield: esta opcin nos permite agregar un campo de texto (textfield) que adems de permitir que el usuario ingrese datos, podemos seleccionar que tipo de datos debe contener el campo y, si el usuario ingresa otra cosa, cuando intente enviar el formulario, le saldr un cartel de error.
Esto sirve por ejemplo si queremos que el usuario ingrese un email en nuestro campo, que ponga realmente un email y no cualquier cosa. Spry validation textarea: Esta opcin nos permite crear un textarea con validacin. Al igual que el anterior si el textarea no cumple con los requisitos de validacin, al intentar enviar el formulario nos dar error. Spry validation checkbox: y seguimos con validaciones. Es igual a un checkbox comn, pero verifica por ejemplo, si tenemos varios checkbox en un grupo y queremos que al menos uno este seleccionado (entre otras cosas). Spry validation select: al igual que el list-menu que vimos anteriormente este es igual con la diferencia que valida que el usuario haya elegido al menos una de las opciones del selector. Conclusin Bueno, espero que no estn muy cansados de ver tantas herramientas (yo si :p ) y no se preocupen (o preocpense) porque vienen muchas ms!! La clase que viene espero que ya estemos terminando con el panel Insert y ya dar comienzo a la creacin de nuestra primera pgina. Vayan practicando las cosas que vimos, mirando como funcionan y sus opciones.
13
No se queden solo con lo que vemos ac y nada mas, vanlo en vivo y en directo desde el Dw, as pueden entender todo lo que hace el programa, y si se animan, vanlo en modo cdigo as se van familiarizando con el HTML.
Clase 07: Pestaa Text y Favorites
Buenas y santas! Bienvenidos a otra clase de Dreamweaver/HTML. Esta vez nos toca (para variar) seguir con la barra de Insertar. Hoy aprenderemos de qu se tratan las pestaas Text y Favorites.
La pestaa que nos tocara ver hoy sera la pestaa Data pero la vamos a dejar para ms adelante, porque requiere para varios de sus elementos, conocimientos de bases de datos, e inclusive, tener creada una base de datos. Como todava estamos en la parte principiante de nuestro curso, la seccin Data no la podemos explicar. Sera perder el tiempo ya que se entender mejor ms adelante y para lo nico que nos va a servir ahora es para conocer los nombres y la verdad que nos va a atrasar en cosas ms importantes para esta etapa.
Vamos a pasar directamente a la pestaa Text y veremos tambin la pestaa Favorites, para dar por terminado (por el momento) el panel Insert.
Panel Insert (insertar), cuarta parte.

Pestaa Text:
Bold: Nos inserta un tag HTML <strong>texto</strong> que nos muestra en nuestra pgina el contenido en negrita (en el ejemplo sera texto).   Italic: Inserta los tags <em> </em> en los cuales su
contenido se ver en estilo itlica.  Strong: Es exactamente lo mismo que Bold. Esta es una de las cosas inentendibles que tiene Dw. La realidad es que el Bold debera tener el tag <b></b> (que existe y tiene el mismo efecto que el strong) y el strong, tener el <strong></strong>, valga la redundancia.  Emphasis: De nuevo.
Es exactamente lo mismo que el Italic.

14
Ac vamos a hacer un parate. Por qu? Quiero explicar un par de cositas: En realidad el lenguaje HTML tiene un tag <strong></strong> y un tag <b></b> en los cuales al ponerles texto dentro, este se ver en negrita. Lo mismo sucede con el <i></i> y el <em></em>, y las itlicas. Entonces porque existen diferentes? La respuesta es que como son tags comnmente usados dentro de los textos de una pgina web, es bueno poder definirles caractersticas especiales para poder usarlos en diferentes ocasiones. A ver, un ejemplo para que quede ms claro: Yo quiero que las citas de mi pgina aparezcan en itlica y los nombres propios tambin. Adems, quiero que los textos citados aparezcan ms chicos. Entonces, yo puedo predefinir a el tag <i></i> con un tamao de letra menor (ya veremos cmo) y luego slo necesitara poner las citas entre <i></i> (itlica con tamao menor) y los nombres entre <em></em> (solo itlica), y tendra a ambos con itlica, y las citas tendran a su vez fuente mas chica. Adems, tambin existen por una cuestin semntica: Por ejemplo, si trabajara en una revista y tengo que reforzar un encabezado que dira Taller de Dreamweaver, lo refuerzo en negrita con un <b></b>, ahora si tengo que reforzar un encabezado que dice Meteorito se dirige a la tierra, lo reforzara con un <strong></strong>. Solo por el valor semntico de la palabra. Los tags a nivel semntico prcticamente no se usan salvo por gente muy purista, pero estara bueno acostumbrarse a trabajar as, ya que una vez que se nos haga costumbre, estaramos haciendo un trabajo prolijo, sin necesidad de un esfuerzo mayor. Bueno, terminada esta no-breve explicacin, sigamos con las opciones de la pestaa.   Paragraph: Nos pone un texto seleccionado entre los
tags <p></p> (o bien, si no tenemos ninguno seleccionado, nos crea los tags vacos para que escribamos dentro). Estos tags conforman bsicamente, un prrafo.   Block-quote: Block-quote nos crea un bloque con
margen izquierdo en el cual podemos meter texto. Este sera el resultado.

15
Este texto sera un prrafo normal. Aqu tendramos el blockquote en accin. Siempre que escribamos dentro del blockquote mantendramos el margen para ordenar el texto.   Preformatted Text: El texto que escribamos dentro de
los tags de preformatted text (<pre></pre>) se va a mostrar en una letra con un buen espaciado y muy legible. Adems, los espacios que pongamos entre palabras u oraciones sern respetados. Ac vamos a hacer otro parate. Cuando nosotros escribimos en HTML un prrafo, por ejemplo: <p>El da esta nublado. Pero a mi me gusta igual.</p> En nuestro navegador se mostrar: El da esta nublado. Pero a mi me gusta igual. Ntese que la bajada de lnea (el enter) no fue tomado por el navegador. A tener en cuenta, el navegador no toma por ejemplo, los enters como bajadas de lnea ni los espacios de la barra espaciadora, como espacios reales (slo toma un espacio como real). Para poder hacer un enter (bajar una lnea) en nuestro texto y que se vea en el navegador tenemos que insertar el tag <br /> y para hacer un espacio adicional en un entre dos palabras, tenemos que escribir Volviendo al ejemplo anterior, para que en nuestro navegador salga la oracin tal cual la escribimos arriba, deberamos poner en el HTML: <p>El da esta nublado.<br /> Pero a mi me gusta igual.</p> El resultado de esta oracin si sera el siguiente. El da esta nublado. Pero a mi me gusta igual. Volvamos con las pestaas.     
 h1, h2, h3, : Sirven para marcar cabeceras, el h1 se utiliza

16
generalmente para los ttulos de mayor relevancia en una pgina, y los sucesores (h2,h3,) para los subttulos encadenados o textos de menor importancia con respecto a los anteriores. Adems, los h ponen el texto en mayor tamao (de acuerdo con su numeracin, el 1 es el ms grande) y formateado en negrita. El tag que utilizan es el <h1></h1>, <h2></h2>,   Unordered list: Nos crea una lista desordenada.
Esto quiere decir, sin numeracin. A modo de ejemplo:  Item 1  Item2     Ordered list: Nos crea una lista ordenada.
A modo de ejemplo: 1. item 1 2. item 2 3.    List item: es el tag que va a encerrar cada uno de los
elementos de una lista. Cuando creamos una ul o una ol esta nos indica el tipo de lista, y cada uno de los li dentro de esos tipos, va a crear una lnea de ese tipo. En los ejemplos anteriores, cada tem es un li, que difiere por su ordenamiento (puntos o nmeros respectivamente, aunque pueden ser otros).     
 Definition List, definiton term, definition description: Sirven para crear una lista de definiciones. La dl, definition list, crea el ttulo de la lista. La dt, definition term, crea el trmino a definir. La dd, definition descripcin, crea la descripcin del trmino anterior. Estas 3 funcionan en conjunto, a modo de diccionario.
17
Pongo un ejemplo para que lo puedan entender: Diccionario (esta es la dl) Dreamweaver: (esta es la dt) Programa para maquetacin de pginas web, creado por adobe. (esta es la dd) HTML: (esta es otra dt) Lenguaje de maquetacin web. (esta es otra dd) En general las Definiton list no son muy usadas por una cuestin de que la gente encuentra los mismos resultados usando otros tags, pero esta bueno conocerlas porque muchas veces nos pueden sacar de un apuro.   Abbreviation: esta opcin nos permite poner el tag
<abbr></abbr> con un ttulo dentro del primero. Quedara <abbr title=></abbr> Entonces nosotros podemos poner una palabra abreviada entre los dos tags, y la palabra entera en el atributo title. De esta manera, solo nos escribir la abreviatura, pero si pasamos el Mouse por encima, nos mostrar la palabra completa en un recuadro amarillo. Ejemplo: <abbr title=Dreamweaver>Dw</abbr> Acronym: Funciona exactamente igual al tag anterior. Su escritura en HTML es <acronym title="></acronym>. Su diferencia real es que el abbr se utiliza para abreviar una palabra, y el acronym para un acrnimo. Por ejemplo: <acronym title=HyperText Markup Language>HTML</acronym> Other Characters: Este botn nos permite agregar en donde tengamos posicionado el cursor, uno de los caracteres que seleccionamos de su lista. Estos caracteres tienen la particularidad de que no pueden ser escritos de la manera tradicional, y deben ser reemplazados para que los interprete el navegador. Caso contrario, no se vern en pantalla como corresponde. Un ejemplo de estos es el espacio en blanco que se escribe (sin las comillas) o las vocales con acento, á, í (para la letra a y la i con tilde, respectivamente).
18
Pestaa Favorites:

!vml]-->
 Una es que en modo cdigo, cuando empezamos a escribir el carcter (cuando escribimos el &), ya nos muestra una lista de los posibles caracteres a escribir. Pero la mejor de todas, es que escribiendo en modo visual, podemos poner acentos, o lo que queramos, que Dw nos convierte todos los caracteres automticamente. Pueden probar esto, escribiendo cosas en modo visual y pasando a modo cdigo, vern que en realidad esta todo como debe estar. Conclusin Esta clase no fue la gran cosa jeje, pero el tema de los caracteres especiales es muy importante. Cuantas veces habremos visto pginas en las que aparecen signos raros (No eran de Japn, eh?) y la verdad que este tipo de descuidos estropea mucho el diseo y hace que nuestra pgina se vea poco profesional. Es importante tener en cuenta que, por ms que en algunos navegadores se vean bien los caracteres especiales escritos tal cual son, se deben usar sus correspondientes reemplazos.
Clase 15: Lista
44
Como les va? Bienvenidos a otra clase de Adobe Dreamweaver/HTML. La esperaron con ansiedad? Espero que s. Hoy veremos el uso de listas; cmo son, sus diferentes tipos y las diversas aplicaciones que les podemos dar. Tal vez lean por ah (googleando), sobre ciertas propiedades de las listas que ac no nombramos. Estas propiedades no las he explicado porque estn desactualizadas. Ya no se usan y pronto desaparecern del lenguaje HTML como propiedades vlidas. Hay que mantenerse siempre actualizados con los estndares!
Partes de una lista Las diferentes partes de una lista son, el tag o etiqueta que la define, y sus etiquetas contenidas. Toda lista debe tener al menos un tem (etiqueta contenida) que es el que realmente se ver en nuestro navegador. Tipos de lista Tenemos el tipo de lista UL, que son las listas desordenadas. Este tipo de listas contiene a etiquetas LI que van a representar cada tem en su interior. Las etiquetas UL tienen la caracterstica de que cada uno de sus tems contenidos estn antecedidos por un crculo (este se puede cambiar) que lo va a definir como tem de lista.
Ac en la imagen, podemos ver los distintos tipos de visualizacin de listas desordenadas que tenemos: square, circle, y disc; que los podemos setear en el atributo Type de la lista. Otro tipo de lista son las OL, que son las listas ordenadas. Estas listas, a diferencia de las anteriores, en vez del crculo, cuadrado o disco, que tienen las UL, van a estar ordenadas por numeracin o alfabticamente. Es as que tenemos:
45
Type 1: Van ordenadas numricamente de 1 a la cantidad de tems que tengamos. Type a: Van ordenadas alfabticamente de la a a la z en minsculas. Type A: Van ordenadas alfabticamente de la A a la Z en maysculas. Type i: Van ordenadas en nmeros romanos (en minsculas). Type I: Van ordenadas en nmeros romanos (en maysculas). Y el tercer tipo de listas, son las listas de definicin, DL.
46
Como podemos ver las DL nos permiten poner una especie de ttulo (DT) para el cual daremos una definicin (DD). No tiene mucha ciencia, cada uno le encontrar uso en algn momento (recuerden usar cada tipo de etiqueta segn corresponda, que para eso estn creadas). Para qu ms sirven las listas Otro uso muy comn que tienen las listas, ms all de hacer una lista de tems comn es, por ejemplo, la de crear menes o barras de navegacin en paginas web (obviamente). Las listas se pueden anidar unas dentro de otras, entonces, creando una lista principal con diferentes trminos y luego en cada uno poniendo otra lista, podramos generar un men desplegable (aplicando algunos estilos que veremos ms adelante). Esto se los nombro por arriba, y no lo voy a explicar ahora, porque un men desplegable con listas, ser una de las primeras cosas que hagamos como ejemplo cuando veamos estilos, as que A despreocuparse, que en algunas clases ms tendrn sus menusitos a todo color!!! :p Otro uso puede ser el de un ndice, o un navegador de una pgina larga mediante anclas (tags <a> Recuerdan? Ya lo vimos). De todos modos, el uso que le puedan dar a una lista, o a cualquier elemento, esta dado por lo que se les ocurra a ustedes en el momento y, a riesgo de sonar reiterativo, siempre recuerden que si van a usar un elemento para hacer x cosa y ya hay uno que est especficamente creado para eso, usen este ltimo en lugar del anterior.
47
No reinventen elementos por el simple hecho de no querer ver cmo funciona otro o porque les quede ms cmodo usar uno que se les ocurra. Acostmbrense a trabajar con propiedad que es la mejor manera de ser un buen maquetador de pginas web. Conclusin Bueno, hoy vimos que son las listas, sus propiedades, tipos y algunos usos. Ms adelante veremos otros usos ms divertidos que los que pusimos recin, pero que requieren de conocimientos que al da de hoy, puede que no tengan. Traten despus de leer esta clase, o durante, o cuando estn aplicando lo que aprendan en ella, de revisar la barra insert de Dw, que ah tienen accesos directos a tipos de listas y sus contenidos (ya lo vimos en clases anteriores).
Clase 16: Tablas
Hola Qu tal? Cmo andan esos estudiantes mega-responsables? Bienvenidos a una nueva clase del Taller de Adobe Dreamweaver/HTML. Espero que estn entusiasmados, porque hoy vamos a ver tablas, que es medio pesado, pero es un tema que hay que saber porque las tablas son un elemento que de seguro van a usar en muchos lados (aunque en clases siguientes trataremos de convencerlos de que no lo hagan jeje). Bueno, vamos a ver en qu consiste esto de las tablas
Un poco de historia (no tan histrica)

En la vieja web, las tablas servan para diagramar pginas completas. Estas se dividan en tantas partes como sectores iba a tener la pgina, y dentro se cargaba la informacin necesaria. Hoy por hoy, las tablas dejaron de ser un medio para maquetar la pgina entera, y pasaron a ser lo que realmente dicen ser, tablas. Se usan para ordenar informacin en columnas o filas que mantienen una relacin entre s, ya sea que todas las partes de esas filas/columnas dependen de un mismo ttulo, o unas son derivadas de otras. A modo de ejemplo:
Ttulo
Dreamweaver
Descripcin
Programa de maquetacin web
Empresa
Adobe Systems Incorporated
Como se puede ver, este ordenamiento de informacin no tiene mucho que ver con la maquetacin de una pgina. Es solo para ordenamiento.
48
Antes pensaban las pginas de acuerdo a las tablas y se haca una gigante que iba a contener la cabecera, cuerpo, barras laterales y footer; y se meta toda la pgina dentro de esta tabla, con an ms tablas anidadas. Esta prctica ya es obsoleta y est por dems recomendado no utilizarla de este modo (volvemos al viejo lema que dice que las cosas se deben usar para lo que fueron hechas). Claro est que en algn momento el HTML se bas e incluso foment el uso de tablas para maquetar pginas web, pero las tecnologas cambian y hay que adaptarse a los estndares. No porque el HTML 0.000001 haya usado tablas para maquetar pginas, nos da la excusa para que hoy las usemos de ese modo sin culpa :p.
Ahora s, a ver como se hacen y utilizan las tablas

Las tablas se encierran entre las etiquetas <table> y </table> como ya estarn acostumbrados a esta altura, su apertura con su cierre. Dentro de ellas vamos a poder poner etiquetas <tr></tr> que van a ser cada fila de la tabla, y a su vez, dentro de ellos van a poder poner etiquetas <td></td> que van a corresponder a cada columna de la fila. Veamos un ejemplo:
<table> <tr> <td><strong>Ttulo</strong></td> <td><strong>Descripcin</strong></td> <td><strong>Empresa</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Programa de maquetacin web</td> <td>Adobe Systems Incorporated</td> </tr> </table>
Esta tabla, nos dara como resultado, la tabla que pusimos arriba (Un poco de historia), que tendra 3 columnas y 2 filas. En la fila de arriba tendramos las tres columnas Ttulo;Descripcin;Empresa y en la fila de abajo Dreamweaver;Programa de maquetacin web y Adobe Systems Incorporated.
Propiedades
El uso de las tablas a veces se complica para la gente que no las ha usado nunca, cuando quiere hacer ciertas cosas, como por ejemplo: Una tabla de una columna como ttulo y 2 como contenido. Este es un problema que no parecera tal, pero s que lo es, porque si no definimos ciertas propiedades de antemano, nuestra tabla se romper.
49
Supongamos que tenemos una tabla de esta forma: Programs de Adobe Systems Incorporated Dreamweaver A simple vista nuestra tabla sera as: Programa para maquetacin web
<table> <tr> <td><strong>Programas de Adobe Systems Incorporated</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Programa de maquetacin web</td> </tr> </table>
PERO NO! Si en nuestro HTML tenemos la tabla definida as, se nos romper (o andar de casualidad, a veces suele suceder jeje). Y ustedes se preguntarn por qu no anda, si tiene todos los elementos necesarios para funcionar. Ac esta la respuesta: El problema es que el HTML considera la tabla como una cuadricula, por ende, a nuestra tabla de arriba, le faltara una columna en el primer <tr> y por ende estara rota. Para que el HTML no se confunda, le tenemos que indicar que la columna de la fila uno va a ocupar el ancho de dos columnas, y para esto debemos hacer uso de la propiedad colspan. Pasemos al ejemplo y despus explicamos bien la propiedad.
<table> <tr> <td colspan="2"><strong>Programas de Adobe Systems Incorporated</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Programa de maquetacin web</td> </tr> </table>
De esa manera tenemos la tabla bien definida, los dos <td> de abajo formaran las dos columnas que tenemos en la tabla, y al <td> de arriba le estaramos indicando que debe ocupar el ancho de las dos columnas que tiene la tabla.
50
Si abajo tuvisemos 3 columnas (3 <td>) el colspan de la de arriba debera ser de 3, o bien podramos tener una con colspan de 2 y otra columna simple. Veamos otro ejemplo: Estudiamos en el taller Dreamweaver
Programs de Adobe Systems Incorporated

Flash Illustrator
Ac tenemos una tabla con 2 columnas en la fila uno y 3 columnas en la fila dos. El cdigo correspondiente sera:
<table> <tr> <td>Estudiamos en el taller</td> <td colspan="2"><strong>Programas de Adobe Systems Incorporated</strong></td> </tr> <tr> <td>Dreamweaver</td> <td>Flash</td> <td>Illustrator</td> </tr> </table>
Esta tabla de arriba nos da pie para explicar algunas cosas ms: Como podemos ver, la columna que tiene el colspan es la segunda de la fila uno y esto es porque el colspan nos dice cuntas columnas va a ocupar la misma, pero se toma desde ah en adelante. Si nosotros le hubisemos puesto colspan 2 a la columna Estudiamos en el taller, esta hubiese tomado el doble de ancho, y no hubiese sido la tabla que nosotros queramos. En fin, las tablas deben tener en todas sus filas la misma cantidad de columnas, as es que, la fila con mayor cantidad de columnas es la que se toma como base y al resto se le asigna colspan como tanto espacio ocupen ( 1 o ms columnas). Espero que esto quede entendido, si no, ya saben: A mandarle comentarios a Thor! Siguiendo. Les paso a dar la agradable noticia de que CON LAS FILAS PASA LO MISMO!!!! Y s, como era de esperarse, as como tenemos que tener la misma cantidad de columnas, tambin debemos tener la misma cantidad de filas. Recuerden que la tabla, como dije antes, es como una especie de grilla cuadriculada. Bien, si se entendi lo de colspan, esto se va a entender an ms fcilmente. Pongamos ejemplos: Estudio del Taller Programa Dreamweaver Cdigo HTML
51
Ac tenemos una columna, que en vez de ocupar el doble de ancho, ocupa el doble de largo (dos filas). Y qu pasa cuando tenemos una tabla as? Aqu surge la propiedad rowspan. Pasemos directamente al cdigo correcto, presuponiendo que qued claro lo de colspan, as que ya deberan entender esto.
<table> <tr> <td rowspan="2">Estudio del taller</td> <td>Programa</td> <td>Cdigo</td> </tr> <tr> <td>Dreamweaver</td> <td>HTML</td> </tr> </table>
Como podemos ver, la propiedad rowspan acta de manera similar a la propiedad colspan, pero de forma vertical. El <td> con rowspan 2 ocupara el <td> faltante en la fila dos y como lo pusimos arriba de todo, ocupara especficamente, el primer <td> faltante. Calculo que han entendido. S que es un tema difcil si no se lo ve por uno mismo, as que los invito a que abran el Dw y prueben hacer tablas a mano en modo cdigo y luego vean los resultados en vista de diseo y vayan probando diferentes cambios. Van a ver que probndolo se entiende ms fcil. Hasta aqu mostramos las propiedades FUNDAMENTALES que se deben conocer para poder crear una tabla. Ahora vamos a ver otras menos importantes, pero que est bueno saberlas. Cellspacing: Esta propiedad se usa en la etiqueta <table> ( <table cellspacing=2) y define nuestro espacio entre una celda y la otra de nuestra tabla. Border: Esta propiedad tambin se usa en la etiqueta <table> e indica el borde que va a tener nuestra tabla tanto alrededor como el de las celdas en s. Adems, la etiqueta <table> comparte propiedades comunes como width y height, aunque la mayora de los estilos de cualquiera de las etiquetas que aprendimos y aprenderemos los manejaremos ms adelante con CSS. Bueno, por ltimo y ya los dejo tranquilos, slo les quera comentar que existen otro tipos de tablas, que en realidad son ms o menos lo mismo que estas pero que varan en pequeeces. Les dejo como tarea investigarlas, si es que tienen ganas, y cualquier cosa me preguntan lo que necesiten, si no entienden.
52
Conclusin
Clase larga s que s! pero til. Espero que se haya entendido todo bien, cualquier cosa me preguntan va comentarios. Nos vemos de nuevo la semana que viene con otra edicin del taller, ya para empezar con divisores, que son la etiqueta madre de los sitios web actuales. No se lo pierdan que se viene lo ms importante.
Clase 17: Divisores y estilos CSS (1)
Hola, mis queridos seguidores! Bienvenidos a la clase 17 del taller de Adobe Dreamweaver. S! 17! Cmo se pasa el tiempo, eh? Y bueno, pero cada vez estamos ms cerca de la gloria, jaja. Hoy tenemos una clase especial, un punto de inflexin entre los conocimientos generales de HTML y el maquetado de pginas a nivel profesional. Por qu digo esto? Bueno, como ya me habrn escuchado decir (figurativamente), el diseo web actual se basa en el uso de divs (una etiqueta que vamos a ver hoy) y estilos. Y por qu no se siguen usando tablas a la manera de antes? Bueno, si leyeron la clase anterior sabrn que tener una tabla bien armada requiere pensar cada lugar que vayamos a usar, porque debemos tener contemplados los rowspan y los colspan que vamos a necesitar en cada parte de nuestra tabla. Adems de la complejidad de pensarlo (que con el tiempo uno se acostumbra), otro factor importante es que a la hora de modificar algo en el sitio, hay que cambiar gran parte de la estructura. Imaginen que en medio de una cuadrcula que forma nuestro sitio, queremos poner un nuevo cuadradito para incrustar X cosa Habra que cambiar todos los rowspan y colspan afectados Durante un tiempo, mucha gente anidaba tablas, para zafar. Entonces uno pona una tabla dentro de una celda de otra tabla, y la divida como quera. Era prctico y no tenamos que tocar nada de la anterior. Pero sitios grandes que usaron estas prcticas se encontraron con que el cdigo HTML de sus pginas se hacia INMENSO, provocando un mayor peso de la pgina y, por
53
ende, una mayor espera del usuario para cargar (adems de una mayor transferencia de sus servidores). Tambin se encontraron que cuando queran hacer un cambio grande (ya no un cuadradito como dijimos arriba), haba que rehacer el sitio entero, porque no se poda adaptar al monstruo tablstico actual. Ahora, les voy a explicar la nueva manera de maquetar y van a ver que solos se van a dar cuenta de las GIGANTES ventajas que tiene.
Qu son los divisores?

Los divisores son una etiqueta que surgi para darle forma a las pginas de la manera ms prctica posible (etiqueta <div></div>). Cmo explicar un div? Bueno, vamos a hacerlo grfico: imaginen a los divs como cajas. Tenemos el cuerpo de la pgina, y dentro de ella metemos cajas y las ubicamos como queremos y donde queremos. Adems, estas cajas pueden tener cajas ms chicas adentro, y esas tambin podemos ubicarlas como y donde queremos. Entonces podemos crear unos cuantos divs con el contenido que queramos y ordenarlo en la parte de la pgina que queremos que se vea y listo. Nos olvidamos de las complejidades anteriores. Y si tenemos ganas de cambiarle su tamao o reacomodarlo, esto no afectar a la estructura del sitio en general. Ms fcil imposible. Podemos maquetar una pgina rpidamente y si es necesario modificarla tambin lo podremos hacer en muy poco tiempo. Vayamos a algo visual Veamos grficamente como sera la utilizacin de divs. Vamos a crear un cuerpo de la pgina y dentro vamos a ponerle un divisor.
<body> <div> </div> </body>
Grficamente, esto sera as:
54
(fig. 1) El div o contenedor que creamos recin puede, mediante estilos, acomodarse en el lugar de la pgina que nos quede mejor, y a su vez podemos poner ms divs dentro. Ahora veamos un ejemplo ms palpable:
(fig. 2) Como podemos ver, armar una pgina web con divs es igual que dibujarla en una hoja. El HTML de la pgina que armamos arriba sera:
<body> <div>(header)</div> <div>(barra lateral)</div> <div>(nota 1)</div> <div>(nota 2)</div> <div>(footer)</div> </body>
Luego, con estilos, le decimos a los divs dnde queremos que se ubiquen. Estilos Y ahora viene la magia.
55
Ustedes, lneas ms arriba, se habrn preguntado cmo con esos divs metidos uno debajo de otro sin nada ms, lograramos armar prcticamente el maquetado de una pgina entera. Los estilos son caractersticas especiales que le podemos dar a una etiqueta, para que cumpla con el aspecto que nosotros queremos que tenga. Existen dos maneras de aplicar estilos: La primera y ms bsica, es poner el estilo que nosotros queremos que tenga la etiqueta en la etiqueta misma, mediante el atributo style=(ac pondremos los estilos). La segunda es mediante CSS, que es una hoja que contiene solamente estilos, y luego se les dice a las etiquetas cul estilo deben tomar de esa hoja. Nosotros vamos a trabajar con estilos en cada etiqueta, para empezar a conocerlos, y luego veremos si hacemos tiempo de ver algo de CSS y su implementacin. Esperemos que si! Bueno, vayamos al grano, ya todos deben estar ansiosos por ver como funciona esto: En la pgina que maquetamos a mano (fig. 2) definimos abajo un cdigo HTML muy simple, que pareciera no coincidir con la misma.
Y en realidad no lo hace. Ahora vamos a ver cmo hacerla coincidir, mediante la definicin de varios estilos, en las etiquetas correspondientes. El cdigo REAL de la pgina (fig. 2) seria el siguiente:
<body><div style="background-color: red; width: 100%; height: 30%;"> (header)</div> <div style="background-color: blue; float: left; height: 60%; width: 20%;"> (barra lateral)</div> <div style="background-color: yellow; float: left; height: 60%; width: 40%;"> (nota 1)</div> <div style="background-color: green; float: left; height: 60%; width: 40%;"> (nota 2)</div> <div style="background-color: gray; height: 10%; width: 100%;"> (footer)</div> </body>
Para que puedan diferenciar cada parte les dejo una imagen dividida por colores:
56
Ahora expliquemos un poco lo que tenemos ac: En principio, tenemos el mismo maquetado que antes, el body, con los 5 divs adentro, tal cual el cdigo anterior (fig. 2), pero este maquetado tiene agregados los estilos. Vamos a pasar a detallar qu hace cada uno. En el primer div tenemos style=. Esto nos dice que todo lo que pongamos entre las comillas a continuacin, sern estilos y sus valores. Luego tenemos background-color: red. Esta propiedad le dice al div qu color de fondo va a tener (en este caso, como pueden ver en el primer div es rojo, al igual que la fig. 2). La siguiente es width: 100%. Esto nos indica que el div va a tener el mayor ancho posible, o sea el ancho total de la pgina. Luego height: 30%, nos dice que ese div va a tener el 30% del total de la altura del documento. Los 3 div siguientes, adems de las propiedades de ancho, alto y color correspondiente, vemos que tienen una propiedad float: left. Esta propiedad les dice a los divs que van a flotar hacia la izquierda, hasta pegarse con el elemento anterior. De esta manera, apilamos los divs del medio para formar columnas y, mediante la propiedad width, hacemos que ocupen el total del ancho y cunto queremos que tenga cada uno. Luego al div footer le decimos que nuevamente ocupe el 100% para cerrar la pgina y listo. Con 5 divs, y algunos (pocos) estilos, logramos maquetar una pgina completa, lista para agregarle informacin. Obviamente, dentro de los divs, luego pondremos prrafos, listas, imgenes, etc. Lo que sea necesario para que nuestra pgina quede linda .
57
Conclusin Esto es ni ms ni menos que una introduccin. Los divs y los estilos tienen muchsimo contenido para ver. En s, para los estilos necesitaramos varias clases especialmente dedicadas, pero bueno, nosotros lo vamos a ir viendo de a poco mientras utilizamos HTML y luego daremos algunos tips para hacer otras cosas interesantes (ms all del maquetado comn). Bueno, ya cerrando, espero que esta clase les haya gustado, que les sirva en la creacin de sus pginas y, como siempre, ya saben que cualquier duda o cosa que no les salga, pueden preguntarla va comentarios en la clase del taller que corresponda. Nos vemos la semana que viene para ampliar un poco el tema que vimos hoy y profundizar sobre el uso de divs y estilos.
Hola
gente,
cmo
les
va?
bien?
Me
alegra!
Hoy nos toca repasar los divisores y estilos que vimos la clase pasada y aprender nuevas cosas de ellos. Les confieso que estuve en duda de seguir con este tema y mejorando las cosas que vimos la clase pasada o explicar otra manera diferente de usar los divisores, pero al final me decid por reafirmar el conocimiento anterior porque considero muy importante que esto quede bien claro
La clase anterior vimos cmo maquetar una pgina bsica. Hoy vamos a ver algunos detalles ms que los estilos y los divs nos pueden ofrecer. Para esto, vamos a quedarnos con una parte de la pgina que ya maquetamos:
58
Vamos a tomar el sector de la nota 1 (la caja amarilla) y la vamos a rellenar con lo que se supone que es, una nota. Tenemos entonces el cdigo original de este maquetado que es:
Ahora vamos a tomar el div de la nota 1 y vamos a empezar a modificarlo. Veamos qu le ponemos: una foto, ttulo, texto, y un pie, en base a esto haremos nuestra caja.
<div> (foto y contenido)<div>(pie)</div></div>

Con este cdigo tendramos formada nuestra nota completa. Ahora veamos qu deberamos agregar para que realmente se vea como nosotros queremos. Pero antes haremos una aclaracin importante: En el cdigo que voy a poner a continuacin vamos a ver algunas cosas nuevas que les pueden resultar difciles de entender.
Estuve pensando si ponerlo o no, pero s que ustedes, mis fieles seguidores, con algo de paciencia (o no tanta) van a terminarn entendiendo.
En caso de dudas, pueden dejarme un comentario. Ya van a comprender lo til que les va a resultar esta clase. Habiendo hecho la aclaracin, aqu va un poco de CSS:
59
Y este sera el resultado final del div (nota 1) de nuestro maquetado de la clase anterior (cuadro amarillo):
60
En la prxima clase explicar paso a paso el cdigo que ven ms arriba, as que no se desesperen si lo que vieron les genera muchas preguntas .

Hola, bienvenidos a la tercer clase del Taller de Adobe Dreamweaver sobre divisores y estilos CSS! Seguro este es uno de los temas que ms les interesa, dado que se trata de la base del diseo actual de sitios web. Pero a la vez es bastante complejo (no difcil), as que a practicar! jejeje ^_^. Hoy explicaremos el cdigo CSS que vimos la clase pasada, parte por parte. Luego ustedes pueden hacer su propio diseo en Dreamweaver. Comencemos! La clase pasada vimos este fragmento de cdigo CSS:
61
Ahora nos toca lo difcil, que es justamente comprenderlo. Veamos: En principio, dejemos de lado la etiqueta <style></style> para lo ltimo y empecemos con el <div>(nota1)</div> Dentro de la etiqueta propia del divisor, tenemos definidos varios estilos: 1. background-color: white - Le decimos al HTML que el color de fondo de este divisor va a ser blanco. 2. 3. width/height - Ponemos un ancho de 40% y un alto de 60%. float: left - Flotamos a la izquierda, esto lo vimos la clase pasada, es parte del maquetado que hicimos. Luego tenemos una etiqueta <img /> la cual va a contener el logo de elwebmaster y tiene los siguientes estilos y propiedades. Estilos
62
1. 1. margin-top/left: 10px Le ponemos a la imagen un margen superior e izquierdo de 10 pxeles, para separarla de los bordes del div. 2. 2. margin-right: 20px Ponemos un margen de la derecha de 20 pxeles, para separar la imagen del ttulo (el <h1> que pusimos a continuacin de la imagen). 3. 3. float: left De nuevo, parte del maquetado que hicimos la clase pasada, para ordenar los divisores y que formen nuestra paginita ^_^. Propiedades 1. width/height El ancho y alto que queremos que tenga nuestra imagen (si no queremos que nos ponga el que tiene por defecto la imagen en s). 2. 3. src - El lugar donde vamos a tener nuestra foto guardada para traer y mostrar (source). alt El texto alternativo que nos va a mostrar el lugar donde va la imagen en caso de que por algn motivo o error, la imagen no se cargue. Seguimos: Ahora tenemos el ttulo dentro del <h1> Estilos 1. 2. color: gray - Nos setea el color de la fuente del h1 en gris. font-family: helvetica Setea el tipo de fuente que va a tener el h1.
Dentro del h1 tenemos un <a> que nos enlaza el ttulo con la pgina de elwebmaster.com. Ms abajo tenemos dos <p> con margen, caracteres especiales, <br /> y otras cosas que ya fuimos viendo a lo largo del curso. Luego tenemos un <hr /> que nos pone una lnea de separacin (la podemos ver en la imagen) con un ancho del 80% del total del divisor. Y ahora, la hora de la verdad!!! Ms abajo nos encontramos con otro divisor, dentro del divisor nota 1 que tiene una caracterstica especial: tiene el atributo class=pieNota. Dentro de este tenemos un <h2> que hace de ttulo y varios <p> (prrafos) con links a elwebmaster (que podran ser links directamente a esas notas). Ahora bien, como podemos observar, las etiquetas internas del divisor que las contiene, no tienen NINGUN ESTILO, pero si vamos al grfico, podemos ver que esta alineado como debe, las fuentes tienen color azul y las letras tienen un tamao predefinido. Adems, ninguno de los elementos tienen algn margen por encima o debajo de ellos. Esto se debe a que LA CLASE pieNota (class=pieNota) tiene seteado todos esos atributos. Pero.. la clase slo la tiene el div que la contiene. S!!! Y ESO ES LO BUENO!!!
63
Con slo setear una clase a la etiqueta contenedora, no necesitamos setearle estilos a ningn elemento de adentro (salvo que queramos que un elemento tenga una propiedad en particular por s slo). Entonces, ahora s, analicemos la etiqueta <style></style>
La etiqueta <style> va a contener estilos y nada ms que estilos, a los que se les va a dar un nombre que luego se usar para relacionarlos con las etiquetas correspondientes. Primero que nada analicemos el cdigo. Tenemos dentro de la etiqueta, el atributo type que le va a indicar que va a contener CSS a modo de texto (text/css) y luego tenemos el atributo media que va a indicar para qu medio vamos a usar esos estilos, en este caso, screen (pantalla) pero podra ser un estilo especifico para imprimir o para video. Luego de seteada la etiqueta <style> para lo que necesitamos, vamos a escribir los estilos dentro. En primer lugar vemos .pieNota: pieNota, va a ser el nombre con el que vamos a relacionar una etiqueta con los estilos que le pongamos dentro. El punto . que antecede el nombre, indica que va a ser UNA CLASE (class=). De esta manera, con ese nombre hacemos referencia directamente a class=pieNota. El p, y el h2 que siguen al nombre de la clase, indica que slo va a afectar a los <p> y los <h2> que se encuentren dentro del elemento que tenga esa clase. Por ende, si dentro del <div class=pieNota> (el del ejemplo) tuvisemos un elemento <li>, est e no se vera afectado por los estilos que esta clase contiene. Luego de designarle un nombre a en este caso, la clase, y ponerle que etiquetas debe afectar, vamos a pasar a poner todos los estilos que deba tener entre { }. Dentro de los corchetes tenemos, en este caso, margen, padding, color y font-size. Como vemos en la imagen (otro truquito), podemos agrupar los mrgenes y paddings en una sola propiedad. Podemos hacer un margin-top, margin-right, margin-bottom, margin-left, todos en uno slo. margin: 0 0 0 10px (en orden: top, right, bottom, left 0 0 0 10px). Cada estilo (al igual que con la etiqueta style=), debe terminar con punto y coma ;, aunque no necesariamente debe bajar la lnea (como esta en el ejemplo), pero si es recomendable para que sean ms legibles (el cdigo ser ms prolijo). Bueno, por ahora los dejo pensando bastante. Conclusin
64
Esta clase seguramente va a generar miles de preguntas y tal vez haya cosas que no entiendan. Recuerden que me pueden preguntar lo que quieran va comentarios. Tratar la semana que viene de hacer un lugarcito para una clase dedicada a este tema y a las preguntas que surjan, as nos queda bien claro todo. Esta clase estuvo bastante rebuscada, pero por lo menos (espero) qued clara la ventaja de utilizar estilos y CSS dentro de la maquetacin de nuestra pgina. Ms que claro esta en la clase pieNota, que con slo definir los estilos una vez en la etiqueta <style>, pudimos aplicarlos a todos los elementos de su interior sin tener que escribir una sola lnea ms. Imaginen, de tener que poner todos los estilos a cada etiqueta por separado, lo gigante que hubiese sido nuestro cdigo. Y ni hablar a la antigua, sin estilos. Bueno, nos vemos la semana que viene para otra clase del taller. Espero que practiquen lo visto hoy, as queda claro, o surgen preguntas para responder y seguir avanzando.
Clase 20: Ms estilos CSS

Hola muchachos y muchachas cmo estn? Me alegro! (espero que hayan respondido bieeeen).
Ya estaba extrandolos. No s si se habrn dado cuenta, pero la clase pasada, fue una divisin de la clase de la otra semana anterior, as que la semana pasada no escrib el artculo literalmente. Pero bueno, ya volv y con buenas noticias! Conseguimos espacio para poner una miniclase gua sobre CSS. No vamos a lograr avanzar profundamente en este tema, porque CSS dara para un taller entero. Si bien no es muy difcil, hay muchos tips y ayudas que slo podra dar una persona con experiencia en el tema.
Estilos CSS
Para encarar este tema vamos a poner un par de ejemplos, y de ah iremos viendo cmo funcionan los estilos con CSS, de paso pueden darse una idea sobre cmo se puede ir insertndolo dentro de un cdigo HTML. Vamos a un ejemplo similar al de las clases pasadas, el div de la nota uno. Armemos un cdigo de cmo podra ser un div de una nota X, para tomar de ejemplo:
<div>
<h2>Articulo de explicacion: manejo de CSS</h2>
65
<p>El CSS no es muy dificil de aprender, pero requiere
paciencia a la hora de usarlo.</p>
<h2>Articulos relacionados: </h2>
<p>Dw/html taller elwebmaster.com</p>
<p>w3c y maquetado correcto del html</p>
</div>
Bueno, aqu tendramos un maquetado de una nota (cortita por cierto jeje), con un pie de pgina que contendra artculos relacionados. Bien, el problema aqu es que los artculos relacionados tendran el mismo estilo que la nota en s. Si recuerdan de la clase pasada, nosotros armamos unos estilos en una clase pieNota que nos daba algunos parmetros para nuestro div. El tema es que en esa clase, .pieNota (recuerden que el punto referenciaba a una clase), afectaba a todos los h2 y todos los p (relean las dos clases anteriores si tienen dudas). Por lo tanto, seguiramos teniendo el mismo problema, todos los p y los h2 seguiran siendo iguales. Hagamos un corte ac y miremos otro cdigo, para ver cmo se podra maquetar. No se asusten si ven cosas que no entienden, se van a explicar ms abajo .
<div id=nota-uno>
<h2>Articulo de explicacion: manejo de CSS</h2>
<p>El CSS no es muy dificil de aprender, pero requiere paciencia a la hora de usarlo.</p>
<div class=pieNota>
<h2>Articulos relacionados: </h2>
<p>Dw/html taller elwebmaster.com</p>
<p>w3c y maquetado correcto del html</p>
</div>
66
</div>
Bien qu tenemos ac? Vemos que aparece una nueva etiqueta id. La etiqueta id es otra manera de referenciar a un estilo, al igual que la etiqueta class. sta, en vez de con un . se referencia con un #. Una aclaracin importante, las id a diferencia de las class solo pueden existir UNA SOLA VE Z en todo el documento HTML. Es decir, podemos tener muchas referencias a .pieNota, pero solo una etiqueta puede ser #notauno. Para este caso, no creo que podamos tener ms de una nota nmero uno, jeje. Volviendo a los estilos De esta manera, podemos marcar un estilo general para #nota-uno y luego a los artculos relacionados, cambiarles el estilo con .pieNota. Entonces nuestros estilos quedaran as:
<style type=text/css media=screen>
#nota-uno h2, p {
color: red;
font-size: 16px;
#nota-uno .pieNota h2, p {
color:yellow;
font-size: 12px;
</style>
De esta manera, nuestra caja con la nota anterior toma, para toda la caja (div id=nota -uno), los h2 y los p van a estar en letra roja y con un tamao de 16 pxeles.
67
Pero, para la clase .pieNota dentro de la id #nota-uno, los h2 y los p van a tener la letra color amarilla y el tamao de 12 pxeles. Ahora, si estn bien chispitas y siguen todas las explicaciones sin trabarse en ningn lado, podrn preguntarse: Por qu es necesario poner en los estilos, a .pieNota dentro de #nota-uno (#nota-uno .pieNota) y no poner a .pieNota solo como un elemento individual. Bueno, la respuesta sera esta:
De esta manera podemos tener varios tipos de .pieNota, uno para cada lugar del sitio en que este ubicado. Entonces podramos tener en nuestro HTML varias clases .pieNota, y dependiendo de la id en la que se encuentren actuaran diferente.
De esta manera nuestro cdigo queda bien maquetado y podemos ordenar semnticamente nuestro sitio. Piensen que para cada cosa que tenga un titulo podramos tener la clase .titulo y para cada pie podramos tener la clase .pie, y as dependiendo en qu id (nica) est, tendra un estilo diferente. Nuestro sitio quedar as resumido a un par de divs con contenido, y a otro par de ids, que van a compartir clases. Ya van a ver cuando maqueten un sitio ustedes, si siguen los consejos y los temas que vamos viendo da a da ac, que simple y fcil de entender les va a quedar el cdigo, y cuando lo comparen con cosas que hayan hecho antes, les va a causar gracia (o pena :P). Bueno, no tengo mucho ms espacio para seguir escribiendo por hoy, pero en las prximas clases tratar de ir mechando algo de CSS a medida que explico los siguientes temas. No duden en preguntar va comentario cualquier problema que puedan tener, as se sacan las dudas e inclusive puedan haber otros usuarios que los ayuden. Y nos ayudamos entre todos, jeje.
Conclusin
Si bien CSS da para mucho ms, esta clase pretendi ser una gua de su funcionamiento. Faltaron muchas cosas que me hubiesen gustado tocar, pero por cuestiones de espacio no se puede (no Los quiero espero la tener semana una que clase viene con cortada ms taller de para nuevo). todos.
Espero que les haya gustado y que sigan leyendo semana a semana las clases que hago exclusivamente para ustedes.
Clase 21: Formularios

Hola amigos! Cmo les fue con la prctica de CSS? Porque me imagino que habrn practicado! :p
68
Hoy, nos toca borrn y cuenta nueva. Vamos a pasar a un tema que no tiene nada que ver con lo que venamos hablando hasta el momento: formularios. El formulario es un elemento HTML que est delimitado por los tags <form> </form> y dentro tiene campos con datos para enviar a nuestro servidor, ser procesados y, en caso que corresponda, devolver una respuesta.
El elemento formulario, en realidad, no contiene ningn dato ms que los de su funcionamiento, pero dentro de l, habr otros elementos que son los que van a contener la informacin a enviar. Estos elementos los veremos ms adelante, hoy nos dedicaremos a ver las propiedades de funcionamiento de la etiqueta formulario en s.
Atributos de un formulario
Un formulario, tiene dos atributos obligatorios, uno se llama method y otro se llama action. El atributo method es el encargado de indicarle al formulario la manera en que debe enviar los datos, por url (junto a la direccin de nuestra pgina) o de forma oculta. El primero (el que se enva por url) se llama get (<form method=get>) y el segundo, el que los enva de forma oculta se llama post (<form method=post>). El segundo atributo action indica el lugar en que va a ser procesada la informacin que enviamos, sea cual sea el tipo de method que usemos. Para procesar la informacin, necesitaremos un lenguaje de programacin, como por ejemplo php, o asp, entonces desde nuestro formulario enviaremos la informacin al archivo .php (o .asp) y este se encargar de hacer lo que deba hacer con esa informacin. Luego de explicado esto, veamos cmo quedara nuestra etiqueta form entera, aunque todava sin los elementos internos que van a contener la informacin.
<form method=post action=login.php>
</form>
Tenemos este formulario, que llevar de forma oculta la informacin que contenga a un archivo php que se va a llamar login.php. Este formulario podra contener, a modo de ejemplo, dos campos: usuario y contrasea. Aqu les dejo un link a nuestro Taller de PHP, en que nos cuentan un poco de formularios, y de paso si quieren pueden ir aprendiendo a programar, para hacer sus propias pginas dinmicas.
69
Taller de PHP: Envio de datos a travs de un formulario
Conclusin
Hoy vimos el elemento formulario, y si bien todava no podemos hacer uno porque no conocemos las etiquetas internas que llevan la informacin, ya tenemos una idea de su funcionamiento. La clase que viene, empezaremos a conocer cada una de estas etiquetas y veremos cmo quedara un formulario completo usando algunas de ellas.
Recuerden que cualquier pregunta que tengan, pueden enviar comentarios.
Clase 22: Dentro del Formulario
Qu tal, gente? Cmo les va? Revisaron lo que les dej la clase pasada, de formularios? S? Brbaro No? No importa!!! los quiero igual. Hoy vamos a ver la primera parte de los elementos que contiene un formulario y la semana que viene, como est en el temario, la segunda. Pero el martes 8 de julio, agregaremos una clase ms que ser SLO DE RESPUESTAS, para las dudas que vayan juntando de aqu en ms o las que tengan guardadas. Adems, responderemos las preguntas que fueron quedando en comentarios a lo largo del curso. Entonces, a prestar atencin y anotar todo bien, as dentro de dos clases nos queda todo bien claro y somos la envidia de los nerds del barrio! jeje. Adems de esta manera nos quedarn las preguntas frecuentes ordenadas en una sola clase. Bueno, empecemos. La clase anterior vimos la etiqueta <form> en s, con sus propiedades, y en un momento hablamos de usuario y contrasea, pero no explicamos como enviarlos. Bueno, hoy nos toca ver los elementos del formulario que hacen posible el envio de datos a travs del mismo. Antes que nada dividamos el formulario en partes para que puedan identificar su funcionamiento ms fcilmente. Tenemos la parte donde se setea el destino y la manera en que se van a enviar los datos, que son las propiedades de la etiqueta <form> en s. Tenemos la parte de la informacin, que va a estar contenida en etiquetas que van a ir dentro del formulario y tenemos, por ultimo, la etiqueta que va a enviar los datos que por lo general es un botn o acta como tal. La etiqueta <form> ya la vimos la clase pasada y tambin vimos las propiedades que indican el destino a donde va a llegar la informacin y de qu manera la vamos a enviar, as que, continuemos con las etiquetas que van adentro del formulario. Etiquetas contenedoras de informacin
70
Estas etiquetas van a actuar de contenedores, desde los cuales el formulario va a captar los datos para enviarlos segn las propiedades se lo indiquen (method y action de la clase anterior). Cmo es que contienen informacin? Bueno, veamos mejor una etiqueta de estas a modo de ejemplo, para que se entienda de la forma ms clara posible y despus vemos el resto de las etiquetas del formulario. La ms comn de las etiquetas de un formulario es la etiqueta <input>. Esta etiqueta va a indicar un ingreso de datos en el formulario. Cuando el formulario sea enviado mediante el clic en un botn, va a buscar en esta etiqueta, los datos que contenga y los va a enviar (adems de buscar en las otras etiquetas que contenga). Veamos una etiqueta <input>:
<input type=text name=user value=" />
Ahora analicmosla, para ver que nos encontramos. Como primer medida tenemos que es una etiqueta que cierra en s misma (no se si recordarn que por all al principio dijimos que TODAS las etiquetas deben tener un cierre), ya que tiene la barra al final. Tambin vemos que adems del nombre de la etiqueta (input) en s, tenemos varias propiedades. -type: Esta propiedad nos va a decir qu tipo de informacin va a contener el input, en este caso texto. -name: Name es el nombre con que le va a llegar al archivo que va a procesar la informacin (.php, .asp, etc.), el texto que enviemos. -value: Es el valor que va a enviar dentro del nombre, que por lo general es ingresado por el usuario.
Como podemos ver ac, cuando presionemos el botn Enviar, la informacin de la caja, que sera una representacin grfica de la propiedad value, sera enviada al servidor bajo el nombre de user, de este modo cuando nuestro script de programacin lea lo que le llega desde el formulario, buscando dentro de user encontrara lo que ingreso el usuario dentro del input (contenido del value). Existen otro tipo de inputs, que en realidad los que cambia es solo la propiedad type pero realmente son de utilidad. Veamos algunos:
<input type=password name=pass value=" />
71
Este input, es igual al anterior, solo que al indicarle el type en modo password, lo que hace es ocultar el texto en forma de asteriscos, para que no pueda ser visto. Habrn visto este tipo de inputs en cualquier casilla de email o en cualquier lado que tengan que loguear usuario y contrasea. Ah tienen un tpico formulario compuesto por la etiqueta <form> con 2 inputs dentro, uno type text (el de username) y otro type password (el de la contrasea) y para terminar el botn de envo de datos. Este formulario seria algo as:
<form method=post action=login.php > <input type=text name=usuario value=" /> <input type=password name=pass value=" /> <input type=submit value=Enviar /> </form>
Y ac vemos otro tipo de input, el input de tipo submit, este nos crea un botn, que va a contener el texto que pongamos en la propiedad value, que cuando le demos clic va a activar el formulario, para que recoja la informacin del resto de los inputs y la enve, en este caso, a login.php por post. (Recomiendo leer el taller de php, en esta misma pgina, para entender bien como funcionan los formularios desde la parte de programacin). Conclusin Bueno, aqu vimos la primer parte de los elementos que se encuentran dentro de un formulario y cmo funcionan. La clase que viene, veremos el resto de estos elementos e iremos anotando preguntas para la siguiente (martes 8 de julio) en la cual tratar de responder todo lo que me vayan preguntando. Espero que esta clase les haya servido o les sirva en un futuro y, por sobre todo, que la hayan pasado lindo leyndola. Nos vemos el martes que viene, para seguir con ms taller.
Clase 23: Dentro del Formulario (2)

Buen da muchachos y muchachas como les va? Hoy tenemos la segunda parte de formularios, donde vamos a ver los ltimos elementos y la prxima ya es la clase de respuestas, as que vayan preparando sus preguntas para dejar durante esta semana (01/07/2008 al 08/07/2008).
72
Aclaro la fecha porque s que este taller quedar para la posteridad y tal vez sus nietos o algn que otro aliengena del futuro aprendern de el, jajaja ^_^. Bueno, dejemos las ironas y/o idioteces aparte y vayamos al taller. Hoy vamos a ver algunas otras partes, ademas de los inputs que vimos la clase pasada, que son muy usadas en los formularios.
Elementos del formulario (2)

Arranquemos con los textareas. Estos campos son para texto y estn delimitados por sus etiquetas de apertura y cierre <textarea></textarea>. El tamao que van a tener est dado mediante sus propiedades rows y cols, que van a determinar la cantidad de columnas y filas que va a tener el textarea. Ademas de las propiedades rows y cols, tambien tienen la propiedad name que como ya vimos la clase pasada, es la que decide bajo qu nombre se enviar esta etiqueta hacia nuestro script (.php, .asp, etc). Un textarea terminado quedaria ms o menos as:
<textarea rows=5 cols=10 name=texto></textarea>
Recuerden siempre que cualquier elemento de un formulario en XHTML ir, claro que s, en un formulario. Otro de los elementos es el checkbox. Estas son las tpicas cajas a las que se les aplica una tilde cuando se les quiere seleccionar. Un ejemplo muy grfico y que dudo que no se hayan cruzado alguna vez es la cajita que viene junto a Acepta los trminos y condiciones. Este elemento es otro input ms y trabaja como los anteriores. La sintaxis es:
<input type=checkbox name=condiciones value=1 />
Mediante este checkbox, cuando lo tengamos seleccionado, enviar su value a nuestro script, para que sea manejado. En el caso de los trminos y condiciones, una accin lgica sera si esta chequeado (si nos llega el valor 1) dejamos seguir, si no, no dejamos seguir. Otro elemento que tambin es muy usado es el radiobutton. Este es parecido al checkbox, solo que permite una sola seleccin. Si nosotros tenemos un conjunto de checkbox, podemos seleccionar ninguno, uno, varios, o todos ellos. En cambio los radiobuttons, son excluyentes, si seleccionamos uno, se nos deselecciona otro (siempre que pertenezcan al mismo grupo).
73
La sintaxis de los radiobuttons es:
<input type=radio name=radio1 value=1 />
Como ven es otro input, de un tipo diferente. En este caso vamos a hacer una aclaracin importante: Supongamos que tenemos varios radiobuttons a seleccionar. TODOS DEBEN TENER EL MISMO NAME, por eso mismo son excluyentes, todos son el mismo en s, pero con diferentes opciones a enviar. Recuerden esto porque si no no funcionarn. Aqui dejo un ejemplo grfico:
<input type=radio name=accion value=aceptar />
<input type=radio name=accion value=no aceptar />
De esta manera, los inputs al tener el mismo nombre (y ser de tipo radio) cuando seleccionamos uno, se deselecciona el otro, y es lgico que suceda ya que son acciones opuestas. El radiobutton que este seleccionado, ser el que enviar su value al script del servidor. Por ltimo y la ms diferente de las etiquetas del formulario, la etiqueta <select>. Esta etiqueta es un menu desplegable que muestra las opciones que contiene dentro, y manda al script del servidor, el valor de la opcin que tengamos seleccionada. Su sintaxis es:
<select name=opcionElegida>
<option value=1>Opcion 1</option>
<option value=2>Opcion 2</option>
</select>
El select mostrar la tpica cajita con la flecha para abajo, donde desplegar todas sus opciones, que pueden ser cuantas queramos (agregando etiquetas <option>) y enviar al servidor el value del option seleccionado dentro de todos los que tengamos. El script del servidor recibir este valor dentro del name del select, en este caso opcionElegida. Me olvidaba de algo muy importante: Todos estos elementos del formulario, pueden estar contenidos dentro de la etiqueta <label></label> en la que podremos asignar un texto para que acompae al elemento que pongamos en su interior.
74
Por ejemplo:
<label>Nombre de usuario:<input type=text name=usuario
value=Ingrese aqui el nombre de usuario/></label>
Conclusin: Bueno, hoy terminamos de ver los elementos de un formulario. Tal vez haya quedado alguna cosa colgada que no recuerde en este momento (espero que no), pero bueno. Recuerden que la clase que viene es una clase EXCLUSIVA PARA RESPONDER DUDAS Y PREGUNTAS. Aprovechen si no entendieron algo, as trato de explicar o profundizar sobre algunos temas. Y, si no tienen dudas tambin pueden ayudar via comentarios a algunos que s las tengan! Espero que les haya gustado la clase. Nos vemos la semana que viene.
Clase 25: Preguntas

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 estn al tanto por futuros agregados. Dentro de las preguntas vern definiciones tiles, tutoriales, consejillos y algunas recetas para optimizar nuestra forma de trabajar. Si necesitas que profundicemos en algn tema, no te olvides de dejarnos tu comentario! 1. 2. 3. Cul es la diferencia entre XHTML, HTML y HTTP? Existen atajos de teclado en Dreamweaver? Cules son? Cul es la mejor herramienta para poner texto sobre un fondo, ya sea un color pleno, en gradiente o sobre una imagen? 4. Cmo puedo hacer un degradado en los bordes de una pgina sin tener que pegar una imagen completa y que de ambos lados quede igual? 5. Cmo inserto un botn de Adobe Flash con Adobe Dreamweaver y asegurarme de que funcione? 6. 7. 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? Cmo 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 travs de este protocolo es que se definieron la sintaxis y la semntica de la comunicacin,
75
estructurando la web y todos los elementos que forman parte de ella del lado del servidor y del cliente para posibilitar la relacin 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 raz obligatoria. Esto significa que tiene que existir un tag que encierre al resto: <html> XHTML es la evolcin del HTML en un lenguaje mucho ms estricto. Esta evolucin se debe principalmente a la diferencia entre los navegadores. Los navegadores no son ms que intrpretes de cdigo. Sin embargo, los desarrolladores que crearon los navegadores se tomaron el trabajo de interpretar el cdigo y amoldarlo para que se vea bien, aceptando algunos errores. Por ejemplo, antes se poda poner <body>texto</body. Con XHTML estricto el texto debe ir siempre dentro de una etiqueta de prrafo:
<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 cules son los atajos del teclado. Para ver este listado debes ir al men de Edicin (Edit) y seleccionar la opcin Mtodos abreviados de teclado (Keyboard Shortcuts). Estos atajos pueden cambiar de una versin a otra y ms an de un SO a otro.
3. Texto sobre fondo: color pleno, gradiente e imagen

No es muy difcil lograr ubicar texto sobre un fondo. Los tres tratamientos de fondo son
muy similares: el HTML
Haz clic aqu para ver
76
<div float:left><p style="background-color:#FAFF33; style=padding:5px; width:100px; height:70px; MS, Verdana,
font-family:Trebuchet
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/wpcontent/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/wpcontent/uploads/2008/07/div_gradiente.jpg)
Despus es necesario indicar que la imagen de fondo se repite sobre el eje de x:

background-repeat:repeat-x <div float:left><p style="background-image:url(http://www.elwebmaster.com/wpwidth:100px; font-family:Trebuchet height:70px; MS, Verdana, style=padding:5px;
content/uploads/2008/07/div_imagen.jpg);
Arial; text-align:left>hola</p></div>
En el ltimo div, la imagen tiene las mismas dimensiones que el div. Esta imagen tambin est en nuestro servidor y se indica as:
background-
image:url(http://www.elwebmaster.com/wpcontent/uploads/2008/07/div_imagen.jpg)
4. Degradado en los laterales de una pgina

El degradado en los bordes de una pgina se hace utilizando el mismo recurso anterior. La estructura de tu pgina puede estar dividida en 3 divs. El div del medio es el que posee el contenido de la pgina, mientras que los dos laterales nicamente incluyen un degradado.
Haz clic para ver el HTML Para lograr un resultado similar, el cdigo sera algo parecido a esto: El primero es el div de la izquierda, con la imagen gradiente_izq.jpg que se rep ite en y:
background-repeat:repeat-y <div style=" background-image:url(http://www.elwebmaster.com/wpbackground-repeat:repeat-y; content/uploads/2008/07/gradiente_izq.jpg); width:60px; height:600px; float:left"></div>
77
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 tambin se repite en y: background-repeat:repeat-y
<div style="background-image:url(http://www.elwebmaster.com/wpbackground-repeat:repeat-y; content/uploads/2008/07/gradiente_der.jpg); width:60px; height:600px; float:left"> </div>
5. Insertar un botn de Adobe Flash en HTML

Para incorporar un objeto de Adobe Flash en un HTML d ebers embeber ese objeto. Primero necesitas tener el archivo SWF subido a tu servidor. Luego, en tu archivo HTML agregars el siguiente cdigo
<embed
width="600"
src="http://www.elwebmaster.com/wp-content/uploads/2008/07/botonera.swf
height="30" quality="high"
pluginspage=http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_V ersion=ShockwaveFlash
bgcolor="#6699CC"></embed>
type=application/x-shockwave-flash
El cdigo de color naranja debers reemplazarlo por la URL de tu SWF. El cdigo 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: 1. El enlace (Ej.: Pregunta 1) 2. El destino del enlace (Ej.: Respuesta 1) A cada parte se le agrega un cdigo diferente: Al enlace: <a href="#ancla1">Cul es la diferencia entre XHTML, HTML y
HTTP?</a>
Al
destino
del
enlace:<a
name="ancla1">La
diferencia
entre
estos
tres
trminos...</a>
Lo ms importante es que el nombre del ancla sea el mismo, en este caso: ancla1.
78
7. Cmo hacer un formulario?

En elWebmaster, nuestros talleres de Dreamweaver y PHP dieron sus respectivas clases para la creacin y validacin de formularios, tanto desde el front-end (Dreamweaver) como desde el back-end (PHP).
Taller de Adobe Dreamweaver:

Clase 21: Formularios
o o o o
Qu es un formulario? Funcionamiento Atributos Conclusin Clase 22: Dentro del formulario
o o o
Elementos del formulario 1 Propiedades Conclusin Clase 23: Dentro del formulario (2)
o o o
Elementos del formulario 2 Propiedades Conclusin
Taller de PHP:
Clase 7: Envo de datos de un formulario
o o o
Cmo armar un formulario para que sea procesado por Php? Diferentes formas de enviar un formulario Variables POST y GET Clase 8: Procesar un formulario (Parte I)
o o o
Cmo procesar un formulario? Diferentes tipos de campos? Inputs Clase 9: Procesar un formulario (Parte II)
Textarea Clase 10: Procesar un formulario (Parte III)
Selectbox Clase 11: Procesar un formulario (Parte IV)
o o o
Recibiendo los datos contacto_script.php Cuerpo del mensaje
79
o o
Funcin mail Script completo
Clase 26: Frames o cuadros
Cuando el diseador se sienta a pensar en el diagrama de su sitio web, divide los espacios generando distintas reas que en el maquetado se traducen generalmente en divs contenedores. Estos divs son necesarios para ordenar el contenido de la pgina. Los frames son otra opcin para diagramar una pgina. La diferencia con respecto a los divs es que cada frame contiene un HTML independiente. El resultado es una pgina compuesta por varios archivos HTML. A este tipo de documentos se les llama frameset. Composicin de un frameset En un HTML comn y corriente vamos a encontrarnos con un HEAD y un BODY: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ttulo del documento</title> </head> <body> <div>Contenido del documento</div> </body> </html> En un HTML con frameset tenemos un HEAD y un FRAMESET: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Ttulo del documento</TITLE> </HEAD> <FRAMESET cols="30%, 70%"> <FRAMESET rows="200, 400"> <FRAME src="archivo_frameset1.html"> <FRAME src="archivo_frameset2.gif"> </FRAMESET> 80
Manual de Dreamweaver <FRAME src="archivo_frameset3.html"> <NOFRAMES> <P>Este frameset contiene: <UL> <LI><A href="archivo_frameset1.html">Contenido</A> <LI><IMG src="archivo_frameset2.gif" alt="Una imagen"> <LI><A href="archivo_frameset3.html">Otro contenido</A> </UL> </NOFRAMES> </FRAMESET> </HTML> En el primer frameset se especifica la diagramacin general de los frames. Adems, el frameset puede contener elementos noframes que proveen informacin alternativa al contenido del sitio en caso de que los usuarios tengan desactivados los frames. Cualquier elemento fuera de un frameset debe aparecer despus de la primer etiqueta <FRAMESET>, de lo contrario la esta etiqueta es ignorada. Filas y columnas En los framesets se dan especificaciones de rows (filas) y cols (columnas), para indicar las dimensiones de los frames dentro del frameset. En cols se debe indicar el tamao en ancho de uno o varios frames (si son varios, las dimensiones se separan con comas). En nuestro cdigo tenemos <FRAMESET cols="30%, 70%">. Esto significa que el primer frame va a tener un ancho del 30% de la pgina y el segundo frame un 70%. Si un frame ocupa todo el ancho de la pgina se indica con un 100%. En rows indicamos el tamao en altura de las celdas de uno o varios frames. Tal como escribimos arriba: <FRAMESET rows="200, 400">. Estas dimensiones se pueden expresar en porcentaje, pxeles o anchos relativos (relative lenghts). Se puede especificar todo dentro de la misma etiqueta de frameset: 81
Manual de Dreamweaver <FRAMESET rows="30%,70%" cols="20%,30%,50%"> El resto de los atributos y definiciones... </FRAMESET> Framesets anidados Tal como existen tablas anidadas (tablas dentro de tablas), existen tambin framesets anidados. Cmo? Creamos la estructura de un frameset principal y dentro de ese frameset incluimos otro frameset con sus propios frames: <FRAMESET cols="20%, 35%, 45%"> Contenido del primer frame... <FRAMESET rows="40%, 60%"> Contenido del segundo frame y primera celda... Contenido del segundo frame y segunda celda... </FRAMESET> Contenido del tercer frame... </FRAMESET> Cundo usar frameset La ventaja de usar framesets se ve ms que nada en sitios donde una porcin siempre se mantiene igual. Se puede tener una barra latera y un header en frames distintos y el contenido principal en otro. Pero no hay nada que no se pueda lograr con un poco de CSS y algunos divs. La razn actual para utilizar framesets es cuando necesitamos mostrar contenido de dos sitios diferentes. Si pensaron que los framesets estaban pasados de moda, fjense en sitios de bsqueda. Al ingresar una bsqueda de imgenes en Google.com, podrs ver el sitio fuente debajo y la informacin tu bsqueda arriba.
Esto se hace con framesets, sino miremos el cdigo <html><head><meta http-equiv=content-type content=text/html; charset=UTF-8><title> Google Image Result for http://www.elwebmaster.com/wp-content/uploads/2007/12/3d82
Manual de Dreamweaver pack-online-elwebmaster.jpg</title><script>function checkTopFrame() {if (frames && frames[0] && frames[0].document) {try {frames[0].document.domain;} catch(e) {location = /error;}self.setTimeout(checkTopFrame(), 3000);}}self.setTimeout(checkTopFrame(), 3000);</script></head><frameset rows="137,*"><frame src="/imgres?imgurl=http://www.elwebmaster.com/wp-content/uploads/2007/12/3d-packonlineelwebmaster.jpg&imgrefurl=http://www.elwebmaster.com/2007/12/03&h=125&w=125&sz=3 5&tbnid=Nr08p1hm5R62YM:&tbnh=90&tbnw=90&hl=en&um=1&prev=/images%3Fq%3Delwe bmaster%26um%3D1%26hl%3Den%26sa%3DN&frame=small" scrolling=no marginwidth=0 marginheight=0 onload="var d = frames[0].document;var l = d.links[0];if (d.getElementById &&d.getElementById('logo')) {l = d.getElementById('logo');}l.target='_top';"><frame src="http://www.elwebmaster.com/2007/12/03"><noframes>Your browser does not support frames. Google uses frames to display image results. You can view the <a href=http://www.elwebmaster.com/2007/12/03>referring page</a> for this image.</noframes></frameset></html> El cdigo que est encerrado entre las etiquetas frameset indican la diagramacin del frameset. En este caso hay nicamente dos frames: En azul se ve el contenido de Google, con la imagen pequea. El cdigo rojo muestra la pgina de elWebmaster.com donde fue publicada la imagen que el usuario busca. El sitio de viajes en espaol Viajeros.com utiliza framesets en su seccin en Links interesantes. La idea es que cada vez que vez un enlace que est publicado en Viajeros.com, tengas la posibilidad de votarlo. Por eso, al igual que Google, muestra los links con un frame propio en la parte superior desde donde se puede votar. Tambin puedes eliminar el frame seleccionando Quitar marco.
83
Manual de Dreamweaver CreativeCommons hace exactamente lo mismo en su bsqueda de archivos con derechos de copyright menos limitados. Elige la fuente del archivo, en este caso buscaremos una imagen en Flickr Cuando tengas los resultados de la bsqueda vers el sitio fuente encerrado en un frame dentro del sitio de CreativeCommons. Tambin tenemos la posibilidad de sacar el frame exterior de CC seleccionando Remove Frame:
W3Schools es una web muy completa de recursos HTML, all podrn profundizar un poco ms sobre el armado, uso y aplicacin de frames. Ver pgina >> Bueno, eso es todo. Espero haberlos ayudado con esto de los framesets. Dudas? Preguntas? Djalas en los comentarios e intentar responderlas en breve.
Clase 27: Tips y ayudas Hola muchachos/as! Me extraaron? Calculo que noQu se le va a hacer? un pequeo mortal contra una diseadora del mas all Pero quin los saluda con tanto fervor y tantas ganas? Su querido amigo Thor!!! Bueno, es difcil de remontar luego de estas dos ltimas clases pero trataremos de que les guste (ntese el trataremos despersonalizando toda responsabilidad por mi parte, ya me dio verguenzita jeje). Al punto, basta de irme por las ramas! Hoy tenemos la clase de tips y ayudas en la que tratar de comentarles algunas buenas prcticas a la hora de hacer una pgina web. Cmo usar el cdigo Este era el primer punto Por qu hice referencia al uso del cdigo? Bueno, por dos motivos: que tenamos en el temario.
84
Manual de Dreamweaver 1- Hoy por hoy los navegadores ms populares (y los no tanto) soportan uso de cdigo invlido a fin de que las pginas se vean mejor en ellos y ganar popularidad entre la gente. En realidad, todos los navegadores deberan atenerse a los estndares de la W3C, como ya lo vimos en clases anteriores, pero como estas reglas van cambiando con el tiempo y la gente que hace webs no actualiza sus conocimientos a la par de estas qu sucede? las empresas creadoras de los navegadores soportan cdigo viejo para que la gente que se qued en la historia, los tenga como su navegador favorito y los recomiende a otros, por el solo hecho de no leerse una hojita de nuevos estndares. Ademas de que la gente en general adopte estos navegadores porque las pginas se ven mejor. Esto nos dejara como primer tip: Mantnganse actualizados!!! Tal vez, para cuando este taller termine, pueda haber nuevas reglas, o tal vez no, el punto es que cuando nombr la W3C en este taller e indiqu su funcin, mi intencin fue que ustedes mismos supieran de qu se trataba y que la usen para mantenerse actualizados. No fue un comentario al vuelo. Algunos ejemplos de este tipo de practicas desactualizadas? Por ejemplo, mucha gente pone saltos de linea con el tag <br> que no existe! Recuerden que por all al principio del taller, dijimos que todas las etiquetas tienen un cierre. La etiqueta <br> actual esta definida de esta manera <br /> con la barra de cierre al final. Sin embargo todos los navegadores soportan ambos tipos de etiquetas. El mantenerse actualizados, separara los diseadores webs, de los que hacen webs. Por otro lado, tenemos el punto dos: 2- Otra cuestin que tambin remarqu a lo largo del curso, fue que usaran las etiquetas correctamente, tanto sintcticamente (el ejemplo del <br /> de arriba) como semnticamente. No usen un <p></p> para poner un ttulo, o un <strong></strong> para poner un texto en negrita. Recuerden el significado de cada etiqueta. Denle el uso que se merecen a las etiquetas. <b> (para negritas) <strong> (para resaltar algo importante), <h1,2,3,4> para ttulos, subttulos, etc. Este tip, no es solo por el hecho de que el cdigo sea correcto semnticamente, sino tambin, porque estas reglas las siguen los buscadores. Si bien la excusa de la semntica debera ser suficiente para escribir el cdigo correctamente, otra excusa importantsima es que los buscadores como por ejemplo Google, hacen uso de los distintos tipos de etiquetas, para marcar preponderancia a la hora de poner avisos en nuestras pginas. 85
Manual de Dreamweaver A modo de ejemplo, si ponemos un ttulo entre un <p></p> y el autor en un <h1></h1>, el buscador dar preponderancia al nombre del autor a la hora de poner avisos, y la gente interesada en nuestro articulo, no ver en la publicidad nada relacionado con el mismo, solo algo relacionado con nuestro nombre, que es muy probable que le sea menos importante a la hora de cliquear. As que recuerden, si no es por ser correcto, por lo menos, escriban bien el codigo por inters! jeje Estos creo que son los dos tips que mas importancia tienen para mi a la hora de explicarles, el resto, los descubriran en su propio camino de webmasters. Por el lado de la ayuda, el segundo punto que marqu en el temario, les puedo decir otro par de cositas. Primero que nada, sean ordenados, si hay algo que aprend a rajatabla y que descubr que es una de las cosas ms importantes a la hora de trabajar en lo que sea, es ser ordenado. Organicen su trabajo y su cdigo, identen cada lnea que hagan para que tenga fcil lectura, comenten los principios y fines de cada bloque para que puedan encontrarlo en caso de tener que modificarlo, y el HTML sea muy extenso, utilicen las etiquetas de definicin de documento ( <DOCTYPE), en fin, hagan las cosas bien Recuerden que tal vez, la pgina que hagan hoy, la tengan que reacomodar maana, y el ganar tiempo haciendo las cosas as nomas hoy, les puede costar el doble cuando tengan que modificar algo. Recuerden el dicho el haragn trabaja dos veces, que no se de donde lo saque pero es un refrn conocido. Otra cosa que les puedo recomendar, es que usen solo los tags necesarios, no metan tags por todos lados ni creen mil divs solo para ordenar una palabra (esta ayuda se la debo a mi compaera de trabajo Daniela), recuerden que los estilos y el HTML les darn herramientas necesarias para hacer las cosas simples y bien, y si no logran hacer algo, probablemente el error no sea del lenguaje sino de ustedes y su cdigo (aunque hay casos en que no, pero esto lo descubrirn con la prctica). Piensen que si hay toda una serie de especificaciones, y reglas a seguir creadas por muchos profesionales y recomendadas por miles de diseadores web alrededor del mundo, es difcil que la culpa la tenga el estndar HTML del momento. Busquen la simplificacin de su cdigo, para que slo haga lo que necesitan, no ms. Eso los ayudar en el futuro, cuando necesiten otros lenguajes como Javascript, y tambin har sus pginas ms livianas, y compatibles con la mayora de los navegadores. Conclusin Bueno, espero que les sirvan los consejitos que les di en esta clase. Ahora, me despido con el tip principal, y la mejor ayuda que les puedo ofrecer: 86
Manual de Dreamweaver Practiquen, practiquen y practiquen. Usen el Dw y el HTML, jueguen con ellos, lean y aprendan de errores de otros diseadores web, aprendan de sus compaeros de laburo, o sus compaeros de estudio, metanse en foros a discutir ideas, que ms.. Solo entre profesionales se volveran profesionales, y ese es el mejor tip que les puedo ofrecer. Nos vemos el martes que viene para la clase final. Hasta luego mis fieles seguidores!!
Clase 28: Clase Final
Y al final, lleg el final. Buen da para todos! Cmo les va? Hoy nos toca la triste y, a la vez, alegre despedida ^_^. Alegre porque ya estn un poquito ms cerca de ser webmasters, o por lo menos espero haberles acercado conocimientos que puedan usar para tomar decisiones o mejorar sus sitios en un futuro no muy distante. A lo largo de este taller, fuimos viendo diferentes tcnicas y usos de Dw y HTML en mayor o menor medida. Al principio trat de darles informacin ms del lado de Dreamweaver, para que puedan hacer uso prctico del programa, y luego me volqu mas para el lado del HTML porque mi intencin era mostrarles cmo se crea una pgina, mas all de la herramienta que usen. Con la practica y ya sabiendo cmo manejar HTML, sus conocimientos sobre Dw irn creciendo da a da. Adems, el ir descubriendo cosas les sera entretenido en el transcurso de su trabajo. Desde mi punto de vista, plante el taller como una manera de destrabar en esos momentos en que la cabeza no quiere pensar ms, o en otros en que no sabemos cmo resolver un tema puntual. No fue mi intencin el decir cmo deben hacer tal o cual cosa, sino mostrar la manera en que se podra llegar a una desicin sobre eso. Siempre piensen cmo resolver las cosas ustedes mismos, no importa si en un lugar dice hganlo as, busquen el porqu y luego decidan si ese por qu esta fundamentado, o a ustedes les parece mejor de otra manera. Errando y acertando, encontrarn la mejor manera de hacer las cosas. No hay un genio del diseo web que se las sabe todas. Siempre vamos a tener cosas para descubrir y por eso mi punto de este curso.
87
Manual de Dreamweaver No les puedo decir todas las maneras de hacer las cosas porque, tal vez, alguno de ustedes encuentre una manera mejor, pero s puedo transmitirles mi experiencia y decirles que lo mejor es que hagan la suya propia y que tomen todo lo que tengan a mano para aprender y sacar sus propias conclusiones. Recursos Aqu les dejo algunos links importantes sobre las bases de lo visto a lo largo del taller para que tengan de referencia cada vez que necesiten. - http://www.adobe.com/support/documentation/es/dreamweaver/ (manuales oficiales sobre Dw y relacionados) - http://www.w3c.org/ - http://es.wikipedia.org/wiki/HTML (lean ambos juntos para ver diferencias) - http://es.wikipedia.org/wiki/XHTML (lean ambos juntos para ver diferencias) - http://es.wikipedia.org/wiki/Web_2.0 Recomendaciones Bueno, gran parte de las recomendaciones, sino todas, ya las fui dando a lo largo del taller, as que no queda mucho por decir. Mi ltima recomendacin es que lean mis recomendaciones ( jaja ), busquen recomendaciones de otros y saquen sus propias conclusiones. Traten de aprender todo lo que puedan de los dems pero siempre aportando su cuota de pensamiento y anlisis para poder inclusive mejorar todos los aportes que incorporen. Conclusin final Y ac lleg la triste hora de la despedida. Espero que les haya gustado el taller y que les haya sido provechoso. Ojal que mis clases les hayan aportado un granito de arena en su carrera de webmasters profesionales.
88

Taller Dreamweaver

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Taller Dreamweaver

Cargado por

Copyright:

Formatos disponibles

Manual de Dreamweaver

Clase 04: Panel Insert, pestaa Common

Clase 05: Panel Insert, pestala Layout

Clase 06: Panel Insert, pestaas Forms

Panel Insert (insertar), tercera parte.

Clase 07: Pestaa Text y Favorites

Panel Insert (insertar), cuarta parte.

Es exactamente lo mismo que el Italic.

margen izquierdo en el cual podemos meter texto. Este sera el resultado.

h1, h2, h3, : Sirven para marcar cabeceras, el h1 se utiliza

Clase 08: Estableciendo un rea de trabajo

Preparndonos para nuestro primer sitio

Clase 09: Trabajo en modo diseo

Como se puede ver, hay mas cosas.

El modo de vista de diseo lo podramos dividir en 3 partes:

Clase 10: Trabajo en modo cdigo 24

Clase 11: Modo cdigo o modo visual?

Tamao ideal de una pgina

Clase 12: Etiquetas ms usadas (1)

Clase 13: Etiquetas ms usadas (2)

Clase 14: Caracteres especiales

Y el supercaracter del dia! (un espacio en blanco):

Clase 15: Lista

Clase 16: Tablas

Un poco de historia (no tan histrica)

Ahora s, a ver como se hacen y utilizan las tablas

Programs de Adobe Systems Incorporated

Clase 17: Divisores y estilos CSS (1)

Qu son los divisores?

Clase 18: Divisores y estilos CSS (2)

<div> (foto y contenido)<div>(pie)</div></div>

Clase 19: Divisores y estilos CSS (3)

Clase 20: Ms estilos CSS

<h2>Articulo de explicacion: manejo de CSS</h2>

paciencia a la hora de usarlo.</p>

<h2>Articulos relacionados: </h2>

<p>Dw/html taller elwebmaster.com</p>

<p>w3c y maquetado correcto del html</p>

<h2>Articulo de explicacion: manejo de CSS</h2>

<h2>Articulos relacionados: </h2>

<p>Dw/html taller elwebmaster.com</p>

<p>w3c y maquetado correcto del html</p>

<style type=text/css media=screen>

#nota-uno .pieNota h2, p {

Clase 21: Formularios

<form method=post action=login.php>

Recuerden que cualquier pregunta que tengan, pueden enviar comentarios.

Clase 22: Dentro del Formulario

<input type=text name=user value=" />

<input type=password name=pass value=" />

Clase 23: Dentro del Formulario (2)

Elementos del formulario (2)

<input type=radio name=accion value=aceptar />

<input type=radio name=accion value=no aceptar />

<option value=1>Opcion 1</option>

<option value=2>Opcion 2</option>

value=Ingrese aqui el nombre de usuario/></label>

Clase 25: Preguntas

1. Diferencia entre XHTML, HTML y HTTP

Los tags pueden contener atributos: <tag

2. Atajos de teclado en Dreamweaver (varias versiones)

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

muy similares: el HTML

Haz clic aqu para ver