intro_web
DESCRIPTION
• Conocer el perfil profesional del WebMaster. • Dominar los aspectos teóricos de la información Usable. • Manipular y gestionar código HTML. • Crear sitios web a través de programas tipo WYSIWYG, Dreamweaver. 2. ORIENTACIONES PARA EL AUTOAPRENDIZAJE 4. OBJETIVOS 3. PROPÓSITO 1TRANSCRIPT
MÓDULO
INTRODUCCIÓN A LA WEB
1. PRESENTACIÓN DEL MÓDULO
La información en la actualidad no debe ser un elemento tratado de forma local, más bien un recurso que pueda compartirse con el mundo; la Internet como medio de comunicación, publicidad y ente globalizador nos permite compartir cualquier tipo de recurso ya sea este HARD o SOFT. El profesional llamado webmaster en nuestro país aun no es muy conocido, pero en la sociedad de la información y conocimiento se hace prácticamente indispensable para el desarrollo sustentable de cualquier empresa o institución.
2. ORIENTACIONES PARA EL AUTOAPRENDIZAJE
Recopilación de datos a través de Internet Realizar constantes lecturas y prácticas acerca del material
científico tratado Si se trabaja, aplicar los conocimientos adquiridos en el lugar de
trabajo Utilización de organizadores gráficos para simplificar ideas
3. PROPÓSITO
Gestionar el perfil profesional del Webmaster y conocer un lenguaje de programación base en los sitios web que en Internet se hacen necesarios construir; además de dominar un software de edición para páginas web, diseñar, construir y actualizar Web Sites.
4. OBJETIVOS
Conocer el perfil profesional del WebMaster. Dominar los aspectos teóricos de la información Usable. Manipular y gestionar código HTML. Crear sitios web a través de programas tipo WYSIWYG,
Dreamweaver.
1
5. TABLA DE CONTENIDOS
INTRODUCCIÓN A LA WEB....................................................................2UNIDAD # 1..........................................................................5EL WEBMASTER....................................................................5WebMasters Vs. Diseñadores Gráficos..................................5WebMasters y Seguridad......................................................6Origen del término...............................................................7Actividades en las que se utiliza esta modalidad...................7Mercado laboral actual.........................................................8Ventajas y desventajas.........................................................8Perspectivas culturales de los freelancers.............................9La legislación local.............................................................10UNIDAD II...........................................................................11LA USABILIDAD..................................................................11Definiciones formales.........................................................11Otros aspectos de la Usabilidad..........................................12Beneficios de la usabilidad.................................................14Opiniones de Jakob Nielsen.................................................14Usabilidad En Sitios Web....................................................15Otros principios para el diseño de sitios web ......................16UNIDAD III..........................................................................18HTML.................................................................................18LECCION # 1.......................................................................18LECCIÓN # 2.......................................................................20LECCION # 3.......................................................................26LECCION # 4.......................................................................31LECCION # 5.......................................................................34UNIDAD # 4........................................................................39DREAMWEAVER..................................................................39Introducción al uso del programa........................................39El espacio de trabajo de Dreamweaver................................39La ventana de documento...................................................39Usar el inspector de propiedades.......................................40
2
Usar el lanzador................................................................41Usar la paleta de objetos...................................................41Menús de acceso directo....................................................42Paletas flotantes acoplables...............................................42Introducción a la creación de documentos...........................43Crear documentos HTML nuevos.........................................44Usar guías visuales en el proceso de diseño........................45
6. COMPETENCIAS
Utilización de términos especializados en la Web. Destreza y manipulación de HTML Manipulación de un software para gestionar Sitios Web Interpretar la Usabilidad como herramienta Web.
7. BIBLIOGRAFÍA - ELECTRÓNICA RECOMENDADA
www.monografias.comwww.abcdatos.comwww.google.com
3
UNIDAD # 1EL WEBMASTER
¿Qué es Ser WebMaster? La palabra WebMaster en definitiva es una palabra de origen Inglés, que si lo traducimos al castellano queda algo como Maestro Web.
Pero muchas veces escuchamos estas palabras que soy WebMaster, conozco a un WebMaster y no sabemos realmente cual es la función específica de estas personas en las cuales me incluyo.
Un WebMaster es la persona encargada de un sitio, vendría siendo como el director de una empresa, es la persona que decide las tecnologías que se van a usar, decide, los servidores, los chiches y la estructura.
Por empezar un WebMaster es una persona responsable, es la responsable propiamente dicho de Todo un Sitio, ya que es la que tiene por ejemplo, los códigos o passwords para hacer modificaciones en la pagina. Es la única persona autorizada a que si no le gusta la estructura o los contenidos del sitio puede decir que va o no va.
WebMasters Vs. Diseñadores Gráficos.
No tenemos que confundir los tantos, los WebMaster son WebMaster propiamente dicho, un diseñador es un diseñador por lo cual, en nuestro site si no sabemos de diseño démosle trabajo a la gente que sabe del tema, ya que un WebMaster abarca otros temas como explicábamos y tiene otras responsabilidades.
4
Muchas veces nosotros los WebMaster queremos dar nuestro toque de diseño a nuestro site, claro que podemos aportar muchas cosas para los encargados de diseño, pero una recomendación muy importante, no decidir en el tema de diseño, tenemos que tener para armar nuestro site, un encargado en el área, un experto en el tema de diseño para que nosotros solo nos aboquemos a nuestro trabajo que es el de armar todo lo que el grupo arma, en diseño y contenido.
Una cosa esencial que tenemos que ver a la hora de empezar a trabajar en nuestro site con los diseñadores es de explicarles los servidores en los que se va a trabajar, explicarles con porcentajes las tecnologías que convienen y las que no, en definitiva adaptarlos a lo que tenemos nosotros.
WebMasters y Seguridad
Si bien hablamos de que los WebMaster son las personas que están encargadas de tener los códigos de acceso a la pagina, tenemos que hablar de que también puede ser el administrador del site, por lo tanto tiene que tener conocimientos amplios sobre seguridad informática para proteger de cualquier ataque a el sitio.
También tenemos que tratar los WebMaster es de toda la información que corra por nuestro site que sean lo mas privadas posibles, tenemos que asegurarnos siempre de que nuestros Server sean seguros para que no suframos ataques de hackers con malas intenciones y que nos perjudiquen nuestro trabajo.
EL FREELANCE
Se denomina trabajador freelance o freelancer a la persona cuya actividad consiste en realizar trabajos propios de su ocupación, oficio o profesión, de forma autónoma, para terceros que requieren sus servicios
para tareas determinadas.
Generalmente, a un freelancer le abonan su retribución no en función del tiempo empleado sino del resultado obtenido, sin que las dos partes contraigan obligación de continuar la relación más allá del encargo realizado.
5
Origen del término
La etimología de la palabra deriva del término medieval inglés usado para un mercenario (free-lance o lanza-independiente), es decir, un caballero que no servía a ningún señor en concreto y cuyos servicios podían ser alquilados por cualquiera.
El término fue acuñado inicialmente por Sir Walter Scott (1771-1832)en su reconocido romance histórico Ivanhoe para describir a un "guerrero medieval mercenario." La frase en inglés luego hizo la transición a un sustantivo figurativo alrededor de 1860s y fue luego reconocido como un verbo oficialmente en 1903 por varias autoridades en lingüística tales como el Diccionario Oxford de Inglés (Oxford English Dictionary). Solamente en tiempos modernos ha mutado el término de un sustantivo(un freelance o un freelancer) y un adverbio(un periodista que trabaja freelance).
Esta palabra es empleada como modismo en castellano como dos palabras separadas "free lance" (del inglés) o autónomo, pero no tiene aplicación como verbo.
Actividades en las que se utiliza esta modalidad
Inicialmente el uso predominante de esta modalidad de trabajo fue en el campo del periodismo. Los medios gráficos de prensa además de tener un elenco permanente de empleados a sueldo, encargaban a terceros la realización de notas determinadas y pagaban por cada una de ellas, o bien adquirían notas que les eran ofrecidas en tales condiciones.
Posteriormente se aplicó también en otros campos como los de la programación informática, el diseño gráfico, la consultoría, la fotografía, la traducción, y muchos otros servicios profesionales y creativos.
La Internet ha facilitado la expansión de esta modalidad de trabajo en sectores como desarrollo de software, diseño de sitios web, tecnología de la información, y documentación de negocios ya que permite que el freelancer trabaje en lugares distantes del domicilio del receptor del trabajo e, incluso, en diferente país.
En años recientes mercados de trabajo en línea, como ScriptLance, Guru, Elance, Getacoder y Pajamanation han comenzado a darle más énfasis hacia el campo de las Tecnologías de la Información y Comunicación.
6
La forma de documentar el encargo en la práctica freelance varía grandemente. En algunos casos se documentan por escrito las condiciones de la relación y en otros sólo hay un acuerdo verbal. Tampoco hay reglas fijas sobre el pago, a veces el pago es por adelantado y otras al finalizar el trabajo o se combinan las dos modalides. Para proyectos más complejos, un contrato puede establecer un cronograma de pagos en base a hitos o logros.
En general la retribución se pacta en función del resultado obtenido ya que como el freelancer se desempeña fuera de la supervisión de quien le encarga el trabajo le resulta imposible a éste controlar el tiempo empleado en la tarea. Sin embargo, en ciertas actividades o casos especiales puede pactarse una tarifa por tiempo empleado.
Mercado laboral actual
Según el Departamento del Trabajo de Estados Unidos
Aproximadamente 10.3 millones de trabajadores en los Estados Unidos son contratistas independientes
7.4% de la fuerza laboral de Estados Unidos está constituida de trabajadores independientes
En los últimos tres años, las empresas han incrementado el outsourcing o tercerización de labores en 22
Ventajas y desventajas
Las diferencias entre el trabajo freelance y el empleo fijo pueden significar una ventaja o una desventaja para el freelancer según sean sus características personales.
Así, por ejemplo, en general el trabajador freelance tiene una mayor variedad de asignaciones que en un empleo regular, y casi siempre tiene más libertad de escoger su horario de trabajo. Esto representa una ventaja para quien guste de una labor creativa y tenga la capacidad de administrar debidamente su tiempo de trabajo pero si el trabajador en cuestión prefiere el trabajo rutinario o carece de autodisciplina en cuanto al tiempo de trabajo, la modalidad le significará un desventaja.
El mismo razonamiento vale en el aspecto económico. Se considera en general que el trabajo freelance recibe mejor retribución que el fijo pero carece de beneficios laborales tales como seguro médico o indemnizaciones de retiro y está sujeto a una posibilidad de variación
7
en los ingresos. También aquí es importante la personalidad del freelancer porque le requiere prever por sí mismo la cobertura de tales riesgos (enfermedad, edad avanzada, disminución temporal de ingresos, etc.)
Otro aspecto a considerar es que en general el freelancer se debe preocupar por la obtención de nuevos clientes, la realización de nuevos productos, la actualización de sus conocimientos, etc. lo cual, a su vez, le brinda la oportunidad de incrementar sus ingresos e incluso, a veces, la de iniciar una empresa o la de obtener un empleo fijo de relevancia. Sin embargo, hay personas que no tienen la capacidad o la voluntad para aprovechar esas ventajas y que, por el contrario, hallarán más conveniente un empleo fijo con menores ingresos pero también con menores requerimientos y riesgos.
A veces un freelancer trabajará con uno o más freelancers y/o vendedores para formar una "agencia virtual" para servir a las necesidades particulares de un cliente para un trabajo o asignación de corto plazo o permanente. Este versátil modelo de agencia virtual puede ayudar a un freelancer a conseguir trabajos que requieren de experiencias y destrezas específicas y segmentadas fuera del ámbito de un individuo. A medida que cambian los clientes, de la misma manera pueden cambiar la base de talentos que una agencia de este tipo escoja para sus proyectos.
Muchas publicaciones y periódicos han comenzado a ofrecer recientemente la opción del "escritor o autor fantasma". El Autor Fantasma es cuando un freelancer firma con un editor, pero su nombre no aparece listado como crédito de su(s) artículo(s). Esto permite al escritor recibir beneficios, mientras continúa siendo clasificado como un freelance, e independiente de cualquier organización establecida.
Otra desventaja es que los freelancers a menudo tienen que lidiar con contratos, asuntos legales, contabilidad, mercadeo, y otras funciones de negocios ellos mismos. Si deciden pagar por servicios profesionales, a menudo pueden convertirse en desembolsos significativos. Las horas de trabajo pudieran extenderse más allá de las jornadas laborales.
Perspectivas culturales de los freelancers
Desde un punto de vista cultural, el ser freelance es percibido tanto por encima como por debajo del sistema social. Para serle fiel al sentido original del término acuñado por Scott, algunos americanos y la mayoría de los europeos ven el trabajo freelance como una posición socialmente más elevada.
8
Sin embargo, muchos países asiáticos parecen tener en baja estima a los freelancers, a menudo asociando la práctica con el fracaso personal (incapacidad de conseguir un trabajo con un empleador importante) e incluso criminalidad (ver: Ninja).
Internet ha abierto muchas posibilidades para los freelancers, especialmente para aquellos que trabajan en países con mano de obra barata, normalmente dedicados a la programación informática y tecnologías de la información en general.
9
La legislación local
El encuadre jurídico de las relaciones denominadas freelance está sujeto a la legislación de cada país y las circunstancias particulares en que se desarrolla cada relación. Es por ello que puede ocurrir que una modalidad de trabajo sea considerada autónoma y por ende excluída de todo tipo de beneficio laboral en un país pero, en cambio, conforme la legislación de otro país configure un contrato laboral encubierto, esto es una forma de simulación.
10
UNIDAD II
LA USABILIDAD
La usabilidad universal (del inglés usability) es la característica de un sistema que pretende ser utilizado por:
el tipo o tipos específicos de usuario/s, la tarea o tareas que para las cuales el sistema se ha hecho, y el contexto en el que se da la interacción.
El "grado de usabilidad" de un sistema es, por su parte, una medida empírica y relativa de la usabilidad del mismo.
Empírica porque no se basa en opiniones o sensaciones sino en pruebas (del inglés tests) de usabilidad, realizadas en laboratorio u observadas mediante trabajo de campo.
Relativa porque el resultado no es ni bueno ni malo, sino que depende de las metas planteadas (por lo menos el 80% de los usuarios de un determinado grupo o tipo definido deben poder instalar con éxito el producto X en N minutos sin más ayuda que la guía rápida) o de una comparación con otros sistemas similares.
El concepto de usabilidad se refiere a una aplicación (informática) de (software) o un aparato (hardware), aunque también puede aplicarse a cualquier sistema hecho con algún objetivo particular.
El modelo conceptual de la usabilidad, proveniente del diseño centrado en el usuario, no está completo sin la idea utilidad. En inglés, utilidad + usabilidad es lo que se conoce como usefulness.
Jackob Nielsen definió Usabilidad como el atributo de calidad que mide lo fáciles que son de usar las interfaces Web.1
Definiciones formalesLa Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de usabilidad:2 4
ISO/IEC 9126:
"La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario, en condiciones específicas de uso"
Esta definición hace énfasis en los atributos internos y externos del producto, los cuales contribuyen a su funcionalidad y eficiencia. La
11
usabilidad depende no sólo del producto sino también del usuario. Por ello un producto no es en ningún caso intrínsecamente usable, sólo tendrá la capacidad de ser usado en un contexto particular y por usuarios particulares. La usabilidad no puede ser valorada estudiando un producto de manera aislada (Bevan, 1994).
ISO/IEC 9241:
"Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico"
Es una definición centrada en el concepto de calidad en el uso, es decir, se refiere a cómo el usuario realiza tareas específicas en escenarios específicos con efectividad.
Otros aspectos de la Usabilidad
A partir de la conceptualización llevada a cabo por la ISO, se infieren los principios básicos en los que se basa la usabilidad:2
Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una interacción efectiva con el sistema o producto. Está relacionada con la predicibilidad, sintetización, familiaridad, la generalización de los conocimientos previos y la consistencia.
Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema pueden intercambiar información. También abarca la posibilidad de diálogo, la multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la optimización entre el usuario y el sistema.
Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos. Está relacionada con la capacidad de observación del usuario, de recuperación de información y de ajuste de la tarea al usuario.
En informática, la ergonomía está muy relacionada con la accesibilidad, hasta el punto de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de estos expertos y gurú de la ergonomía en los entornos web es Jakob Nielsen, quien definió la ergonomía en el 2003 como "un atributo de calidad que mide lo fáciles de usar que son las interfaces web".
Otra definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web para que los usuarios sean capaces de "encontrar lo que necesitan, entender lo que encuentran y actuar
12
apropiadamente… dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea".
Fuera del ámbito informático, la usabilidad está más relacionada con la ergonomía y los factores humanos.
La ergonomía parte de los principios del diseño universal o diseño para todos. La buena ergonomía puede lograrse mediante el diseño centrado en el usuario (que no necesariamente dirigido por él), aunque se emplean diversas técnicas. El diseñador de ergonomía proporciona un punto de vista independiente de las metas de la programación porque el papel del diseñador es actuar como defensor del usuario. Por ejemplo, tras interactuar con los usuarios, el diseñador de ergonomía puede identificar necesidades funcionales o errores de diseño que no hayan sido anticipados.
La ergonomía incluye consideraciones como:
¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender?
¿Qué quieren o necesitan hacer los usuarios? ¿Cuál es la formación general de los usuarios? ¿Cuál es el contexto en el que el usuario está trabajando? ¿Qué debe dejarse a la máquina? ¿Qué al usuario?
Las respuestas a estas preguntas pueden conseguirse realizando análisis de usuarios y tareas al principio del proyecto.
Otras consideraciones incluyen:
¿Pueden los usuarios realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden los usuarios realizar las tareas previstas a la velocidad esperada?
¿Cuánta preparación necesitan los usuarios? ¿Qué documentación u otro material de apoyo están disponible
para ayudar al usuario? ¿Puede éste hallar las respuestas que buscan en estos medios?
¿Cuáles y cuántos errores cometen los usuarios cuando interactúan con el producto?
¿Puede el usuario recuperarse de los errores? ¿Qué han de hacer los usuarios para recuperarse de los errores? ¿Ayuda el producto a los usuarios a recuperarse de los errores? Por ejemplo, ¿muestra el software mensajes de error informativos y no amenazantes?
¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con discapacidades? (Es decir, ¿se ha tenido en cuenta la accesibilidad?)
13
Ejemplos de técnicas para hallar respuesta a estas y otras cuestiones son: análisis de requisitos enfocado al usuario, construcción de perfiles de usuarios y pruebas de usabilidad.
14
Beneficios de la usabilidad
Entre los principales beneficios encontramos:2
Reducción de los costes de aprendizaje. Disminución de los costes de asistencia y ayuda al usuario. Optimización de los costes de diseño, rediseño y
mantenimiento. Aumento de la tasa de conversión de visitantes a clientes de un
sitio web. Mejora la imagen y el prestigio. Mejora la calidad de vida de los usuarios, ya que reduce su
estrés, incrementa la satisfacción y la productividad.
Todos estos beneficios implican una reducción y optimización general de los costes de producción, así como un aumento en la productividad. La usabilidad permite mayor rapidez en la realización de tareas y reduce las pérdidas de tiempo.
Un caso real, después de ser rediseñado prestándose especial atención a la usabilidad, el sitio web de IBM incrementó sus ventas en un 400% (InfoWorld, 1999).
Opiniones de Jakob Nielsen
Jakob Nielsen, considerado el padre de la Usabilidad, la definió como el atributo de calidad que mide lo fáciles de usar que son las interfaces web. Es decir un sitio web usable es aquél en el que los usuarios pueden interactuar de la forma más fácil, cómoda, segura e inteligentemente posible.
No sólo la tecnología y el aspecto gráfico son factores determinantes para hacer un sitio web llamativo. Es importante que cumpla con las siguientes características:
Entendible Novedoso Comprensible Inteligente Atractivo
Es decir la finalidad, en este caso de un sitio web, es lograr que el usuario encuentre lo que busca en el menor tiempo posible.
La Usabilidad de un sitio web está determinada por sus contenidos, entre más cercanos estén al usuario, mejor es la navegación por el mismo y más acertada será la experiencia al enfrentarse a la pantalla.
15
Lógicamente es imposible crear un sitio web ciento por ciento perfecto y en óptimas condiciones, pues no se puede agradar al mismo tiempo a millones de usuarios, sin embargo, los diseñadores y creadores deben tratar de mostrar todos los elementos de una manera clara y concisa, evitando el menor número posible de clics y de scroll.
En ocasiones los cibernautas se enfrentan a sitios web de altísima calidad y contenido, pero que presentan dificultades en su contenido. Por ejemplo, que los menús son de difícil ubicación, o que la herramienta de búsqueda no aparece en un lugar visible.
Aunque no hay estándares definidos para la Usabilidad, depende en cierta forma del espacio donde se desenvuelve el navegante. Pero lo importante en este caso es que el usuario no se deje consumir ni dominar por el sitio, es decir que sea él mismo que tome el control de la navegación por medio de un aprendizaje sencillo y el dominio de los elementos necesarios, para encontrar finalmente y en el menor tiempo posible, lo que busca.
Un buen sitio Web debe responder a las necesidades del usuario. En una comunidad virtual donde confluyen diferentes culturas e intereses, el contexto en el que se desenvuelven los miembros de un grupo virtual, o comunidad, no puede generar molestias en el momento de la navegación.
Un error recurrente de los creadores y diseñadores de sitios Web, es querer imponer sus decisiones y criterios sin pensar en el usuario. Por eso en el momento de diseñar el sitio e introducir contenidos, siendo está última labor de los editores, y no de los diseñadores, es importante pensar en el otro.
USABILIDAD EN SITIOS WEBEl diseño de sitios web deben seguir los siguientes principios:
1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.
2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.
3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con problemas de distinción de colores (aprox. un 15% del total).
4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es decir, con su aprendizaje previo.
16
5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de realizar para una persona que otras tareas con menos pasos, pero más complejas.
6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas
7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un mecanismo de interacción.
8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario, permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del tiempo pendiente para la finalización de la tarea.
9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser utilizados desde el primer momento.
10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso nadecuado de estas puede dificultar enormemente el aprendizaje.
11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca pierden su trabajo como consecuencia de un error.
12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe ser suficientemente grande.
13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más rápida.
14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por los usuarios, menús desplegables, indicaciones ocultas, etc.
Otros principios para el diseño de sitios web son:
a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos resultados máximos.
b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no emitir respuestas que meramente informen del error culpando al usuario.
c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo no deben existir enlaces rotos.
d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término peligroso, cuanto mayor sea el número de acciones que un usuario
17
pueda realizar, mayor es la probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el uso de un sitio web.
e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y no sabe donde comenzar a leer, existe sobrecarga de información.
18
f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al usuario el uso de un sitio.
g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan y comprendan lo que sucede en todos los pasos del proceso.
19
UNIDAD III
HTML
LECCION # 1
Sólo sigue las instrucciones, abre el Bloc de notas e inicia con esto...
<html></html>
Cada página debe comenzar y terminar con la etiqueta (tag) HTML. Una etiqueta se cierra agregando /. La mayoría de las etiquetas tienen una etiqueta de terminación. Con las etiquetas se dan instrucciones a los navegadores. Lo que se acaba de decir al navegador es "este es el inicio de un documento HTML" (<html>) y "este es el final del documento HTML" (</html>). Ahora necesitamos colocar información entre estas etiquetas.
Todo documento HTML requiere un par de "etiquetas de encabezado"
<html><head></head></html>
Por el momento contemplaremos la etiqueta "Título" (title) dentro de las "etiquetas de encabezado" (head)
<html><head><title></title> </head></html>
El resto del documento irá dentro de las etiquetas "BODY"
<html><head><title></title></head><body></body></html>
20
¡¡¡UPPPSSS!!! casi lo olvido, coloca un título para tu página
<html><head><title> Mi Primera Página</title>
</head><body></body></html>
Ahora guarda tu página, no como un archivo txt, sino como un documento html. Guárdala como pagina1.html. Si no sabes cómo hacer ésto, lee lo siguiente:
1. Selecciona "Guardar Como" en el bloc de notas
2. Selecciona el directorio en que guardarás el archivo. En la sección que dice "Guardar como archivos de tipo" selecciona "Todos los archivos (*.*)"
3. En la sección "Nombre de archivo" anota pagina1.html
4. Click en "GUARDAR" y......listo..........¡Has creado tu primera página!
Desafortunadamente, por ahora tu página no contiene nada, sólo se muestra el título de la misma en la parte superior del navegador. Así que la siguiente tarea es agregar algo en tu página.
La mejor forma de seguir las lecciones es abriendo una ventana adicional para que en ella visualices tu trabajo, mientras lees esta ventana y trabajas con el bloc de notas.
Para abrir una nueva ventana debes hacer lo siguiente:
1. Selecciona el menú "Archivo" (File) 2. Ahora "Nuevo" (New) 3. "Ventana" (Window), si usas Netscape es Navigator Window
Si estás usando Netscape e Internet Explorer, puedes abrirla más rápido si presionas CTRL + N.
21
LECCIÓN # 2
Para evitar escribir varias veces lo mismo, me enfocaré a la etiqueta "BODY" para incluir el contenido de la página.
<body></body>
Anota: "Lo que más se te antoje"
<body>Lo que más se te antoje
</body>
Cada vez que agregues algo nuevo, salva tu documento, después, da click en el botón "RELOAD" (Actualizar) del navegador. (Supongo que tienes abierto tu documento en la ventana adicional de la lección anterior). Si no se muestran tus cambios actuales, al momento de dar click en el botón RELOAD mantén presionada la tecla "SHIFT"
Lo primero que debes aprender es a cambiar los colores del fondo.
<body BGCOLOR="#FFFFFF">
Lo que más se te antoje
</body>
* BGCOLOR="#FFFFFF" (background="Blanco") es el código del color blanco.
Se puede especificar una imagen para colocarla como fondo en lugar de un color sólido. <body BACKGROUND="background4.jpg"> Lo que más se te antoje </body>
Esta es la imagen del fondo que he empleado
22
Para observar la forma en que se muestra la imagen usándola como fondo, haz click sobre la misma.
Es obvio que la imagen se coloca en forma de mosaico para cubrir toda la página. Pero si creas una imagen larga puedes obtener un efecto similar al que se muestra a continuación.....
<body BACKGROUND="fondo.jpg"> Lo que más se te antoje </body>
Esta es la imagen que uso para ese fondo.
(su tamaño real es 1200x15 pixeles, pero la reduje a 400x15 pixeles para que se vea en cualquier resolución de pantalla)
Regresemos a la pantalla blanca
<body BGCOLOR="#FFFFFF">
Lo que más se te antoje
</body>
Coloquemos algo en Negritas
<body bgcolor="#FFFFFF">
Lo que más se te <strong>antoje</strong>
</body>
Lo que se dice al navegador es: en <strong> comenzar con negritas, y en </strong> detener las negritas.
Lo mismo aplica para las itálicas
23
<body bgcolor="#FFFFFF">
Lo que mas <EM>se te</EM> antoje
</body>
.......y también para el subrayado
<body bgcolor="#FFFFFF">
<U>Lo que más</U> se te antoje
</body>
Regresemos nuevamente a pantalla blanca sin formato en palabras...
<body bgcolor="#FFFFFF"> (bgcolor puedes colocarlo en mayúsculas )
Lo que mas se te antoje
</body>
Se puede usar una combinación de etiquetas si se desea.
<body bgcolor="#FFFFFF">
o que más se te <i><strong>antoje</strong></i>
</body>
Este es un ejemplo de etiquetas combinadas. Si vas a usar etiquetas combinadas (lo que harás dentro de poco), entonces debes evitar confundir al navegador, las etiquetas deben ser combinadas no sobre puestas. Déjame explicarte lo que trato de decir....
<esto><aquello></esto> </aquello> Etiquetas sobre puestas......mal<esto><aquello></aquello></esto> Etiquetas combinadas.....bien
Puedes cambiar el tamaño de las letras.....es muy sencillo
24
Primero agrega las etiquetas de fuente
<body bgcolor="#FFFFFF">
Lo que más se te <FONT>antoje</FONT>
</body>
Después aplica el tamaño
<body bgcolor="#FFFFFF">
Lo que más se te <FONT SIZE=6>antoje</FONT></body>
Existen 7 tamaños de fuente
1 2 3 4 5 6 7 Dos aspectos importantes que deben tenerse en cuenta.....
1) una <ETIQUETA> le dice al navegador que haga algo. Un "ATRIBUTO" va dentro de la <ETIQUETA> y le indica al navegador "cómo" hacerlo.
2) El "VALOR POR DEFECTO" empleado por los navegadores se aplica cuando no se indica nada al respecto. Por ejemplo, el tamaño por defecto de las fuentes en los navegadores es 3. A menos que se establezca uno distinto seguirá siendo 3.
El valor por defecto en los navegadores (no todos) es Times New Roman 12 pt (lo cual representa el número 3 con el cógido de html) en color negro. Intenta colocar la fuente como ARIAL o COMIC SANS.....
<body bgcolor="#FFFFFF">
Lo que más se te <FONT FACE="ARIAL">antoje</FONT></body>
Sin embargo, no se recomienda emplear la etiqueta FACE debido a que se requiere tener la fuente en la pc para poder visualizarla. Me explico, si tú tienes la fuente "XYZ" en tu pc y la colocas en tu página web, la podrás ver sin problemas, pero cuando un visitante llega y no
25
tiene la fuente, no podrá ver ese tipo de letra que colocaste y será suplantada por la fuente por defecto de su sistema.
Se puede usar una combinación de fuentes que pueden resolver este problema, tal como en <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Quiero aprender HTML</FONT>. Para aquellos que no entienden qué ocurre aquí, tal como me pasó a mi, esto es lo que sucede ===> El navegador busca por ARIAL, si la encuentra la usa, si no la encuentra buscará por HELVETICA......si no la encuentra entonces buscará por LUCIDA SANS.....y si no la encuentra entonces usará la fuente por defecto.
Un tip sobre la sintaxis.....habrás notado que uso mayúsculas y minúsculas en las etiquetas, hasta este punto puedes usar lo que desees, ya sea <FONT>, <font> o <fONt>, pues representan lo mismo. Lo que no debes olvidar es colocar bien las comillas y los signos de mayor qué ">" y menor qué "<".
Se puede cambiar el color de la fuente....
<body bgcolor="#FFFFFF">
Lo que más se te <FONT COLOR="#FF0000">antoje</FONT></Body>
Se puede usar más de un ATRIBUTO en una <ETIQUETA>...
<body bgcolor="#FFFFFF#>
Lo que más se te <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">antoje</FONT></body>
Y más de una <ETIQUETA> a la misma sección...
<body bgcolor="#FFFFFF">
Lo que más se te <U> <EM><STRONG><font color="#FF0000" face="arial" size="7">antoje</font></STRONG></EM></U></body>
26
Los navegadores presentan una forma predeterminada para el color de la fuente, del link (vínculo), del link visitado y del link actual. Estos atributos predeterminados son...
Texto Negro
Link color Azul
Link visitado Púrpura
Link activo Rojo
Puedes modificar estos atributos predeterminados en la etiqueta <BODY>........
<BODY BGCOLOR="#000000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Lo que más se te antoje
</BODY>
Donde VLINK es Visited Link (link visitado) y ALINK es Active Link (Link activo o actual)
27
LECCION # 3
Ahora vas a conocer la forma en que trabaja o responde el navegador al código html que anotas. Vamos con ejemplos.....
<BODY BGCOLOR="#FFFFFF">Lo que más se te antoje
cualquier cosa!
</BODY>
<BODY BGCOLOR="#FFFFFF"> Ahora... ¿Qué es lo que ocurre con esto? </BODY>
El navegador no reconoce el formato. A menos que se lo indiques, presentará las letras y las palabras en forma normal. Si deseas comenzar con una nueva línea, debes usar la etiqueta respectiva.
<BODY BGCOLOR="#FFFFFF"> Ahora...<BR> ¿Qué es <BR> lo que<BR> ocurre<BR> con esto? </BODY>
<BR> indica "comenzar una nueva línea". <P> es similar a <BR>, pero da un salto de línea y ahí comienza el texto.
<BODY BGCOLOR="#FFFFFF">Ahora...<P>¿Qué es<P> lo que <P> ocurre<P>con esto? </BODY>
<P> es una de las pocas etiquetas que no requiren la de cierre. <P> no puede emplearse para obtener varias líneas en blanco, si anotas <P><P><P> no obtendrás 3 líneas en blanco, sólo proporcionará 1.
28
¿Cómo obtenerlas entonces? vamos a explicarlo. Observa lo siguiente...
<BODY BGCOLOR="#FFFFFF"> Lo que más se te antoje </BODY>
El navegador sólo reconoce 1 espacio, aunque parezca tonto, pero de esta forma permite tener mayor control en la apariencia del documento.
Para dar un espacio como el de la barra espaciadora del teclado, se debe utilizar ==> Inténtalo....
<BODY BGCOLOR="#FFFFFF"> Lo que más se te antoje</BODY>
El signo "&" indica que se inicia un caracter especial, mientras que el signo ";" indica que ahí termina, las letras en medio son una abreviación de lo que representa. Existen seis caracteres especiales que son muy usados. (siempre deben escribirse en minúsculas)
(espacio en blanco) < (símbolo menor qué "<") > (símbolo mayor qué ">") & (signo "&") " (comilla ") ­ (guión )
No se deben utilizar todos al mismo tiempo, pero con un poco de práctica se sabrá cuándo deben ser utilizados. Sin embargo, la mayoría de los programas para hacer páginas web del tipo "WYSIWYG" ("Lo que ves es lo que obtienes") no requieren que les indiques código html --mi favorito es Composer, que viene incluído con Netscape Communicator—
Si no consigues colocarlos bien, no te preocupes, ya que "echando a perder se aprende" --eso pregúntenlo a "Fatty" (mi pc) que ha recibido alrededor de 9 formateadas de disco duro—
Regresemos a nuestro asunto... si se presiona la tecla "ENTER" (RETURN) del teclado al tiempo que se está escribiendo, el navegador lo interpretará como un espacio. Veamos un ejemplo más....
<BODY BGCOLOR="#FFFFFF"> Lo que más <BR>se te<BR>antoje<BR>
29
cualquier<BR>cosa!</BODY>
Ahora anota lo siguiente.....
<BODY BGCOLOR="#FFFFFF"> <CENTER>Lo que más se te antoje </CENTER> </BODY>
Todo lo que se encuentre dentro de las etiquetas <CENTER> estará centrado en la pantalla.
¡HEY! casi olvido algo....para obtener varias líneas en blanco se debe crear un espacio en blanco " " y después colocar el corte de línea "<BR>"...
<BODY BGCOLOR="#FFFFFF"> Lo que más se te<BR> <BR> <BR> <BR> <BR> <BR>antoje</BODY>
Ahora vamos con la inclusión de imágenes en la página. Usaremos la siguiente (vieja página inicio de mi sitio web). Si quieres guardarla hazlo como anteriormente......click con el botón derecho y "Save Image As..." ("Guardar Imagen Como...")
Se especifica una imagen con la etiqueta <IMG> (imagen).
<BODY BGCOLOR="#FFFFFF"> <IMG></BODY>
Ahora se coloca la ruta y tamaño de la imagen.
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="lecci3a.jpg" WIDTH=150 HEIGHT=110></BODY>
30
Ten presente que la ruta no especifica únicamente la imagen, sino también dónde se ubica. La ruta de arriba, "lecci3a.jpg", indica que el navegador buscará la imagen llamada "lecci3a.jpg" en la misma carpeta (o directorio) en que se encuentra el archivo html.
Otra forma de especificar la ruta es anotando el URL completo. Por ejemplo: SRC="http://members.tripod.com/i_meil/imagenes/imeil.gif"
Supongo que te has de estar preguntando la ventaja de usar URL's relativos (parciales) contra los URL's absolutos (completos). La respuesta es sencilla..... porque tus links funcionarán en cualquier servidor o computadora que los coloques, las páginas cargarán más rápido y te evitarás el tener que editar para modificar todos los URL's o links de las páginas.
Algo muy importante que debes conocer de las imágenes y su tamaño. Intenta esto....
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="lecci3a.jpg"> </BODY>
Como puedes notar, el navegador establece el tamaño de la imagen en forma automática. ¿Porqué preocuparse entonces por las dimensiones? Sin caer en detalles.....porque ayuda al navegador a cargar las imágenes en forma más rápida.
¿Cuál es la parte importante? Checa...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="lecci3a.jpg" WIDTH=200 HEIGHT=68>
</BODY>
31
<BODY BGCOLOR="#FFFFFF">
IMG SRC="lecci3a.jpg" WIDTH=20 HEIGHT=100></BODY>
Puedes especificar las dimensiones que desees. ¿Sigues aferrado a cuál es la parte importante? Ok, observa este pequeño punto rojo-><-. Su tamaño es de 2x2 pixeles. Ahora fijate lo que se le puede hacer al modificar sus dimensiones...
<BODY BGCOLOR="#FFFFFF"> IMG SRC="punto.gif" WIDTH=”510” HEIGHT=”1”><P><IMG SRC="punto.gif" WIDTH=510 HEIGHT=2><P><IMG SRC="punto.gif" WIDTH=510 HEIGHT=5><P><CENTER><IMG SRC="punto.gif" WIDTH=2 HEIGHT=200></CENTER></BODY>
32
LECCION # 4
Esta lección tratará sobre los links (vínculos).
Es muy sencillo. Hagámosle un link a "Open Directory Project". Inicia con...
<BODY BGCOLOR="#FFFFFF">
Open Directory Project
</BODY>
Coloca un par de etiquetas ancla.
<BODY BGCOLOR="#FFFFFF"> Visita <A>Open Directory Project</A> </BODY>
Agrega el URL y es todo! "URL" significa Universal Resource Locator (en español varia la traducción). Para que no te confundas con el nombre técnico dado a URL, sólo recuerda que es una dirección.
<BODY BGCOLOR="#FFFFFF"> Visita <A HREF="http://dmoz.org/" >Open Directory Projet</A></BODY>
Un link más.
<BODY BGCOLOR="#FFFFFF"> ¡Visita Netscape!</BODY>
<BODY BGCOLOR="#FFFFFF"> ¡Visita <A HREF="http://home.netscape.com/">Netscape!</A></BODY>
Un link a un e-mail es similar, cambiando la URL por una dirección de correo.
<BODY BGCOLOR="#FFFFFF"> ¡Envíame un <A HREF="mailto:[email protected]">Mensaje!</A></BODY>
33
Se puede usar una imagen como link. En el ejemplo de "¡Visita Netscape!" substituye la palabra "Netscape!" por una etiqueta <IMG>. <BODY BGCOLOR="#FFFFFF"> ¡Visita <A HREF="http://home.netscape.com/"> <IMG SRC="nav30but.gif" WIDTH=82 HEIGHT=68></A></BODY>
Visita
Algo que origina muchas interrogantes es la forma en que se puede quitar el borde azul que rodea una imagen cuando se usa como link. Con esto...
<BODY BGCOLOR="#FFFFFF"> ¡Visita <A HREF="http://home.netscape.com/"><IMG SRC="nav30but.gif" WIDTH=”82” HEIGHT=”68” BORDER=”0”></A> </BODY>
Los links dentro de las mismas páginas son un poco más difíciles de explicar, pero haré mi mejor esfuerzo para no confundirte.
Primero localiza el lugar al que quieres que se dirijan al dar click sobre tu link. Selecciona una palabra y rodéala con las etiquetas ancla "<A>".
<A> Agrega</A> el URL y es todo!
Ahora asigna un nombre...
<A NAME="arriba" >Agrega</A> el URL y es todo!
Lo que has hecho es marcar ese lugar para poderle hacer referencia...
Ahora establece el link...
¡Aquí hay algo.... <A>COOL!</A>
Añade el documento de referencia...
¡Aquí hay algo... <A HREF="leccion4.html">COOL!</A>
Y, por último, agrega el ancla del NOMBRE (NAME)...
34
¡Aquí hay algo... <A HREF="leccion4.html#arriba">COOL!</A>
¡Aquí hay algo COOL!
Es hora de que vayas por más agua, refresco o algo de comer.........la lección 5 no se irá, no te preocupes
35
LECCION # 5
Ahora vamos a tratar un poco lo referente a la resolución de las pantallas. La pantalla que empleo tiene una resolución de 800x600 píxeles, algunos la usan en 640x480 píxeles, otros más en 1024x768 y muy pocos con resoluciones mayores (su vista ha de ser super buena!!). La resolución de pantalla influye mucho con la forma en que los visitantes a tu sitio web la ven.
Te sugiero probar tus páginas con distintas resoluciones para que el diseño y estructura que te tomaron mucho tiempo no se vea distorsionado con otras resoluciones. La mayoría de los monitores vienen con una aplicación (la mayor de las veces se encuentra en la barra de tareas) que permite cambiar rápidamente de una a otra resolución.
Ahora veamos unas cuantas herramientas de formato que se encuentran disponibles. La primera es <BLOCKQUOTE>. Esta etiqueta centra el texto en la página, reduciendo o ampliando los márgenes a su izquierda y derecha.
<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>El Web Marketing, no es otra cosa más que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayoría de las herramientas que ofrece internet para realizar la promoción de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia.</BLOCKQUOTE></BODY>
Otra utilidad son las que representan las "LISTAS ", que pueden ser ORDENADAS" y "DESORDENADAS".
Primero haremos una lista DESORDENADA. Inicia con...
<BODY BGCOLOR="#FFFFFF"> Lo que quiero para el día de mi graduación </BODY>
Agrega un par de etiquetas de lista desordenada...
<BODY BGCOLOR="#FFFFFF"> Lo que quiero para el día de mi graduación
36
<UL></UL> </BODY>
Una lista de cosas...
<BODY BGCOLOR="#FFFFFF"> Lo que quiero para el día de mi graduación <UL><LI>una Cherokee 4x4 negra </UL></BODY>
Agrega más...
<BODY BGCOLOR="#FFFFFF"> Lo que quiero para el día de mi graduación<UL><LI>una Cherokee 4x4 negra <LI>una pc portátil a 400 Mhz. <LI>una batería/guitarra <LI>un jetski <LI>a Thalia </UL></BODY>
Para hacer la lista ordenada cambia la etiqueta <UL> por <OL>...
<BODY BGCOLOR="#FFFFFF"> Lo que quiero para el día de mi graduación<OL> <LI>una Cherokee 4x4 negra <LI>una pc portátil super veloz <LI>una batería/guitarra <LI>un jetski <LI>a Thalia </OL></BODY>
Otro tipo de lista es la de definición... Web Marketing El Web Marketing, no es otra cosa más que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayoría de las herramientas que ofrece internet para realizar la promoción de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia.
37
Inicia con...
<BODY BGCOLOR="#FFFFFF"> <DL></DL></BODY>
Agrega el título de la definición...
<BODY BGCOLOR="#FFFFFF"> <DL><DT> Web Marketing </DL></BODY>
La definición...
<BODY BGCOLOR="#FFFFFF"> <DL><DT>Web Marketing <DD>El Web Marketing, no es otra cosa más que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayoría de las herramientas que ofrece internet para realizar la promoción de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia.</DL></BODY>
Por último, pon en negrita el título de la definición...
<BODY BGCOLOR="#FFFFFF"> <DL><DT><strong>Web Marketing </strong> <DD>El Web Marketing, no es otra cosa más que la Mercadotecnia aplicada en internet, con la finalidad de que su sitio web y sus productos o servicios lleguen al mercado meta definido con anterioridad y empleando la gran mayoría de las herramientas que ofrece internet para realizar la promoción de su sitio web. Se basa en conocimientos tanto de sistemas como de mercadotecnia.</DL></BODY>
Una etiqueta que se utiliza demasiado es la de la "Línea Horizontal" (Horizontal Rule) "<HR>"...
<BODY BGCOLOR="#FFFFFF">
38
<HR></BODY>
Aquí hay algunas opciones para la línea horizontal...
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=20%> <HR WIDTH=50%> <HR WIDTH=100%> <HR WIDTH=20> <HR WIDTH=50> <HR WIDTH=100> </BODY>
Y de esta forma se alinea dentro de la página...
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% ALIGN=LEFT> <HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% ALIGN=CENTER> </BODY>
Se puede controlar su grosor...
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1> <HR WIDTH=60% SIZE=3> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15> </BODY>
...y presentarla con un color sólido...
<BODY BGCOLOR="#FFFFFF"> <HR WIDTH=60% SIZE=1 NOSHADE> <HR WIDTH=60% SIZE=3 NOSHADE> <HR WIDTH=60% SIZE=8 NOSHADE> <HR WIDTH=60% SIZE=15 NOSHADE> </BODY>
La última etiqueta a tratar es la de comentarios...
<BODY BGCOLOR="#FFFFFF">
<!--Este es un comentario--> Este no lo es<P>
Un comentario puede colocarse donde sea dentro de la página y es ignorado por el navegador todo lo que se encuentre dentro de su etiqueta. Se pueden colocar mensajes ocultos, como personales <!--
39
Hola, si deseas conocerme escribeme--> o mensajes de ayuda a quienes observan el código empleado <!--Copia algo de mi y eres historia!--> </BODY>
El comentario debe iniciar con "<!--" y terminar con "-->" Si colocas etiquetas html dentro de los comentarios, el navegador también las ignorará.
40
UNIDAD # 4
DREAMWEAVER
Introducción al uso del programa
Comenzar a utilizar Dreamweaver es tan fácil como abrir un documento HTML o crear uno nuevo. Pero para sacar el máximo provecho de Dreamweaver, es conveniente conocer cuáles son los conceptos que subyacen al espacio de trabajo de Dreamweaver y cómo seleccionar las opciones que mejor se adapten a su forma de trabajar.
El espacio de trabajo de Dreamweaver
El espacio de trabajo de Dreamweaver es flexible, lo que le permite adaptarse adistintas formas de trabajar y a diversos niveles de experiencia. Existen una serie de componentes del espacio de trabajo de Dreamweaver que utilizará constantemente:
La ventana de documento muestra el documento actual aproximadamente igual a como aparecerá en un explorador de la Web.
El lanzador incluye botones para abrir y cerrar los inspectores y las paletas utilizados con mayor frecuencia. Los iconos del lanzador se incluyen también en el minilanzador, situado en la parte inferior de la ventana de documento, lo que facilita el acceso a éstos cuando el lanzador está cerrado.
La paleta de objetos contiene botones para la creación de diversos tipos de objetos, como imágenes, tablas, capas, etc.
El inspector de propiedades muestra las propiedades del objeto seleccionado.
Los menús de acceso directo permiten acceder rápidamente a comandos útiles pertinentes para la selección o área actual.
Las paletas flotantes acoplables permiten combinar ventanas, inspectores y paletas flotantes en una o varias ventanas con fichas de selección.
La ventana de documento
La ventana de documento muestra el documento actual aproximadamente igual acomo aparecerá en un explorador de la Web. La barra de título de la ventana de documento muestra el título de la página y, entre
41
paréntesis, el nombre del archivo y un asterisco si el archivo contiene cambios no guardados.
Las etiquetas que controlan el texto u objeto seleccionado aparece en el selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento. Haga clic en estas etiquetas para seleccionar una etiqueta HTML concreta y su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento.
A la izquierda del minilanzador aparecen el tamaño de la página y el tiempo dedescarga estimados, incluidos los elementos vinculados, como las imágenes y las películas Shockwave.
El conjunto de botones situado en la parte inferior derecha de la ventana de documento se denomina minilanzador, ya que se trata de una versión reducida del lanzador. Los botones del minilanzador permiten abrir la ventana Sitio, la paleta e bibliotecas, la paleta de estilos, el inspector de comportamientos, el inspector de línea de tiempo y el inspector de HTML.
La ventana emergente Tamaño de ventana permite cambiar el tamaño de la entana de documento para que adopte dimensiones predeterminadas o personalizadas.
Selector de etiquetas tamaño de la Minilanzador Etiqueta
Usar el inspector de propiedades
El inspector de propiedades muestra las propiedades del objeto seleccionado.
Cualquier cambio que realice en una propiedad se refleja inmediatamente en la ventana de documento.
Las propiedades que aparecen dependen del objeto seleccionado. Para obtener información sobre opciones concretas, seleccione un objeto y haga clic en el icono Ayuda, situado en la esquina superior derecha del inspector de propiedades.
42
El inspector de propiedades muestra inicialmente las propiedades utilizadas conmayor frecuencia. Haga clic en la flecha de ampliación, situada en el ángulo inferior derecho, para ver todas las propiedades.
Usar el lanzador
El lanzador incluye botones que permiten abrir y cerrar diversos inspectores, paletas y ventanas.
Usar la paleta de objetos
La paleta de objetos contiene botones para la inserción de diversos tipos deobjetos, como tablas, capas e imágenes. Haga clic en cualquier botón o arrastre el objeto hasta la ventana de documento para crear el objeto especificado.
Dreamweaver cuenta con cuatro paneles en la paleta de objetos: Común, Formularios, Head e Invisibles. Utilice el menú emergente para cambiar de panel.Puede modificar cualquier objeto de la paleta o crear sus propios objetos. Cambiar la paleta de objetos y el menú Insertar.
El panel Común contiene los objetos más utilizados, como las imágenes, las tablas y las capas.
El panel Formularios contiene botones que permiten crear formularios y elementos de formularios.
El panel Head contiene objetos que permiten agregar diversos elementos HEAD, como las etiquetas META, TITLE y BASE .
El panel Invisibles contiene botones que permiten crear objetos no visibles en la ventana de documento, como los puntos de fijación con nombre. Elija Ver > Elementos invisibles para ver los iconos que marcan
la posición de estos objetos. Haga clic en los iconos para seleccionar los objetos y cambiar sus propiedades.
Varios de los parámetros de preferencias generales afectan a la paleta de objetos. Para cambiar estas preferencias, elija Edición > Preferencias y seleccione General.
43
Cuando inserte objetos tales como tablas, secuencias de comandos y elementos HEAD aparecerá un cuadro de diálogo solicitando información adicional. Puede suprimir estos cuadros de diálogo desactivando la opción Mostrar diálogo al insertar objetos. Utilice el inspector de propiedades para cambiar las propiedades de los objetos después de insertarlos.
Las preferencias de paleta de objetos permiten visualizar el contenido de la paleta de objetos como Sólo texto, Sólo iconos o Iconos y texto.
Menús de acceso directo
Dreamweaver emplea de forma extensiva los menús de acceso directo, ya que proporcionan un método para acceder rápidamente a los comandos y las propiedades más útiles relacionados con la ventana o el objeto con el que esté trabajando. En los menús de acceso directo sólo aparecen los comandos pertinentes para la selección actual.
Para utilizar los menús de acceso directo:
1. Abra el menú de acceso directo. En Windows, haga clic con el botón derecho del ratón en
el objeto o la ventana. En Macintosh, pulse Control y haga clic en el objeto o la
ventana.2. Seleccione el comando del menú de acceso directo y suelte el
botón del ratón.
Paletas flotantes acoplables
La mayoría de las paletas e inspectores de Dreamweaver pueden combinarse en
44
una única paleta con fichas de selección. Esto facilita el acceso a la información sin saturar el espacio de trabajo. (El lanzador, el inspector de propiedades, la ventana Sitio y el inspector de HTML no pueden acoplarse de esta forma.)
Para combinar dos o más paletas y crear una paleta con fichas de selección:
1. Arrastre una paleta flotante y colóquela sobre otra paleta flotante. Cuando vea aparecer un borde resaltado en la paleta de destino, suelte el ratón.
2. Haga clic en cualquiera de las fichas de la ventana para traerla a primer plano.
Para evitar que una paleta se una a la paleta con fichas de selección:
Pulse la tecla Mayús mientras arrastra la paleta.
Para eliminar una ventana de la paleta con fichas de selección:
Arrastre esta ficha hacia el exterior de la ventana.
Introducción a la creación de documentos
Los documentos son las páginas que los usuarios ven cuando visitan un sitio Web. Los documentos contienen texto e imágenes, además de otros elementos más sofisticados, como sonido, animación y vínculos con otros documentos.
Conforme cree y trabaje con los documentos, Dreamweaver generaráautomáticamente el código HTML subyacente. Use el inspector de HTML para examinar o editar el código fuente HTML. Los documentos se crean en Dreamweaver mediante páginas HTML en blanco o mediante plantillas. También puede abrir y modificar documentos HTML creados en otras aplicaciones.
Cuando edite un documento, podrá colocar el contenido en una página usando guías visuales, como las cuadrículas y las reglas, o la función de ajuste. Las imágenes de rastreo permiten imitar diseños de página.
El texto se agrega a los documentos escribiendo en la ventana de documento o
45
pegando texto procedente de otros orígenes. Las imágenes, las reglas horizontales y otros objetos se agregan utilizando la paleta de objetos o los comandos del menúInsertar.
Conforme agregue contenido, podrá seleccionar y modificar objetos directamente en la ventana de documento. En algunos casos, es posible que tenga que seleccionar los marcadores que representan a los elementos de la página que no están visibles en la ventana de documento.
Use el cuadro de diálogo Propiedades de la página para configurar un documento y definir los elementos básicos de la página. El título de la página identifica al documento ante el usuario. Las imágenes de fondo, los colores de fondo y los colores del texto y los vínculos personalizan la página y permiten distinguir el texto normal del hipertexto.
Al elegir los colores, puede seleccionar un color del escritorio o la paleta de colores y especificar que desea limitar la selección a los colores seguros para la Web o que desea hacer coincidir los colores de forma exacta.
Dreamweaver proporciona una forma sencilla de ver y editar el contenido de lasección HEAD (encabezado) sin necesidad de editar directamente el código fuente HTML.
Crear documentos HTML nuevos
Puede crear documentos HTML nuevos y vacíos en Dreamweaver o basar undocumento nuevo en una plantilla. También puede abrir un documento HTML existente independientemente de cómo se haya creado.
Generalmente, los documentos HTML se crean para un sitio Web concreto.
Para abrir archivos HTML existentes:
Seleccione Archivo > Abrir.
Para crear un documento HTML vacío:
Seleccione Archivo > Nuevo.
46
Si abre el inspector de HTML (seleccione Ventana HTML, HEAD y BODY para que pueda comenzar a trabajar. Mientras escriba en la ventana de documento o inserte objetos tales como tablas e imágenes, podrá dejar abierto el inspector de HTML y observar cómo se crea el código fuente HTML.
Para crear un nuevo documento basado en una plantilla:
1. Elija Archivo > Nueva desde plantilla. Aparecerá un cuadro de diálogo con las plantillas disponibles para el sitio actual. Cuando utilice una plantilla, algunas partes del documento quedarán bloqueadas para que no puedan modificarse. Esto garantiza la coherencia cuando utilice una plantilla para múltiples documentos de un mismo sitio.
2. Seleccione una plantilla y haga clic en Seleccionar. Para modificar las partes editables de la plantilla, seleccione el contenido del marcador de posición y escriba para reemplazarlo. Las partes no editables de la plantilla se identifican mediante un color de resaltado.
Usar guías visuales en el proceso de diseño
Dreamweaver cuenta con numerosas funciones para ayudarle a diseñardocumentos y predecir la apariencia final que tendrán en los exploradores. Puede:
Ajustar instantáneamente el tamaño deseado para la ventana de documento y comprobar si caben los elementos en la página.
Usar reglas que sirvan de pista visual para la colocación y el cambio de tamaño de las capas o las tablas.
Usar una imagen de rastreo como fondo de la página para ayudarle a imitar un diseño creado en una aplicación de edición de ilustraciones o imágenes.
Usar la cuadrícula para lograr una mayor precisión en la colocación de las capas. Las marcas de cuadrícula en la página le ayudan a alinear las capas y, cuando está activada la función de ajuste, a alinear las capas automáticamente con la cuadrícula al crearlas o moverlas. (Los demás objetos, como las tablas, las imágenes y los párrafos, no se ajustan a la cuadrícula.)
47
Cambiar el tamaño de la ventana de documento
Las dimensiones actuales (en píxeles) de la ventana de documento, así como varios de los tamaños de monitores más comunes, aparecen en el menú emergente Tamaño de ventana de la barra de estado de la ventana. Para lograr un diseño de página que tenga una apariencia adecuada en una resolución concreta (o en varias resoluciones distintas), puede ajustar la ventana de documento con cualquiera de los tamaños enumerados en el menú emergente.
Para cambiar los valores que aparecen en el menú emergente Tamaño de ventana:
1. Elija Edición > Preferencias y seleccione Barra de estado.2. Haga clic en cualquiera de los valores de Ancho o Alto de la lista
de tamaños de ventana y escriba un nuevo valor. Para conseguir que la ventana de documento se ajuste sólo a un ancho específico (sin modificar el alto), seleccione un valor de altura y elimínelo.
3. Haga clic en el campo Descripción para introducir el texto descriptivo sobre un tamaño específico. Por ejemplo, puede escribir “SVGA” o “average PC” junto a la entrada para un monitor de 800 x 600 píxeles, y "Mac 17 pulg." junto a la entrada para un monitor de 832 x 624 píxeles.
Para agregar un valor al menú emergente Tamaño de ventana:
1. Elija Edición > Preferencias > Barra de estado.2. Haga clic en el último valor de la lista y pulse Tab tres veces
para crear una nueva fila.3. Introduzca valores para Ancho, Alto y Descripción.
Usar una imagen de rastreo
Use una imagen de rastreo como guía para la recreación del diseño de una página diseñada en una aplicación gráfica. Una imagen de rastreo es una imagen JPG,
GIF o PNG que se sitúa en el fondo de la ventana de documento. Puede ocultar la imagen, configurar su opacidad y cambiar su posición.
La imagen de rastreo sólo se encuentra visible en Dreamweaver. Ésta nunca puede verse en la página desde un explorador. Cuando está
48
visible la imagen de rastreo, la imagen y el color de fondo no están visibles en la ventana de documento; noobstante, se encontrarán visibles cuando la página se muestre en un explorador.
Para colocar una imagen de rastreo en la ventana de documento:
1. Seleccione Ver > Imagen de rastreo > Cargar.2. En el cuadro de diálogo que aparece a continuación, seleccione
una imagen y haga clic en Aceptar.3. Aparecerá el cuadro de diálogo Propiedades de la página.
Especifique la transparencia para la imagen arrastrando el control deslizante Transparencia Imagen También puede elegir una imagen de rastreo o cambiar la transparencia de la imagen de rastreo actual en cualquier momento desde el cuadro de diálogo Propiedades de la página seleccionando Modificar > Propiedades de la página.
Para mostrar u ocultar la imagen de rastreo:
Seleccione Ver > Imagen de rastreo > Mostrar.
Cuando esté visible la imagen de rastreo, la imagen y el color de fondo no estarán visibles.
Para cambiar la posición de una imagen de rastreo, lleve a cabo una de estas operaciones:
Para especificar la posición de la imagen de rastreo, elija Ver > Imagen de rastreo > Ajustar posición y después introduzca los valores de coordenadas X e Y.
Para mover la imagen de píxel en píxel, utilice las teclas de flecha.
Para mover la imagen de 5 en 5 píxeles, pulse Mayús y las teclas de flecha.
Para mover de nuevo la imagen de rastreo hasta la esquina superior izquierda de la ventana de documento (0,0), elija Ver > Imagen de rastreo > Restablecer posición.
Agregar texto e insertar objetos
49
Agregue contenido a sus páginas escribiendo o pegando texto e insertando objetos tales como imágenes, tablas y capas.
Para agregar texto al documento, lleve a cabo una de las siguientes operaciones:
Escriba texto directamente en la ventana de documento. Copie texto de otra aplicación, coloque el cursor en la ventana
de documento y elija Edición > Pegar como texto. El formato de texto aplicado en la otra aplicación no se conserva, pero sí los saltos de línea.
Para insertar tablas, imágenes y otros objetos en el documento, lleve a cabo una de las siguientes operaciones:
Use los comandos del menú Insertar para insertar los objetos especificados en la posición actual del cursor en el documento.
Elija Ventana > Objetos para abrir la paleta de objetos. Localice el tipo de objeto que desea y haga clic en el objeto o arrástrelo para insertarlo en la ventana de documento.
Para la mayoría de los objetos, aparece un cuadro de diálogo en el que se le solicita que seleccione opciones o el archivo deseado. Para ocultar el cuadro de diálogo, elija Edición > Preferencias, seleccione General y anule la selección de la opción Mostrar diálogo al insertar objetos.
Seleccionar elementos en la ventana de documento
Normalmente, para seleccionar un elemento sólo es necesario hacer clic en él. Si un elemento es invisible, es posible que tenga que convertirlo en visible para poder seleccionarlo.Utilice estas técnicas para seleccionar elementos:
Para seleccionar un elemento de la ventana de documento, arrastre el puntero hasta el elemento y haga clic en él.
Para seleccionar un elemento invisible, elija Ver > Elementos invisibles y haga clic en el marcador del elemento.
50
Algunos objetos aparecen en un lugar de la página distinto a aquél en el que se ha insertado el código. Por ejemplo, una capa puede situarse en cualquier lugar de la página, pero el código que define a la capa se encuentra en un lugar fijo.
Dreamweaver muestra marcadores para indicar la posición del código correspondiente a los elementos invisibles.
Para ver el código HTML asociado al texto u objeto seleccionado, elija Ventana > HTML para abrir el inspector de HTML.
Para seleccionar código HTML sin abrir el inspector de HTML, haga clic en una etiqueta del selector de etiquetas, situado en la parte inferior izquierda de la ventana de documento. El selector de etiquetas siempre muestra las etiquetas que controlan la selección o la posición actual del cursor. Por ejemplo, si ha definido un vínculo para una imagen, el código HTML tendrá una apariencia semejante a ésta:
<a href=”http://www.macromedia.com”><img src="agraphic.gif" ></a>Al hacer clic en la imagen de la ventana de documento, se selecciona <imgsrc="agraphic.gif">.
Para seleccionar el vínculo, haga clic en la imagen de la ventana de documentoy luego haga clic en la <a> que aparece en el selector de etiquetas.
51