Sesion 2 Profundización

SEGUNDA SESIÓN – 12 FEBRERO 2009 – CEP Alcalá de Guadaira

1. Glosario Básico y Contenido Copyleft

2. Profundización en Lenguaje HTML

3. Introducción a la Edición de Esqueletos

4. Debate sobre Mejoras en los Modelos en el WIKIhttp://www.spipedu.es/ayuda

PROFUNDIZACIÓN AL MANEJO DE SITIOS WEB DINÁMICOS

http://www.spipedu.es

hapaxmedia.net / licencia creative commons BY ES 2.5 /

GLOSARIO BÁSICO DE INTERNET

· SOFTWARE LIBRE· CLIENTE / SERVIDOR· WORLD WIDE WEB· NAVEGADOR· RED SOCIAL

· Buscadores· Portal· Blog / Weblog / Bitácora· Web 2.0

http://www.spipedu.es/spip.php?article26

INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS


hapaxmedia.net / licencia creative commons BY ES 2.5 /

CONTENIDO COPYLEFT

Copyleft o copia permitida comprende a un grupo de derechos de propiedad intelectual caracterizados por eliminar las restricciones de distribución o modificación de las que adolece el copyright, con la condición de que el trabajo derivado se mantenga con el mismo régimen de propiedad intelectual que el original.

Bajo tales licencias pueden protegerse una gran diversidad de obras, tales como programas informáticos, arte, cultura y ciencia, es decir prácticamente casi cualquier tipo de producción creativa.

Creative Commons es una organización no gubernamental sin ánimo de lucro que desarrolla planes para ayudar a reducir las barreras legales de la creatividad, por medio de nueva legislación y nuevas tecnologías.

Creative Commons (en español: bienes comunes creativos) es también el nombre dado a las licencias desarrolladas por esta organización.

PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS


Sobre SpipeduSpipEdu.es es un proyecto de "elaboración de recursos educativos digitales en software libre".

Más información en www.spipedu.es



EJERCICIO LENGUAJE HTML

Abrimos un editor de texto o bloc de notasEmpezamos a escribir código.Guardamos el archivo como html

Comprobamos el resultado en Mozilla Firefox

<html> <head><title> Título de Nuestra Pagina </title><meta http-equiv="content-type" content="text/html; charset=utf-8" /></head><body><h1>Sobre Spipedu</h1><p><u>SpipEdu.es</u> es un proyecto de <strong>"elaboración de recursos educativos digitales en software libre"</strong></p>

<p>Más información en <a href="http://www.spipedu.es"> www.spipedu.es</a></p>

</body>

</html>



Si copias este código en un editor de texto y lo guardas como archivo HTML tienes una web básica

EJERCICIO LENGUAJE HTML



ETIQUETAS BÁSICAS DE LENGUAJE HTML

* <html>: define el inicio del documento HTML,

* <head>: define la cabecera del documento HTML * <title>: define el título de la página. * <link>: para vincular el sitio a hojas de estilo o icono * <style>: para colocar el estilo interno de la página

* <body>: define el contenido principal o cuerpo del documento * <strong>: texto en negrita * <em>: texto en cursiva * <u>: texto subrayado * <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: encabezados o títulos del documento

CASI TODAS LAS ETIQUETAS SE CIERRA CON LA BARRA </ etiqueta >



* <a>: Hipervínculo o enlace, dentro o fuera del sitio web. Debe definirse el parámetro de pasada por medio del atributo href. Por ejemplo: <a href="http://www.wikipedia.org">Wikipedia</a>

* <img>: imagen. Requiere del atributo src, que indica la ruta en la que se encuentra la imagenPor ejemplo: <img src="./imagenes/mifoto.jpg" />

* <div>: área de la página

* <table>: define una tabla * <tr>: fila de una tabla * <td>: celda de datos de una tabla

CASI TODAS LAS ETIQUETAS SE CIERRA CON LA BARRA </ etiqueta >

ETIQUETAS BÁSICAS DE LENGUAJE HTML

ALGUNOS ATAJOS TIPOGRÁFICOS

{ } cursiva{{ }} negrita{{{ }}} intertítulo

[palabra->http://enlace.com][palabra->34] Número artículo[?palabra] Enlace directo a la wikipedia

- Listas- Nivel 1-* Nivel 2-** Nivel 3-# Lista numerada

- Línea Horizontal ----

- Cita <quote>Frase que queramos “citar” </quote>



http://enlace.com/

EDITAR ESQUELETOS

La edición de esqueletos es un PLUGIN activado en el MODELO 1 y MODELO 2Permite que modifiquemos sustancialmente el diseño de nuestra página web.

IMPORTANTESólo se recomienda el uso de este con conocimientos de

· Sintaxis HTML· Sintaxis SPIP http://spip.net/@

· Sintaxis CSS

1. Edición del sitio2. Botón Editar Esqueleto

3. Elegir Archivo a editar

Manual de HTMLhttp://www.desarrolloweb.com/manuales/21/



http://spip.net/@

EDITAR ESQUELETOS

4. Modificar el lenguaje HTML o CSS o Modificar los Bucles de SPIP http://spip.net/@ - Se puede descargar el Archivo y editar con NVU - Se puede editar directamente el código

5. Guardar Modificaciones



http://spip.net/@

Sesion 2 Profundización

Education

Transcript of Sesion 2 Profundización