Taller de Dreamweaver

Manual de Dreamweaver
Taller de Dreamweaver
Clase 01: Introducción
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 páginas web en su versión CS3,
sin dejar de lado el lenguaje de tags utilizado para la creación de las
mismas. En este caso veremos el XHTML en su versión 1.0 (eXtensible
Hypertext Markup Language) que es el estándar actual.
A quién 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 composición del lenguaje, sino también pautas a seguir para una
correcta escritura, disposiciones de la W3C, y tips de ayuda a la hora de maquetar una página.
También en este curso se hará una introducción al uso de estilos, para luego intersecar con el
posterior curso de CSS.
Utilización 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.
También haremos algunas “clases taller” de ser necesario.
En cada clase se verán temas específicos, diferentes, en los que se darán por sentados los
conocimientos de clases anteriores.
Mi recomendación personal es que todo tipo de lector, tanto avanzado como principiante, lea
el curso completo, ya que algunos podrán aprender y otros repasar los temas tratados, y a su
vez seguir el hilo sin quedar mal parados en ninguna de las clases. ¡Además 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 cuestión de estándar, vamos a aprender Dw pero que quede claro que no es el único
programa que se puede utilizar para crear paginas web, y además que, sabiendo HTML solo
necesitaríamos 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 páginas web.
1
Manual de Dreamweaver
Por otro lado, como la mayoría 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 página.
Personalmente no recomiendo usar Dw sin antes saber HTML, creo que lo importante es saber
HTML y usar Dw para agilizar la creación de la página, y no usar el Dw para hacer páginas más
rápido de lo que sería aprender el lenguaje.
No confundamos, Dw es una herramienta y no más que eso.
En el curso por cada cosa que hagamos en modo visual en Dw iremos explicando su paso en lo
que sería código HTML así poder aprender ambas cosas a la vez.
Conclusión
Bueno, entre esta introducción y el programa que podrán visitar en esta misma sección, ya
tenemos un vistazo general del curso que, como deducirán 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 características 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 más en profundidad qué es
el lenguaje HTML y cómo se articula con Dreamweaver. Además
conoceremos qué aspectos trabaja este programa a la hora de crear un
sitio web. Otro punto a tratar son los estándares web y cómo son
interpretados por los navegadores. ¡Manos a la obra!
¿Qué es Dreamweaver?
Bueno, calculo que a esta altura la mayoría de los que estarán siguiendo este curso sabrán qué
es Dreamweaver pero, como no queremos dejar a nadie afuera, vamos a presentar el
programa.
Dw es un editor de páginas web que tiene, entre otras, la característica de poder crear las
páginas web en modo visual.
Las páginas 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
página en nuestro navegador para obtener una previsualización.
Dw permite mediante su modo visual, no solamente tener lo que estamos viendo actualizado
constantemente, sino que también nos permite, mediante sus herramientas, crear el código
2
Manual de Dreamweaver
HTML de manera visual. A modo de ejemplo, ya que esto lo abordaremos más tarde, podemos
dibujar un encuadre, o crear un texto, aplicar colores, etc. sin escribir nada de código,
utilizándolo como un programa gráfico o como si se tratara de un procesador de texto.
Por este modo de crear páginas se dice que Dw es un editor WYSIWYG, porque lo que vamos
viendo mientras creamos la página, es lo que saldrá en el navegador. Dw se encargará de pasar
todo lo que hagamos a código HTML para que sea interpretado.
Vale aclarar que Dw no es el único programa que sirve para la creación de páginas web.
¿Qué es HTML?
El HTML es un “lenguaje de marcado” que nos permite preparar documentos web insertando
en él, texto e imágenes en una serie de marcas (tags) que controlan los diferentes aspectos de
la presentación 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 versión utilizada del lenguaje (nosotros usaremos XHTML 1.0).
Por ejemplo para el cuerpo de una página 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 acción.
Cuando nosotros ponemos una etiqueta como por ejemplo la que tomamos anteriormente,
<body>, estamos marcando el comienzo del cuerpo de una página web, pero también
debemos indicar el final, y esto es lo que hace una etiqueta de cierre.
En este caso la etiqueta sería </body>, como ven lleva una barra adelante.
Luego cuando abordemos el lenguaje veremos más cuestiones de sintaxis, por ahora dejemos
esto acá.
¿Porqué el curso es de Dw/HTML?
Dijimos que el Dw transformaba todo lo que hacíamos 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.
Además 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 código para
poder acomodarlas a nuestro gusto.
Mas allá de esto, otros motivos no menos importantes son, por ejemplo, saber lo que estamos
haciendo y, además, a futuro cuando tengamos que agregar cosas externas, nuestro HTML se
volverá mas abstracto (con menos información sobre su presentación) y necesitaremos tener
idea de por qué las cosas están armadas de tal o cual manera.
3
Manual de Dreamweaver
Pensemos que este curso va a arrancar por lo bajo, a nivel principiante, sin ningún
requerimiento para poder entenderlo ni aprenderlo, pero también 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 intención del curso.
HTML y W3C
El lenguaje HTML se rige bajo ciertos estándares que permiten a los creadores de webs saber
la manera correcta de maquetar sus páginas asegurándose (o casi) , que serán vistasde forma
correcta en prácticamente cualquier navegador actual. También permite a los creadores de
navegadores web, conocer estos estándares y así prepararlos para estar siempre actualizados
y sacar provecho de las ventajas de las nuevas tecnologías que van surgiendo. Establece una
relación simbiótica entre los diseñadores y las empresas de software para realizar siempre
productos estandarizados y actuales.
Estos estándares los determina la W3C que es una organización que esta dirigida por Tim
Berners-Lee, el creador de varias tecnologías web como URL, HTTP y el mismo HTML.
Conclusión
Hemos llegado al final de nuestra segunda clase, en la que aprendimos las nociones básicas de
los objetos de estudio del curso.
Ya podríamos 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 número 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 aún no poseen los conocimientos
necesarios para crear una página web “completa” es bueno ir metiéndose 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 serán familiares en su mayoría ya que se
encuentran en varios programas de escritorio (Word, Excel, etc).
Tenemos
aquí
la
opción,
“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(Edición):
En este menú, contamos con las ya conocidas, “Copy”(copiar), “Paste”(pegar), “Select
All”(seleccionar
todo),
etc.
Además de las opciones comunes ya tenemos otras que explicaremos con un poco más
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 cuadrícula
(grid), o acomodar guías para poder alinear los elementos que tenemos (en modo
visual).
Tambien desde aquí podemos abrir otros paneles tanto del modo visual como del
modo código, que nos servirán para ajustar preferencias de visualización 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 sabrán donde están.
No se preocupen si no entienden alguna herramienta, o el programa no les permite
utilizarla; cuando estemos más 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 página, como
tablas, imágenes, links, etc.
No vamos a hablar mucho sobre este menú ahora porque Dw tiene una barra de
acceso rápido para insertar objetos, y explicaremos las opciones de la misma más
adelante, por lo tanto sería explicar dos veces lo mismo.
Modify (modificar):
Es el menú indicado para editar cualquier cosa que tengamos dentro de nuestra
página. Desde aquí podremos cambiarle el tamaño 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, tamaño, color y algunas otras cosas que las
veremos cuando comencemos nuestra primera página (¡¡Vamos, que no falta tanto!!).
5
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 código 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
página.
Sin embargo creo que hacer bien una página, también consiste en ir armándola
prolijamente, y no darle un repaso al final para acomodarlo más 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. También tiene algunas opciones para “hacernos la vida fácil” a la hora de
trabajar directamente sobre un servidor.
Más 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 menúes, 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
sólo de este programa sino de ninguno.
Muchas veces porque se pasan de “básicas” o se vuelven “para expertos”. Los casos
restantes, se tornan inútiles (: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.
Conclusión
Llegamos al final de esta clase, como siempre los espero la semana que viene para seguir
aprendiendo sobre la creación de páginas web.
Traten de ir familiarizándose con el programa, utilícenlo aunque no sepan hacer una pagina en
sí. Es muy importante conocer el entorno de trabajo para no volvernos locos el día que se nos
ocurra
hacer
algo
y
no
sepamos
donde
están
las
cosas.
Úsenlo, investíguenlo, vamos, vamos ¡¡Anímense!!
Clase 04: Panel Insert, pestaña Common
6
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, además de tener muchas opciones
que todavía no conocemos, tiene accesos directos a varias de las cosas que ya vimos la clase
pasada en la barra de menú, pero de manera más fácil y dinámica.
Panel Insert (insertar)
El panel de insertar nos provee de la gran mayoría de las herramientas de diseño 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 presentación
del programa.
Pestaña Common:
Aquí tenemos una vista del panel con sus pestañas y sus herramientas.
Hyperlink:
Mediante esta herramienta, podemos crear un enlace, por ejemplo, a un sitio externo
(otra página), a una parte de nuestra página.
Email-link:
Con esta herramienta podemos crear un link a una dirección de email.
Cuando un usuario haga clic, directamente le abrirá su programa de mailing
predeterminado (Outlook, Thunderbird, etc.), con la dirección 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, tamaños, y espaciados.
Insert
Div
Tag:
Nos permite crear el elemento Div, que es uno de los mas usados dentro del diseño
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 imágenes, 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 inútil por cierto).
Server Side Include:
Permite incluir un archivo de código por fuera de la pagina actual (ya lo veremos
también mas adelante, cuando lo vayamos usando).
Comment:
Sirve para ingresar un comentario dentro de nuestra página, que nos sirva de
referencia a nosotros, pero que no afecte a la visualización (es una guía 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 página. La
cabecera es la parte de la página que no se verá y en la que incluimos especificaciones
como, por ejemplo, el título de la página.
Script:
Nos permite ingresar código de programación dentro de una página, como por
ejemplo Javascript.
Templates:
Esta herramienta sirve para crear un template a partir de una página que estemos
haciendo,
y
marcarle
regiones
editables.
En sí, es para crear una “base” de página, 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 página. No le veo otra utilidad que la de poder insertar una etiqueta, la cual
nos hayamos olvidado el nombre. Innecesario, pero está :p .
Conclusión
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 exploración de los paneles de herramientas, y luego
empezaremos
con
nuestro
sitio.
Clase 05: Panel Insert, pestala Layout
Y aquí estamos de nuevo! Volvemos con todo en nuestra clase 5. La clase pasada vimos la
primer parte del panel insertar, la pestaña “common”. Hoy nos toca seguir con las demás
pestañas, y ver hasta dónde llegamos.
Me gustaría que los que siguen o leen el curso envíen 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 enseñar.
Panel Insert (insertar), segunda parte.
Pestaña
Layout:
Mode:
Nos permite poner el modo de visualización del panel de layout.
Insert Div Tag:
Nos permite crear el elemento Div, que es uno de los más usados dentro del diseño
web actual. Estos son cuadros en los que pondremos contenido, para luego ubicarlos
donde a nosotros nos parezca. Esta opción ya la vimos en la pestaña “common”, en
la que también 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 “rectángulo” de un
programa de edición 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 más opciones. La verdad no es la manera en la que yo la
haría pero puede sacarnos de un apuro. Más adelante veremos como hacer este tipo
de menúes, pero más 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 pestañas.
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 acordeón, que cuando clickeamos cada una de las “pestañas”, el menú se
desplega hacia abajo abriendo un lugar en donde podemos agregar contenido. Es
difícil de explicar su utilización, por ahí lo más práctico sería que lo prueben una vez
que aprendamos a crear una página.
Spry collapsible panel:
Esta es la que más me gusto de todas las “spry”. Nos crea una pestaña 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 botón.
Table:
Nos permite crear una tabla con divisiones de columnas, filas, tamaños, y
espaciados. Esta herramienta también se encuentra en la pestaña “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 página en la podremos
cargar otras páginas diferentes.
Iframe:
A primera vista son parecidos a los frames ya que crean una división en nuestra
página donde podemos cargar una segunda, aunque tienen diferencias muy
importantes. Ya veremos a ambos más adelante y sus ventajas y desventajas.
Conclusión
Bueno, por ahora dejemos la clase aquí. Como verán las opciones de Dw son muchas, y
todavía nos quedan muchas más. Esperemos terminar pronto de verlas a todas así ya
podemos crear nuestra primer página, empezar a ponerlas en acción, y comentar un poco
más a fondo cada una.
Clase 06: Panel Insert, pestañas Forms
Hola! ¿Cómo andan? ¿Preparados para otra clase de Dreamweaver? En esta clase, la numero 6,
vamos a ver máaaas herramientas del panel Insert.
Y sí… son muchas herramientas, pero a no aflojarle, que esta es la parte más pesada pero 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 sonarán
a chino mandarín.
Hoy nos toca revisar las herramientas de la pestaña “Forms”, y si podemos llegar a ver la pestaña
“Data”, mejor, así sacamos esto mas rapido, y ustedes que siguen el curso tienen más para
estudiar durante la semana (me imagino que estarán probando las cosas que vemos en cada taller
no? jeje).
Panel Insert (insertar), tercera parte.
Pestaña Forms:
Form: ¿A que no saben para que sirve esta herramienta? ¡Correcto! para insertar un
formulario.
Podemos
usarla
tanto
en
modo
de
diseño
como
en
modo
código.
Los formularios nos sirven para que los usuarios puedan cargar datos, y así nosotros recibirlos
desde
nuestra
página.
Cuando un formulario es enviado, envía 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 envía, enviará con él todos los
textfields
también.
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 página.
Hidden Field: Un Hidden Field es un TextField, sólo 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 información que
necesitemos, un ejemplo fácil, 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, sólo que es más
grande,
y
tiene
no
solo
una
fila
sino
que
puede
tener
varias.
Sirve para contener textos grandes y también nos ofrece barras de scroll para poder setearle un
tamaño, y si el texto excede el tamaño 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 términos y condiciones…” estas sirven para que el usuario
seleccione una o mas, entre varias opciones.
Radiobutton: es igual que un checkbox, sólo que permite elegir uno y solo uno entre
varios radiobuttons. Además, 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 además nos pone cada radiobutton entre las etiquetas “label”
que nos permiten dar una identificación a cada uno.
List-menu: Nos permite poner un menú desplegable de selección 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
página,
u
otro
archivo.
Por ejemplo, podemos tener una lista de opciones de varias páginas, 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 botón de “enviar” pero con la diferencia que podemos ponerle la imagen que
nosotros queramos.
File-field: Inserta una casilla con el botón de “examinar…” para que el usuario pueda
buscar y enviar un archivo a nuestro sitio.
Button: nos permite insertar un botón, 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 descripción a un campo, a modo de ejemplo:
¿Acepta los términos? 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 opción nos permite agregar un campo de texto
(textfield) que además 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 opción nos permite crear un textarea con validación. Al
igual que el anterior si el textarea no cumple con los requisitos de validación, al intentar enviar el
formulario nos dará error.
Spry validation checkbox: y seguimos con validaciones. Es igual a un checkbox común,
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.
Conclusión
Bueno, espero que no estén muy cansados de ver tantas herramientas (yo si :p ) y no se preocupen
(o preocúpense) ¡¡porque vienen muchas más!!
La clase que viene espero que ya estemos terminando con el panel Insert y ya dar comienzo a la
creación de nuestra primera página.
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, véanlo en vivo y en directo desde el Dw, así
pueden entender todo lo que hace el programa, y si se animan, véanlo en modo código así se van
familiarizando con el HTML.
Clase 07: Pestaña Text y Favorites
Buenas y santas! Bienvenidos a otra clase de Dreamweaver/HTML. Esta vez nos toca
(para variar) seguir con la barra de Insertar. Hoy aprenderemos de qué se tratan las
pestañas Text y Favorites.
La pestaña que nos tocaría ver hoy sería la pestaña “Data” pero la vamos a dejar para más
adelante, porque requiere para varios de sus elementos, conocimientos de bases de datos, e
inclusive, tener creada una base de datos.
Como todavía estamos en la parte “principiante” de nuestro curso, la sección “Data” no la
podemos explicar. Sería perder el tiempo ya que se entenderá mejor más 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
más importantes para esta etapa.
Vamos a pasar directamente a la pestaña Text y veremos también la pestaña Favorites,
para dar por terminado (por el momento) el panel Insert.
Panel Insert (insertar), cuarta parte.
Pestaña Text:
Bold: Nos inserta un tag HTML „<strong>texto</strong>‟ que nos muestra en
nuestra página el contenido en negrita (en el ejemplo sería texto).
<!--[if !vml]-->
<!--[endif]--> Italic: Inserta los tags <em> </em> en los cuales su
contenido se verá en estilo itálica.
<!--[endif]--> Strong: Es exactamente lo mismo que “Bold”.
Esta es una de las cosas inentendibles que tiene Dw.
La realidad es que el Bold debería 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.
Es exactamente lo mismo que el “Italic”.
14
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 itálicas.
Entonces porque existen diferentes?
La respuesta es que como son tags comúnmente usados dentro de los textos de una
página web, es bueno poder definirles características especiales para poder usarlos en
diferentes ocasiones.
A ver, un ejemplo para que quede más claro:
Yo quiero que las citas de mi página aparezcan en itálica y los nombres propios
también. Además, quiero que los textos citados aparezcan más chicos.
Entonces, yo puedo predefinir a el tag <i></i> con un tamaño de letra menor (ya
veremos cómo) y luego sólo necesitaría poner las citas entre <i></i> (itálica con tamaño
menor) y los nombres entre <em></em> (solo itálica), y tendría a ambos con itálica, y
las citas tendrían a su vez fuente mas chica.
Además, también existen por una “cuestión semántica”:
Por ejemplo, si trabajara en una revista y tengo que reforzar un encabezado que diría
“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 reforzaría con un
<strong></strong>. Solo por el valor semántico de la palabra.
Los tags a nivel semántico prácticamente no se usan salvo por gente muy purista, pero
estaría bueno acostumbrarse a trabajar así, ya que una vez que se nos haga costumbre,
estaríamos haciendo un trabajo prolijo, sin necesidad de un esfuerzo mayor.
Bueno, terminada esta no-breve explicación, sigamos con las opciones de la pestaña.
<!--[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 vacíos para
que escribamos dentro).
Estos tags conforman básicamente, un párrafo.
<!--[if !vml]-->
<!--[endif]--> Block-quote: Block-quote nos crea un bloque con
margen izquierdo en el cual podemos meter texto. Este sería el resultado.
15
Manual de Dreamweaver
“Este texto sería un párrafo normal.”
“Aquí tendríamos el blockquote en acción.
Siempre que escribamos dentro del blockquote mantendríamos 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. Además, los espacios que pongamos entre palabras u
oraciones serán respetados.
Acá vamos a hacer otro “parate”.
Cuando nosotros escribimos en HTML un párrafo, por ejemplo:
<p>El día esta nublado.
Pero a mi me gusta igual.</p>
En nuestro navegador se mostrará:
“El día esta nublado. Pero a mi me gusta igual.”
Nótese que la bajada de línea (el “enter”) no fue tomado por el navegador.
A tener en cuenta, el navegador no toma por ejemplo, los “enters” como “bajadas de
línea” ni los espacios de la barra espaciadora, como espacios reales (sólo toma un
espacio como real).
Para poder “hacer un enter” (bajar una línea) 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 oración tal cual la
escribimos arriba, deberíamos poner en el HTML:
<p>El día esta nublado.<br /> Pero a mi me gusta igual.</p>
El resultado de esta oración si sería el siguiente.
El día esta nublado.
Pero a mi me gusta igual.
Volvamos con las pestañas.
<!--[if !vml]-->
<!--[endif]--> <!--[if !vml]-->
<!--[endif]--> <!--[if !vml]-->
<!--[endif]--> h1, h2, h3, …: Sirven para marcar cabeceras, el h1 se utiliza
16
Manual de Dreamweaver
generalmente para los títulos de mayor relevancia en una página, y los sucesores
(h2,h3,…) para los subtítulos encadenados o textos de menor importancia con respecto a
los anteriores.
Además, los “h” ponen el texto en mayor tamaño (de acuerdo con su numeración, el 1
es el más 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 numeración.
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 línea de ese tipo.
En los ejemplos anteriores, cada “ítem” es un li, que difiere por su ordenamiento
(puntos o números 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 título de la lista.
La dt, definition term, crea el término a definir.
La dd, definition descripción, crea la descripción del término 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 maquetación de páginas web, creado por adobe. (esta es la dd)
HTML: (esta es otra dt)
Lenguaje de maquetación web. (esta es otra dd)
En general las Definiton list no son muy usadas por una cuestión 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 opción nos permite poner el tag
<abbr></abbr> con un título dentro del primero.
Quedaría <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 acrónimo.
Por ejemplo: <acronym title=”HyperText Markup Language“>HTML</acronym>
Other Characters: Este botón 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 verán 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
Pestaña Favorites:
<!--[if
!vml]-->
<!--
[endif]-->
En esta pestaña, 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 pestaña con nuestras opciones más usadas y no
depender del orden en que las puso Dw.
Prueben de hacerse una pestaña ustedes mismos con lo que prefieran, y si no les sale,
recuerden que pueden dejar comentarios en la página, que los responderé lo mas rápido
que pueda.
Conclusión
Bueno, estas pestañas, si bien son de fácil uso, nos llevaron unas cuantas líneas.
Estaría bueno que vayan usandolas (por lo menos la pestaña text), así además de repasar
las cosas que vimos hoy, van incorporando mas rápido los tags HTML.
Nos volvemos a ver la semana que viene ¡¡ya con tema nuevo para alegría de todos!! (o
por lo menos mía :p)
¡Saludos!
Clase 08: Estableciendo un área de trabajo
¡Buen día a todos! ¿Cómo van mis fieles seguidores del taller? ¡Me imagino
que habrán estado practicando! Ya que por fin terminamos con nuestra
querida barrita Insert, podemos empezar a movernos un poco más sobre
Dreamweaver y ver lo que vayamos aprendiendo en pantalla.
¡Eso sí, me ponen en práctica todo lo que veamos en las siguientes semanas,
miren que es muy fácil seguir este taller, pero es muy fácil también olvidarse
lo que aprendemos! (bah, yo tengo mala memoria :P).
Preparándonos para nuestro primer sitio
Y llegó la hora de armar nuestro primer sitio para investigar las herramientas y para que veamos
juntos un poco más de cerca lo que vamos enseñando clase a clase.
19
Manual de Dreamweaver
Para empezar, podríamos 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 después 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 dónde estamos trabajando.
Para esto, creamos en algún 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 opción 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 opción de “Cache” debe estar seleccionada.
Luego de esto, damos clic en “Ok” para finalizar la creación del sitio.
21
Manual de Dreamweaver
Se nos cerrara el menú grande de definición 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
sección “Files” ha quedado establecido, listo para crearle archivos dentro.
Cliqueando con el botón 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”.
Conclusión
Bueno, ya hemos definido el sitio y creado nuestra primer página.
Estamos listos ya para empezar a manejarla, a conocer sus modos de trabajo y muchas cosas más.
Los espero la próxima semana ya con página en mano, para conocer el “modo diseño” de trabajo,
y comparar algunas cosas con el “modo código” también.
Ya podríamos decir que estamos en la segunda fase de este curso (segunda de muchas!).
Clase 09: Trabajo en modo diseño
¡Hola, gente querida! ¿Cómo andan? Una vez más, sean bienvenidos a otra
clase del Taller de Adobe Dreamweaver. El martes pasado aprendimos
22
Manual de Dreamweaver
cómo crear la página de inicio de nuestro sitio web, la famosa “index.html”.
Bueno, hoy nos toca, ya con la página creada en la clase anterior, ver el modo de vista de diseño.
Vamos a tratar de conocer un par de características iniciales, y otras cositas predeterminadas de
Dreamweaver.
Antes de empezar vamos a dejar una imagen de nuestra página en blanco, en modo de vista
diseño, para tener de referencia a lo largo de esta clase.
Cuando creamos una página en blanco en Dw, en realidad lo que parece blanco no es tal, porque la
vista de diseño lo que realmente nos muestra es el cuerpo de la página.
Sin embargo, hay otras partes que no están específicamente dentro del cuerpo, como por ejemplo
el título.
En la siguiente foto vamos a ver lo que realmente está en nuestra página y que la vista de diseño
de Dw NO nos muestra.
Como se puede ver, hay mas cosas.
23
Manual de Dreamweaver
En principio podemos ver un tag que comienza con “<!DOCTYPE”, en este tag se define el tipo de
página que vamos a hacer, según las normas de la W3C (¡a leer, gente!) que es el organismo que
regula los estándares 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 título de nuestra página, el que sale en la ventana de nuestro navegador), además 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 página y el que se mostrará en el modo vista de diseño de Dw.
El modo de vista de diseño lo podríamos dividir en 3 partes:
1.
El manejo de la ventana, donde podemos elegir entre los diferentes modos de vista, poner
un título al documento y elegir otras opciones (hacer una vista previa en el navegador,
comprobar
compatibilidad,
Échenle
2.
ver
otras
herramientas,
un
etc).
vistazo:
El cuerpo de la página, 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 página 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 fáciles, está bueno que las
vayan reconociendo y cualquier cosa me preguntan vía comentario.
Conclusión
Por ahora damos por concluida la clase. La próxima iremos trabajando sobre el body de nuestra
página y también investigaremos qué es lo que hace Dw por detrás del modo visual.
Les sigo recomendando que siempre prueben las herramientas que vemos clase a clase y
que vayan un poco más allá también.
Cualquier duda que les vaya surgiendo me la pueden comentar, así las respondemos
para todo el curso y las clases se hacen más dinámicas.
Clase 10: Trabajo en modo código
24
Manual de Dreamweaver
Hola, mis fieles seguidores (¡y a los nuevos también!) ¿Cómo les va? Espero
que bien, por supuesto. Hoy nos toca revisar la vista de código. No se
asusten al escuchar (o leer, en este caso) esta palabra.
Primero porque hoy sólo veremos el área de trabajo y las opciones de
manejo del código y no el código en sí, y segundo porque una vez que
empecemos a usarlo, verán que no es tan complicado como pensaban.
Calculo que todos tendrán 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 código como referencia durante la clase:
En la vista de código, la parte superior de la ventana es igual a la de la vista de diseño, salvo que
no tenemos las “visual aids” (el ojito) que son ayudas visuales especificas del modo de vista de
diseño.
En el área de trabajo lo primero que podemos ver es que desaparecen las reglas y aparece un
numerado de líneas en su lugar, de gran ayuda a la hora de posicionarse en el código en
documentos
muy
extensos.
Otras cosas que desaparecen, obviamente, son la “manito”, la herramienta de selección (la flecha
negra) y el zoom.
Lo nuevo es el panel de la izquierda con opciones específicas para el manejo de código.
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 código de nuestra página así no nos
molesta a medida que avanzamos en nuestro proyecto.
Cuando estamos parados en un tag o tenemos una selección y presionamos el botón
correspondiente, Dw lo que hará es minimizar esa sección de código en una sola línea y nos avisara
que
tiene
mas
en
su
interior
colocando
“…”,
tres
puntos
al
final.
Además nos agregara el signo “+” en el lado izquierdo para poder expandir esa sección.
El botón “Expand all”, expandirá TODAS las partes que tengamos “colapsadas”.
Código normal
Código minimizado
Select parent tag, Balance braces:
El primero marcará una selección 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 selección.
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 código normal)
Balance braces sirve para, cuando programamos en un lenguaje que usa llaves “{}” (javascript,
php…), si estamos parados entre 2, presionamos el botón 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 numeración de líneas que está a la izquierda.
El segundo, nos marca el código erróneo resaltándolo en amarillo.
26
Manual de Dreamweaver
Apply comment, remove comment:
Sirven para agregar un comentario nuevo (o comentar una sección 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 botón.
Por ejemplo escribimos un texto, lo seleccionamos, apretamos el botón, elegimos el tag de párrafo
(<p></p>) y encerrará todo el texto dentro de esos dos tags (apertura y cierre) transformándolo en
un párrafo.
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 códigos 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 botón derecho en nuestra página, 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 botón, 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 código 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 código ordenado.
Ident realiza una tabulación hacia la derecha de la línea o la selección que tengamos.
Outdent, lo contrario, remueve una tabulación.
Y por ultimo, Format source code, preformatea el código 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 código identado.
27
Manual de Dreamweaver
Como pueden ver, cada elemento que se encuentra dentro de otro, esta tabulado una vez más que
su “padre” (tag que lo contiene).
En trabajos con código muy largo, el tenerlo bien identado es una ayuda MUY GRANDE.
Es bueno que se acostumbren a identar el código ustedes mismos, sin la ayuda de la herramienta
de Dw, pero bueno, si se “olvidan”, esta herramienta es de GRAN ayuda.
Conclusión
Bueno, acá terminamos de ver el área de trabajo del modo código. 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 código 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 más.
Clase 11: ¿Modo código o modo visual?
¡¡¡Y nos volvemos a encontrar en la clase número 11 del Taller de Adobe Dreamweaver!!! Me
alegro de que todavía estén aquí, y los que no están de todos modos no van a leer esto así que no
importa.
Esta clase es especial porque, además del tema de hoy, responderemos la duda de nuestro
seguidor Nelson, que nos preguntó cuál sería el tamaño adecuado para hacer una página. Como
creo que la respuesta merece su espacio decidí incluirla al final de esta clase.
Comparación
Empezar el contenido de esta clase con el título “comparación”, no es lo que mas me gustó, pero
bueno, es lo que es, aunque no lo es tanto ¿¿CÓMOOOO?? Ahora les cuento:
Si bien Dw permite llegar a hacer una página completa en modo visual, no es mucho lo que vamos
a lograr de esta manera.
Cualquiera que pretenda hacer una página (decente), usando Dw o cualquier otro programa, va a
necesitar saber al menos un mínimo de HTML.
28
Manual de Dreamweaver
Por ende, no podemos considerar el modo código o el modo visual como diferentes maneras de
hacer una página, ya que lo ideal es usar, de ambos, las cosas que nos resulten más útiles.
A eso me refería con que no me gustaba la idea de comparación entre una manera y otra de hacer
las cosas, ya que son complementarias.
A la larga, la realidad nos dice que el modo visual prácticamente se resume a la escritura de
texto, ya que Dw nos cambia los caracteres no válidos para HTML por sus correspondientes
reemplazos (por ejemplo los acentos, entre otros) ya que el resto de las opciones nos resulta más
rápido manejarlas desde el modo código.
Como bien dijimos más arriba se puede llegar a una página completa en modo visual, pero poco a
poco cuando vayan ganando experiencia, verán que este modo les va quedando chico, y se pasarán
al modo código exclusivamente.
De aquí que el taller además de Dw planea enseñar HTML.
Como todo, podremos hacer más rendidor el programa, cuando tengamos un uso considerable de
él.
Piensen que usándolo seguido y acostumbrándose a un modo de trabajo, pueden customizar sus
herramientas, o saber dónde están las que siempre usan y agilizar la creación de sitios web.
Conclusión
Creo que la respuesta al título de esta clase sería “Modo código”, pero no nos vamos a encasillar
tanto.
Al principio (o no), puede que haya mucha gente que considere más practico el modo de vista de
diseño, 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 código, su estructuración, y el poder abstraer
lo que se ve en pantalla y poder visualizarlo cuando vemos código, va a determinar el punto en
que pasemos de principiantes a avanzados dentro de la maquetación de páginas web.
¡¡Agregado especial!!
Creo que este añadido es muy importante y, aunque no tenga que ver con Dw o con HTML, es
importante saberlo, más aún ahora, aprovechando que recién estamos creando nuestra página,
para empezar con todas las cosas bien hechas :p.
Gracias a Nelson (un seguidor del curso), quien nos pregunto cual era el tamaño ideal para una
página normal, vamos a incluir en esta clase, la respuesta a su pregunta como agregado especial o
“tip”:
Tamaño ideal de una página
29
Manual de Dreamweaver
Una página no tiene un tamaño preestablecido aunque se pueden encontrar muchas páginas que
tienen el mismo ancho o largo que otras, debido a una no-arbitraria elección de los diseñadores a
la hora de empezar a trabajar.
Lo principal a pensar a la hora de hacer un diseño de una web es quién va a ser el usuario de esa
página 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 página en un tamaño acorde a “las masas” o al
perfil general de nuestros usuarios.
Hoy por hoy un gran porcentaje de gente, usa una resolución de pantalla de 1024 x 768px, y
convendría diseñar una página en la cual el contenido, o la información relevante sea visible
dentro de ese tamaño, para luego abarcar otras resoluciones, con “auxilios” gráficos, para
completar.
Es muy conocido el tipo de páginas de cuerpo centrado con extremos que completan el diseño.
Como podemos ver en la imagen, tenemos una parte central que se adecúa al formato de 1024px
de ancho de pantalla.
En esta página son 950px reales, se deja margen para la barra de scroll que puede surgir si la
página crece hacia abajo (como ven se toman en cuenta varias cosas).
También podemos ver, que los costados del centro de la página, no se dejan descuidados, sino que
también tienen un “motivo” grafico, que termina de rellenar la página en caso de que el usuario
tenga una resolución mas grande (1280 x 1024, 1600 x 1200, entre otros).
Prueben ver la página en diferentes resoluciones de monitor para tener una idea más clara (acá les
dejo el link http://www.videosjaja.com).
Otro punto a tener en cuenta es la gente que aún usa resolución de 800 x 600px que, aunque no
los consideramos como mayoría 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 página de la imagen anterior. Podrán ver que el panel de registro,
inicio, subir videos, categorías, etc., todas se encuentran en un rango de visión accesible para la
mayoría de los usuarios.
Retomando: el tamaño de nuestra página puede depender de varias cosas.
30
Manual de Dreamweaver
A medida que vayan aprendiendo “a los golpes”, van a ir mejorando sus diseños.
No olvidemos que no se puede ser programador, diseñador, maquetador, todo de la noche a la
mañana.
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 están pasando ustedes.
Como dije al principio del curso (creo) aprender Dreamweaver no los va a hacer diseñadores 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 poniéndole ganas y tratando de aprender todo lo que se pueda (principalmente siguiendo
este taller, jeje).
No duden en seguir preguntando y ojalá salgan más comentarios como este, que nos dan tema para
agregar en nuestras clases y hacerlas más útiles y a la medida de ustedes que siguen nuestro curso
y que serán los futuros webmasters.
Clase 12: Etiquetas más usadas (1)
¡Buenas! ¡Bienvenidos al Taller de Adobe Dreamweaver/HTML! ¿Cómo
andan? ¿La pasaron bien el fin de semana? ¡Espero que sí! Pero bueno, el
fin de semana pasó y ahora volvemos al estudio. ¡Espero que con ganas!
Hoy nos toca conocer las etiquetas (o tags) más comunes del HTML, las
que se usan todo el tiempo en la creación de páginas web. Vamos a ir por partes para que no
les quede ninguna duda. ¿Empezamos?
Las etiquetas más comunes en realidad son las que arman o distribuyen el espacio de la
página, pero como esas las vamos a ver dentro de un par de clases, por lo pronto vamos a
estudiar detenidamente las que se usan dentro del armado, por ejemplo, las de inserción de
imágenes, escritura y formato de texto, y algunas otras más, con todas sus propiedades.
Etiquetas
La parte “HTMLesca”
¿Quién en una página no pone algo, aunque sea mínimo de texto?
Y bueno, entonces vamos a empezar por lo básico, las etiquetas para texto.
Vamos a ir por orden jerárquico, es decir, de importancia dentro de un texto, como si de un
diario (periódico) se tratase.
31
Manual de Dreamweaver
h1: Esta etiqueta, se utiliza para títulos y comienza con la apertura <h1> y termina con el cierre
</h1>.
Es la de mayor jerarquía entre las etiquetas de texto, por lo tanto tiene mayor tamaño y
grosor.
Si bien estas propiedades pueden cambiarse, no en vano están así.
Existen otras etiquetas “H”, que son las h2, h3, …, que van disminuyendo su tamaño
proporcionalmente, junto con su grado de importancia. Estas se utilizan en subtítulos, copetes,
etc.
Si sabemos que los tamaños de las letras se pueden cambiar y los grosores también ¿entonces
qué diferencia hay?
Bueno, primero que nada que si nosotros le “seteamos” a nuestra etiqueta h1 un tamaño,
letra y grosor por defecto, con estilos, en todos los lugares donde la pongamos saldrá igual (ya
veremos cómo).
Esto nos ayuda a mantener una sincronía entre los tipos de cosas que pongamos en nuestro
sitio.
Otra cuestión es también que los buscadores (como Google) le dan preponderancia a las
palabras más importantes del sitio a la hora de agregar una página a su base de datos.
Entonces, cuando alguien busque por “X” palabra en Google, tendremos más posibilidades de
aparecer más arriba en el buscador, si esta palabra se encontraba en el título, que si se
encontraba en un párrafo.
(El tema de los buscadores es muy extenso y no sólo esto tiene que ver, tomen este
comentario solo como una referencia de que por algo existen las etiquetas que existen, y no
están porque sí).
Además recordemos que debemos mantener un orden semántico en nuestro texto, y sería
desprolijo poner un título en un párrafo con un texto grande, y poner un párrafo en un <h1>
con un texto chico.
¡Las cosas hay que hacerlas bien!
32
Manual de Dreamweaver
Siguiendo con otras etiquetas:
¿Quién no vio en su escuela primaria oraciones y párrafos?
…y acá la tenemos, la etiqueta de párrafo.
Esta etiqueta comienza con <p> y termina con </p>. Dentro de estas dos, podemos escribir
todo el texto que queramos y tendrá la característica de pertenecer a este mismo párrafo
(obviamente).
¿Y por que lo cuento? Más que nada para que sepan que todas las propiedades que le
agreguen al párrafo se les agregarán a todas y cada una de las palabras en su interior (por
ejemplo: color, negritas, itálicas, tamaño de letra, etc).
Otra etiqueta que casi la podemos ver en cualquier página y que se usa en cualquier editor de
texto común que encontremos por ahí, es la etiqueta de negrita.
Esta etiqueta tiene como comienzo un <b> y como cierre un </b> (ya irán 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 “más 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 más que nada de carácter
semántico.
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 sería 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 itálicas, que tiene
como apertura <i>, y como cierre </i> (¡¡Ya, díganme que entendieron lo de la barra!! Jaja)
33
Manual de Dreamweaver
Esta etiqueta al igual que en la mayoría de los editores de documentos, inclina el texto que
contiene.
Su correspondiente en orden semántico, es la etiqueta <em> </em> que significa en inglés
“emphasis” (énfasis) y se utiliza, bueno, para eso mismo.
¡Y acá nos encontramos con los caprichos semánticos del HTML, y vamos más 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.
(Aclaración: por defecto estas etiquetas vienen con un tamaño, color, inclinación, grosor, y
espaciado de letra específico. Pero recordemos que esto se puede cambiar mediante estilos,
que ya veremos que son, y de esta manera nuestras etiquetas solo diferentes
semánticamente, podrán ser diferentes también visualmente, y ahí sí tendremos además de el
correcto uso de las etiquetas, la diferenciación específica-visual de cada una).
Y nos vamos a otra más 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 lógico a pensar siguiendo lo que venimos diciendo en la clase, sería que esta etiqueta
tendría una composición como esta: <imagen> </imagen>, pero no es así.
Esta etiqueta arranca con <img y cierra en él mismo, con la barra.
Quedaría 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 tamaño real de la imagen.
Una etiqueta completa de imagen, con sus atributos necesarios y también con los opcionales
quedaría de esta manera:
<img src=”http://página.com/lugardelaimagen/imagen.jpg” alt=”descripción” width=”100px”
height=”100px” />
En caso de que tengamos la imagen en nuestro sitio, sería (y ya sin atributos opcionales)
<img src=”lugardelaimagen/imagen.jpg” alt=”descripción” />
Acá tenemos la etiqueta más clickeada del mundo!
¡Con ustedes…… tururururu, PA!
¡¡La etiqueta para crear enlaces!!
Esta etiqueta esta formada por su apertura <a> y su cierre </a>
Además 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 algún 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 título 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 página 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 podría ser:
<a href=”http://www.elwebmaster.com” alt=”página de elwebmaster” target=”_blank”>Click
aquí para ir a la página de elwebmaster.com</a>
Este enlace, se mostraría en la página de esta manera:
“Clic aquí para ir a la página de elwebamster.com”
Y si lo clickearamos nos abriría una ventana nueva del navegador (o pestaña en caso de que
usemos Firefox, en la que cargaría la página de elwebmaster.
También, por el texto alt, si pasáramos sobre el link, sin clickearlo, nos mostraría la leyenda
“página de elwebmaster”.
Otra manera y empezando a combinar, podría ser:
<a href=”http://www.elwebmaster.com” alt=”página de elwebmaster” target=”_blank”>
<img src=”logodeelwebmaster.jpg” alt=”elwebmaster.com” />
36
Manual de Dreamweaver
</a>
De esta manera, tendríamos 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 español “ancla”), es justamente el de punto de ancla.
Habrán visto en alguna página que clickean un enlace y no van a otra página, sino que los lleva
a una parte de esta misma.
Generalmente se ve en índices o, en finales de las páginas, la leyenda “Volver arriba”.
Este tipo de etiquetas es ni más ni menos que un <a> utilizado de otra manera.
En el enlace que queremos que al clickear nos lleve a otra parte de nuestra página 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 página 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 sólo de esto, sino de cualquier cosa
¡recuerden!
Y por último, vamos a ver la etiqueta de comentario, la etiqueta “de cierre” del día 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
página.
37
Manual de Dreamweaver
Sirve a los creadores de páginas 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 práctica comentar nuestro código, ya que cuando se hace muy extenso, puede ser
complicado de entender y nos evita tener que leernos todo para poder darnos cuenta.
Ojo, también es bueno borrar los comentarios en la página final que vamos a tener subida a
nuestro hosting, porque los comentarios pesan igual que cualquier otro caracter, por ende,
hacen más grande nuestro HTML (y tarda más 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 botón 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 código, es más fácil 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 botón “B” nos
pondrá ese texto entre, CURIOSAMENTE, la etiqueta <strong>.
El tag que debería poner en realidad sería el <b> </b> o bien el botón del Dw llamarse
STRONG.
Estas cosas son las que menos me gustan de Dw, que hace cosas por convención sin respetar
los criterios reales de cada etiqueta.
Pero bueno, también hay que saber que la W3C (ver primeras clases) esta por sacar del
estándar 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!!
Conclusión
Bueno, llegamos al final.
En esta clase vimos algunas de las etiquetas más usadas, dentro de lo que es el contenido de
las páginas web.
En clases siguientes veremos algunas más y luego otras, exclusivas para el armado, como las
tablas y los divisores.
Espero que les haya gustado la clase y que la hayan leído toda, porque salió bastante larguita
:p .
39
Manual de Dreamweaver
Nos vemos la semana que viene con más Taller de Dreamweaver/HTML.
Clase 13: Etiquetas más usadas (2)
¡Hola! ¿Qué tal? ¿Listos para otra clase de Dw/HTML? ¡Así me gusta, siempre
dispuestos! Hoy vamos a ver más tags HTML que seguramente les serán de
utilidad en algún momento de su vida como webmasters.
Es importante conocer cada tipo de etiqueta, si bien hoy día mucho se
maneja con CSS (tema aparte), no por eso son menos válidas y los que no
sepan manejar estilos estarán 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 estén en el interior de
su etiqueta <u> (esto esta subrayado) </u> .
Este tipo de tags (tags o etiquetas tómenlos como sinónimos en este taller), como
también el <center> (este texto esta centrado) </center>, están 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 sólo para la ubicación de los
elementos que componen una página. La, literalmente, “maquetación” de la página.
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 están 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 línea.
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 “gráficamente”, 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 línea divisoria entre ambos
elementos separados.
Ahora cuando terminemos de explicar estos tags HTML, vamos a verlos en
funcionamiento en imágenes 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í sólo,
para darle un formato diferente al texto de su interior mediante estilos.
Supongamos que tenemos un párrafo, al cual le dimos color azul, y queremos que sólo
una palabra tenga color rojo, subrayado, negrita, mayor tamaño y otra fuente (letra).
Si lo hiciésemos mediante HTML puro, necesitaríamos meter este texto que queremos
cambiar entre muchos tags (piénsenlo).
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 sólo para
maquetado?).
De a poquito nos vamos a ir dando cuenta de cuánto 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, están mezcladas entre sí dentro
del código HTML.
Esto lo hice a propósito para que tengan que analizar lo que ven abajo (en lo que sería la
salida de la página en el navegador), con el código real, y se den cuenta de cómo
funciona cada uno.
Eso sí, si no entienden por favor pregunten así sacamos todas las dudas para seguir con
cosas más interesantes y que ¡¡¡ya entren al siguiente nivel!!!
Conclusión
42
Manual de Dreamweaver
Bueno, aquí terminamos con la parte de tags “básicos”, espero que les haya gustado y
que lleven el taller al día.
Ya dentro de poco vamos a aprender elementos que nos ayudarán a ir maquetando
nuestra primera página de verdad, visual y con imágenes, para poder ir viendo el fruto
de nuestras horas de estudio.
¡Nos vemos la próxima!
¡Hasta luego!
Clase 14: Caracteres especiales
¡Hola queridos lectores! ¿Cómo les va? ¿Me extrañaban? Jeje. Bueno, hoy
vamos a dedicar la clase a los caracteres especiales en las páginas web.
Esto es de suma importancia por dos cosas: el código HTML válido y (la más
importante) la visualización correcta de nuestra página por parte de los
usuarios.
Se les llama “caracteres especiales” a un conjunto de caracteres (valga la
redundancia) que no pertenecen a un común de codificaciones de alfabetización. Por ejemplo, en
Estados Unidos no existe la letra “Ñ”, en algunos países el acento (tilde) es para un lado y en otros
para el otro, etc.
El conjunto de caracteres abarca, además de letras como la ñ y letras con acento, símbolos de
diferentes tipos como la apertura de símbolo de exclamación y de pregunta; símbolos no
frecuentes como el de marca registrada (la “R” chiquita dentro de un círculo) y hasta los mismos
signos “<” y “>”, que al ser caracteres HTML no pueden ser escritos dentro de una página tal cual
se ven, porque si no el navegador interpretaría 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 símbolo “&” 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:
¡Y el supercaracter del dia! (un espacio en blanco):
Por supuesto que hay muchos caracteres especiales más, estos son sólo una pequeña lista de los
más usados.
Si en algún momento necesitan alguno más raro, que no este acá, a googlear se ha dicho.
…y aportando info de Dreamweaver…
Como verán puede resultar bastante molesto el tener que escribir un párrafo 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 código, cuando empezamos a escribir el carácter (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 automáticamente.
Pueden probar esto, escribiendo cosas en modo visual y pasando a modo código, verán que en
realidad esta todo como debe estar.
Conclusión
Esta clase no fue la gran cosa jeje, pero el tema de los caracteres especiales es muy importante.
Cuantas veces habremos visto páginas en las que aparecen signos raros (¿No eran de Japón, eh?) y
la verdad que este tipo de descuidos estropea mucho el diseño y hace que nuestra página se vea
poco profesional.
Es importante tener en cuenta que, por más que en algunos navegadores se vean bien los
caracteres especiales escritos tal cual son, se deben usar sus correspondientes reemplazos.
Clase 15: Lista
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; cómo 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 están desactualizadas. Ya no se usan y pronto
desaparecerán del lenguaje HTML como propiedades válidas. ¡Hay que mantenerse siempre
actualizados con los estándares!
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 característica de que cada uno de sus ítems contenidos están
antecedidos por un círculo (este se puede cambiar) que lo va a definir como ítem de
lista.
Acá en la imagen, podemos ver los distintos tipos de visualización 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 círculo, cuadrado o disco, que
tienen las UL, van a estar ordenadas por numeración o alfabéticamente.
Es así que tenemos:
45
Manual de Dreamweaver
Type 1:
Van ordenadas numéricamente de 1 a la cantidad de ítems que tengamos.
Type a:
Van ordenadas alfabéticamente de la “a” a la “z” en minúsculas.
Type A:
Van ordenadas alfabéticamente de la “A” a la “Z” en mayúsculas.
Type i:
Van ordenadas en números romanos (en minúsculas).
Type I:
Van ordenadas en números romanos (en mayúsculas).
Y el tercer tipo de listas, son las listas de definición, DL.
46
Manual de Dreamweaver
Como podemos ver las DL nos permiten poner una “especie” de título (DT) para el cual
daremos una definición (DD).
No tiene mucha ciencia, cada uno le encontrará uso en algún momento (recuerden usar
cada tipo de etiqueta según corresponda, que para eso están creadas).
Para qué más sirven las listas
Otro uso muy común que tienen las listas, más allá de hacer una lista de ítems común
es, por ejemplo, la de crear menúes o barras de navegación en paginas web
(obviamente).
Las listas se pueden anidar unas dentro de otras, entonces, creando una lista principal
con diferentes términos y luego en cada uno poniendo otra lista, podríamos generar un
menú desplegable (aplicando algunos estilos que veremos más 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 más tendrán
sus menusitos a todo color!!! :p
Otro uso puede ser el de un índice, o un navegador de una página 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á
específicamente 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 cómo funciona otro o
porque les quede más cómodo usar uno que se les ocurra.
Acostúmbrense a trabajar con propiedad que es la mejor manera de ser un buen
maquetador de páginas web.
Conclusión
Bueno, hoy vimos que son las listas, sus propiedades, tipos y algunos usos.
Más adelante veremos otros usos más divertidos que los que pusimos recién, pero que
requieren de conocimientos que al día de hoy, puede que no tengan.
Traten después de leer esta clase, o durante, o cuando estén aplicando lo que aprendan
en ella, de revisar la barra insert de Dw, que ahí tienen “accesos directos” a tipos de
listas y sus contenidos (ya lo vimos en clases anteriores).
Clase 16: Tablas
Hola ¿Qué tal? ¿Cómo andan esos estudiantes mega-responsables? Bienvenidos a una nueva clase
del Taller de Adobe Dreamweaver/HTML.
Espero que estén entusiasmados, porque hoy vamos a ver tablas, que es medio pesado, pero es un
tema que hay que saber porque las tablas son un elemento que de seguro van a usar en muchos
lados (aunque en clases siguientes trataremos de convencerlos de que no lo hagan jeje).
Bueno, vamos a ver en qué consiste esto de las tablas…
Un poco de historia (no tan histórica)
En la “vieja” web, las tablas servían para diagramar páginas completas. Estas se dividían en tantas
partes como sectores iba a tener la página, y dentro se cargaba la información necesaria.
Hoy por hoy, las tablas dejaron de ser un medio para maquetar la página entera, y pasaron a ser lo
que realmente dicen ser, tablas.
Se usan para ordenar información en columnas o filas que mantienen una relación entre sí, ya sea
que todas las partes de esas filas/columnas dependen de un mismo título, o unas son derivadas de
otras. A modo de ejemplo:
Título
Descripción
Empresa
Dreamweaver
Programa de maquetación web
Adobe Systems Incorporated
Como se puede ver, este ordenamiento de información no tiene mucho que ver con la maquetación
de una página. Es solo para ordenamiento.
48
Manual de Dreamweaver
Antes pensaban las páginas de acuerdo a las tablas y se hacía una gigante que iba a contener la
cabecera, cuerpo, barras laterales y footer; y se metía toda la página dentro de esta tabla, con
aún más tablas anidadas.
Esta práctica ya es obsoleta y está por demás 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 algún momento el HTML se basó e incluso fomentó el uso de tablas para
maquetar páginas web, pero las tecnologías cambian y hay que adaptarse a los estándares.
No porque el HTML 0.000001 haya usado tablas para maquetar páginas, nos da la excusa para que
hoy las usemos de ese modo sin culpa :p.
Ahora sí, a ver como se hacen y utilizan las tablas
Las tablas se encierran entre las etiquetas <table> y </table> como ya estarán acostumbrados a
esta altura, su apertura con su cierre.
Dentro de ellas vamos a poder poner etiquetas <tr></tr> que van a ser cada fila de la tabla, y a su
vez, dentro de ellos van a poder poner etiquetas <td></td> que van a corresponder a cada
columna de la fila.
Veamos un ejemplo:
<table>
<tr>
<td><strong>Título</strong></td>
<td><strong>Descripción</strong></td>
<td><strong>Empresa</strong></td>
</tr> <tr>
<td>Dreamweaver</td>
<td>Programa de maquetación web</td>
<td>Adobe Systems Incorporated</td>
</tr>
</table>
Esta tabla, nos daría como resultado, la tabla que pusimos arriba (”Un poco de historia”), que
tendría 3 columnas y 2 filas.
En la fila de arriba tendríamos las tres columnas “Título”;”Descripción”;”Empresa” y en la fila de
abajo “Dreamweaver”;”Programa de maquetación 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 título y 2 como contenido.
Este es un problema que no parecería 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:
Programás de Adobe Systems Incorporated
Dreamweaver
Programa para maquetación web
A simple vista nuestra tabla sería así:
<table>
<tr>
<td><strong>Programas de Adobe Systems
Incorporated</strong></td>
</tr> <tr>
<td>Dreamweaver</td>
<td>Programa de maquetación 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 preguntarán 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 faltaría una columna en el primer <tr> y por ende estaría “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 después 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 maquetación web</td>
</tr>
</table>
De esa manera tenemos la tabla bien definida, los dos <td> de abajo formarían las dos columnas
que tenemos en la tabla, y al <td> de arriba le estaríamos indicando que debe ocupar el ancho de
las dos columnas que tiene la tabla.
50
Manual de Dreamweaver
Si abajo tuviésemos 3 columnas (3 <td>) el colspan de la de arriba debería ser de 3, o bien
podríamos tener una con colspan de 2 y otra columna simple.
Veamos otro ejemplo:
Estudiamos en el taller
Programás de Adobe Systems Incorporated
Dreamweaver
Flash
Illustrator
Acá tenemos una tabla con 2 columnas en la fila uno y 3 columnas en la fila dos.
El código correspondiente sería:
<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 más:
Como podemos ver, la columna que tiene el colspan es la segunda de la fila uno y esto es porque
el colspan nos dice cuántas columnas va a ocupar la misma, pero se toma desde ahí en adelante.
Si nosotros le hubiésemos 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 queríamos.
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 más 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, también
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 aún más fácilmente.
Pongamos ejemplos:
Estudio del Taller
Programa
Código
Dreamweaver
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 código correcto, presuponiendo que quedó claro lo de colspan, así que ya
deberían entender esto.
<table>
<tr>
<td rowspan="2">Estudio del taller</td>
<td>Programa</td>
<td>Código</td>
</tr> <tr>
<td>Dreamweaver</td>
<td>HTML</td>
</tr>
</table>
Como podemos ver, la propiedad rowspan actúa de manera similar a la propiedad colspan, pero de
forma vertical.
El <td> con rowspan 2 ocuparía el <td> faltante en la fila dos y como lo pusimos arriba de todo,
ocuparía específicamente, el primer <td> faltante.
Calculo que han entendido.
Sé que es un tema difícil 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 código y luego vean los resultados en vista de diseño y
vayan probando diferentes cambios.
Van a ver que probándolo se entiende más fácil.
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 también 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í.
Además, la etiqueta <table> comparte propiedades comunes como width y height, aunque la
mayoría de los estilos de cualquiera de las etiquetas que aprendimos y aprenderemos los
manejaremos más adelante con CSS.
Bueno, por último y ya los dejo tranquilos, sólo les quería comentar que existen otro tipos de
tablas, que en realidad son más o menos lo mismo que estas pero que varían en pequeñeces.
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
Conclusión
Clase larga ¡sí que sí! pero útil.
Espero que se haya entendido todo bien, cualquier cosa me preguntan vía comentarios.
Nos vemos de nuevo la semana que viene con otra edición 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 más importante.
Clase 17: Divisores y estilos CSS (1)
¡Hola, mis queridos seguidores! Bienvenidos a la clase 17 del taller
de Adobe Dreamweaver. ¡Sí! ¡17! ¿Cómo se pasa el tiempo, eh? Y
bueno, pero cada vez estamos más cerca de la gloria, jaja.
Hoy tenemos una clase especial, un punto de inflexión entre los
conocimientos generales de HTML y el maquetado de páginas a
nivel profesional. ¿Por qué digo esto? Bueno, como ya me habrán escuchado decir
(figurativamente), el diseño 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 sabrán 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.
Además 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 cuadrícula que forma nuestro sitio, queremos poner un
nuevo cuadradito para “incrustar” X cosa…
Habría que cambiar todos los rowspan y colspan afectados…
Durante un tiempo, mucha gente anidaba tablas, para “zafar”. Entonces uno ponía una
tabla dentro de una celda de otra tabla, y la dividía como quería. Era práctico y no
teníamos que tocar nada de la anterior.
Pero sitios grandes que usaron estas prácticas se encontraron con que el código HTML
de sus páginas se hacia INMENSO, provocando un mayor peso de la página y, por
53
Manual de Dreamweaver
ende, una mayor espera del usuario para cargar (además de una mayor transferencia de
sus servidores).
También se encontraron que cuando querían hacer un cambio grande (ya no un
cuadradito como dijimos arriba), había que rehacer el sitio entero, porque no se podía
adaptar al “monstruo tablístico” actual.
Ahora, les voy a explicar la nueva manera de maquetar y van a ver que solos se van a
dar cuenta de las GIGANTES ventajas que tiene.
¿Qué son los divisores?
Los divisores son una etiqueta que surgió para darle forma a las páginas de la manera
más práctica posible (etiqueta <div></div>).
¿Cómo explicar un div? Bueno, vamos a hacerlo gráfico: imaginen a los divs como
cajas.
Tenemos el cuerpo de la página, y dentro de ella metemos cajas y las ubicamos como
queremos y donde queremos.
Además, estas cajas pueden tener cajas más chicas adentro, y esas también podemos
ubicarlas como y donde queremos.
Entonces podemos crear unos cuantos divs con el contenido que queramos y ordenarlo
en la parte de la página que queremos que se vea y listo.
Nos olvidamos de las complejidades anteriores….
Y si tenemos ganas de cambiarle su tamaño o reacomodarlo, esto no afectará a la
estructura del sitio en general. Más fácil imposible.
Podemos maquetar una página rápidamente y si es necesario modificarla también lo
podremos hacer en muy poco tiempo.
Vayamos a algo visual
Veamos gráficamente como sería la utilización de divs.
Vamos a crear un cuerpo de la página y dentro vamos a ponerle un divisor.
<body>
<div>
</div>
</body>
Gráficamente, esto sería así:
54
Manual de Dreamweaver
(fig. 1)
El div o contenedor que creamos recién puede, mediante estilos, acomodarse en el lugar de la
página que nos quede mejor, y a su vez podemos poner más divs dentro.
Ahora veamos un ejemplo más palpable:
(fig. 2)
Como podemos ver, armar una página web con divs es igual que dibujarla en una hoja.
El HTML de la página que armamos arriba sería:
<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 dónde queremos que se ubiquen.
Estilos
Y ahora viene la magia.
55
Manual de Dreamweaver
Ustedes, líneas más arriba, se habrán preguntado cómo con esos divs metidos uno debajo de otro
sin nada más, lograríamos armar prácticamente el maquetado de una página entera.
Los estilos son características 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 más básica, 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 cuál 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 implementación.
¡Esperemos que si!
Bueno, vayamos al grano, ya todos deben estar ansiosos por ver como funciona esto:
En la “página” que maquetamos a mano (fig. 2) definimos abajo un código HTML muy simple, que
pareciera no coincidir con la misma.
Y en realidad no lo hace.
Ahora vamos a ver cómo hacerla coincidir, mediante la definición de varios estilos, en
las etiquetas correspondientes.
El código REAL de la página (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 código 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 continuación, serán 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 página.
Luego height: 30%, nos dice que ese div va a tener el 30% del total de la altura del
documento.
Los 3 div siguientes, además 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 cuánto queremos que tenga
cada uno.
Luego al div footer le decimos que nuevamente ocupe el 100% para “cerrar” la página y
listo.
Con 5 divs, y algunos (pocos) estilos, logramos maquetar una página completa, lista
para agregarle información.
Obviamente, dentro de los divs, luego pondremos párrafos, listas, imágenes, etc.
Lo que sea necesario para que nuestra página quede linda .
57
Manual de Dreamweaver
Conclusión
Esto es ni más ni menos que una introducción. Los divs y los estilos tienen muchísimo
contenido para ver.
En sí, para los estilos necesitaríamos 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 (más allá del maquetado común).
Bueno, ya cerrando, espero que esta clase les haya gustado, que les sirva en la creación
de sus páginas y, como siempre, ya saben que cualquier duda o cosa que no les salga,
pueden preguntarla vía 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.
Clase 18: Divisores y estilos CSS (2)
Hola
gente,
¿cómo
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 cómo maquetar una página básica. Hoy vamos a ver algunos detalles más
que los estilos y los divs nos pueden ofrecer. Para esto, vamos a quedarnos con una parte de la
página 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 código 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, título, texto, y un pie, en base a esto haremos nuestra caja.
<div> (foto y contenido)<div>(pie)</div></div>
Con este código tendríamos formada nuestra nota completa. Ahora veamos qué deberíamos
agregar para que realmente se vea como nosotros queremos. Pero antes haremos una aclaración
importante:
En el código que voy a poner a continuación vamos a ver algunas cosas nuevas que les pueden
resultar
difíciles
de
entender.
Estuve pensando si ponerlo o no, pero sé que ustedes, mis fieles seguidores, con algo de paciencia
(o
no
tanta)
van
a
terminarn
entendiendo.
En caso de dudas, pueden dejarme un comentario. Ya van a comprender lo útil que les va a
resultar esta clase.
Habiendo hecho la aclaración, aquí va un poco de CSS:
59
Manual de Dreamweaver
Y este sería el resultado final del div (nota 1) de nuestro maquetado de la clase anterior (cuadro
amarillo):
60
Manual de Dreamweaver
En la próxima clase explicaré paso a paso el código que ven más arriba, así que no se desesperen si
lo que vieron les genera muchas preguntas .
Clase 19: Divisores y estilos CSS (3)
¡Hola, bienvenidos a la tercer clase del Taller de Adobe Dreamweaver sobre
divisores y estilos CSS! Seguro este es uno de los temas que más les
interesa, dado que se trata de la base del diseño actual de sitios web.
Pero a la vez es bastante complejo (no difícil), así que ¡a practicar! jejeje
^_^. Hoy explicaremos el código CSS que vimos la clase pasada, parte por
parte. Luego ustedes pueden hacer su propio diseño en Dreamweaver.
¡Comencemos!
La clase pasada vimos este fragmento de código CSS:
61
Manual de Dreamweaver
Ahora nos toca lo difícil, 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.
width/height - Ponemos un ancho de 40% y un alto de 60%.
3.
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 píxeles, para separarla de los bordes del div.
2.
2. <!--[endif]-->margin-right: 20px – Ponemos un margen de la derecha de 20 píxeles,
para separar la imagen del título (el <h1> que pusimos a continuación 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.
src - El lugar donde vamos a tener nuestra foto guardada para traer y mostrar (source).
3.
alt – El texto alternativo que nos va a mostrar el lugar donde va la imagen en caso de que
por algún motivo o error, la imagen no se cargue.
Seguimos: Ahora tenemos el título dentro del <h1>
Estilos
1.
color: gray - Nos setea el color de la fuente del h1 en gris.
2.
<!--[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 título con la página de elwebmaster.com.
Más 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 línea de separación (la podemos ver en la imagen) con
un ancho del 80% del total del divisor.
¡¡¡Y ahora, la hora de la verdad!!!
Más abajo nos encontramos con otro divisor, dentro del divisor “nota 1″ que tiene una
característica especial: tiene el atributo class=”pieNota”.
Dentro de este tenemos un <h2> que hace de título y varios <p> (párrafos) con links a elwebmaster
(que podrían 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 gráfico, podemos ver que esta alineado como debe, las fuentes
tienen color azul y las letras tienen un tamaño predefinido.
Además, ninguno de los elementos tienen algún 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 sólo la tiene el div que la contiene.
¡¡¡SÍ!!!¡¡¡ Y ESO ES LO BUENO!!!
63
Manual de Dreamweaver
Con sólo setear una clase a la etiqueta contenedora, no necesitamos setearle estilos a ningún
elemento de adentro (salvo que queramos que un elemento tenga una propiedad en particular por
sí sólo).
Entonces, ahora sí, analicemos la etiqueta <style></style>
La etiqueta <style> va a contener estilos y nada más 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 código.
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 podría 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 sólo 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) tuviésemos un elemento <li>, este
no se vería 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 márgenes y paddings en una sola
propiedad.
Podemos hacer un margin-top, margin-right, margin-bottom, margin-left, todos en uno sólo.
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 línea (como esta en el ejemplo), pero si es recomendable para que
sean más legibles (el código será más prolijo).
Bueno, por ahora los dejo pensando bastante.
Conclusión
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 vía 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 maquetación de nuestra página.
Más que claro esta en la clase pieNota, que con sólo definir los estilos una vez en la etiqueta
<style>, pudimos aplicarlos a todos los elementos de su interior sin tener que escribir una sola
línea más.
Imaginen, de tener que poner todos los estilos a cada etiqueta por separado, lo gigante que
hubiese sido nuestro código. Y ni hablar a la antigua, sin estilos.
Bueno, nos vemos la semana que viene para otra clase del taller. Espero que practiquen lo visto
hoy, así queda claro, o surgen preguntas para responder y seguir avanzando.
Clase 20: Más estilos CSS
Hola muchachos y muchachas ¿cómo están? ¡Me alegro! (espero que hayan
respondido
“bieeeen”).
Ya estaba extrañándolos. No sé si se habrán dado cuenta, pero la clase
pasada, fue una división de la clase de la otra semana anterior, así que la
semana pasada no escribí el artículo literalmente.
Pero bueno, ya volví y con ¡buenas noticias! Conseguimos espacio para poner
una miniclase guía sobre CSS. No vamos a lograr avanzar profundamente en este tema, porque CSS
daría para un taller entero. Si bien no es muy difícil, hay muchos tips y ayudas que sólo podría 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 cómo funcionan
los estilos con CSS, de paso pueden darse una idea sobre cómo se puede ir insertándolo dentro de
un código HTML.
Vamos a un ejemplo similar al de las clases pasadas, el div de la “nota uno”.
Armemos un código de cómo podría ser un div de una nota X, para tomar de ejemplo:
<div>
<h2>Articulo de explicacion: manejo de CSS</h2>
65
Manual de Dreamweaver
<p>El CSS no es muy dificil de aprender, pero requiere
paciencia a la hora de usarlo.</p>
<h2>Articulos relacionados: </h2>
<p>Dw/html taller elwebmaster.com</p>
<p>w3c y maquetado correcto del html</p>
</div>
Bueno, aquí tendríamos un maquetado de una nota (cortita por cierto jeje), con un pie de página
que contendría artículos relacionados.
Bien, el problema aquí es que los artículos relacionados tendrían 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 parámetros 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, seguiríamos teniendo el mismo problema, todos los p y los h2 seguirían siendo
iguales.
Hagamos un corte acá y miremos otro código, para ver cómo se podría maquetar. No se asusten si
ven cosas que no entienden, se van a explicar más abajo .
<div id=”nota-uno”>
<h2>Articulo de explicacion: manejo de CSS</h2>
<p>El CSS no es muy dificil de aprender,
pero requiere paciencia a la hora de usarlo.</p>
<div class=”pieNota”>
<h2>Articulos relacionados: </h2>
<p>Dw/html taller elwebmaster.com</p>
<p>w3c y maquetado correcto del html</p>
</div>
66
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 aclaración importante, las “id” a diferencia de las “class” solo pueden existir UNA SOLA VEZ
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 más de una nota número uno, jeje.
Volviendo a los estilos
De esta manera, podemos marcar un estilo general para #nota-uno y luego a los artículos
relacionados, cambiarles el estilo con .pieNota.
Entonces nuestros estilos quedarían así:
<style type=”text/css” media=”screen”>
#nota-uno h2, p {
color: red;
font-size: 16px;
}
#nota-uno .pieNota h2, p {
color:yellow;
font-size: 12px;
}
</style>
De esta manera, nuestra caja con la nota anterior toma, para toda la caja (div id=”nota-uno”), los
h2 y los p van a estar en letra roja y con un tamaño de 16 píxeles.
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 tamaño de 12 píxeles.
Ahora, si están bien “chispitas” y siguen todas las explicaciones sin trabarse en ningún lado,
podrán 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
sería
esta:
De esta manera podemos tener varios tipos de .pieNota, uno para cada lugar del sitio en que este
ubicado.
Entonces podríamos tener en nuestro HTML varias clases .pieNota, y dependiendo de la “id” en la
que
se
encuentren
actuarían
diferente.
De esta manera nuestro código queda bien maquetado y podemos ordenar semánticamente nuestro
sitio.
Piensen que para cada cosa que tenga un titulo podríamos tener la clase .titulo y para cada pie
podríamos tener la clase .pie, y así dependiendo en qué id (única) está, tendría 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 día a día acá, que simple y fácil de entender les va a quedar el código, y cuando lo
comparen con cosas que hayan hecho antes, les va a causar gracia (o pena :P).
Bueno, no tengo mucho más espacio para seguir escribiendo por hoy, pero en las próximas clases
trataré de “ir mechando” algo de CSS a medida que explico los siguientes temas.
No duden en preguntar vía 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.
Conclusión
Si bien CSS da para mucho más, esta clase pretendió ser una guía de su funcionamiento.
Faltaron muchas cosas que me hubiesen gustado tocar, pero por cuestiones de espacio no se puede
(no
Los
quiero
espero
tener
la
semana
una
que
clase
viene
con
cortada
más
de
taller
nuevo).
para
todos.
Espero que les haya gustado y que sigan leyendo semana a semana las clases que hago
exclusivamente para ustedes.
Clase 21: Formularios
¡Hola amigos! ¿Cómo les fue con la práctica de CSS? ¡Porque me imagino que
habrán practicado! :p
68
Manual de Dreamweaver
Hoy, nos toca borrón y cuenta nueva. Vamos a pasar a un tema que no tiene nada que ver con lo
que veníamos 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 ningún dato más que los de su funcionamiento,
pero dentro de él, habrá otros elementos que son los que van a contener la información a enviar.
Estos elementos los veremos más 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 dirección de nuestra página) o de forma oculta.
El primero (el que se envía por url) se llama “get” (<form method=”get”>) y el segundo, el que los
envía de forma oculta se llama “post” (<form method=”post”>).
El segundo atributo “action” indica el lugar en que va a ser procesada la información que
enviamos, sea cual sea el tipo de “method” que usemos.
Para procesar la información, necesitaremos un lenguaje de programación, como por ejemplo php,
o asp, entonces desde nuestro formulario enviaremos la información al archivo .php (o .asp) y este
se encargará de hacer lo que deba hacer con esa información.
Luego de explicado esto, veamos cómo quedaría nuestra etiqueta “form” entera, aunque todavía
sin los elementos internos que van a contener la información.
<form method=”post” action=”login.php”>
</form>
Tenemos este formulario, que llevará de forma oculta la información que contenga a un archivo
php que se va a llamar “login.php”.
Este formulario podría contener, a modo de ejemplo, dos campos: usuario y contraseña.
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 páginas dinámicas.
69
Manual de Dreamweaver
Taller de PHP: Envio de datos a través de un formulario
Conclusión
Hoy vimos el elemento formulario, y si bien todavía no podemos hacer uno porque no conocemos
las etiquetas internas que llevan la información, ya tenemos una idea de su funcionamiento.
La clase que viene, empezaremos a conocer cada una de estas etiquetas y veremos cómo quedaría
un
formulario
completo
usando
algunas
de
ellas.
Recuerden que cualquier pregunta que tengan, pueden enviar comentarios.
Clase 22: Dentro del Formulario
¿Qué tal, gente? ¿Cómo les va? ¿Revisaron lo que les dejé la clase pasada, de
formularios? ¿Sí? Bárbaro ¿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 más que será SÓLO DE
RESPUESTAS, para las dudas que vayan juntando de aquí en más o las que
tengan guardadas. Además, responderemos las preguntas que fueron quedando en comentarios a lo
largo del curso.
Entonces, a prestar atención y anotar todo bien, así dentro de dos clases nos queda todo bien claro
y somos la ¡envidia de los nerds del barrio! jeje.
Además de esta manera nos quedarán 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 contraseña, pero no explicamos como enviarlos.
Bueno, hoy nos toca ver los elementos del formulario que hacen posible el envio de datos a través
del mismo.
Antes que nada dividamos el formulario en partes para que puedan identificar su funcionamiento
más fácilmente.
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 información, 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
botón o actúa como tal.
La etiqueta <form> ya la vimos la clase pasada y también vimos las propiedades que indican el
destino a donde va a llegar la información y de qué manera la vamos a enviar, así que,
continuemos con las etiquetas que van adentro del formulario.
Etiquetas contenedoras de información
70
Manual de Dreamweaver
Estas etiquetas van a actuar de contenedores, desde los cuales el formulario va a captar los datos
para enviarlos según las propiedades se lo indiquen (method y action de la clase anterior).
¿Cómo es que contienen información?
Bueno, veamos mejor una etiqueta de estas a modo de ejemplo, para que se entienda de la forma
más clara posible y después vemos el resto de las etiquetas del formulario.
La más común 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 botón, va a buscar en esta etiqueta, los
datos que contenga y los va a enviar (además de buscar en las otras etiquetas que contenga).
Veamos una etiqueta <input>:
<input type=”text” name=”user” value=”" />
Ahora analicémosla, para ver que nos encontramos.
Como primer medida tenemos que es una etiqueta que cierra en sí misma (no se si recordarán que
por allá al principio dijimos que TODAS las etiquetas deben tener un cierre), ya que tiene la barra
al final.
También vemos que además del nombre de la etiqueta (input) en sí, tenemos varias propiedades.
-type: Esta propiedad nos va a decir qué tipo de información 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 información
(.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 botón “Enviar”, la información de la caja, que
sería una representación gráfica de la propiedad value, sera enviada al servidor bajo el nombre
de “user”, de este modo cuando nuestro script de programación lea lo que le llega desde el
formulario, buscando dentro de “user” encontrara lo que ingreso el usuario dentro del input
(contenido del value).
Existen otro tipo de inputs, que en realidad los que cambia es solo la propiedad “type” pero
realmente son de utilidad.
Veamos algunos:
<input type=”password” name=”pass” value=”" />
71
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.
Habrán visto este tipo de inputs en cualquier casilla de email o en cualquier lado que tengan que
loguear usuario y contraseña.
Ahí tienen un típico formulario compuesto por la etiqueta <form> con 2 inputs dentro, uno type
text (el de username) y otro type password (el de la contraseña) y para terminar el botón de envío
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 botón, 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 información del resto de los inputs y la envíe, en este caso, a login.php por
post.
(Recomiendo leer el taller de php, en esta misma página, para entender bien como funcionan los
formularios desde la parte de programación).
Conclusión
Bueno, aquí vimos la primer parte de los elementos que se encuentran dentro de un formulario y
cómo 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 leyéndola.
Nos vemos el martes que viene, para seguir con más taller.
Clase 23: Dentro del Formulario (2)
Buen día muchachos y muchachas ¿como les va? Hoy tenemos la segunda
parte de formularios, donde vamos a ver los últimos elementos y la próxima
ya es la clase de respuestas, así que vayan preparando sus preguntas para
dejar durante esta semana (01/07/2008 al 08/07/2008).
72
Manual de Dreamweaver
Aclaro la fecha porque sé que este taller quedará para la posteridad y tal vez sus nietos o algún
que otro alienígena del futuro aprenderán de el, jajaja ^_^. Bueno, dejemos las ironías y/o
idioteces aparte y vayamos al taller.
Hoy vamos a ver algunas otras partes, ademas de los inputs que vimos la clase pasada, que son
muy usadas en los formularios.
Elementos del formulario (2)
Arranquemos con los textareas.
Estos campos son para texto y están delimitados por sus etiquetas de apertura y cierre
<textarea></textarea>.
El tamaño que van a tener está dado mediante sus propiedades “rows” y “cols”, que van a
determinar la cantidad de columnas y filas que va a tener el textarea.
Ademas de las propiedades “rows” y “cols”, tambien tienen la propiedad “name” que como ya
vimos la clase pasada, es la que decide bajo qué nombre se enviará esta etiqueta hacia nuestro
script (.php, .asp, etc).
Un textarea terminado quedaria más o menos así:
<textarea rows=”5″ cols=”10″ name=”texto”></textarea>
Recuerden siempre que cualquier elemento de un formulario en XHTML irá, claro que sí, en un
formulario.
Otro de los elementos es el checkbox.
Estas son las típicas cajas a las que se les aplica una tilde cuando se les quiere seleccionar.
Un ejemplo muy gráfico y que dudo que no se hayan cruzado alguna vez es la cajita que viene
junto a “Acepta los términos y condiciones…”.
Este elemento es otro input más 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 términos y condiciones, una acción lógica sería “si esta chequeado (si nos llega
el valor 1) dejamos seguir, si no, no dejamos seguir”.
Otro elemento que también es muy usado es el radiobutton.
Este es parecido al checkbox, solo que permite una sola selección.
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 aclaración
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 funcionarán.
Aqui dejo un ejemplo gráfico:
<input type=”radio” name=”accion” value=”aceptar” />
<input type=”radio” name=”accion” value=”no aceptar” />
De esta manera, los inputs al tener el mismo nombre (y ser de tipo radio) cuando seleccionamos
uno, se deselecciona el otro, y es lógico 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 más 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 opción que tengamos seleccionada.
Su sintaxis es:
<select name=”opcionElegida”>
<option value=”1″>Opcion 1</option>
<option value=”2″>Opcion 2</option>
</select>
El select mostrará la típica 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 acompañe al elemento que
pongamos en su interior.
74
Manual de Dreamweaver
Por ejemplo:
<label>Nombre de usuario:<input type=”text” name=”usuario”
value=”Ingrese aqui el nombre de usuario”/></label>
Conclusión:
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 ¡también pueden ayudar via comentarios a algunos que sí las tengan!
Espero que les haya gustado la clase. Nos vemos la semana que viene.
Clase 25: Preguntas
Hola a todos. Esta vez vamos a responder las preguntas que estuvieron
dejando en los comentarios de las clases anteriores. Esta clase se irá
actualizando con nuevas respuestas, así que estén al tanto por futuros
agregados.
Dentro de las preguntas verán definiciones útiles, tutoriales, consejillos y
algunas recetas para optimizar nuestra forma de trabajar. ¡Si necesitas que
profundicemos en algún tema, no te olvides de dejarnos tu comentario!
1.
¿Cuál es la diferencia entre XHTML, HTML y HTTP?
2.
¿Existen atajos de teclado en Dreamweaver? ¿Cuáles son?
3.
¿Cuál es la mejor herramienta para poner texto sobre un fondo, ya sea un color pleno, en
gradiente o sobre una imagen?
4.
¿Cómo puedo hacer un degradado en los bordes de una página sin tener que pegar una
imagen completa y que de ambos lados quede igual?
5.
¿Cómo inserto un botón de Adobe Flash con Adobe Dreamweaver y asegurarme de que
funcione?
6.
¿Puedo hacer que un link me lleve a otra parte del mismo HTML? ¿Qué etiqueta uso?
7.
Receta para hacer un formulario. ¿Qué debo poner en la parte de accion? ¿Cómo validar?
1. Diferencia entre XHTML, HTML y HTTP
HTTP significa HyperText Transfer Protocol (Protocolo de Transferencia de HiperTexto) y
es el protocolo desarrollado por W3C para las acciones que se realizan en la web. A través
de este protocolo es que se definieron la sintaxis y la semántica de la comunicación,
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 relación entre ambas partes.
HTML significa HyperText Markup Language. HTML es un lenguaje basado en etiquetas o
tags. La sintaxis de este lenguaje tiene varias reglas:
Se escribe con estructura tree o de árbol
(ver imagen)
Todo tag debe cerrar: <a>texto</a>
Los tags deben cerrar en orden inverso al
que
fueron
abiertos:
<p><strong>texto</strong></p>
Los tags pueden contener atributos: <tag
atributo="valor">
Debe haber una raíz obligatoria. Esto significa que tiene que existir un tag que encierre al
resto: <html>
XHTML es la evolción del HTML en un lenguaje mucho más estricto. Esta evolución se
debe principalmente a la diferencia entre los navegadores. Los navegadores no son más
que intérpretes de código. Sin embargo, los desarrolladores que crearon los navegadores
se tomaron el trabajo de interpretar el código y amoldarlo para que se “vea bien”,
aceptando algunos errores. Por ejemplo, antes se podía poner <body>texto</body. Con
XHTML estricto el texto debe ir siempre dentro de una etiqueta de párrafo:
<body><p>texto</p></body>. Existe un XHTML transicional que admite algunos errores
de este tipo, sin embargo el XHTML no, y directamente no valida los archivos con errores.
2. Atajos de teclado en Dreamweaver (varias versiones)
Todas las versiones de Dreamweaver incluyen una ayuda para saber cuáles son los atajos
del teclado. Para ver este listado debes ir al menú de Edición (Edit) y seleccionar la
opción Métodos abreviados de teclado (Keyboard Shortcuts). Estos atajos pueden cambiar
de una versión a otra y más aún de un SO a otro.
3. Texto sobre fondo: color pleno, gradiente e imagen
No es muy difícil lograr ubicar texto sobre un fondo. Los tres tratamientos de fondo son
muy similares:
Haz clic aquí para ver
el HTML
76
Manual de Dreamweaver
<div
style="background-color:#FAFF33;
float:left”><p
style=”padding:5px;
width:100px;
font-family:’Trebuchet
height:70px;
MS’,
Verdana,
Arial; text-align:left”> hola</p></div>
En el primer div el fondo se da con color pleno: background-color:#FAFF33
<div
style="background-image:url(http://www.elwebmaster.com/wp-
content/uploads/2008/07/div_gradiente.jpg); background-repeat:repeat-x; width:100px;
height:70px; float:left”><p style=”padding:5px; font-family:’Trebuchet MS’,
Verdana, Arial; text-align:left”>hola</p></div>
En el segundo div se ve un gradiente. El div mide 100px x 70px. El gradiente se genera con
una imagen del 70px de alto y 1px de ancho que está subida a nuestro servidor:
background-image:url(http://www.elwebmaster.com/wpcontent/uploads/2008/07/div_gradiente.jpg)
Después es necesario indicar que la imagen de fondo se repite sobre el eje de x:
background-repeat:repeat-x
<div
style="background-image:url(http://www.elwebmaster.com/wp-
content/uploads/2008/07/div_imagen.jpg);
float:left”><p
width:100px;
style=”padding:5px;
height:70px;
font-family:’Trebuchet
MS’,
Verdana,
Arial; text-align:left”>hola</p></div>
En el último div, la imagen tiene las mismas dimensiones que el div. Esta imagen también
está
en
nuestro
servidor
y
se
indica
así:
background-
image:url(http://www.elwebmaster.com/wpcontent/uploads/2008/07/div_imagen.jpg)
4. Degradado en los laterales de una página
El degradado en los bordes de una página se hace utilizando el mismo recurso anterior. La
estructura de tu página puede estar dividida en 3 divs. El div del medio es el que posee el
contenido de la página, mientras que los dos laterales únicamente incluyen un
degradado.
Haz clic para ver el HTML
Para lograr un resultado similar, el código sería algo parecido a esto:
El primero es el div de la izquierda, con la imagen “gradiente_izq.jpg” que se repite en y:
background-repeat:repeat-y
<div
style="
background-image:url(http://www.elwebmaster.com/wp-
content/uploads/2008/07/gradiente_izq.jpg);
background-repeat:repeat-y;
width:60px; height:600px; float:left"></div>
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 también se repite en
y: background-repeat:repeat-y
<div
style="background-image:url(http://www.elwebmaster.com/wp-
content/uploads/2008/07/gradiente_der.jpg);
background-repeat:repeat-y;
width:60px; height:600px; float:left"> </div>
5. Insertar un botón de Adobe Flash en HTML
Para incorporar un objeto de Adobe Flash en un HTML deberás “embeber” ese objeto.
Primero necesitas tener el archivo SWF subido a tu servidor. Luego, en tu archivo HTML
agregarás el siguiente código
<embed
src="http://www.elwebmaster.com/wp-content/uploads/2008/07/botonera.swf”
width="600"
height="30"
quality="high"
pluginspage=”http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_V
ersion=ShockwaveFlash”
type=”application/x-shockwave-flash”
bgcolor="#6699CC"></embed>
El código de color naranja deberás reemplazarlo por la URL de tu SWF.
El código de color celeste son variables visuales: el ancho y alto del SWF y el color de
fondo.
Haz clic para ver el HTML con la botonera de Adobe Flash
6. Anclas: enlaces dentro de un mismo HTML
Las anclas son enlaces o links que nos llevan a partes del mismo documento HTML. ¿Les
suena conocido? Es el mismo sistema que utilizamos para enlazar las preguntas del listado
con las respuestas.
En el HTML tendremos dos partes:
1. El enlace (Ej.: Pregunta 1)
2. El destino del enlace (Ej.: Respuesta 1)
A cada parte se le agrega un código diferente:
Al enlace: <a href="#ancla1">¿Cuál es la diferencia entre XHTML, HTML y
HTTP?</a>
Al
destino
del
enlace:<a
name="ancla1">La
diferencia
entre
estos
tres
términos...</a>
Lo más importante es que el nombre del ancla sea el mismo, en este caso: ancla1.
78
Manual de Dreamweaver
7. ¿Cómo hacer un formulario?
En elWebmaster, nuestros talleres de Dreamweaver y PHP dieron sus respectivas clases
para la creación y validación de formularios, tanto desde el front-end (Dreamweaver)
como desde el back-end (PHP).
Taller de Adobe Dreamweaver:
Clase 21: Formularios
o
¿Qué es un formulario?
o
Funcionamiento
o
Atributos
o
Conclusión
Clase 22: Dentro del formulario
o
Elementos del formulario 1
o
Propiedades
o
Conclusión
Clase 23: Dentro del formulario (2)
o
Elementos del formulario 2
o
Propiedades
o
Conclusión
Taller de PHP:
Clase 7: Envío de datos de un formulario
o
¿Cómo armar un formulario para que sea procesado por Php?
o
Diferentes formas de enviar un formulario
o
Variables POST y GET
Clase 8: Procesar un formulario (Parte I)
o
¿Cómo procesar un formulario?
o
¿Diferentes tipos de campos?
o
Inputs
Clase 9: Procesar un formulario (Parte II)
o
Textarea
Clase 10: Procesar un formulario (Parte III)
o
Selectbox
Clase 11: Procesar un formulario (Parte IV)
o
Recibiendo los datos
o
contacto_script.php
o
Cuerpo del mensaje
79
Manual de Dreamweaver
o
Función mail
o
Script completo
Clase 26: Frames o cuadros
Cuando el diseñador 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 página.
Los frames son otra opción para diagramar una página. La diferencia con
respecto a los divs es que cada frame contiene un HTML independiente.
El resultado es una página compuesta por varios archivos HTML. A este tipo de documentos
se les llama frameset.
Composición de un frameset
En un HTML común 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>Título 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>Título 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 diagramación general de los frames. Además, el
frameset puede contener elementos noframes que proveen información alternativa al
contenido del sitio en caso de que los usuarios tengan desactivados los frames.
Cualquier elemento fuera de un frameset debe aparecer después 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 tamaño
en ancho de uno o varios frames
(si son varios, las dimensiones se
separan con comas). En nuestro
código tenemos <FRAMESET
cols="30%, 70%">. Esto significa
que el primer frame va a tener un
ancho del 30% de la página y el
segundo frame un 70%. Si un
frame ocupa todo el ancho de la
página se indica con un 100%.
En rows indicamos el tamaño 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, píxeles 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 también framesets
anidados. ¿Cómo? 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>
Cuándo usar frameset
La ventaja de usar framesets se ve más que nada en sitios donde una porción 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 razón actual para utilizar framesets es cuando necesitamos mostrar contenido de dos sitios
diferentes. Si pensaron que los framesets estaban pasados de moda, fíjense en sitios de
búsqueda. Al ingresar una búsqueda de imágenes en Google.com, podrás ver el sitio fuente
debajo y la información tu búsqueda arriba.
Esto se hace con framesets, sino miremos el código…
<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 código que está encerrado entre las etiquetas frameset indican la diagramación del
frameset. En este caso hay únicamente dos frames:
En azul se ve el contenido de Google, con la imagen pequeña.
El código rojo muestra la página de elWebmaster.com donde fue publicada la imagen
que el usuario busca.
El sitio de viajes en español Viajeros.com utiliza framesets en su sección 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. También puedes eliminar el frame seleccionando
“Quitar marco”.
83
Manual de Dreamweaver
CreativeCommons hace exactamente lo mismo en su búsqueda 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 búsqueda verás el sitio fuente encerrado en un
frame dentro del sitio de CreativeCommons. También tenemos la posibilidad de sacar el
frame exterior de CC seleccionando “Remove Frame”:
W3Schools es una web muy completa de recursos HTML, allí podrán profundizar un poco más
sobre el armado, uso y aplicación de frames. Ver página >>
Bueno, eso es todo. Espero haberlos ayudado con esto de los framesets. ¿Dudas? ¿Preguntas?
Déjalas en los comentarios e intentaré responderlas en breve.
Clase 27: Tips y ayudas
¡Hola muchachos/as! ¿Me extrañaron? Calculo que no¿Qué se le va a
hacer? un pequeño mortal contra una diseñadora del mas allá…
Pero ¿quién los saluda con tanto fervor y tantas ganas? ¡¡¡Su querido
amigo Thor!!!
Bueno, es difícil de remontar luego de estas dos últimas clases pero
trataremos de que les guste (nótese 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
prácticas a la hora de hacer una página web.
Cómo usar el código
Este
era
el
primer
punto
¿Por qué hice referencia al uso del código?
que
teníamos
en
el
temario.
Bueno, por dos motivos:
84
Manual de Dreamweaver
1- Hoy por hoy los navegadores más populares (y los no tanto) soportan uso de código inválido
a fin de que las páginas se vean mejor en ellos y ganar popularidad entre la gente.
En realidad, todos los navegadores deberían atenerse a los estándares 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 código “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 estándares.
Ademas de que la gente en general adopte estos navegadores porque “las páginas se ven
mejor”.
Esto
nos
dejaría
como
primer
tip:
¡¡¡Manténganse
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 función, mi intención 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 diseñadores webs, de los que “hacen webs”.
Por otro lado, tenemos el punto dos:
2- Otra cuestión que también remarqué a lo largo del curso, fue que usaran las etiquetas
correctamente, tanto sintácticamente (el ejemplo del <br /> de arriba) como semánticamente.
No usen un <p></p> para poner un título, 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 títulos, subtítulos, etc.
Este tip, no es solo por el hecho de que el código sea correcto semánticamente, sino también,
porque estas reglas las siguen los buscadores.
Si bien la excusa de la “semántica” debería ser suficiente para escribir el código
correctamente, otra excusa importantísima 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 páginas.
85
Manual de Dreamweaver
A modo de ejemplo, si ponemos un título 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 interés!
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 más importantes a la hora de trabajar en lo que sea, es ser ordenado.
Organicen su trabajo y su código, identen cada línea que hagan para que tenga fácil 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 definición de documento
( <DOCTYPE…), en fin, hagan las cosas bien…
Recuerden que tal vez, la página que hagan hoy, la tengan que reacomodar mañana, y el ganar
tiempo haciendo las cosas “así nomas” hoy, les puede costar el doble cuando tengan que
modificar algo.
Recuerden el dicho “el haragán trabaja dos veces”, que no se de donde lo saque pero es un
refrán 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
compañera de trabajo Daniela), recuerden que los estilos y el HTML les darán 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 código (aunque hay casos en que no, pero esto
lo
descubrirán
con
la
práctica).
Piensen que si hay toda una serie de especificaciones, y reglas a seguir creadas por muchos
profesionales y recomendadas por miles de diseñadores web alrededor del mundo, es difícil
que la culpa la tenga el estándar HTML del momento.
Busquen la simplificación de su código, para que sólo haga lo que necesitan, no más. Eso los
ayudará en el futuro, cuando necesiten otros lenguajes como Javascript, y también hará sus
páginas más livianas, y compatibles con la mayoría de los navegadores.
Conclusión
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 diseñadores
web, aprendan de sus compañeros de laburo, o sus compañeros de estudio, metanse en foros
a discutir ideas, que más…..
Solo entre profesionales se volveran profesionales, y ese es el mejor tip que les puedo ofrecer.
Nos vemos el martes que viene para la clase final.
¡Hasta luego mis fieles seguidores!!
Clase 28: Clase Final
Y al final, llegó el final. ¡Buen día para todos! ¿Cómo les va? Hoy nos toca la triste y, a la vez,
alegre despedida ^_^. Alegre porque ya están un poquito más 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 técnicas y usos de Dw y HTML en mayor o
menor medida. Al principio traté de darles información más del lado de Dreamweaver, para
que puedan hacer uso práctico del programa, y luego me volqué mas para el lado del HTML
porque mi intención era mostrarles cómo se crea una página, mas allá de la herramienta que
usen.
Con la practica y ya sabiendo cómo manejar HTML, sus conocimientos sobre Dw irán creciendo
día
a
día.
Además, 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 más, o en otros en que no sabemos cómo resolver un tema
puntual.
No fue mi intención el decir cómo deben hacer tal o cual cosa, sino mostrar la manera en que
se podría llegar a una desición sobre eso.
Siempre piensen cómo resolver las cosas ustedes mismos, no importa si en un lugar dice
“háganlo 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, encontrarán la mejor manera de hacer las cosas.
No hay un “genio” del diseño 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 recomendación es que lean mis recomendaciones ( jaja ), busquen recomendaciones
de otros y saquen sus propias conclusiones.
Traten de aprender todo lo que puedan de los demás pero siempre aportando su cuota de
pensamiento y análisis para poder inclusive mejorar todos los aportes que incorporen.
Conclusión 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