Taller Dreamweaver
Taller Dreamweaver
Taller 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!!
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.
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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.
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).
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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.
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.
Bold: Nos inserta un tag HTML <strong>texto</strong> que nos muestra en nuestra pgina el contenido en negrita (en el ejemplo sera texto). <!--[if !vml]--> <!--[endif]--> Italic: Inserta los tags <em> </em> en los cuales su
contenido se ver en estilo itlica. <!--[endif]--> 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. <!--[if !vml]--> <!--[endif]-->Emphasis: De nuevo.
Manual de Dreamweaver
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. <!--[if !vml]--> <!--[endif]--> 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. <!--[if !vml]--> <!--[endif]--> Block-quote: Block-quote nos crea un bloque con
Manual de Dreamweaver
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. <!--[if !vml]--> <!--[endif]--> 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. <!--[if !vml]--> <!--[endif]--> <!--[if !vml]--> <!--[endif]--> <!--[if !vml]-->
Manual de Dreamweaver
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>, <!--[if !vml]--> <!--[endif]--> Unordered list: Nos crea una lista desordenada.
Esto quiere decir, sin numeracin. A modo de ejemplo: <!--[if !supportLists]--> <!--[endif]-->Item 1 <!--[if !supportLists]--> <!--[endif]-->Item2 <!--[if !supportLists]--> <!--[endif]--> <!--[if !vml]--> <!--[endif]--> Ordered list: Nos crea una lista ordenada.
A modo de ejemplo: <!--[if !supportLists]-->1. <!--[endif]-->item 1 <!--[if !supportLists]-->2. <!--[endif]-->item 2 <!--[if !supportLists]-->3. <!--[endif]--> <!--[if !vml]--> <!--[endif]--> 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). <!--[if !vml]--> <!--[endif]--> <!--[if !vml]--> <!--[endif]--> <!--[if !vml]-->
<!--[endif]--> 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
Manual de Dreamweaver
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. <!--[if !vml]--> <!--[endif]--> 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
Manual de Dreamweaver
Pestaa Favorites:
<!--[if [endif]-->
!vml]-->
<!--
En esta pestaa, presionando clic derecho, se nos abrir un men, en el cual, yendo a customize Favorites obtendremos un panel para poder elegir todas las opciones que queramos del panel Insert y poner la que se nos ocurra. De esta manera podremos hacer una pestaa con nuestras opciones ms usadas y no depender del orden en que las puso Dw. Prueben de hacerse una pestaa ustedes mismos con lo que prefieran, y si no les sale, recuerden que pueden dejar comentarios en la pgina, que los responder lo mas rpido que pueda. Conclusin Bueno, estas pestaas, si bien son de fcil uso, nos llevaron unas cuantas lneas. Estara bueno que vayan usandolas (por lo menos la pestaa text), as adems de repasar las cosas que vimos hoy, van incorporando mas rpido los tags HTML. Nos volvemos a ver la semana que viene ya con tema nuevo para alegra de todos!! (o por lo menos ma :p) Saludos!
Buen da a todos! Cmo van mis fieles seguidores del taller? Me imagino que habrn estado practicando! Ya que por fin terminamos con nuestra querida barrita Insert, podemos empezar a movernos un poco ms sobre Dreamweaver y ver lo que vayamos aprendiendo en pantalla. Eso s, me ponen en prctica todo lo que veamos en las siguientes semanas, miren que es muy fcil seguir este taller, pero es muy fcil tambin olvidarse lo que aprendemos! (bah, yo tengo mala memoria :P).
19
Manual de Dreamweaver
Para empezar, podramos ir al men File/New y crear un nuevo archivo HTML, pero no vamos a hacer esto. Como vamos a crear un sitio web, no podemos crear un HTML cualquiera y despus andar copiando o pegando archivos de un lado para otro. Lo que hay que hacer es definir una carpeta para nuestro sitio, y luego le diremos a Dw que carpeta es esta, as el programa ya reconocer en dnde estamos trabajando. Para esto, creamos en algn lugar de nuestra PC (o en nuestro server en caso que trabajemos directamente online), una carpeta en la que vamos a guardar TODO nuestro sitio. Yo en el curso voy a trabajar sobre /Mis Documentos/sitios/Taller. Bueno una vez que tengamos la carpeta creada, volvemos al Dreamweaver. Vamos al panel de la derecha, y elegimos el men Files.
De aqu se desprenden varias opciones. La que nosotros vamos a elegir es Manage Sites. Una vez seleccionada esta opcin nos va a aparecer una ventanita en la que vamos a elegir New, se despliega un men en el que seleccionamos site, y ah se nos abrir una ventana mas grande en la que definiremos el sitio.
20
Manual de Dreamweaver
En nuestro caso, solo vamos a necesitar definir solo dos cosas. El nombre del sitio (Taller) y el Local root folder que es el lugar en donde vamos a tener nuestro sitio (/Mis documentos/sitios/Taller). El resto de las opciones no es necesario tocarlas para esta instancia, pero lo que s debemos tener en cuenta es que la opcin de Cache debe estar seleccionada. Luego de esto, damos clic en Ok para finalizar la creacin del sitio.
21
Manual de Dreamweaver
Se nos cerrara el men grande de definicin de sitio, y nos quedaremos solo con el chico, en donde ahora, tendremos creado el sitio Taller. Lo seleccionamos y presionamos Done para ya por fin, poder empezar a trabajar con l. Una vez que ya tenemos creado nuestro sitio, podremos ver que en el panel de la derecha, en la seccin Files ha quedado establecido, listo para crearle archivos dentro. Cliqueando con el botn derecho en nuestra carpeta principal del sitio abriremos un men con el cual, ahora s, podemos empezar a crear archivos.
Como se puede ver yo ya cre uno de muestra y sobre el que voy a trabajar la clase que viene, que se llama index.html. Conclusin Bueno, ya hemos definido el sitio y creado nuestra primer pgina. Estamos listos ya para empezar a manejarla, a conocer sus modos de trabajo y muchas cosas ms. Los espero la prxima semana ya con pgina en mano, para conocer el modo diseo de trabajo, y comparar algunas cosas con el modo cdigo tambin. Ya podramos decir que estamos en la segunda fase de este curso (segunda de muchas!).
Hola, gente querida! Cmo andan? Una vez ms, sean bienvenidos a otra clase del Taller de Adobe Dreamweaver. El martes pasado aprendimos
22
Manual de Dreamweaver
cmo crear la pgina de inicio de nuestro sitio web, la famosa index.html. Bueno, hoy nos toca, ya con la pgina creada en la clase anterior, ver el modo de vista de diseo. Vamos a tratar de conocer un par de caractersticas iniciales, y otras cositas predeterminadas de Dreamweaver. Antes de empezar vamos a dejar una imagen de nuestra pgina en blanco, en modo de vista diseo, para tener de referencia a lo largo de esta clase.
Cuando creamos una pgina en blanco en Dw, en realidad lo que parece blanco no es tal, porque la vista de diseo lo que realmente nos muestra es el cuerpo de la pgina. Sin embargo, hay otras partes que no estn especficamente dentro del cuerpo, como por ejemplo el ttulo. En la siguiente foto vamos a ver lo que realmente est en nuestra pgina y que la vista de diseo de Dw NO nos muestra.
23
Manual de Dreamweaver
En principio podemos ver un tag que comienza con <!DOCTYPE, en este tag se define el tipo de pgina que vamos a hacer, segn las normas de la W3C (a leer, gente!) que es el organismo que regula los estndares del lenguaje HTML entre otras cosas. Nuestro documento HTML es XHTML 1.0 Transitional. Luego de este tag tenemos el que define el documento HTML en s, el tag <html> y su cierre al final, </html>. Dentro de l encontramos el tag <head></head> que contiene el tag <title></title> (que va a llevar el ttulo de nuestra pgina, el que sale en la ventana de nuestro navegador), adems de otros tags como los tags <meta></meta> que sirven a los webmasters para poner especificaciones especiales. Por otro lado tenemos el tag <body></body>, que este s ser el que tendr todo el contenido de nuestra pgina y el que se mostrar en el modo vista de diseo de Dw.
2.
El cuerpo de la pgina, donde insertaremos y veremos cada cambio que le vayamos haciendo a nuestro body.
3.
El pie de la ventana, nos indicar en qu parte de nuestra pgina estamos parados (en este caso dentro del tag <body>) y herramientas comunes, como zoom, selector, y hand.
Vayan mirando estas opciones, y probando. Si bien son fciles, est bueno que las vayan reconociendo y cualquier cosa me preguntan va comentario. Conclusin
Por ahora damos por concluida la clase. La prxima iremos trabajando sobre el body de nuestra pgina y tambin investigaremos qu es lo que hace Dw por detrs del modo visual.
Les sigo recomendando que siempre prueben las herramientas que vemos clase a clase y que vayan un poco ms all tambin. Cualquier duda que les vaya surgiendo me la pueden comentar, as las respondemos para todo el curso y las clases se hacen ms dinmicas.
Manual de Dreamweaver
Hola, mis fieles seguidores (y a los nuevos tambin!) Cmo les va? Espero que bien, por supuesto. Hoy nos toca revisar la vista de cdigo. No se asusten al escuchar (o leer, en este caso) esta palabra. Primero porque hoy slo veremos el rea de trabajo y las opciones de manejo del cdigo y no el cdigo en s, y segundo porque una vez que empecemos a usarlo, vern que no es tan complicado como pensaban. Calculo que todos tendrn su sitio definido con su index.html en blanco (que recuerdan que no era tan blanco?) No lo tienen?? A leer clases anteriores!
Lo tienen??? Esos son mis alumnos!!! ^_^ Bien, vamos a dejar una imagen de la vista de cdigo como referencia durante la clase:
En la vista de cdigo, la parte superior de la ventana es igual a la de la vista de diseo, salvo que no tenemos las visual aids (el ojito) que son ayudas visuales especificas del modo de vista de diseo. En el rea de trabajo lo primero que podemos ver es que desaparecen las reglas y aparece un numerado de lneas en su lugar, de gran ayuda a la hora de posicionarse en el cdigo en documentos muy extensos.
Otras cosas que desaparecen, obviamente, son la manito, la herramienta de seleccin (la flecha negra) y el zoom. Lo nuevo es el panel de la izquierda con opciones especficas para el manejo de cdigo. Vamos a seccionarlo por partes e ir explicando sus principales usos:
25
Manual de Dreamweaver
Open documents: Nos despliega un men con una lista completa de los archivos abiertos con su ruta completa. Collapse Tag, Collapse Selection, Expand All:
Estas tres herramientas nos sirven para poder acomodar el cdigo de nuestra pgina as no nos molesta a medida que avanzamos en nuestro proyecto. Cuando estamos parados en un tag o tenemos una seleccin y presionamos el botn correspondiente, Dw lo que har es minimizar esa seccin de cdigo en una sola lnea y nos avisara que tiene mas en su interior colocando , tres puntos al final.
Adems nos agregara el signo + en el lado izquierdo para poder expandir esa seccin. El botn Expand all, expandir TODAS las partes que tengamos colapsadas.
Cdigo normal
Cdigo minimizado Select parent tag, Balance braces: El primero marcar una seleccin completa del tag padre en el que estemos posicionados con el cursor (desde la etiqueta de apertura hasta la de cierre), y a medida que lo vayamos apretando una y otra vez, ir seleccionando cada padre correspondiente a la actual seleccin. Por si no saben a que me refiero con padre, la frase Untitled Document es hija del tag <title></title> y el tag <title></title> es hijo del tag <head></head>. *(foto de cdigo normal) Balance braces sirve para, cuando programamos en un lenguaje que usa llaves {} (javascript, php), si estamos parados entre 2, presionamos el botn y selecciona todo el contenido de las mismos. Es muy til a la hora de buscar el comienzo o fin de un bloque, pero en fin, no nos servir para HTML. Line numbers, Highlight invalid code: El primero esconde la barra de numeracin de lneas que est a la izquierda. El segundo, nos marca el cdigo errneo resaltndolo en amarillo.
26
Manual de Dreamweaver
Apply comment, remove comment: Sirven para agregar un comentario nuevo (o comentar una seccin seleccionada), y a la inversa, para remover un comentario, o remover los comentarios de un rea seleccionada. Wrap tag, Recent snippet, Move or convert CSS: Wrap tag encierra una parte de nuestro HTML que tengamos seleccionada dentro de un tag que podremos elegir cuando presionemos el botn. Por ejemplo escribimos un texto, lo seleccionamos, apretamos el botn, elegimos el tag de prrafo (<p></p>) y encerrar todo el texto dentro de esos dos tags (apertura y cierre) transformndolo en un prrafo. Recent snippet nos despliega una lista de los snippets que hayamos usado recientemente, o nos muestra el panel de snippets de Dreamweaver.
Los snippets son cdigos predefinidos de diferentes cosas y en diferentes lenguajes. A modo de ejemplo, podemos insertar desde el panel de snippets un snippet javascript que deshabilite el botn derecho en nuestra pgina, u otro snippet que agregue un formulario predefinido, y muchos elementos HTML mas que nos pueden servir para ahorrar tiempo a la hora de escribir. Si algo no entienden sobre esto no duden en poner comentarios al respecto que me extiendo sobre el tema. No lo hago ahora mismo porque no es el punto de la clase y debemos explicar todos los elementos de la barra por igual. El tercer botn, Move or convert CSS, sirve para convertir un estilo que le pongamos a un tag (ya veremos en futuras clases que es un estilo) en una clase o id de CSS (ya lo veremos, se los cuento por si quieren investigar), o pasar cdigo CSS de un archivo a otro. Ident code, Outdent code, Format source code:
Estos tres botones son realmente tiles a la hora de trabajar con grandes proyectos en los que necesitamos tener el cdigo ordenado. Ident realiza una tabulacin hacia la derecha de la lnea o la seleccin que tengamos. Outdent, lo contrario, remueve una tabulacin. Y por ultimo, Format source code, preformatea el cdigo a la manera predefinida de Dw, aunque se pueden modificar varias opciones de esta herramienta. Les dejo una imagen de muestra para que sepan lo que es un cdigo identado.
27
Manual de Dreamweaver
Como pueden ver, cada elemento que se encuentra dentro de otro, esta tabulado una vez ms que su padre (tag que lo contiene). En trabajos con cdigo muy largo, el tenerlo bien identado es una ayuda MUY GRANDE. Es bueno que se acostumbren a identar el cdigo ustedes mismos, sin la ayuda de la herramienta de Dw, pero bueno, si se olvidan, esta herramienta es de GRAN ayuda. Conclusin Bueno, ac terminamos de ver el rea de trabajo del modo cdigo. Mas adelante cuando empecemos a agregar elementos a nuestra pagina iremos viendo las diferencias entre lo que agregamos en modo visual, y lo que sale en modo cdigo y viceversa. A su vez iremos utilizando estas herramientas, as que es importante que las vayan aprendiendo y si no las quieren usar en un futuro, porque se acostumbran a trabajar a su manera (cada uno hace las cosas diferentes ) pues, no les molestar en nada saber algo ms.
Y nos volvemos a encontrar en la clase nmero 11 del Taller de Adobe Dreamweaver!!! Me alegro de que todava estn aqu, y los que no estn de todos modos no van a leer esto as que no importa. Esta clase es especial porque, adems del tema de hoy, responderemos la duda de nuestro seguidor Nelson, que nos pregunt cul sera el tamao adecuado para hacer una pgina. Como creo que la respuesta merece su espacio decid incluirla al final de esta clase.
Comparacin
Empezar el contenido de esta clase con el ttulo comparacin, no es lo que mas me gust, pero bueno, es lo que es, aunque no lo es tanto CMOOOO?? Ahora les cuento: Si bien Dw permite llegar a hacer una pgina completa en modo visual, no es mucho lo que vamos a lograr de esta manera. Cualquiera que pretenda hacer una pgina (decente), usando Dw o cualquier otro programa, va a necesitar saber al menos un mnimo de HTML.
28
Manual de Dreamweaver
Por ende, no podemos considerar el modo cdigo o el modo visual como diferentes maneras de hacer una pgina, ya que lo ideal es usar, de ambos, las cosas que nos resulten ms tiles. A eso me refera con que no me gustaba la idea de comparacin entre una manera y otra de hacer las cosas, ya que son complementarias. A la larga, la realidad nos dice que el modo visual prcticamente se resume a la escritura de texto, ya que Dw nos cambia los caracteres no vlidos para HTML por sus correspondientes reemplazos (por ejemplo los acentos, entre otros) ya que el resto de las opciones nos resulta ms rpido manejarlas desde el modo cdigo. Como bien dijimos ms arriba se puede llegar a una pgina completa en modo visual, pero poco a poco cuando vayan ganando experiencia, vern que este modo les va quedando chico, y se pasarn al modo cdigo exclusivamente. De aqu que el taller adems de Dw planea ensear HTML. Como todo, podremos hacer ms rendidor el programa, cuando tengamos un uso considerable de l. Piensen que usndolo seguido y acostumbrndose a un modo de trabajo, pueden customizar sus herramientas, o saber dnde estn las que siempre usan y agilizar la creacin de sitios web.
Conclusin
Creo que la respuesta al ttulo de esta clase sera Modo cdigo, pero no nos vamos a encasillar tanto. Al principio (o no), puede que haya mucha gente que considere ms practico el modo de vista de diseo, y a la larga tal vez muchos lo sigan usando para alguna que otra cosa. Lo que s cabe destacar es que el conocimiento del cdigo, su estructuracin, y el poder abstraer lo que se ve en pantalla y poder visualizarlo cuando vemos cdigo, va a determinar el punto en que pasemos de principiantes a avanzados dentro de la maquetacin de pginas web.
Agregado especial!!
Creo que este aadido es muy importante y, aunque no tenga que ver con Dw o con HTML, es importante saberlo, ms an ahora, aprovechando que recin estamos creando nuestra pgina, para empezar con todas las cosas bien hechas :p. Gracias a Nelson (un seguidor del curso), quien nos pregunto cual era el tamao ideal para una pgina normal, vamos a incluir en esta clase, la respuesta a su pregunta como agregado especial o tip:
29
Manual de Dreamweaver
Una pgina no tiene un tamao preestablecido aunque se pueden encontrar muchas pginas que tienen el mismo ancho o largo que otras, debido a una no-arbitraria eleccin de los diseadores a la hora de empezar a trabajar. Lo principal a pensar a la hora de hacer un diseo de una web es quin va a ser el usuario de esa pgina y, como no lo sabemos (aunque tal vez podemos armar un perfil de posible user), tenemos que calcular un usuario promedio. Es por esto que uno siempre trata de realizar su pgina en un tamao acorde a las masas o al perfil general de nuestros usuarios. Hoy por hoy un gran porcentaje de gente, usa una resolucin de pantalla de 1024 x 768px, y convendra disear una pgina en la cual el contenido, o la informacin relevante sea visible dentro de ese tamao, para luego abarcar otras resoluciones, con auxilios grficos, para completar. Es muy conocido el tipo de pginas de cuerpo centrado con extremos que completan el diseo.
Como podemos ver en la imagen, tenemos una parte central que se adeca al formato de 1024px de ancho de pantalla. En esta pgina son 950px reales, se deja margen para la barra de scroll que puede surgir si la pgina crece hacia abajo (como ven se toman en cuenta varias cosas). Tambin podemos ver, que los costados del centro de la pgina, no se dejan descuidados, sino que tambin tienen un motivo grafico, que termina de rellenar la pgina en caso de que el usuario tenga una resolucin mas grande (1280 x 1024, 1600 x 1200, entre otros). Prueben ver la pgina en diferentes resoluciones de monitor para tener una idea ms clara (ac les dejo el link http://www.videosjaja.com). Otro punto a tener en cuenta es la gente que an usa resolucin de 800 x 600px que, aunque no los consideramos como mayora en nuestro modelo de usuario promedio, debemos tomarlos en cuenta de todos modos. Por ende, el contenido de mayor relevancia, debe estar considerado dentro de los 750px del body de nuestro sitio. Y vuelvo a hacer referencia a la pgina de la imagen anterior. Podrn ver que el panel de registro, inicio, subir videos, categoras, etc., todas se encuentran en un rango de visin accesible para la mayora de los usuarios. Retomando: el tamao de nuestra pgina puede depender de varias cosas.
30
Manual de Dreamweaver
A medida que vayan aprendiendo a los golpes, van a ir mejorando sus diseos. No olvidemos que no se puede ser programador, diseador, maquetador, todo de la noche a la maana. Yo recomiendo que vayan poco a poco investigando de acuerdo a lo que vayan necesitando y, por supuesto, leyendo y escuchando recomendaciones de otras personas que ya pasaron por las etapas que estn pasando ustedes. Como dije al principio del curso (creo) aprender Dreamweaver no los va a hacer diseadores web profesionales, ya que Dw es solo una herramienta, pero s los va a ayudar mucho. En s, ser un buen Webmaster, depende de muchas cosas que se hacen con la experiencia y esta se hace ponindole ganas y tratando de aprender todo lo que se pueda (principalmente siguiendo este taller, jeje). No duden en seguir preguntando y ojal salgan ms comentarios como este, que nos dan tema para agregar en nuestras clases y hacerlas ms tiles y a la medida de ustedes que siguen nuestro curso y que sern los futuros webmasters.
Etiquetas
La parte HTMLesca
Quin en una pgina no pone algo, aunque sea mnimo de texto? Y bueno, entonces vamos a empezar por lo bsico, las etiquetas para texto. Vamos a ir por orden jerrquico, es decir, de importancia dentro de un texto, como si de un diario (peridico) se tratase. 31
Manual de Dreamweaver h1: Esta etiqueta, se utiliza para ttulos y comienza con la apertura <h1> y termina con el cierre </h1>. Es la de mayor jerarqua entre las etiquetas de texto, por lo tanto tiene mayor tamao y grosor. Si bien estas propiedades pueden cambiarse, no en vano estn as. Existen otras etiquetas H, que son las h2, h3, , que van disminuyendo su tamao proporcionalmente, junto con su grado de importancia. Estas se utilizan en subttulos, copetes, etc. Si sabemos que los tamaos de las letras se pueden cambiar y los grosores tambin entonces qu diferencia hay? Bueno, primero que nada que si nosotros le seteamos a nuestra etiqueta h1 un tamao, letra y grosor por defecto, con estilos, en todos los lugares donde la pongamos saldr igual (ya veremos cmo). Esto nos ayuda a mantener una sincrona entre los tipos de cosas que pongamos en nuestro sitio. Otra cuestin es tambin que los buscadores (como Google) le dan preponderancia a las palabras ms importantes del sitio a la hora de agregar una pgina a su base de datos. Entonces, cuando alguien busque por X palabra en Google, tendremos ms posibilidades de aparecer ms arriba en el buscador, si esta palabra se encontraba en el ttulo, que si se encontraba en un prrafo. (El tema de los buscadores es muy extenso y no slo esto tiene que ver, tomen este comentario solo como una referencia de que por algo existen las etiquetas que existen, y no estn porque s). Adems recordemos que debemos mantener un orden semntico en nuestro texto, y sera desprolijo poner un ttulo en un prrafo con un texto grande, y poner un prrafo en un <h1> con un texto chico. Las cosas hay que hacerlas bien! 32
Manual de Dreamweaver Siguiendo con otras etiquetas: Quin no vio en su escuela primaria oraciones y prrafos? y ac la tenemos, la etiqueta de prrafo. Esta etiqueta comienza con <p> y termina con </p>. Dentro de estas dos, podemos escribir todo el texto que queramos y tendr la caracterstica de pertenecer a este mismo prrafo (obviamente). Y por que lo cuento? Ms que nada para que sepan que todas las propiedades que le agreguen al prrafo se les agregarn a todas y cada una de las palabras en su interior (por ejemplo: color, negritas, itlicas, tamao de letra, etc). Otra etiqueta que casi la podemos ver en cualquier pgina y que se usa en cualquier editor de texto comn que encontremos por ah, es la etiqueta de negrita. Esta etiqueta tiene como comienzo un <b> y como cierre un </b> (ya irn notando similitudes entre aperturas y cierres, por si no se las digo bajito pero no cuenten nada: /). Otra etiqueta para poner negritas es la que est delimitada por <strong> </strong>, esta etiqueta, al igual que la anterior, nos pone todo el texto de su interior en una letra de mayor densidad (digo mayor densidad y no ms negra, porque si la letra no fuera negra.ustedes me entienden :p , y si no preguntan!). La diferencia entre la etiqueta <b> y la etiqueta <strong> es ms que nada de carcter semntico. Mientras que la <b> se utiliza simplemente para resaltar un texto, la <strong> se utiliza para reforzar un texto. Si bien las dos se ven iguales, lo correcto sera que usemos cada una para lo que corresponde (al igual que los <h*>). Y siguiendo con los formateos de texto, nos encontramos con la etiqueta de itlicas, que tiene como apertura <i>, y como cierre </i> (Ya, dganme que entendieron lo de la barra!! Jaja)
33
Manual de Dreamweaver Esta etiqueta al igual que en la mayora de los editores de documentos, inclina el texto que contiene. Su correspondiente en orden semntico, es la etiqueta <em> </em> que significa en ingls emphasis (nfasis) y se utiliza, bueno, para eso mismo. Y ac nos encontramos con los caprichos semnticos del HTML, y vamos ms all! Otra etiqueta que tiene el mismo efecto que las dos anteriores es la etiqueta <cita> </cita> que sirve para mostrar textos citados y que tiene el mismo efecto que las dos etiquetas anteriores, su nico cambio es el nombre, que coincide con el contenido a mostrar. (Aclaracin: por defecto estas etiquetas vienen con un tamao, color, inclinacin, grosor, y espaciado de letra especfico. Pero recordemos que esto se puede cambiar mediante estilos, que ya veremos que son, y de esta manera nuestras etiquetas solo diferentes semnticamente, podrn ser diferentes tambin visualmente, y ah s tendremos adems de el correcto uso de las etiquetas, la diferenciacin especfica-visual de cada una). Y nos vamos a otra ms linda. (Depende la chica/o que le pongamos adentro jeje). La etiqueta de imagen! Esta etiqueta tiene la particularidad de que empieza y termina en el mismo lugar. Lo lgico a pensar siguiendo lo que venimos diciendo en la clase, sera que esta etiqueta tendra una composicin como esta: <imagen> </imagen>, pero no es as. Esta etiqueta arranca con <img y cierra en l mismo, con la barra. Quedara de esta manera <img />. Dentro de su interior pondremos el lugar de donde leer la imagen y un texto alternativo a mostrar, en caso de que la imagen no este disponible, o que el navegador destino no soporte imagen (qu raro no?). Vamos a mostrar los atributos de esta etiqueta para aprender todo lo necesario para usarla. src
34
Manual de Dreamweaver Este atributo es la que va a contener la url del lugar en donde tengamos la imagen, por ende es indispensable que est. alt Este atributo va a contener un texto alternativo para que, en caso de que nuestra imagen no este disponible, no dejar el espacio en blanco y que la gente no sepa que es lo que iba ah. width/height Estas dos son otras de las propiedades de la etiqueta <img /> y son opcionales, ya que por defecto la etiqueta toma el tamao real de la imagen. Una etiqueta completa de imagen, con sus atributos necesarios y tambin con los opcionales quedara de esta manera: <img src=http://pgina.com/lugardelaimagen/imagen.jpg alt=descripcin width=100px height=100px /> En caso de que tengamos la imagen en nuestro sitio, sera (y ya sin atributos opcionales) <img src=lugardelaimagen/imagen.jpg alt=descripcin /> Ac tenemos la etiqueta ms clickeada del mundo! Con ustedes tururururu, PA! La etiqueta para crear enlaces!! Esta etiqueta esta formada por su apertura <a> y su cierre </a> Adems de su apertura y cierre, tiene atributos indispensables sin los cuales no funcionaria como debe. Antes que nada tenemos que pasarle un contenido, si no a quien vamos a clickear!? Este contenido puede ser un texto, o una imagen, o lo que tengamos ganas de que cuando sea clickeado nos lleve a algn lado.
35
Manual de Dreamweaver Los atributos de la etiqueta en s son: href En este atributo deberemos ponerle lugar a donde queremos que nos lleve esta etiqueta cuando hagamos clic sobre ella. title Este atributo es el que nos abre el cuadradito amarillo famoso (tooltip) con el ttulo del enlace cuando le pasamos por encima. target En este atributo vamos a indicar si queremos que nuestro enlace abra una nueva ventana para su destino (_blank), si queremos que cargue la pgina en el mismo lugar en que estamos(_self), y (_top) y (_parent) que son similares a los anteriores pero se usan cuando utilizamos <frames> (cosa que no me gusta nada :p). De esta manera un enlace completo podra ser: <a href=http://www.elwebmaster.com alt=pgina de elwebmaster target=_blank>Click aqu para ir a la pgina de elwebmaster.com</a> Este enlace, se mostrara en la pgina de esta manera: Clic aqu para ir a la pgina de elwebamster.com Y si lo clickearamos nos abrira una ventana nueva del navegador (o pestaa en caso de que usemos Firefox, en la que cargara la pgina de elwebmaster. Tambin, por el texto alt, si pasramos sobre el link, sin clickearlo, nos mostrara la leyenda pgina de elwebmaster. Otra manera y empezando a combinar, podra ser: <a href=http://www.elwebmaster.com alt=pgina de elwebmaster target=_blank> <img src=logodeelwebmaster.jpg alt=elwebmaster.com />
36
Manual de Dreamweaver </a> De esta manera, tendramos la imagen del logo de elwebmaster que cuando la clickeemos nos llevar a verla en una nueva ventana. Otro de los usos que le podemos dar a la etiqueta de enlaces (en realidad se llama anchor, en espaol ancla), es justamente el de punto de ancla. Habrn visto en alguna pgina que clickean un enlace y no van a otra pgina, sino que los lleva a una parte de esta misma. Generalmente se ve en ndices o, en finales de las pginas, la leyenda Volver arriba. Este tipo de etiquetas es ni ms ni menos que un <a> utilizado de otra manera. En el enlace que queremos que al clickear nos lleve a otra parte de nuestra pgina debemos poner: <a href=#lugar>Ir hacia el lugar</a> Y en el lugar que queremos que sea el destino cuando clickeemos el <a> anterior, debemos poner: <a name=lugar>Llegu a este lugar</a> Entonces cuando clickeemos en Ir hacia el lugar la pgina se correr hacia arriba o hacia abajo, hasta que lleguemos al enlace con el nombre indicado (en este caso lugar). Si no entienden algo me preguntan por comentario, no slo de esto, sino de cualquier cosa recuerden! Y por ltimo, vamos a ver la etiqueta de comentario, la etiqueta de cierre del da de hoy, que justamente no cierra con la / :p . Esta etiqueta inicia con <! , y finaliza con >. Todo lo que escribamos entre estas dos etiquetas no saldr en pantalla cuando mostremos la pgina.
37
Manual de Dreamweaver Sirve a los creadores de pginas web, para anotarnos cosas a modo de recordatorio, o para cuando trabajamos en grupo, que otra persona sepa qu es lo que vamos haciendo paso a paso. Es buena prctica comentar nuestro cdigo, ya que cuando se hace muy extenso, puede ser complicado de entender y nos evita tener que leernos todo para poder darnos cuenta. Ojo, tambin es bueno borrar los comentarios en la pgina final que vamos a tener subida a nuestro hosting, porque los comentarios pesan igual que cualquier otro caracter, por ende, hacen ms grande nuestro HTML (y tarda ms su carga).
La parte Dreamweaveresca
Como este taller es un conjunto entre HTML y Dreamweaver, vamos a mostrar algunas maneras de hacer las etiquetas aprovechando las herramientas que el programa nos da. Ejemplo de etiqueta A:
Seleccionamos el texto que queremos que sea un enlace, pulsamos el botn de Hyperlink (clase de barra Insert numero 1) y se nos abre la caja para completar con los datos necesarios. A mi parecer, una vez que nos acostumbremos al cdigo, es ms fcil escribirlo a mano que hacerlo en la caja. Pero bueno, de esta manera uno no se olvida los campos que tiene que completar. Ejemplo etiqueta B: 38
Manual de Dreamweaver
Como ven, seleccionamos el texto a poner en negrita, y luego apretando el botn B nos pondr ese texto entre, CURIOSAMENTE, la etiqueta <strong>. El tag que debera poner en realidad sera el <b> </b> o bien el botn del Dw llamarse STRONG. Estas cosas son las que menos me gustan de Dw, que hace cosas por convencin sin respetar los criterios reales de cada etiqueta. Pero bueno, tambin hay que saber que la W3C (ver primeras clases) esta por sacar del estndar los tags <i> y <b> para dejar solo los <strong> y <em>, as que talvez lo hayan hecho as, para que en un futuro, los tags que insertan los botones no queden desactualizados. Por esta vez te perdonamos Dreamweaver!!
Conclusin
Bueno, llegamos al final. En esta clase vimos algunas de las etiquetas ms usadas, dentro de lo que es el contenido de las pginas web. En clases siguientes veremos algunas ms y luego otras, exclusivas para el armado, como las tablas y los divisores. Espero que les haya gustado la clase y que la hayan ledo toda, porque sali bastante larguita :p . 39
Manual de Dreamweaver Nos vemos la semana que viene con ms Taller de Dreamweaver/HTML.
Hola! Qu tal? Listos para otra clase de Dw/HTML? As me gusta, siempre dispuestos! Hoy vamos a ver ms tags HTML que seguramente les sern de utilidad en algn momento de su vida como webmasters. Es importante conocer cada tipo de etiqueta, si bien hoy da mucho se maneja con CSS (tema aparte), no por eso son menos vlidas y los que no sepan manejar estilos estarn agradecidos de contar con estos aliados. Conociendo otras etiquetas
Para empezar, vamos a ver uno que nos quedo colgado de la clase anterior, que es el de subrayado. Como su nombre lo dice, subraya, y se aplica a las palabras que estn en el interior de su etiqueta <u> (esto esta subrayado) </u> . Este tipo de tags (tags o etiquetas tmenlos como sinnimos en este taller), como tambin el <center> (este texto esta centrado) </center>, estn BASTANTE fuera de moda, pero los pueden sacar de un apuro. Por qu fuera de moda? Bueno, ya lo he nombrado con anterioridad: Hoy por hoy los desarrolladores han limitado el HTML a usar el lenguaje slo para la ubicacin de los elementos que componen una pgina. La, literalmente, maquetacin de la pgina. Todo el resto, como colores, formateo de texto, fondos, etc. Se ha dejado para los estilos. Pero bueno, como dije arriba, est bueno saberlo, de todos modos, y si a medida que siguen el curso estn haciendo algo, van a poder usarlos hasta que aprendan estilos. Volviendo a los tags: Otros de mucha utilidad son los tags <br /> y <hr />. Como ven, su cierre es en s mismas (tienen la barra al final del mismo tag de inicio). La etiqueta <br /> lo que hace es insertar un salto de lnea. Por ejemplo si escribimos un texto, y queremos que parte de l se vea debajo, podemos insertar un <br /> que nos dejar un salto entre ambos.
40
Manual de Dreamweaver
En s, para que lo entiendan grficamente, es como dar un ENTER en un editor de texto como Word (recuerden que en HTML los enters no contaban como saltos). Por otro lado, la etiqueta <hr /> hace algo similar: Produce el mismo efecto del <br />, pero a su vez agrega un lnea divisoria entre ambos elementos separados. Ahora cuando terminemos de explicar estos tags HTML, vamos a verlos en funcionamiento en imgenes de Dw para que se entiendan 100% Si no, recuerden: dejen sus comentarios! Seguimos: <blockquote>texto</blockquote> Este tag, nos acomoda el texto que escribamos dentro, en una especie de caja que tendr un margen a la izquierda. Cada uno le podr encontrar su utilidad dependiendo las necesidades. Ahora veremos como funciona en Dw: <span>texto</span> Este tag, no hace nada, se utiliza para introducirlo dentro de otros tags, o por s slo, para darle un formato diferente al texto de su interior mediante estilos. Supongamos que tenemos un prrafo, al cual le dimos color azul, y queremos que slo una palabra tenga color rojo, subrayado, negrita, mayor tamao y otra fuente (letra). Si lo hicisemos mediante HTML puro, necesitaramos meter este texto que queremos cambiar entre muchos tags (pinsenlo). Ahora mediante la etiqueta span, nosotros podremos asignarle a esta etiqueta todos los formatos juntos y luego el texto en su interior tendr todas esas propiedades de una sola vez (ya van viendo por qu se usan los estilos aparte y HTML slo para maquetado?). De a poquito nos vamos a ir dando cuenta de cunto mejor es. Bueno, vamos a ver estos ejemplos en Dw. Si podemos todos en una imagen:
41
Manual de Dreamweaver
El dibujo est un poco complicado, porque las etiquetas, estn mezcladas entre s dentro del cdigo HTML. Esto lo hice a propsito para que tengan que analizar lo que ven abajo (en lo que sera la salida de la pgina en el navegador), con el cdigo real, y se den cuenta de cmo funciona cada uno. Eso s, si no entienden por favor pregunten as sacamos todas las dudas para seguir con cosas ms interesantes y que ya entren al siguiente nivel!!! Conclusin
42
Manual de Dreamweaver
Bueno, aqu terminamos con la parte de tags bsicos, espero que les haya gustado y que lleven el taller al da. Ya dentro de poco vamos a aprender elementos que nos ayudarn a ir maquetando nuestra primera pgina de verdad, visual y con imgenes, para poder ir viendo el fruto de nuestras horas de estudio. Nos vemos la prxima! Hasta luego!
Hola queridos lectores! Cmo les va? Me extraaban? Jeje. Bueno, hoy vamos a dedicar la clase a los caracteres especiales en las pginas web. Esto es de suma importancia por dos cosas: el cdigo HTML vlido y (la ms importante) la visualizacin correcta de nuestra pgina por parte de los usuarios. Se les llama caracteres especiales a un conjunto de caracteres (valga la redundancia) que no pertenecen a un comn de codificaciones de alfabetizacin. Por ejemplo, en Estados Unidos no existe la letra , en algunos pases el acento (tilde) es para un lado y en otros para el otro, etc. El conjunto de caracteres abarca, adems de letras como la y letras con acento, smbolos de diferentes tipos como la apertura de smbolo de exclamacin y de pregunta; smbolos no frecuentes como el de marca registrada (la R chiquita dentro de un crculo) y hasta los mismos signos < y >, que al ser caracteres HTML no pueden ser escritos dentro de una pgina tal cual se ven, porque si no el navegador interpretara lo que le sigue al signo como el nombre de un tag (etiqueta).
Los caracteres especiales tienen un reemplazo para escribirlos en el HTML que empieza con el smbolo & y termina con un ;. A modo de ejemplo, una se escribe en HTML como (sin las comillas), una vocal con acento se escribe &(vocal)acute;. Ac les dejo una lista de los principales caracteres: Letras:
43
Manual de Dreamweaver
Otros caracteres:
Por supuesto que hay muchos caracteres especiales ms, estos son slo una pequea lista de los ms usados. Si en algn momento necesitan alguno ms raro, que no este ac, a googlear se ha dicho. y aportando info de Dreamweaver Como vern puede resultar bastante molesto el tener que escribir un prrafo o el texto que sea, cambiando todos los caracteres por los escritos arriba. Dreamweaver, nos ayuda con esto de 2 maneras: <!--[endif]--> 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.
44
Manual de Dreamweaver
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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).
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
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
Manual de Dreamweaver
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.
<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
Manual de Dreamweaver
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
Manual de Dreamweaver
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
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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.
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
Manual de Dreamweaver
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.
54
Manual de Dreamweaver
(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
Manual de Dreamweaver
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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
Manual de Dreamweaver
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.
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
Manual de Dreamweaver
Y este sera el resultado final del div (nota 1) de nuestro maquetado de la clase anterior (cuadro amarillo):
60
Manual de Dreamweaver
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 .
61
Manual de Dreamweaver
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
Manual de Dreamweaver
1. 1. <!--[endif]-->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. <!--[endif]-->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. <!--[endif]-->float: left De nuevo, parte del maquetado que hicimos la clase pasada, para ordenar los divisores y que formen nuestra paginita ^_^. Propiedades 1. <!--[endif]-->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. <!--[endif]-->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
Manual de Dreamweaver
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
Manual de Dreamweaver
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.
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>
65
Manual de Dreamweaver
<p>El CSS no es muy dificil de aprender, pero requiere
</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>
<p>El CSS no es muy dificil de aprender, pero requiere paciencia a la hora de usarlo.</p>
<div class=pieNota>
</div>
66
Manual de Dreamweaver
</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:
#nota-uno h2, p {
color: red;
font-size: 16px;
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
Manual de Dreamweaver
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.
68
Manual de Dreamweaver
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>
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
Manual de Dreamweaver
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.
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
Manual de Dreamweaver
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>:
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:
71
Manual de Dreamweaver
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.
72
Manual de Dreamweaver
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.
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
Manual de Dreamweaver
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:
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>
</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
Manual de Dreamweaver
Por ejemplo:
<label>Nombre de usuario:<input type=text name=usuario
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.
75
Manual de Dreamweaver
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>
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.
76
Manual de Dreamweaver
<div float:left><p style="background-color:#FAFF33; style=padding:5px; width:100px; height:70px; MS, Verdana,
font-family:Trebuchet
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)
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)
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
Manual de Dreamweaver
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>
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
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
Manual de Dreamweaver
o o o o
o o o
Elementos del formulario 1 Propiedades Conclusin Clase 23: Dentro del formulario (2)
o o o
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)
o o o
79
Manual de Dreamweaver
o o
Funcin mail Script completo
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!!
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