HTML Docentes - Nivel b谩sico Presentaci贸n general
Presentación del curso
• Objetivo del curso: Adquirir las nociones básicas de HTML, etiquetado y manejo de Dreamweaver . • Metodología: Participativa. • Duración: 8 horas, distribuidas en 4 módulos de 2 horas. • Evaluación: Ejercicios prácticos para comprobar que se domina la materia.
2
Contenido del curso
• Módulo 1. HTML: utilidades - Qué es el HTML - Panorámica del lenguaje - Utilidades • Módulo 2. Etiquetado básico: tagging - Etiquetas y atributos HTML - Fundamentos de CSS
3
Contenido del curso
• Módulo 3. Dreamweaver - Introducción a Dreamweaver - Crear páginas web con Dreamweaver - Crear un sitio web. Trabajar vía FTP con servidor remoto
• Módulo 4. Repaso - HTML: utilidades - Etiquetado básico: tagging - Dreamweaver 4
M贸dulo 1: HTML: utilidades
5
Módulo 1: HTML: utilidades
• Objetivos — Explicar qué es, en líneas generales, el HTML. — Estudiar de forma básica este lenguaje. — Utilizar las aplicaciones didácticas que puede tener el HTML. • Contenidos — Qué es el HTML. — Panorámica del lenguaje. — Utilidades.
6
Qué es el HTML • El lenguaje HTML se utiliza para crear aquellas páginas web cuyos archivos suelen tener la extensión .html o .htm. • En primer lugar, HTML está enteramente compuesto por etiquetas <...>. La mayoría son marcas que se colocan alrededor de un texto para diferenciarlo del resto y darle un formato específico. • Asimismo, hay textos que enlazan con otras páginas. Estos textos, llamados enlaces y encerrados por la etiqueta <a> … </a>, se denominan “hipertexto”. • Existen etiquetas que no rodean un texto y que, por ejemplo, sirven para cambiar de línea o mostrar una imagen. • La mayoría de las etiquetas HTML tienen atributos, es decir, parámetros que añaden información y que la mayoría de las veces son necesarios. 7
Qué es el HTML
• El navegador, por medio del proveedor de Internet que se tenga contratado, realiza una llamada URL a un servidor −cuya dirección física en la red se denomina DNS− para preguntarle a qué otra dirección física se corresponde esa URL que se ha introducido. • El servidor DNS le comunica al navegador esa dirección. • Una vez que el navegador reconoce la dirección, contacta con ella. • Por último, el servidor donde está alojada esa página le suministra al navegador su código fuente HTML para que éste pueda mostrarla (en Internet Explorer, accediendo a Ver > Código fuente se puede leer el código de cualquier página). 8
Qué es el HTML
• Existen muchas compañías que alojan sitios web, algunas son gratuitas, como Geocities, y otras de pago, que poseen servidores donde se suben vía FTP los archivos que elaboramos localmente. • Cabe destacar que la mayoría de las páginas de inicio se llaman “index.html” o “index.htm”, ya que todos los servidores entienden que dicho archivo será, en principio, aquel que se muestre cuando el usuario teclee en su navegador la URL del sitio. • Aunque existen estándares web que se han ido renovando con el tiempo, es cada navegador el que al final interpreta el código HTML que le suministra el servidor y lo representa visualmente a su manera. 9
Panorámica del lenguaje • Hay unas etiquetas que siempre van a estar presentes y que encierran al resto. Toda página HTML se abre con la etiqueta <html> y se cierra con </html>. • Tras la etiqueta <html> se suele encontrar <head> … </head>. Estas etiquetas encierran una gran variedad de etiquetas no visuales, entre las que se encuentran las que sirven para dar título a la página o las que la vinculan a otros archivos CSS o de lenguaje Javascript. • Tras la etiqueta </head>, siempre aparece <body> … </body>, etiqueta fundamental que encierra el contenido de la página marcado por las etiquetas visuales de HTML. • Si se escribe algo en una nueva línea y no lo delimitamos por una etiqueta que provoque ese salto, el texto aparecerá a continuación del anterior. Lo mismo ocurre con los espacios: por muchos que pongamos, el navegador los interpretará como uno solo. 10
Panorámica del lenguaje
• Hay dos conceptos en la creación de páginas web que no guardan relación entre sí: la estructura (cómo se organizan espacial y funcionalmente los bloques de información de la página), y el diseño gráfico (cómo se presenta visualmente esa estructura en lo que respecta a decoración, colores, márgenes y bordes, etc.) • Esto proporciona claridad en la lectura del código. • Se puede modificar, o bien la estructura, o bien la presentación de manera independiente. • Si se tiene en un archivo CSS separado todo lo relacionado con la presentación del contenido, se podrá tener el control sobre el diseño del mismo centralizado en ese único archivo.
11
Panorámica del lenguaje
• El CSS “juega” con la herencia, de modo que el estilo que se aplique a una etiqueta se extenderá a todo su contenido, incluyendo aquel texto que incluso esté rodeado por otras etiquetas. • El CSS admite comentarios al igual que el HTML. Los comentarios sirven para dejar escritas en el código anotaciones sobre el mismo, que pueden resultar necesarias en un futuro para el creador de la página o para otro diseñador que quiera modificar dicho código. • Un estilo aplicado directamente a una etiqueta HTML sobrescribirá un estilo de página, y este sobrescribirá un estilo contenido en un archivo CSS.
12
Panorámica del lenguaje
Los elementos básicos de la estructura de una página web son: • Cabecera. Contiene la información, en forma de título y/o logo, acerca de a quién pertenece o sobre qué es la página. •
Bloque de enlaces. Es una lista vertical u horizontal de los apartados del sitio. A veces hay dos, cuando la naturaleza de los enlaces es distinta (complementaria) o también cuando, por alguna razón, se quieren repetir los enlaces más importantes.
•
Cuerpo. Contiene, según cada página, la información en sí. Por ejemplo, en un periódico en línea, el cuerpo contiene las noticias. En un blog, las entradas del mismo. En una página corporativa, las últimas noticias acerca de la compañía. 13
Panor谩mica del lenguaje
Haz clic en la imagen para ver la animaci贸n 14
Panor谩mica del lenguaje
Haz clic en la imagen para ver la animaci贸n 15
Utilidades
• Un blog, o bitácora en castellano, es un sitio web donde el creador (o grupo de creadores) escribe periódicamente sobre cualquier tema. • Las entradas, llamadas habitualmente posts, se muestran por orden cronológico decreciente, para que las personas que visitan el sitio vean primero la información más reciente. • El proceso cognitivo de los alumnos se ve potenciado por su implicación. Hay muchas maneras de implicarles en la creación y mantenimiento de un blog. • Lo más importante es que se va a fomentar su propia responsabilidad en el proceso educativo, impulsándoles a encontrar contenidos, exponer reflexiones, o discutir sobre los posts que se publiquen.
16
Utilidades • Existen muchos foros como complemento a un sitio web, que invitan a los usuarios a discutir o compartir información relevante a la temática del sitio. • Las discusiones suelen ser moderadas por un coordinador o dinamizador, quien generalmente introduce el tema, formula la primera pregunta, estimula y guía durante la discusión, etc. • Se puede pensar en un foro de asignatura, creado por el propio docente y que sirva como espacio de debate en torno a cualquier tema en relación con los contenidos de una asignatura en concreto. • También se puede abrir un foro creativo, que estaría más orientado al papel activo y creativo del alumno, donde éste sería invitado a compartir cualquier tipo de creación que tuviera algún vínculo con lo estudiado en clase. • Finalmente, puede coordinarse un foro de centro con otros docentes y la Dirección del centro educativo, donde tendrían cabida todos los
anuncios, noticias, espacios para la participación de padres, etc. 17
Utilidades • Una wiki es un espacio donde el producto final es concreto, contenido en una página con información respecto a un tema y enlazado activamente con otras páginas con las que guarde alguna relación. • Se trata de ir configurando una pequeña o gran enciclopedia para que pueda ser usada como recurso por docentes y alumnos. • Una wiki es de libre participación, de modo que cualquiera puede editar el contenido de una página. La idea consiste en crear una enciclopedia virtual, no solo de libre acceso, sino en la que los propios usuarios sean los que generen el conocimiento. • Las wikis son colaborativas, se nutren de contribuciones de los usuarios (alumnos y/o docentes), son monitorizadas por los administradores de las mismas (también alumnos y/o docentes) que suministran los contenidos que desea ofrecer esa wiki. 18
Utilidades
• Vídeo. YouTube (www.youtube.es) es el portal de vídeo más usado en el mundo. Alberga millones de vídeos que usuarios domésticos y comerciales suben a su servidor. • Audio. En GoEar (www.goear.com) y también en Odeo (www.odeo.com) se pueden encontrar archivos de audio que pueden ser utilizados didácticamente. • Imagen. Flickr (www.flickr.com) y Picasa (www.picasa.google.es) son los más usados. En ambos, los usuarios suben imágenes tomadas por ellos mismos en la mayoría de los casos y las comparten. • Presentaciones. Entre los principales portales de alojamiento de 19 presentaciones destaca SlideShare (www.slideshare.net).
M贸dulo 2: Etiquetado b谩sico: tagging
20
Módulo 2: Etiquetado básico: tagging
• Objetivos — Identificar las etiquetas y atributos básicos de HTML. — Utilizar los fundamentos del lenguaje CSS. • Contenidos — Etiquetas y atributos HTML. — Fundamentos de CSS.
21
Etiquetas y atributos HTML
• Etiquetas más importantes ‒ <html>, <head>, <body>. Etiquetas necesarias en todo código fuente. ‒ <title> … </title>. Se aplica al título de la página, que se visualizará en la parte superior del navegador. ‒ <div> … </div>. Elemento básico en el diseño hoy en día. Encierra en una caja todo lo que contiene, y es susceptible de anidar otros elementos <div>. ‒ <span>...</span>. Similar a div, pero no es un elemento de bloque sino de línea, en el sentido de que no genera un salto para el contenido que encierra. Normalmente, es una etiqueta “comodín” que sirve para aplicar un estilo. ‒ <a> … </a>. Enlace a otras páginas. Posibilita que Internet sea lo que es, una red de páginas vinculadas unas a otras. 22
Etiquetas y atributos HTML
‒ <img/>, <object/>. Insertan una imagen (img), o un objeto Flash por ejemplo (object) ‒ <h1> … </h1>, <h2> … </h2>, <h6> … </h6>. Son títulos, en orden decreciente de tamaño. ‒ <ul> … </ul> (<ol> … </ol>), <li> … </li>. Lista (ordenada por números en el caso de ol) y elementos de lista anidados entre las etiquetas de lista. ‒ <strong> … </strong>, <em> … </em>. Respectivamente, para engrosar el tipo y para mostrarlo en itálica. ‒ <p> … </p>. Párrafo, lo que contiene está en una nueva línea respecto a lo anterior y provoca un salto de línea respecto a lo siguiente. ‒ <table> … </table>, <tr> … </tr>, <td> … </td>. Muy utilizados antes para estructurar las páginas. Aún se usan para 23 presentar tablas de datos.
Etiquetas y atributos HTML
Atributos • • • •
• • •
href, target. Se aplican a los enlaces <a>, e indican respectivamente la página a la que señala y dónde se abrirá esa nueva página. src. Se aplica a <img> y especifica la ruta donde se encuentra la imagen. width, height. Se aplican a elementos como <table> o <img>, y especifican respectivamente el ancho y la altura en píxeles. align. En los elementos de bloque (aquellos que ocupan todo el ancho y se disponen en una nueva línea) indica la alineación horizontal de su contenido. style. sirve para incluir dentro de una etiqueta particular un estilo CSS, pero no es recomendable ni práctico utilizarlo. id. Identifica unívocamente mediante un nombre a ese elemento. class. Aplicable a todas las etiquetas visuales, indica qué clase dentro de las definidas en una hoja de estilos CSS, es la que se aplica a esa etiqueta. 24
Etiquetas y atributos HTML
Aplicación de estilos • Especificación del aspecto de una etiqueta HTML. Se aplicará a todas las instancias de esa etiqueta. Por ejemplo: h1 {font-size: 20px; font-weight: bold}. • Especificación del aspecto por atributo id. Se aplicará a la única etiqueta que tenga ese id. Por ejemplo, si tenemos una capa div con un valor para id igual a “encabezado”: #encabezado {width: 400px; height: 200px}. • Especificación del aspecto por clase. Se aplicará a todas las etiquetas cuyo atributo class sea el nombre de esa clase. Por ejemplo: amarillo {color: yellow}. 25
Etiquetas y atributos HTML
‒
Si se separan por comas, estas posibilidades son combinables.
‒
Por ejemplo: h1, #encabezado {border: 1px solid black}.
‒
El archivo de estilos con extensión CSS ha de vincularse a cada página insertando entre las etiquetas <head> … </head>.
‒
Suponiendo que el archivo de estilo se encuentre en la misma carpeta que nuestra página HTML: <link href=”estilos.css” rel=”stylesheet” type=”text/css” />.
26
Fundamentos de CSS
• Una página web tiene el propósito básico de transmitir una información. Hoy en día, para que un mensaje visual llegue al receptor, se debe cuidar su diseño. • Si se piensa sobre todo en el público al que van dirigidas las páginas educativas, debemos ser conscientes de la importancia de enganchar a los alumnos con un diseño atractivo que haga uso de la potencia del CSS como lenguaje de diseño gráfico para la web. • Cuando nos convertimos en diseñadores gráficos, somos comunicadores que le damos forma visual a una idea para que otros la entiendan. 27
Fundamentos de CSS Reglas para todo diseño •
Hay que tener claro el concepto, la idea del diseño.
•
Se debe atraer primero la atención con un elemento llamativo, y de ahí, conducir la lectura hacia el resto del contenido.
•
Hay que escoger los colores con una intención y jugar con la luminosidad, el contraste o la saturación, conscientemente.
•
Menos es más: cuanto más sencillo sea el diseño, mejor. Hay que evitar sobrecargarlo.
•
No hay que usar más de dos tipografías distintas. Es preferible jugar con los tamaños, pesos y estilos (cursiva vs. normal).
•
Es aconsejable jugar con las densidades de texto, comprimir y separar para que no resulte anodino.
•
El diseño no debe ser ni estático, ni regular, ni predecible.
28
Fundamentos de CSS
Integración de CSS en páginas HTML • <style> ... </style>. Etiquetas contenidas dentro de <head> ... </head>, y que encierran el código CSS, cuyo ámbito de aplicación será exclusivamente esa página. • style = “...”. Atributo aplicable a cualquier etiqueta visual HTML, que contiene el código CSS, cuyo ámbito será esa etiqueta solamente.
29
Fundamentos de CSS
• <link href=”estilos.css” rel=”stylesheet” type=”text/css” />. Hoja de estilo vinculada a la página, es la forma más extendida de trabajar el CSS. • Todo el código CSS se escribe por entero en un archivo, y gracias a esa etiqueta <link /> entre <head> ... </head> la vinculamos a cada página de la web. • Para cambiar el aspecto de un elemento en todo el sitio, no tenemos que recorrer todas las páginas una a una, sino que con cambiarlo una vez es suficiente.
30
Fundamentos de CSS Sintaxis y opciones • Primero, se coloca el selector, que puede ser una etiqueta HTMl, una clase CSS, o un ID. • Después, se abre una llave “{ˮ y se empieza a colocar cada atributo seguido de dos puntos “:” y luego el valor seguido de punto y coma “;”. • Por último, se cierra el estilo con el cierre de llave “}”. • Se pueden definir tantos atributos con sus respectivos valores como se desee, separándolos con un salto de línea. En CSS se deben escribir los atributos y valores con minúsculas, y los comentarios se encierran con “/*” para abrir y “*/” para cerrar. 31
Fundamentos de CSS
• Tipo. Todo lo referido a la tipografía: fuente, tamaño, peso, color, etc. • Fondo. Color de fondo, imagen de fondo, si ésta se ha de repetir o no y dónde “anclarla”, etc. • Bloque. Espacio entre palabras, entre letras, alineación del contenido, etc. • Caja. Anchura y altura, espacio interior (padding), margen exterior, etc. • Borde. Estilo, grosor y color de los cuatro bordes de la caja. • Lista. Si son numeradas, ordenadas, o qué icono se visualiza. • Posicionamiento. Coordenadas relativas o absolutas. • Extensiones. Transiciones entre páginas, efectos del cursor, etc. 32
Fundamentos de CSS
Haz clic en la imagen para ver la animaci贸n 33
M贸dulo 3: Dreamweaver
34
Módulo 3: Dreamweaver
• Objetivos — Familiarizarse con la interfaz y opciones de Dreamweaver. — Crear páginas web con Dreamweaver. — Publicar en un sitio web con Dreamweaver. • Contenidos — Introducción a Dreamweaver. — Crear páginas web con Dreamweaver. — Crear un sitio web. Trabajar vía FTP con servidor remoto. 35
Introducción a Dreamweaver
•
Existe un software de edición HTML que nos permite diseñar visualmente páginas web.
•
No tenemos que conocer de memoria todas las etiquetas HTML, sus atributos, ni todas las posibilidades que nos da el CSS.
•
Dreamweaver es usado extensamente por los diseñadores debido a la amplia gama de posibilidades que ofrece.
•
Como vamos a ver en este módulo, cuenta con todo tipo de ayudas y sugerencias para el diseño visual o la redacción.
36
Introducción a Dreamweaver
•
Vista de diseño. Dreamweaver cuenta con cajas de herramientas para dibujar elementos HTML sobre un lienzo que simula el aspecto final que tendrá la página.
•
Vista de código. Conforme se diseña visualmente la página, Dreamweaver genera el código correspondiente “por debajo”. Si escribimos directamente el código, ocurre lo contrario.
•
A la derecha, se pueden ver y colocar múltiples ventanas, en las que se podrá editar el contenido de la página, visualizarlo desde varios criterios y tener una vista general (ventana “Archivos”) de las carpetas y archivos del sitio.
37
Crear páginas web con Dreamweaver
• Menú Archivo. Aparte de lo básico, ofrece la posibilidad de previsualizar la página o validar el código. • Menú Editar. Incluye indentar el código que tengamos seleccionado, colapsarlo, ir a una línea concreta, etc. • Menu Insertar. Posibilita la inserción, tanto en código como visualmente, de cualquier elemento HTML. • Menú Modificar. Sirve para editar un elemento que tengamos seleccionado, tanto en el panel de diseño como en el de código. • Menú Texto. Específico para todo lo relacionado con los textos de la página (alineación, formato, color, etc.) • Otros menús. Comandos (funcionalidades avanzadas varias), Ventanas y Ayuda.
38
Crear páginas web con Dreamweaver •
Vista de códigos
‒
Se pueden arrastrar elementos HTML de la caja de herramientas al punto que se quiera y, una vez especificados ciertos parámetros, el código se escribe automáticamente.
‒
Si se está dentro de una etiqueta, al pulsar la barra espaciadora se abrirá un pequeño desplegable con todos los atributos que posee esta etiqueta. Bastará hacer clic en el que queramos para que inmediatamente se escriba y, si es el caso, aparezca un nuevo desplegable con los valores que ese atributo puede tomar.
‒
En la pestaña “Común”, hay un icono que representa un bocadillo de diálogo y que sirve para insertar un comentario HTML (/* … */). Los comentarios en HTML son muy importantes.
‒
Siempre que se seleccione contenido, se le podrá aplicar directamente una etiqueta, pulsando el icono correspondiente, o modificar sus propiedades en la ventana de la parte inferior. 39
Crear páginas web con Dreamweaver • Vista de diseño ‒ Posibilita un diseño totalmente visual, donde se puede colocar de forma muy sencilla e intuitiva cualquier elemento HTML. ‒ Los elementos HTML que se dibujan sobre el lienzo, se pueden modificar directamente con el ratón. ‒ Es muy importante la ventana “Propiedades” en la parte inferior. Allí, dependiendo de dónde se haga clic en el lienzo o qué contenido se haya seleccionado, se podrán especificar características y visualizar de inmediato su efecto sobre el diseño. ‒ Asimismo, en las ventanas disponibles en el menú “Ventana”, aparece distinta información sobre lo que se está viendo, con la posibilidad de modificar de forma simple y rápida el aspecto visual del elemento HTML en cuestión.
40
Crear páginas web con Dreamweaver
La ventana CSS permite ‒ ‒ ‒ ‒
Editar directamente, haciendo clic en el valor de un atributo CSS. Editar todo el estilo de la etiqueta en una ventana que se abre al pulsar el icono del lapicero. Agregar un nuevo estilo, indicando el selector y su ámbito, pulsando el icono con el signo “+”. Eliminar un atributo de la lista de estilos, pulsando el icono de la papelera.
41
Crear páginas web con Dreamweaver
‒ Si se selecciona en el panel de diseño una parte del contenido y se hace clic en el botón derecho, se le puede aplicar cualquiera de los estilos de la clase CSS que estén definidos en la hoja de estilos. ‒ Si se pulsa con el botón derecho en la lista de etiquetas HTML que envuelven el contenido que tenemos seleccionado, y que se encuentra justo entre el lienzo y la ventana inferior de propiedades, se le podrá adjudicar cualquiera de las clases CSS. ‒ En la hoja CSS, Dreamweaver ofrecerá ayuda siempre que se esté entre las llaves “{ ... }”, que es donde se especifica el estilo de un selector, sugiriendo tanto atributos CSS como valores para esos atributos. 42
Crear p谩ginas web con Dreamweaver
Haz clic en la imagen para ver la animaci贸n 43
Crear p谩ginas web con Dreamweaver
Haz clic en la imagen para ver la animaci贸n 44
Crear un sitio web. Trabajar vía FTP con servidor remoto
• En Dreamweaver se puede crear y modificar fácilmente nuestro sitio web, todo gracias a su ventana “Archivos”. • Al visitar una página, siempre habrá una columna y/o fila de enlaces que nos llevan a otras páginas del mismo sitio. • Los sitios web se componen de varias páginas enlazadas unas con otras, que nos permiten mostrar la información de forma clara y organizada. • Es preferible que las páginas no superen el marco de la pantalla, se debe mostrar el contenido al “lector” como si se tratase de un libro del que va pasando las páginas. 45
Crear un sitio web. Trabajar vía FTP con servidor remoto
Dreamweaver facilita enormemente la interacción con el servidor, permitiendo incluso navegar y modificar lo que se quiera en el directorio de archivos remoto. Se necesita: •
Una dirección FTP del servidor. Del tipo “ftp.nombredelservidor.com”, es suministrada por el proveedor.
•
Opcionalmente, una carpeta donde se deben subir los archivos y que la suministra el proveedor.
•
Un Nombre de Usuario y Contraseña. Configurados al contratar el servicio o suministrados por el proveedor.
46
M贸dulo 4: Repaso
47
Módulo 4: Repaso
• Objetivos — Repasar las nociones básicas de HTML y sus posibles utilidades para el docente. — Repasar cuáles son las etiquetas básicas, tanto sus usos como sus atributos. — Repasar cómo crear y publicar un sitio web con Dreamweaver. • Contenidos — HTML: utilidades. — Etiquetado básico: tagging. — Dreamweaver. 48
HTML: utilidades
• El lenguaje HTML es el utilizado para crear aquellas páginas web cuyos archivos suelen tener la extensión .html o .htm. • HTML está enteramente compuesto por etiquetas, la mayoría son marcas que se colocan alrededor de un texto para diferenciarlo del resto y darle un formato específico. • Existen etiquetas que no van alrededor de un texto y que, por ejemplo, sirven para cambiar de línea o mostrar una imagen. Asimismo, hay textos que enlazan con otras páginas. • La mayoría de las etiquetas HTML tienen atributos, es decir, parámetros que añaden información y que muchas veces son necesarios.
49
HTML: utilidades
• El navegador, mediante el proveedor de Internet que se tenga contratado, hace una llamada URL a un servidor −cuya dirección física en la red se denomina DNS− para preguntarle a qué otra dirección física corresponde esa URL que se ha introducido. • El servidor DNS le comunica al navegador esa dirección. • Una vez que el navegador reconoce la dirección, contacta con ella. • Por último, el servidor donde está alojada esa página le suministra al navegador su código fuente HTML, para que éste pueda mostrarla. 50
HTML: utilidades
• Toda página HTML se abre con la etiqueta <html> y se cierra con </html>. Tras la etiqueta <html> solemos encontrar <head> … </head>. • Tras la etiqueta </head>, siempre aparece <body> … </body>, etiqueta fundamental que encierra el contenido de la página marcado por las etiquetas visuales de HTML. • Hay dos conceptos en la creación de páginas web que no tienen relación entre sí: la estructura (cómo se organizan espacial y funcionalmente los bloques de información de la página), y el diseño gráfico (cómo se presenta visualmente esa estructura en lo que respecta a decoración, colores, márgenes y bordes, etc.). 51
HTML: utilidades
•
Elementos básicos de la estructura de una página
‒ Cabecera. Contiene la información, normalmente en forma de título y/o logo, acerca de a quién pertenece o sobre qué es la página. ‒ Bloque de enlaces. Es una lista vertical u horizontal de los apartados del sitio. A veces hay dos, cuando la naturaleza de los enlaces es distinta (complementaria) o también cuando, por alguna razón, se quieren repetir los enlaces más importantes. ‒ Cuerpo. Contiene, según cada página, la información en sí. Por ejemplo, en un periódico en línea, el cuerpo contiene las noticias. En un blog, las entradas del mismo. En una página corporativa, las últimas noticias acerca de la compañía. 52
HTML: utilidades
• Los blogs, o bitácoras en castellano, son sitios web donde el creador, o grupo de creadores, escribe periódicamente sobre cualquier tema. Las entradas, llamadas habitualmente posts, se muestran por orden cronológico decreciente. • Los foros fueron las primeras comunidades virtuales que alcanzaron difusión en internet. Las discusiones suelen ser moderadas por un coordinador o dinamizador, quien generalmente introduce el tema, formula la primera pregunta, estimula y guía durante la discusión, etc. • Las wikis son de libre participación, de modo que cualquiera puede editar el contenido de una página. La idea consiste en una enciclopedia virtual no solo de libre acceso, sino en la que los propios usuarios son los que generan el conocimiento. 53
HTML: utilidades
• Vídeo. YouTube es el portal de vídeo más usado en el mundo. Alberga millones de vídeos que usuarios particulares y comerciales suben a su servidor. • Audio. En GoEar y también en Odeo se puedes encontrar archivos de audio que pueden ser utilizados didácticamente. • Imagen. Flickr y Picasa son los portales más usados. En ambos, los usuarios suben imágenes tomadas por ellos mismos en la mayoría de los casos y las comparten. • Presentaciones. Entre los principales portales de alojamiento de presentaciones destaca SlideShare. 54
Etiquetado básico: tagging
• Algunas de las etiquetas fundamentales son: <html>, <head>, <body>. <title>, <div>, <span>, <a>, <img/>, <object/>, <ul>(<ol>), <li>, <strong>, <em>, <p>, <table>, <tr>, <td>, etc. • Respecto a los atributos, algunos de los más importantes son: href, target, src, width, height, align, style, id, y class. • En lo que respecta al diseño web tal y como se concibe actualmente, id y class son esenciales a la hora de vincular el diseño gráfico de la página con su estructura.
55
Etiquetado básico: tagging
• Hoy en día, todo lo referente al estilo de la página va en un archivo aparte, que suele servir para todas las páginas de nuestro sitio web, y cuya extensión es .css. Hay que diferenciar entre tres casos: ‒ Especificación del aspecto de una etiqueta HTML. Se aplicará a todas las instancias de esa etiqueta. ‒ Especificación del aspecto por atributo id. Se aplicará a la única etiqueta que tenga ese id. ‒ Especificación del aspecto por clase. Se aplicará a todas las etiquetas cuyo atributo class sea el nombre de esa clase.
56
Etiquetado básico: tagging
• Hay que tener claro el concepto, la idea del diseño. • Se debe atraer primero la atención con un elemento llamativo, y de ahí, conducir la lectura hacia el resto del contenido. • Hay que escoger los colores con una intención. • Menos es más: cuanto más sencillo sea el diseño, mejor. Hay que evitar sobrecargarlo. • No hay que usar más de dos tipografías distintas. • Es aconsejable jugar con las densidades de texto, comprimir y separar para que no resulte anodino. • Hay que tratar de que el diseño no sea ni estático ni predecible. 57 Hay que “darle ritmo”.
Etiquetado básico: tagging
• <style> ... </style>. Etiquetas contenidas dentro de <head> ... </head> en cada una de las páginas, y que encierran el código CSS, cuyo ámbito de aplicación será exclusivamente esa página . • Atributo style = “...”. Aplicable a cualquier etiqueta visual HTML, contiene entre las comillas el código CSS, cuyo ámbito será esa sola etiqueta. • <link href=”estilos.css” rel=”stylesheet” type=”text/css” />. Hoja de estilo vinculada a la página, es la forma más extendida de trabajar el CSS.
58
Dreamweaver
• Vista de diseño. Dreamweaver cuenta con cajas de herramientas para dibujar elementos HTML sobre un lienzo, que simula el aspecto final que tendrá la página. • Vista de código. Conforme se va diseñando visualmente la página, Dreamweaver genera el código correspondiente “por debajo”. Si se escribe directamente el código, ocurre lo contrario, que se generan visualmente los elementos correspondientes en el panel de diseño. • Ventanas. A la derecha, se pueden ver y colocar múltiples ventanas en las que editar el contenido de la página, visualizarlo desde varios criterios y tener una vista general (ventana “Archivos”) de las carpetas y archivos del sitio. 59
Dreamweaver
•
Vista de código
‒ Se pueden arrastrar elementos HTML de la caja de herramientas a un punto y el código HTML se escribirá automáticamente. ‒ Dentro de una etiqueta, al pulsar la barra espaciadora, se abrirá un pequeño desplegable con todos los atributos que posee dicha etiqueta. ‒ En la pestaña “Común”, hay un icono que representa un bocadillo de diálogo y que sirve para insertar un comentario HTML (/* … */) ‒ Siempre que se seleccione una parte de contenido, se le podrá aplicar directamente una etiqueta, pulsando el icono correspondiente. 60
Dreamweaver
•
Vista de diseño
‒ Posibilita un diseño totalmente visual. ‒ Los elementos HTML que se han dibujado sobre el lienzo, se pueden modificar directamente con el ratón. ‒ Es muy importante la ventana “Propiedades” en la parte inferior. ‒ En las ventanas disponibles en el menú “Ventana”, aparece distinta información sobre lo que se está viendo y da la posibilidad de modificar de forma simple y rápida el aspecto visual del elemento HTML en cuestión. ‒ Por último, hay que recordar la importancia de la previsualización pulsando F12. 61
Dreamweaver
• La ventana CSS, y en concreto su pestaña “Estilos CSS”, nos permite editar directamente haciendo clic en el valor de un atributo CSS, editar todo el estilo de la etiqueta, agregar un nuevo estilo, eliminar un atributo de la lista de estilos... • Si seleccionamos en el panel de diseño una parte del contenido y hacemos clic con el botón derecho, podemos aplicarle cualquiera de los estilos de clase CSS que tengamos definidos. • En el panel de propiedades tenemos una casilla que es “estilo”, y que nos permite elegir la clase CSS que queremos para el contenido o la etiqueta en cuestión. • Si vamos a la hoja CSS, Dreamweaver nos ofrecerá ayuda siempre que estemos entre las llaves { ... } donde especificamos el estilo de un selector, sugiriéndonos tanto atributos CSS como valores para esos atributos. 62
Dreamweaver
• Dreamweaver facilita enormemente la interacción con el servidor, pudiendo incluso navegar y modificar lo que queramos en el directorio de archivos remoto. Se necesita: ‒ Dirección FTP del servidor. Del tipo “ftp.nombredelservidor.com”, suministrado por el proveedor. ‒ Opcionalmente, carpeta donde debemos subir nuestros archivos. Suministrada por el proveedor. ‒ Nombre de Usuario y Contraseña. Configurados al contratar el servicio o suministrados por el proveedor.
63