Sesión 5 Curso Avanzado SPIPEDU

PROFUNDIZACIÓN AL MANEJO DE SITIOS WEB DINÁMICOS

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

hapaxmedia.net / licencia creative commons BY ES 2.5 /

PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS


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.

NUESTROS LENGUAJES:
COSAS QUE PODEMOS HACER
- Lenguaje HTML
- Lenguaje CSS
- Modificar la hoja de estilos
- Lenguaje SPIP
- Retocar la estructura visual
NUESTRAS HERRAMIENTAS: - Aplicar mejoras y nuevas funciones
- Editor online Esqueletos
- Extensión Firebug - Instalar plugin o mejoras
- www.spip.net/@
- alcala@hapaxmedia.net - Incluir servicios externos



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



EDITAR ESQUELETOS MODELO 1

Visualización de página no existe.

Control de la agenda

Cómo se ve el artículo

Plantilla del Blog
Plantilla 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 derecha
Menú de la columna derecha en la sección blogs
Menú de Inicio de la columna derecha
Menú de la columna izquierda
Visualización de contenidos de las palabras clave.

Pie

Hoja de Estilo principal

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



Menú de la columna derecha - barra_lateral.html

Barra Horizontal debajo de la cabecera

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

CSS (Cascading Style Sheets)
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;
}

Sintaxis:
selector { Selector: sobre que elementos queremos trabajar
Atributo: identifica a que estilo nos referimos
atributo: valor;
Valor: 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>
- Sintaxis simple:
Código HTML opcional posterior
<BOUCLE_nombre(TYPE){criterio1}{criteriox}>
</B_nombre>
Código HTML + balizas
Código HTML alternativo
“Esta sección no contiene artículos.”
</BOUCLE_nombre>
<//B_nombre>

Sesión 5 Curso Avanzado SPIPEDU

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Sesión 5 Curso Avanzado SPIPEDU

Ähnlich wie Sesión 5 Curso Avanzado SPIPEDU (20)

Mehr von Pedro Jimenez

Mehr von Pedro Jimenez (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Sesión 5 Curso Avanzado SPIPEDU