sesion3 curso avanzado spipedu
TRANSCRIPT
TERCERA SESIÓN – 16 FEBRERO 2009 – CEP Alcalá de Guadaira
1. Seguimos con la de Edición de Esqueletos
2. Profundización en CSS
3. 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 /
PROFUNDIZACIÓN AL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
1. GLOSARIO DE SPIP
Interfaz Pública / Interfaz Privada squelettes / ecrire
Redactores | Administradores | Administradores Restringidos auteur
Secciones y Subsecciones rubriques
Artículos articles
Breves breve
Palabras Claves mot clés
Sitios Referenciados sites
BuscadorEstadísticas
Sindicación de ContenidosForos o Comentarios
Agenda
co
nte
nid
os
es
tru
ctu
ra
hapaxmedia.net / licencia creative commons BY ES 2.5 /
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
PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
El editor de esqueletos tiene orden alfabético
Nos encontraremos diferentes archivos: - imágenes
- html- css
Recuerda tener siempre un “backup” de lo que quieras modificar
EDITAR ESQUELETOS
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
INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
CABECERAS. INFORMACIÓN DE CONTACTO
1. Logotipo del Sitio = Cabecera (815 × 185 píxeles )
2. Nombre de tu sitio
3. Dirección URL
4. Descripción del sitio = Dirección física | Teléfono
5. Correo electrónico del centro
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
INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS
http://www.spipedu.es
div {font-size: 18px;color: #000;
}
CSS (Cascading Style Sheets)