Documentación y comunicación audiovisual: Temas 2, 3 y 4
Tema 2: Gestors de continguts (CMS: Content Management Systems)
Como crear un sitio web
Crear
Código Fuente (HTML)
Editor de código (WYSIWYG)
Ejemplo: Adobe Dreamweaver
CMS
Ejemplo: Weebly
Subir
Cliente FTP
Ejemplo: Filezilla
Ver
Sitio web, blog... en un navegador web
Ejemplo: Google Chrome
Para qué se usa?
Blogs
Blogger
Sólo para blogs
Wordpress
Para blogs
Posibilidad de conversión en sitio web
Webs
Webnode
Para sitios web
Módulo para blogs
Weebly
Para blogs
Para sitios web
Wikis
Foros
Comercio electrónico, catálogo, revistas online...
Tema 3: Edición de código fuente
HTML
Qué utilizar?
Bloc de notas
Text Edit
Empezar y terminar por...
<html>
</html>
Head
Es la parte que no se visualiza
<head>
</head>
Body
Es la parte que se visualiza
<body>
</body>
Etiquetas en HTML
Estructura de las etiquetas
<etiqueta atributo="valor">.......</etiqueta>
Formato de documento
<br>Salto de línea</br>
<p>Salto de párrafo</p>
<hr>Línea horizontal</hr>
Tamaño de la letra
<h1>...</h1>
<Font size="7">...</font>
Formato de texto
<strong>Letra negrita</strong>
<em>Letra cursiva</em>
<font size="5">Tamaño del texto</font>
<font color="blue">Texto azul</font>
<font face="Calibri">Texto en calibri</font>
Inclusión de objetos
Imágenes
Guardada en la misma carpeta
<img src="imagen.jpg">
Guardada en otra carpeta
<img src="File:/C:/carpeta/imagen.jpg">
De internet
<img src=http://www.imagenes.com/imagen.jpg";
Sonidos, vídeos...
<iframe>
Enlace
Enlace dentro del mismo directorio
<a href="destin.htm">Enlace</a>
Enlace a un archivo en otra carpeta del mismo nivel
<a href="../carpeta2/destin.htm">Enlace</a>
Enlace a un archivo en otra carpeta que está dentro de la carpeta que alberga el archivo html
<a href="/carpeta1-1/destin.htm">Enlace</a>
Enlace a otro sitio web
<a href="http://www.destin.com">Enlace</a>;
Enlace a un punto concreto de una página
<a name="......">.......</a>
Metaelementos
Datos legibles por los robots de los buscadores
<meta name="nombre" content="contenido">
Listas
Numeradas
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
No numeradas
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
Tablas
Fila
<tr>
Columna tipo encabezado
<th>
Columna normal
<tr>
Formularios
<INPUT type>
text
radio
submit
reset
CSS
Ventajas
Mayor control sobre el aspecto del documento
Evitan tener que indicar el estilo en cada etiqueta
Permiten hacer cambios globales en todo el documento o en todo el sitio web
Formas de aplicarlo
Estilo en línea
en cada etiqueta XHTML
Estilo interno
en el head del documento
Estilo externo
en un documento a parte
Selector, propiedad y valor
Selector
Etiqueta que quedará afectada por el estilo
Propiedad
Elemento que va a modificarse
Valor
Contenido
Ejemplo
p { font-color:red; }
Tema 4: Edición web WYSIWYG
WYSIWYG: What You See Is What You Get. Permite escribir un documento viendo directamente el resultado final.
Para ello utilizamos un programa WYSIWYG, como por ejemplo DreamWeaver de Adobe. Es un programa para crear páginas web dividiendo la pantalla en dos y ver el código HTML mientras ves como va quedando la página Web. Así que lo que tu haces es lo que tu ves.
DreamWeaver Screenshot
Puedes crear la página...
Con el código HTML
Como si fuese un documento de Word, vas editando sin tener que utilizar el código.