Documentación y comunicación audiovisual
TEMA 2: CMS
Fases de creación de un sitio web
1. Crearlo (offline)
código fuente
editor de código WYSIWYG (What You See Is What You Get)
CMS
2. Subirlo: mediante un cliente de FTP
dominio
hosting (alojamiento)
3. Verlo (online)
Utilidades: sitios web, blogs, foros, wikis, comercio electrónico, revistas online, enseñanza...
Más usados
Blogger
WordPress
Webnode
Weebly
...
TEMA 3: Edición web en código fuente
HTML (HyperText Markup Language)
Estructura
Etiquetas más usadas
Básicas:
<br> (salto de línea)
<p> (salto de párrafo)
<hr> (línea horizontal
Atributos
align, size, color, face, family...
Formato de texto:
<strong> (negrita)
<em> (cursiva)
<font> (fuente)
Imágenes:
a) <img src="imagen.jpg"> (misma carpeta web)
b) <img src="File:/C:/carpeta/imagen.jpg"> (ruta de otra carpeta)
c) img src="http://www.imagenes.com/imagen.jpg">; (URL imagen)
d) <img src="imagenes/imagen.jpg">
Enlaces:
a) <a href="destin.htm">Enlace</a> (enlace dentro del mismo directorio)
b) <a href="../carpeta2/destin.htm">Enlace</a> (enlace a un archivo en otra carpeta del mismo nivel)
c) <a href="/carpeta1-1/destin.htm">Enlace</a> (enlace a un archivo en otra carpeta que está dentro de la carpeta que alberga el archivo html)
d) <a href="http://www.destin.com">Enlace</a>; (enlace a otro sitio web)
*anclas: enlaces a un punto concreto de la página (ejemplo: botón de "volver arriba", o un índice de artículos)
Metaelementos: elementos invisibles para el usuario pero útiles para los rastreadores. Presentes en la sección <head>.
título
autor
...
Listas <li>
numeradas <ol>
no numeradas <ul>
Tablas <table>
fila <tr>
columna <td>
Formularios <form>
CSS (Cascade Style Sheet)
Estilos: en línea, interno o externo
Estructura
TEMA 4: Edición web en WYSIWYG
Funcionamiento básico: los programas WYSIWYG tienen la ventaja de que permiten visualizar la página web tal y como se verá en el navegador, así como editarla con opciones parecidas a las de un procesador de textos tipo Word.
Ejemplos de editores WYSIWYG:
Adobe Dreamweaver
iWeb
...
Ejemplo de página web creada con Dreamweaver (se pueden visualizar tanto la vista de código html como la vista previa en el navegador)