SlideShare una empresa de Scribd logo
1 de 10
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 WIKI http://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 Buscador Estadísticas Sindicación de Contenidos Foros o Comentarios Agenda contenidos estructura 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 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/ 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 Blog Plantilla 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 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
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 trabajar Atributo : identifica a que estilo nos referimos Valor : 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)

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Crear un blog tutorial por sandra crucianelli
Crear un blog   tutorial por sandra crucianelliCrear un blog   tutorial por sandra crucianelli
Crear un blog tutorial por sandra crucianelli
 
Trabajoo practico n 3!
Trabajoo practico n 3!Trabajoo practico n 3!
Trabajoo practico n 3!
 
Trabajo Practico numero 3
Trabajo Practico numero 3Trabajo Practico numero 3
Trabajo Practico numero 3
 
codigos HTLM
codigos HTLMcodigos HTLM
codigos HTLM
 
no quiero que se enteren
no quiero que se enterenno quiero que se enteren
no quiero que se enteren
 
Html 2
Html 2Html 2
Html 2
 
Páginas web
Páginas webPáginas web
Páginas web
 

Destacado

Sesion1 Curso SPIPEDU
Sesion1 Curso SPIPEDUSesion1 Curso SPIPEDU
Sesion1 Curso SPIPEDUspipedu
 
Sesion 2 Profundización
Sesion 2 ProfundizaciónSesion 2 Profundización
Sesion 2 ProfundizaciónPedro Jimenez
 
Curso SPIPEDU avanzado - 10 Febrero
Curso SPIPEDU avanzado - 10 FebreroCurso SPIPEDU avanzado - 10 Febrero
Curso SPIPEDU avanzado - 10 Febrerocomcinco
 
Sesión 5 Curso Avanzado SPIPEDU
Sesión 5 Curso Avanzado SPIPEDUSesión 5 Curso Avanzado SPIPEDU
Sesión 5 Curso Avanzado SPIPEDUPedro Jimenez
 
SPIPEDU avanzado - 10 febrero
SPIPEDU avanzado - 10 febreroSPIPEDU avanzado - 10 febrero
SPIPEDU avanzado - 10 febrerospipedu
 
Presentación Comunicacción 2015:2016
Presentación Comunicacción   2015:2016Presentación Comunicacción   2015:2016
Presentación Comunicacción 2015:2016Pedro Jimenez
 

Destacado (6)

Sesion1 Curso SPIPEDU
Sesion1 Curso SPIPEDUSesion1 Curso SPIPEDU
Sesion1 Curso SPIPEDU
 
Sesion 2 Profundización
Sesion 2 ProfundizaciónSesion 2 Profundización
Sesion 2 Profundización
 
Curso SPIPEDU avanzado - 10 Febrero
Curso SPIPEDU avanzado - 10 FebreroCurso SPIPEDU avanzado - 10 Febrero
Curso SPIPEDU avanzado - 10 Febrero
 
Sesión 5 Curso Avanzado SPIPEDU
Sesión 5 Curso Avanzado SPIPEDUSesión 5 Curso Avanzado SPIPEDU
Sesión 5 Curso Avanzado SPIPEDU
 
SPIPEDU avanzado - 10 febrero
SPIPEDU avanzado - 10 febreroSPIPEDU avanzado - 10 febrero
SPIPEDU avanzado - 10 febrero
 
Presentación Comunicacción 2015:2016
Presentación Comunicacción   2015:2016Presentación Comunicacción   2015:2016
Presentación Comunicacción 2015:2016
 

Similar a Sesion3 curso avanzado SPIPEDU

Spipedu - 10 Febrero
Spipedu - 10 FebreroSpipedu - 10 Febrero
Spipedu - 10 FebreroPedro Jimenez
 
Como Acelerar La Carga De Joomla
Como Acelerar La Carga De JoomlaComo Acelerar La Carga De Joomla
Como Acelerar La Carga De Joomlajafrague1
 
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroPresentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroCLEFormación
 
Maquetar pagina html con css
Maquetar pagina html con cssMaquetar pagina html con css
Maquetar pagina html con cssrmonagol
 
Diseño en la web
Diseño en la webDiseño en la web
Diseño en la webMiguel Gea
 
Trabajo práctico nº 3
Trabajo práctico nº 3Trabajo práctico nº 3
Trabajo práctico nº 3DiegoLux
 
Curso cei 351 front page, nivel básico
Curso cei 351   front page, nivel básicoCurso cei 351   front page, nivel básico
Curso cei 351 front page, nivel básicoProcasecapacita
 
Curso cei 339 dreamweaver, nivel básico
Curso cei 339   dreamweaver, nivel básicoCurso cei 339   dreamweaver, nivel básico
Curso cei 339 dreamweaver, nivel básicoProcasecapacita
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!SergioIglesiasNET
 

Similar a Sesion3 curso avanzado SPIPEDU (20)

Spipedu - 10 Febrero
Spipedu - 10 FebreroSpipedu - 10 Febrero
Spipedu - 10 Febrero
 
Sesion 3 SPIP
Sesion 3 SPIPSesion 3 SPIP
Sesion 3 SPIP
 
Exposicion Mambo
Exposicion  MamboExposicion  Mambo
Exposicion Mambo
 
HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?HTML5 y CSS3 ¿Imprescindibles?
HTML5 y CSS3 ¿Imprescindibles?
 
Como Acelerar La Carga De Joomla
Como Acelerar La Carga De JoomlaComo Acelerar La Carga De Joomla
Como Acelerar La Carga De Joomla
 
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuroPresentación Seminario Cleformación HTML5, El lenguaje del futuro
Presentación Seminario Cleformación HTML5, El lenguaje del futuro
 
CatalogArte
CatalogArte CatalogArte
CatalogArte
 
Maquetar pagina html con css
Maquetar pagina html con cssMaquetar pagina html con css
Maquetar pagina html con css
 
Diseño en la web
Diseño en la webDiseño en la web
Diseño en la web
 
Diseño web
Diseño webDiseño web
Diseño web
 
Ejemplos paginas html
Ejemplos paginas htmlEjemplos paginas html
Ejemplos paginas html
 
Catalogo en linea
Catalogo en lineaCatalogo en linea
Catalogo en linea
 
Html5
Html5Html5
Html5
 
Html5
Html5Html5
Html5
 
Magento Best Practices
Magento Best PracticesMagento Best Practices
Magento Best Practices
 
Trabajo práctico nº 3
Trabajo práctico nº 3Trabajo práctico nº 3
Trabajo práctico nº 3
 
Curso cei 351 front page, nivel básico
Curso cei 351   front page, nivel básicoCurso cei 351   front page, nivel básico
Curso cei 351 front page, nivel básico
 
Curso cei 339 dreamweaver, nivel básico
Curso cei 339   dreamweaver, nivel básicoCurso cei 339   dreamweaver, nivel básico
Curso cei 339 dreamweaver, nivel básico
 
Blog's
Blog'sBlog's
Blog's
 
#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!#JoomlaIO - Desarrollo de Plantillas para Joomla!
#JoomlaIO - Desarrollo de Plantillas para Joomla!
 

Último

Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basicoJOSE645741
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresKengYoshiIngaOchoa1
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxHarryArmandoLazaroBa
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfMariaGabrielaSandova2
 
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...mariaclaramb
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAPjuanrincon129309
 
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfAndada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfalguien92
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelomabel perez
 
Revista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdfRevista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdfANGELEMMANUELALBAAPA
 
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadCroquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadratc070603hmcmrha7
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfandrea Varela
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizingagbhuizinga2000
 
Arquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdfArquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdfsalazar1611ale
 
presentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentistapresentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentista30898575
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)LeonardoDantasRivas
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezRosibelVictoriaVelas
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxVanessaPobletePoblet
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxaurorialfonzo6
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)lemg25102006
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDAdiawaraplast
 

Último (20)

Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital  (1).pdf, para estudiantes de nivel basicoLibro DIBUJO I digital  (1).pdf, para estudiantes de nivel basico
Libro DIBUJO I digital (1).pdf, para estudiantes de nivel basico
 
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias TerrestresMedición IRI Diseño de Pavimentos Maestria en Vias Terrestres
Medición IRI Diseño de Pavimentos Maestria en Vias Terrestres
 
Diagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptxDiagramas de flujo metalurgico en mineria.pptx
Diagramas de flujo metalurgico en mineria.pptx
 
Triptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdfTriptico de Sistemas anticaídas Arnes.pdf
Triptico de Sistemas anticaídas Arnes.pdf
 
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
El cómic es algo serio: investigación sobre la realidad latinoamericana de la...
 
Plano de diseño de una Planta de tratamiento de aguas PTAP
Plano de diseño de una Planta de tratamiento de aguas  PTAPPlano de diseño de una Planta de tratamiento de aguas  PTAP
Plano de diseño de una Planta de tratamiento de aguas PTAP
 
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdfAndada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
Andada_Pullally_Alicahue_2021_(Comprimido)_-_Nicolás_Dragaš.pdf
 
contaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelocontaminacion del suelo 9.pptx cobntaminacion suelo
contaminacion del suelo 9.pptx cobntaminacion suelo
 
Revista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdfRevista_de_Bioarquitectura_y_Construccio.pdf
Revista_de_Bioarquitectura_y_Construccio.pdf
 
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridadCroquis de Hospital general (Ficticio) con señalizaciones de seguridad
Croquis de Hospital general (Ficticio) con señalizaciones de seguridad
 
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdfQue es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
Que es la arquitectura griega? Hecho por Andrea varela, arquitectura iv.pdf
 
Portafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B HuizingaPortafolio de Diseño Gráfico por Giorgio B Huizinga
Portafolio de Diseño Gráfico por Giorgio B Huizinga
 
Arquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdfArquitectura antigua. Salazar Alejandra.pdf
Arquitectura antigua. Salazar Alejandra.pdf
 
presentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentistapresentación de historia; arquitectura renacentista
presentación de historia; arquitectura renacentista
 
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
Arquitectos del Movimiento Moderno (Historia de la Arquitectura)
 
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel VelásquezLa Modernidad y Arquitectura Moderna - Rosibel Velásquez
La Modernidad y Arquitectura Moderna - Rosibel Velásquez
 
Clase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptxClase 8. Caracteristicas de la población.pptx
Clase 8. Caracteristicas de la población.pptx
 
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptxDanielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
Danielarora Martinez 31061614 ARQUITECTURA GRIEGA.pptx
 
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
PRESENTACION DE LA ARQUITECTURA GRIEGA (EDAD ANTIGUA)
 
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDALANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
LANZAMIENTO, NUEVOS SET DE COCINA, PETROLEUM, VINTAGE, CARAMEL Y LAVANDA
 

Sesion3 curso avanzado SPIPEDU

  • 1. 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 WIKI http://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 /
  • 2. 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 Buscador Estadísticas Sindicación de Contenidos Foros o Comentarios Agenda contenidos estructura hapaxmedia.net / licencia creative commons BY ES 2.5 /
  • 3. 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/ PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es
  • 4. 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
  • 5. 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 Blog Plantilla del Artículo en la sección Blog Cabecera. Aunque la imagen de la cabecera se controla en la parte interna Comentarios
  • 6. PROFUNDIZACIÓN DEL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es EDITAR ESQUELETOS MODELO 1 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
  • 7. 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
  • 8. 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
  • 9. 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 trabajar Atributo : identifica a que estilo nos referimos Valor : como queremos que sea el atributo
  • 10. INTRODUCCIÓN AL MANEJO DE SITIOS WEB DINÁMICOS http://www.spipedu.es div { font-size: 18px; color : #000; } CSS (Cascading Style Sheets)