Post on 14-Jul-2015
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
http://www.spipedu.es
NUESTROS LENGUAJES:- Lenguaje HTML - Lenguaje CSS- Lenguaje SPIP
NUESTRAS HERRAMIENTAS:- Editor online Esqueletos - Extensión Firebug- www.spip.net/@ - alcala@hapaxmedia.net
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
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/
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
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
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
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
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
EDITAR ESQUELETOS MODELO 1
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
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
EDITAR ESQUELETOS MODELO 2
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
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
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 >
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
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
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
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
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
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>
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
- Sintaxis simple:
<BOUCLE_nombre(TYPE){criterio1}{criteriox}>
Código HTML + balizas
</BOUCLE_nombre>
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es