sesión 5 curso avanzado spipedu

QUINTA SESIÓN – 24 FEBRERO 2009 – CEP Alcalá de Guadaira

1. Esquema de supervivenvia para un SPIPEUR

2. Un paseo por la web 2.0- Servicios avanzados de Google- Youtube – Dailymotion & Slideshare- Flickr o Picasa- Twitter- Facebook y Tuenti

PROFUNDIZACIÓN AL MANEJO DE SITIOS WEB DINÁMICOS

http://www.spipedu.es

hapaxmedia.net / licencia creative commons BY ES 2.5 /

1. ESQUEMA DE SUPERVIVENCIA DE UN SPIPEUR

- Si eres usuario avanzado puedes llamarte SPIPEUR o SPIPERO- Este esquema no es más que un resumen de todo lo anterior.

PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS


NUESTROS LENGUAJES:- Lenguaje HTML - Lenguaje CSS- Lenguaje SPIP

NUESTRAS HERRAMIENTAS:- Editor online Esqueletos - Extensión Firebug- www.spip.net/@ - [email protected]

COSAS QUE PODEMOS HACER

- Modificar la hoja de estilos

- Retocar la estructura visual

- Aplicar mejoras y nuevas funciones

- Instalar plugin o mejoras

- Incluir servicios externos

http://www.spip.net/@

mailto:[email protected]

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/@

EDITAR ESQUELETOS MODELO 1

Visualización de página no existe.

Control de la agenda

Cómo se ve el artículo

Plantilla del BlogPlantilla del Artículo en la sección Blog

Cabecera. Aunque la imagen de la cabecera se controla en la parte interna

Comentarios




Menú de la columna derechaMenú de la columna derecha en la sección blogsMenú de Inicio de la columna derechaMenú de la columna izquierdaVisualización de contenidos de las palabras clave.

Pie

Hoja de Estilo principal

Página principal del sitio web. La portada de la página




Barra Horizontal debajo de la cabecera

Menú de la columna derecha - barra_lateral.html

Página principal del sitio web. La portada de la página



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 >



INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS


3 maneras de incluir estilos: - inline: <input style=”border:1px solid black;” type=”text”>

- etiqueta: <head>

...<style>

border: 1px solid black;</style>…

</head>

- archivo .css:input {

border: 1px solid black;}

CSS (Cascading Style Sheets)

Sintaxis:selector {

atributo: valor;}

Selector: sobre que elementos queremos trabajarAtributo: identifica a que estilo nos referimosValor: como queremos que sea el atributo

LENGUAJE PROPIO DE SPIP

- Siempre escrito en mayúsculas- Balizas (balises), bucles (boucles), criterios (critères) y filtros (filtres)

2.1 BALIZAS

- # (almohadilla) + palabra en francés

- Ejemplo:

#URL_SITE_SPIP escribe la dirección web del sitio.

- Las más importantes:

#TITRE escribe el título del artículo, sección, palabra clave...#TEXTE escribe el texto del artículo, sección, palabra clave...#LOGO_ARTICLE muestra el logotipo del artículo#LOGO_RUBRIQUE muestra el logo de la sección#URL_ARTICLE escribe la dirección web de un artículo#DESCRIPTIF escribe la descripción corta de un artículo#DATE escribe la fecha del artículo



2.2 BUCLES

- Sintaxis completa:

<B_nombre>

Código HTML opcional anterior“Esta sección contiene los elementos siguientes:”

<BOUCLE_nombre(TYPE){criterio1}{criterio2}...{criteriox}>

Código HTML + balizas SPIP

</BOUCLE_nombre>

Código HTML opcional posterior

</B_nombre>

Código HTML alternativo“Esta sección no contiene artículos.”

<//B_nombre>



- Sintaxis simple:

<BOUCLE_nombre(TYPE){criterio1}{criteriox}>

Código HTML + balizas

</BOUCLE_nombre>

sesión 5 curso avanzado spipedu

Education