Atajos de teclado en documentos

Este artculo explica las teclas de acceso rpido en HTML; porqu parecen una buena idea, y porqu no ayudan tanto como era de esperar. En Fundosa Teleservicios ha sido desde hace mucho tiempo causa de confusin, por lo que he decidido investigar a fondo el tema. Y no es fcil explicar. Si no tienes tiempo para leerlo todo, pudes saltar directamente a mis recomendaciones o conocer una alternativa. El usuario experto del ordenador conoce un secreto para trabajar con menos esfuerzo: los atajos de teclado. Para copiar un texto no necesita coger el ratn: con un rpido control+C se realiza la misma operacin y en un tiempo mucho menor que el usuario novato. No obstante, pocos saben que pueden, o podran hacer lo mismo para navegar dentro de una pgina web. Pero no son slo los usuarios expertos que sacan provecho de su teclado: hay usuarios que no utilizan el ratn (por ejemplo los que usan ordenador porttil que no dominan el "touchpad") y muchos que no pueden manejar ratn por discapacidad. Los usuarios invidentes no ven el puntero del ratn; tienen que usar el teclado. Y un usuario invidente con lector de pantalla puede trabajar ms rpido que uno vidente con ratn. Pensando en estos dos grupos de usuarios (sobre todo el segundo), el W3C incorpor en HTML la posibilidad de asignar una tecla de acceso rpido a los elementos de la pgina. HTML 4.01 lo describe as: Este atributo asigna una tecla de acceso a un elemento. Una tecla de acceso es un carcter nico del conjunto de caracteres del documento... Al pulsar la tecla de acceso asignada a un elemento, el foco se dirige hacia el elemento. La accin que tiene lugar cuando el foco se dirige hacia un elemento depende del elemento. Por ejemplo, cuando un usuario activa un vnculo definido por el elemento <a></a>, el agente de usuario normalmente sigue el vnculo. Cuando un usuario activa un radiobotn, el agente de usuario cambia el valor del radiobotn. Cuando el usuario activa un campo de texto, ste permite la entrada de texto, etc. El punto 9.5 de las pautas WCAG nos instan a proporciona atajos de teclado: 9.5 Proporcione atajos de teclado para los vnculos ms importantes (incluidos los de los mapas de imagen de cliente), los controles de formulario y los grupos de controles de formulario. Aunque slo es de prioridad 3. Es decir que si no definimos atajos de teclado, esto no significa que el sitio sea inaccesible. Este punto recomienda asignar teclas para los elementos de formulario. En este artculo slo considero atajos para hipervinculos, aunque los mismos principios son de aplicacin para formularios (y creo que un formulario bien diseado no necesita atajos de teclado.) El principio es fcil de comprender: el autor de la pginas asigna una tecla a los distintos elementos de la pgina, por ejemplo el enlace a la pgina principal en la barra de navegacin, o la casilla de bsqueda. Entonces para activar el enlace basta con teclear la letra o el nmero correspondiente. Parece muy bien, pero la realidad es bien distinta. Primero repasamos los problemas ms importantes que tiene esta forma de acceder a la pgina, y luego las posibles soluciones.

Si fuera tan sencillo... Por desgracia, a pesar de su aparente utilidad, pocas pginas definen estos atajos de teclado, y aun menos usuarios saben aprovecharlos. Si la idea es tan buena, por qu no se utilizan ms? No comprendemos bien las teclas de acceso rpido, y tienen varios problemas que dificultan su implementacin. El usuario no sabe si estn definidos o no En primer lugar, pocas pginas definen los atajos de teclado. Cuando s existen, el usuario no se da cuenta. No existe una manera fcil y bien conocida entre los usuarios, para indicar la existencia de teclas rpidas. Soluciones: Advertir al usuario de la existencia de teclas rpidas El usuario no sabe qu teclas hemos asignado Si superamos el primer problema, y el usuario se da cuenta que existen teclas rpidas para la pgina. Cmo puede saber cales son? Casi ningun navegador indica la definicin de los atajos de teclado (iCab s lo hace).

El navegador iCab indica la letra (Gracias a Charles McathieNevile por la imagen.)

de

acceso

rpido

entre

parentesis.

Cada diseador asigna las teclas a su manera, por lo que el usuario tiene que aprenderlas de nuevo para cada sitio. El usuario no sabe qu elementos tienen una tecla asignada, y no sabe qu teclas el diseador ha asignado. Qu letras elegimos? Para la pgina de inicio, por ejemplo: I para Inicio? P para Principal? H para Home? No lo olvides, nuestro propsito es facilitar la navegacin, no dificultarla. El usuario se confunda ms todava si asignamos teclas rpidas a muchos enlaces en la pgina. Solucin: Informar al usuario sobre las teclas definidas Solucin: Slo asignar teclas a elementos de uso frecuente que ayudarn de verdad Las teclas causan conflicto con las del navegador

Peor an, las teclas del documento tienen prioridad sobre las del navegador. Si la pgina asigna la letra F, el usuario no puede acceder al menu de favoritos con el teclado (si no sabe un truco con la tecla ALT). Si comparamos los distintos navegadores y sus distintas teclas de men, nos quedamos con un conjunto muy reducido. Si quitamos las teclas empleadas por los navegadores Opera, Netscape y IE en ingles, por ejemplo (en un mensaje al grupo WAI-IG) slo nos quedan 14 carcteres disponibles ( {cijklopqrsuxyz 0123456789 `-=[];',./} de los cuales las letras no son exactamente los ms tiles). el problema no termina ah: Aunque el diseador elija bien las teclas para no coincidir con las de los navegadores en su idioma, cmo sabe cules son las teclas para navegadores en otros idiomas? El idioma del interfaz del navegador no es necesario el mismo de la pgina. El idioma del usuario no ser necesariamente el del navegador: puede ser un castellano hablante en un pas con otro idioma o con un navegador nuevo que slo existe en ingls, por ejemplo. Si el usuario trabaja, por ejemplo, con la versin francesa, alemana o rusa del navegador, este tendr reservadas otras teclas. Yo mismo soy testigo: uso las versiones inglesas de diferentes navegadores, porque el ingls es mi idioma materno, pero leo todos los das pginas en castellano. Suponemos que el diseador de la pgina asigna la tecla T a un elemento, y comprueba que en IE/Windows no est asignado a la barra de men. Muy bien, pero yo, con mi navegador en ingls, no puedo acceder al men de herramientas (Tools). Es verdad que existe una manera de superar este problema en IE/Windows. Pero, cuntos usuarios lo conocen? Lo conoces t? Uno de los peores problemas es el conflicto no con los navegadores grficos, sino con las ayudas tcnicas para invidentes, especialmente Homepage Reader de IBM y WindowEyes de GW Micro. Con HomePage Reader la combinacin de teclas Alt+L esta reservada para leer en modo slo enlaces y esta combinacin deshabilita la asignacin en la pgina. En Espaa hay pocos usuarios de WindowEyes, pero en otros pases s es muy utilizado. Las pautas de diseo Web del Gobierno de Canad desaconsejan su uso precisamente por este motivo. Me parece que los atajos de teclado pueden ayudar a los usuarios con discapacidad motriz que trabajan con teclado, a coste de algunos usuarios invidentes que utilizan ciertos navegadores de voz. Soluciones: Elegir teclas que no causen conflicto con las del navegador El usuario no puede teclear el caracter Aunque hablamos de teclas de acceso rpido, lo que definimos es un carcter. Tenemos que pensar en cmo el usuario puede teclear el carcter. El teclado del diseador de la pgina no es necesariamente igual al teclado del usuario. La ee es fcil con el teclado espaol, pero no para el usuario griego o alemn. Puedes teclear ""?

Bien, tecla rpida, Vaya! Dnde est la tecla? Soluciones: Elegir caracteres fciles de teclear Entonces qu hacer?

Es importante tener en cuenta que para aprovechar los atajos de teclado que hemos definido, primero el usuario tendr que hacer cierto esfuerzo: 1. 2. 3. 4. 5. 6. Enterarse de que los hemos definido Averiguar cules son Aprender y recordar las teclas Conseguir teclear el carcter correspondiente Superar los eventuales conflictos entre pgina y navegador Tenemos que evaluar la frecuencia de uso de cada elemento al cual pensamos asignar una tecla. Cuntas veces el usuario va a accionar ese elemento? Le compensar aprender la tecla? 7. Cada uno de estos problemas tiene una solucin. 8. Advertir al usuario de la existencia de teclas rpidas 9. Problema: El usuario no sabe si estn definidos o no 10. El navegador no informa al usuario que la pgina define teclas rpidas. Este es, curiosamente, el aspecto ms problemtico. 11. Una solucin es indicar la tecla junto al enlace o dentro del texto del mismo, o directamente o mediante CSS. Otra es de proporcionar una pgina sobre la accesibilidad del sitio y esperar que el usuario averigue que en esta pgina se describen las teclas. 12. La mejor solucin sera mejorar el diseo de los navegadores para que indiquen las teclas, pero es una propuesta a largo plazo. 13. Recomendacin: Crear una pgina sobre accesibilidad, con la lista de teclas y un enlace en la pgina principal. 14. Informar al usuario sobre las teclas definidas 15. Problema: El usuario no sabe qu teclas hemos asignado. 16. Existen varias soluciones a este problema, ninguna plenamente satisfactoria. 17. Solucin: Indicar cada tecla en el contenido de la pgina. Por ejemplo esta pgina indica el carcter entre parentesis, mediante CSS. Muchos diseadores no lo harn de esta manera por consideraciones de esttica. Y con razn: la mayora de los usuarios no quieren usar las teclas y no quieren ver esta informacon. Si esperamos muchos usuarios discapacitados (por ejemplo Discapnet), nos compensa esta solucin, sino no es aconsejable. 18. Solucin: Proporcionar una lista de las teclas. 19. En una pgina aparte (o en la pgina sobre accesibilidad) proporcionar una lista de las teclas. La lista debe ser fcil de comprender e imprimir (el usuario visual la puede imprimir para tenerla siempre a mano). 20. Solucin: Slo asignar teclas a elementos de uso frecuente que ayudarn de verdad 21. El usuario tiene una memoria finita y en la realidad no aprender mas de tres o cuatro. 22. Solucin: Permitir al usuario conocer y recordar las teclas. 23. Como diseadores tenemos que calcular si compensa o no al usuario hacer el esfuerzo de averiguar y aprender las teclas rpidas. Muy posiblemente le resultar ms cmodo usar la tecla tabulador repetidamente. Si es un sitio de uso frecuente, por ejemplo, una entidad bancaria, probablemente s, se recompensar el esfuerzo. Si es un sitio particular que el usuario probablemente slo consulta una vez, no le interesa un acceso de teclado que le costar trabajo aprender, pera slo utilizar una vez. 24. En el Reino Unido la administracin pblica edita una gua para los responsables y diseadores de los sitios web pblicos (Web handbook). Dicen: 25. "Cuando un usuario visita el sitio web de su departamento por primera vez, ste aporta su experiencia aprendida en otros sitios. Es entonces importante que todos los sitios pblicos del Reino Unido adopten un estndar coherente de teclas rpidas. Cualquier desviacin de esta norma dificultar la navegacin para los usuarios por obligarles a aprender un nuevo conjunto de teclas cada vez." Si todos los sitios utilizaran las mismas teclas, los usuarios podran aprender las teclas de memoria. El Web handbook (Reino Unido), en las pautas de diseo seccin 2.4.4, define una lista para todos los sitios de los web de la administracin.

S 1 2 3 4 5 6 7 8 9 0

Saltar navegacin Pgina de incio Novedades Mapa del sitio Bsqueda Preguntas frecuentes (FAQ) Ayuda Reclamaciones Trminos y condiciones Contactar Definicin de teclas rpidas

La nica tecla en la lista que no es numrica es la S. Segn mis investigaciones no provoca conflicto con los navegadores comunes en su versin castellana. Si este conjunto de teclas es adecuado para los sitios pblicos de un pas como el Reino Unido y son independientes del idioma (con excepcin de la S, que tambin vale para "saltar" en castellano) porqu no lo podemos adoptar para los sitios pblicos espaoles? Insto al Ministerio de Administraciones Pblicas a tomar la inivciativa y imponer este conjunto de teclas en los sitios pblicos espaoles. En la actualidad el sitio del MAP un buen ejemplo de teclas rpidas bien intencionadas pero inservibles (a, b, c, d...). Recomendacin: Adoptar el conjunto de teclas de la lista anterior. Recomendacin: Crear una pgina sobre accesibilidad, con la lista de teclas y un enlace en la pgina principal. Elegir teclas que no causen conflicto con las del navegador Problema: Las teclas causan conflicto con las del navegador La realidad es que no podemos saber qu teclas utilizarn los navegadores y las ayudas tcnicas, y no es una exageracin desaconsejar cualquier asignacin de teclas para evitar cualquier conflicto. Debemos evitar carcteres con acentos u otros que requieren una combinacin de teclas en el teclado del usuario esperado. Los navegadores definen teclas rpidas con letras, por lo que el consenso es que sea mejor emplear las teclas numricas de cero a nueve. Opera no permite el uso de las teclas numricas, pero la nevegacin con Opera en una pgina bien diseada es mucho mas fcil (el usuario puede saltar entre encabezados tambin), por lo que se puede argumentar que esto no representa un problema importante. Recomendacin: Slo asignar teclas numricas Elegir caracteres fciles de teclear Problema: El usuario no puede teclear el carcter Como he explicado anteriormente si el carcter es difcil o imposible de teclear para el usuario, hemos fracasado en el intento de mejorar la accesibilidad. Recomiendo slo asignar teclas numricas, que son comunes a todos los teclados. Entonces la recomendacin es la misma:

Recomendacin: Slo asignar teclas numricas Recomendaciones Despus de tanta explicacin, lo importante es saber como actuar. Los atajos de teclado pueden mejorar la usabilidad y accesibilidad de la pgina si observamos unas pautas sencillas: Crear una pgina sobre accesibilidad, con la lista de teclas y un enlace en la pgina principal Adoptar el conjunto de teclas descrito en este documento.

Si por algun motivo no es posible usar este conjunto de teclas, recomiendo lo siguiente: Elegir caracteres fciles de teclear y que no causen conflicto con las del navegador Slo asignar teclas a elementos de uso frecuente que ayudarn de verdad Slo asignar teclas numricas Proporcionar una lista de las teclas o una indicacin directamente en cada enlace

Una alternativa Despus de explicar todo esto, tengo que decir que existe otra solucin para facilitar navegacin entre pginas (aunque no dentro de la pgina) que resuelve los problemas que descrito qu. El elemento <link> define la relacin entre pginas y deja al navegador la tarea crear un menu de navegacin y un conjunto de teclas de acceso. Espero describir esta tcnica otro artculo futuro. la he de en

Crear documentos que se cian a las gramticas formales publicadas con DreamWeaver
Para incluir la declaracin "doctype", Macromedia Dreamweaver 4 no provee de un mtodo, pero podr descargar gratuitamente desde el sitio de Macromedia la extensin Insert HTML Doctypes(MX124054_Insert_DTD.mxp) que permite esto (se puede descargar del sitio de extensiones de Macromedia en www.macromedia.com/exchange/ dreamweaver/. Nota: Es necesario inscribirse gratuitamente primero). Para instalar dicha extensin siga el siguiente procedimiento: 1. Inicie el Macromedia Extension Manager. 2. Haga clic con el botn primario del ratn sobre el cono Install New Extension 3. O seleccione el men File y luego la opcin Install Extension... Ctrl+I . 4. Desde la ventana Select Extension to Install busque el MX124054_Insert_DTD.mxp, seleccinelo y haga clic en el botn Install 5. En la ventana que aparezca haga clic en el botn Accept 6. Aparecer una ventana indicndonos que la . instalacin fu . archivo . satisfactoria:

Haga clic en el botn Aceptar. Una vez instalada la extensin: 1. Haga clic en el men Insert y luego la opcin HTML Doctype . 2. Aparecern las diversas opciones de declaraciones doctype que podr darle a nuestra pgina: HTML 2.0, HTML 3.2 y las diversas opciones de HTML 4.01 (Transitional, Transitional no URI, Strict y Frameset). Haga clic en la opcin que desee.

Especificar la expansin de cada abreviatura o acrnimo en DreamWeaver

Para colocar las marcas de citas <ABBR> o <ACRONYM> , Macromedia Dreamweaver 4 no provee de un mtodo (salvo la edicin del cdigo HTML), pero podr descargar gratuitamente desde el sitio de Macromedia la extensin Abbreviation and Acronym (MX518234_abbr_acronym.mxp) que permite esto (se puede descargar del sitio de extensiones de Macromedia en www.macromedia.com/exchange/ dreamweaver/. Nota: Es necesario inscribirse gratuitamente primero). Para instalar dicha extensin siga el siguiente procedimiento: 1. Inicie el Macromedia Extension Manager. 2. Haga clic con el botn primario del ratn sobre el cono Install New Extension 3. O seleccione el men File y luego la opcin Install Extension... Ctrl+I . 4. Desde la ventana Select Extension to Install busque el MX518234_abbr_acronym.mxp, seleccinelo y haga clic en el botn Install 5. En la ventana que aparezca haga clic en el botn Accept Aparecer una ventana indicndonos que la instalacin . fu satisfactoria: . archivo .

Haga clic en el botn Aceptar y reinicie el Macromedia Dreamweaver 4. Una vez instalada la extensin:

1. Seleccione el texto al que va a marcar como abreviacin o acrnimo. 2. Del men Text seleccione Style y luego Abbreviation o Acronym. 3. O en la barra de Objetos seleccione la barra Goodies cono de Insert Abbreviation o Insert Acronym . y haga haga clic sobre el

Extensiones para Discapacitados en DreamWeaver

Habilitar nuestros sitios web para que puedan ser cmodamente visitados por personas que no tienen conexiones rpidas, browsers de ltima generacin e incluso por usuarios con algn impedimento fsico es parte del proceso de diseo de un sitio web efectivo. Todos sabemos que el uso de imgenes bien optimizadas, no olvidarnos de las etiquetas ALT para nuestras imgenes, evitar subir pginas que tengan por ttulo "Untitled Document" e incluso darnos la lata de poner un TITLE en nuestros enlaces de texto son buenas ideas para facilitarle la vida alprjimo, pero no siempre lo hacemos, sea por olvido o porque la entrega del sitio web es en 20 minutos ms y an faltan 180 pginas por hacer... y empezamos a recortar esquinitas para llegar a tiempo. No nos veamos la suerte entre gitanos. Con un poco ms de planificacin, no es difcil revisar cmo lo estamos haciendo al respecto. Entre las extensiones gratuitas para Dreamweaver, se encuentra 508 Accessibility Suite Extension... (Suite de extensiones de Accesibilidad 508), que aade un men llamado Accesibility a Dreamweaver. Este men nos permite mejorar fcilmente la accesibilidad de nuestras pginas web de forma anloga a efectuar una revisin ortogrfica. El usuario puede seleccionar sobre qu partes de su sitio efectuar la revisin, y qu variables revisar. Las herramientas instaladoas nos ofrecen un informe de acuerdo a las guas WAI (Web Accessibility Initiative Iniciativa para la accesibilidad en la Web) y a la seccin 508 del acto de rehabilitacin (leyes estadounidenses), y sugerencias para corregir los problemas de accesibilidad que tengamos. Entre los tests y sugerencias de estas herramientas se cuentan: Revisin de pgina para asegurarse que los usuarios daltnicos o con problemas visuales puedan ver claramente sus elementos. Evitar animaciones que causen parpadeo de pantalla, ya que este parpadeo puede causar ataques epilpticos en algunas personas. Definicin del idioma en que est la pgina. Alternativas de slo audio para elementos multimedia. y por supuesto, un largo etctera. Si bien estas herramientas como toda herramientarequieren un poco de criterio para usarlas correctamente, son una excelente ayuda para que aportemos un granito de arena a una web ms funcional, y a incorporar elementos no puramente estticos a nuestro quehacer de diseo Web.

Proporcionar informacin sobre documentos en DreamWeaver

las

colecciones

de

Puede incluir el elemento link en el encabezado de la pgina. Para ello, siga el siguiente procedimiento: 1. Haga clic en el men Insert, Head Tags y Link . 2. Aparecer la ventana

Insert

Link:

En el campo Href: escriba el nombre del archivo enlazado (o bsquelo haciendo clic en el botn Browse...). En el campo Rel: podr especificar la relacin entre el documento y el que aparece en el campo Href: (los posibles valores a utilizar son Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help, y Bookmark; adems se pueden escribir ms de una relacin separando los valores con espacios). En el campo ID: podr especificar una identidad nica para el enlace. En el campo Title: podr describir la relacin (este atributo tiene especial relevancia para enlazar hojas de estilo). Por ltimo, en el campo Rev: podr especificar una relacin inversa (opuesta a lo que figure en Rel:) entre el documento y el que figure en el campo Href:. 3. Una vez escrito todo lo que considere necesario, haga clic en el botn OK .

Proporcionar un texto equivalente a travs de "longdesc" con DreamWeaver

Para incluir el atributo "longdesc", Dreamweaver 4 no provee de un mtodo, pero podr descargar gratuitamente desde el sitio de Macromedia la extensin Accesible Image Object (MX223952_AccesibleImage.mxp) que permite esto (se puede descargar del sitio de extensiones de Macromedia en www.macromedia.com/exchange/ dreamweaver/ . Nota: Es necesario inscribirse gratuitamente primero). Para instalar dicha extensin siga el siguiente procedimiento: 1. Inicie el Macromedia Extension Manager. 2. Haga clic con el botn primario del ratn sobre el cono Install New Extension 3. O seleccione el men File y luego la opcin Install Extension... Ctrl+I . 4. Desde la ventana Select Extension to Install busque el MX223952_AccesibleImage.mxp, seleccinelo y haga clic en el botn Install . archivo .

5. En la ventana que aparezca haga clic en el botn Accept 6. Aparecer una ventana indicndonos que la

. instalacin

fu

satisfactoria:

Haga clic en el botn Aceptar. Una vez instalada la extensin: 1. Haga clic con el botn primario del ratn sobre la pgina que est construyendo, en el lugar donde desee ubicar la imagen. 2. En la barra de Objetos haga clic sobre el cono de Insert Image (ahora renombrada como Insert Accesible Image) . 3. O haga clic en el men Insert y luego seleccione Image Ctrl+Alt+I . 4. Aparecer una ventana donde podr ver la opcin para agregar la ruta de un archivo que contenga descripcin de la imagen . Podr hacer clic en la carpeta que figura a la derecha para buscar el archivo.

Anclas en DreamWeaver
Las anclas son marcadores que nos permiten enlazar a una parte concreta de un documento HTML. Cuando hacemos un enlace normal y corriente el navegador visualiza la pgina enlazada pero lo hace mostrando el principio de esa pgina. Si queremos enlazar por ejemplo al punto 5 de la pgina "documento.html" necesitaremos usar las anclas. Vamos a ver cmo utilizar las anclas en DreamWeaver. Primero tendremos que abrir en DreamWeaver el archivo que vayamos a enlazar, en este caso, "documento.html". Vamos al punto del documento que queramos enlazar, situamos el cursor y hacemos Insertar > Anclaje con Nombre, aparecer una ventana para darle un nombre, lo llamamos "punto5". All dodne hayamos insertado el ancla aparecer este icono: Ahora vamos al documento donde queremos poner el enlace, por ejemplo en "indice.html". All donde queramos poner el enlace seleccionamos las palabras y en la barra de propiedades escribimos "documento.html#punto5" (suponiendo que indice.html y documento.html estn en el mismo directorio):

Cuando pulsemos en este enlace iremos directamente a donde se encuentra el ancla "punto5" del "documento.html".

rea de trabajo en DreamWeaver

Pantalla inicial de Dreamweaver El rea de trabajo de Dreamweaver puede adaptarse a distintas formas de trabajar y a diversos niveles de experiencia. Cuando inicie Dreamweaver, se abrirn los siguientes elementos del rea de trabajo:

La ventana de documento muestra el documento actual mientras lo est creando y editando.

 El panel Objetos contiene iconos en los que puede hacer clic para insertar objetos en el documento y para cambiar su forma de trabajar en el documento. Dreamweaver proporciona numerosos paneles flotantes, como el panel Estilos HTML y el inspector de cdigo, que le permiten trabajar con otros elementos de Dreamweaver. La barra del lanzador contiene botones para abrir y cerrar los inspectores y los paneles utilizados con mayor frecuencia. El inspector de propiedades muestra propiedades del objeto o texto seleccionado y permite modificar dichas propiedades. (Las propiedades que aparecen en el inspector dependen del objeto o texto seleccionado activamente en el documento.) Para abrir ventanas, inspectores y paneles de Dreamweaver, utilice el men Ventana y elija la opcin deseada. Diferentes vistas de Dreamweaver Vista de Cdigo

Conforme cree y trabaje con los documentos, Dreamweaver generar automticamente el cdigo HTML subyacente. Para examinar o editar este cdigo, utilice uno de los editores de cdigo de Dreamweaver: la vista de Cdigo de la ventana de documento o el inspector de cdigo. Vista de Diseo

La vista de Diseo muestra una representacin visual del documento tal y como la ver en la pantalla del navegador. Cuando trabaje en la vista de Diseo, podr optar entre dos vistas para realizar el diseo: vista de Disposicin (puede disear una disposicin de pgina e insertar grficos, texto y otros elementos multimedia) o vista Estndar (permite insertar capas, crear documentos de marcos, crear tablas o utilizar otras funciones no disponibles en la vista de Disposicin y se activa haciendo clic en el icono Vista estndar del panel Objetos). Vista Combinada

Como se seal, es una combinacin de las dos anteriores. La ventana de documento En la vista de Diseo, la ventana de documento muestra el documento actual aproximadamente igual a como aparecer en un navegador Web. La barra de ttulo de la ventana de documento muestra el ttulo de la pgina y, entre parntesis, el nombre de la carpeta raz, el nombre del archivo y un asterisco si el archivo contiene cambios no guardados. La barra de Estado, situada en la parte inferior de la ventana de documento, proporciona informacin adicional sobre el documento que est creando.

El selector de etiquetas muestra las etiquetas HTML padre que controlan el texto o los objetos seleccionados. Haga clic en una de estas etiquetas para resaltar su contenido en la ventana de documento. Haga clic en <body>para seleccionar todo el cuerpo del documento. Haciendo un clic sobre Tamao de ventana, se despliega un men que permite cambiar el tamao de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. A la derecha de este, aparece la estimacin del tamao del documento y del tiempo de descarga de la pgina, incluidos todos los archivos dependientes, como imgenes y otros archivos multimedia. La barra del lanzador aparece a lo largo de la parte inferior de la ventana de documento. De forma predeterminada, los botones de la barra del lanzador abren la ventana Sitio, el panel Activos, el panel Estilos HTML, el panel Estilos CSS, el panel Comportamientos, el panel Historial y el inspector de cdigo. Para especificar qu botones deben aparecer en la barra del lanzador (y en el lanzador flotante). Utilizar la barra del lanzador La barra del lanzador contiene botones que permiten abrir y cerrar diversos inspectores, paneles y ventanas. Tambin puede ver el lanzador, un panel flotante con idnticos botones.

Para mostrar u ocultar el lanzador: Abra el men Ventana y elija Lanzador. Si la barra del lanzador no aparece en la parte inferior de la ventana de documento, active Mostrar Lanzador en barra de estado en las preferencias de Barra de estado. Para especificar qu botones deben aparecer en la barra del lanzador y en el lanzador: 1. Abra el men Edicin y elija Preferencias. A continuacin, seleccione Paneles de la lista de categoras. Los elementos seleccionados para mostrar en el lanzador y en la barra del lanzador aparecern en el cuadro Mostrar en Lanzador. 2. Para aadir un elemento al lanzador y a la barra del lanzador, haga clic en el botn con el signo ms (+). 3. Para quitar un elemento del lanzador y de la barra del lanzador, resalte el elemento y haga clic en el botn con el signo menos (-). 4. Para cambiar el orden de los elementos del lanzador o la barra del lanzador, seleccione un elemento en la lista y haga clic en un botn de flecha. 5. Haga clic en Aceptar. El lanzador y la barra del lanzador cambiarn para mostrar los elementos que haya especificado. Utilizar el panel Objetos El panel Objetos contiene botones para la creacin e insercin de diversos tipos de objetos, como imgenes, tablas, capas . Para mostrar u ocultar el panel Objetos, elija Ventana y seleccione Objetos.

Para insertar un objeto: Haga clic en el correspondiente botn del panel Objetos o arrastre el icono del botn hasta la ventana de documento. Dependiendo del objeto, aparecer el cuadro de dilogo de insercin de objeto en el que se le pedir que seleccione o inserte el archivo u objeto deseado.

El panel Objetos contiene siete categoras de forma predeterminada: Caracteres, Comn, Formularios, Marcos, Head, Invisibles y Especial. Tambin contiene botones que cambian de vista: Estndar y Disposicin.

El panel Caracteres contiene caracteres especiales, como los smbolos de copyright, de comillas curvas y de marca registrada. Tenga en cuenta que estos smbolos no se muestran correctamente en las versiones anteriores a la 3.0 de los navegadores (Netscape e IE). La categora Comn contiene botones para la creacin e insercin de los objetos ms utilizados, como imgenes, tablas y capas. La categora Formularios contiene botones que permiten crear formularios e insertar elementos de formulario. La categora Marcos contiene estructuras comunes de conjuntos de marcos. La categora Head contiene botones que permiten aadir diversos elementos de la seccin head, como etiquetas meta, keywords y base. La categora Invisibles contiene botones que permiten crear objetos no visibles en la ventana del navegador, como los puntos de fijacin con nombre. La categora Especial contiene botones que permiten insertar elementos especiales, como applets Java, plug-ins y objetos ActiveX. La seccin Ver del panel Objetos permite elegir entre vista Estndar (predeterminada) o de Disposicin. Si est seleccionada la vista de Disposicin, tambin podr seleccionar las herramientas de Disposicin: Dibujar celda de disposicin y Dibujar tabla de disposicin. Cuando inserte objetos tales como imgenes, tablas, secuencias de comandos y elementos head , aparecer un cuadro de dilogo en el que se le solicitar informacin adicional. Puede suprimir estos cuadros de dilogo desactivando la opcin Mostrar dilogo al insertar

objetos o manteniendo presionada la tecla Control mientras crea el objeto. Cuando se inserta un objeto con esta opcin desactivada, el objeto recibe valores de atributo predeterminados. Despus de insertar el objeto, utilice el inspector de propiedades para cambiar sus propiedades. Las preferencias del panel Objetos permiten visualizar el contenido del panel Objetos como texto solamente, iconos solamente o texto e iconos.

Utilizar el inspector de propiedades El inspector de propiedades permite examinar y editar las propiedades del elemento de pgina seleccionado actualmente. (Un elemento de pgina es un objeto o texto.) Puede seleccionar elementos de pgina en la ventana de documento o en el inspector de cdigo. Para mostrar u ocultar el inspector de propiedades, elija Ventana y luego la opcin Propiedades.

La mayora de los cambios realizados en las propiedades se aplicarn de inmediato en la ventana de documento . (Para algunas propiedades, los cambios no se aplican hasta que se hace clic fuera de los campos de texto de edicin de la propiedad, se presiona ENTER o se presiona TAB para cambiar a otra propiedad.) El contenido del inspector de propiedades vara en funcin del elemento seleccionado. El inspector de propiedades muestra inicialmente las propiedades del elemento seleccionado que se utilizan con mayor frecuencia. Haga clic en la flecha de ampliacin, situada en la esquina inferior derecha del inspector de propiedades, para ver ms propiedades del elemento. Trabajar con colores En Dreamweaver, muchos de los cuadros de dilogo, as como el inspector de propiedades de muchos elementos de pgina, contienen un cuadro de color que abre un selector de color.Utilice el selector de color para elegir el color de un elemento de la pgina. Para elegir un color en Dreamweaver: 1. Elija un cuadro de color en cualquier cuadro de dilogo o en el inspector de propiedades. 2. Aparecer el selector de color.

3. Lleve a cabo una de estas operaciones:

Use el cuentagotas para seleccionar un color de la paleta. Todos los colores de las paletas Cubos de colores (predeterminado) y Tono continuo son seguros para la Web; los de otras paletas no lo son. o Utilice el cuentagotas para seleccionar un color de cualquier punto de la pantalla, incluso fuera de las ventanas de Dreamweaver. (Si hace clic en el escritorio u otra aplicacin, Dreamweaver recoger el color donde haya hecho clic, pero es posible que se active la otra aplicacin. En tal caso, haga clic en una ventana de Dreamweaver para seguir trabajando con este programa, o mantenga presionado el botn del ratn al moverlo de Dreamweaver al escritorio para evitar cambiar a otra aplicacin.) 4. Para ampliar la seleccin de color, utilice el men emergente situado en la esquina superior derecha del selector de color. Puede seleccionar Cubos de colores, Tono continuo, SO Windows, SO Mac, Escala de grises y Ajustar a valores seguros para la Web. 5. Para quitar el color actual sin elegir ningn otro color, haga clic en el botn Tachar. 6. Para abrir el selector de color del sistema, haga clic en el botn Rueda de color o

Bases y Planificacin de un Sitio Web

Pasos en el trabajo de desarrollo Web El trabajo de desarrollo de una pgina Web comienza con el proceso de definicin de una estrategia y unos objetivos del sitio, contina con el diseo (en el que se define el aspecto y el funcionamiento del sitio) y avanza hasta la fase de produccin y desarrollo (durante la cual se crea el sitio); la funcionalidad se comprueba para ver si se cumplen los objetivos establecidos y, al final, se publica el sitio. Planificar sitios Es un tpico pero no deja de ser verdad: planificar y organizar bien desde el primer momento ayuda a ahorrar tiempo ms adelante. La organizacin del sitio implica mucho ms que determinar el lugar en el que ir cada archivo: la planificacin del sitio implica tambin investigar los requisitos que debe cumplir el sitio, el perfil de la audiencia y los objetivos del sitio. Adems, debe tener en cuenta requisitos tcnicos tales como el acceso de los usuarios, los navegadores, ... Una vez que haya organizado la informacin y que haya determinado una estructura operativa, podr comenzar a crear el sitio. Determine qu estrategia va a emplear y cules son los aspectos relativos a los usuarios que debe tener en cuenta durante la planificacin del sitio. Utilice el "mapa del sitio" de Dreamweaver para establecer la estructura organizativa del sitio. En la ventana Sitio de Dreamweaver puede aadir, borrar y renombrar los archivos y carpetas fcilmente para cambiar la organizacin de la estructura. Consulte Introduccin a la administracin del sitio y la colaboracin

Cuando la creacin y el desarrollo de la pgina se haga entre varias personas: Establezca sistemas que impidan que personas que puedan acceder a la pgina que Vd. Est desarrollando sobrescriban archivos; consulte Configurar el sistema de desproteccin/proteccin.

Utilice Design Notes para comunicarse con otros miembros del equipo de desarrollo Web;

Organizar la estructura del sitio Organizar cuidadosamente el sitio desde el primer momento puede ahorrarle frustracin y tiempo ms adelante. Si comienza a crear documentos sin pensar en la jerarqua a la que corresponden, puede terminar con una enorme carpeta llena de archivos y difcil de administrar, o con archivos relacionados repartidos por media docena de carpetas con nombres similares. La forma habitual de crear un sitio consiste en crear una carpeta en el disco local con todos los archivos del sitio (lo que se conoce como sitio local) y crear y editar los documentos dentro de dicha carpeta. Despus podr copiar dichos archivos en un servidor Web cuando est preparado para publicar el sitio y permitir al pblico que lo vea. Este enfoque es mejor que crear y editar archivos en el propio sitio Web en vivo, ya que le permite comprobar cambios en el sitio local antes de hacerlos pblicos y, cuando haya terminado, cargar los archivos del sitio local y actualizar todo el sitio pblico de una vez. Divida el sitio en categoras. Coloque las pginas relacionadas en una misma carpeta. Utilice subcarpetas cuando sea necesario. Este tipo de organizacin facilitar el mantenimiento y la navegacin por el sitio. Decida dnde desea colocar elementos como imgenes y archivos de sonido. Los diseadores sitan a veces todos los elementos que desean utilizar en un sitio y que son ajenos a HTML en una carpeta llamada Activos.

Disear el esquema de navegacin Otra rea en la que merece la pena planificar es la navegacin. Cuando disee su sitio, piense en la experiencia que le gustara que tuvieran sus visitantes. Las bsquedas y los ndices facilitan a los visitantes la localizacin de la informacin que estn buscando. Disee la apariencia que tendr la navegacin. La navegacin debe ser homognea en todo el sitio. Si sita una barra de navegacin a lo largo de la parte superior de la pgina principal, intente mantenerla en ese lugar en todas las pginas vinculadas.

Cambiar el color de los enlaces con DreamWeaver

Cuando escribimos un enlace, por defecto aparece de color azul y subrayado. Como podemos ver aqu:

Para que aparezca de otro color e incluso poder quitarle el subrayado tan slo tenemos que ir a Modificar > Propiedades de pgina... (Ctrl+J) y a la izquierda, pulsar en "Vnculos". Veremos esta ventana:

Aqu podremos cambiar todas las propiedades de los enlaces. La fuente, el tamao, el color por defecto (color de vnculo), el color al pasar el ratn por encima (vnculos de sustitucin), el color de un enlace ya visitado (vnculos visitados) y el color de un enlace pulsado (vnculos activos). Adems podemos quitarle el subrayado en "Estilo subrayado". Nosotros lo hemos rellenado as:

Y este ha sido el resultado:

Adems, al pasar el ratn por encima el enlace se subrayar y se iluminar.