Sesion 2 Profundización

PROFUNDIZACIÓN AL MANEJO DE SITIOS WEB DINÁMICOS

http://www.spipedu.es
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 WIKI
http://www.spipedu.es/ayuda

hapaxmedia.net / licencia creative commons BY ES 2.5 /

INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS


GLOSARIO BÁSICO DE INTERNET http://www.spipedu.es/spip.php?article26

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

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

hapaxmedia.net / licencia creative commons BY ES 2.5 /

PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS


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.



EJERCICIO LENGUAJE HTML

Sobre Spipedu
SpipEdu.es es un proyecto de quot;elaboración de recursos educativos digitales
en software librequot;.

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

Abrimos un editor de texto o bloc de notas
Empezamos a escribir código.
Guardamos el archivo como html
Comprobamos el resultado en Mozilla Firefox



EJERCICIO LENGUAJE HTML

<html>
<head>
<title> Título de Nuestra Pagina </title>
<meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot; />
</head>
<body>
<h1>Sobre Spipedu</h1>
<p><u>SpipEdu.es</u> es un proyecto de <strong>quot;elaboración de recursos
educativos digitales en software librequot;</strong></p>
<p>Más información en <a href=quot;http://www.spipedu.esquot;> 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



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 >



ETIQUETAS BÁSICAS DE LENGUAJE HTML

* <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=quot;http://www.wikipedia.orgquot;>Wikipedia</a>

* <img>: imagen.
Requiere del atributo src, que indica la ruta en la que se encuentra la imagen
Por ejemplo: <img src=quot;./imagenes/mifoto.jpgquot; />

* <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 >



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>



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

IMPORTANTE
Sólo se recomienda el uso de este con conocimientos de
· Sintaxis HTML
· Sintaxis SPIP http://spip.net/@
· Sintaxis CSS

1. Edición del sitio
2. Botón Editar Esqueleto

3. Elegir Archivo a editar

Manual de HTML
http://www.desarrolloweb.com/manuales/21/



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

Sesion 2 Profundización

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (9)

Similar a Sesion 2 Profundización

Similar a Sesion 2 Profundización (20)

Más de Pedro Jimenez

Más de Pedro Jimenez (20)

Último

Último (20)

Sesion 2 Profundización