Want to make creations as awesome as this one?

Transcript

@maestroSeb

guía de inicio básico

Blogsaverroes

Plugins

Página en construcción

Divi, Themify y Elementor

Página del profesorado

Módudos de interés para Inicio

Páginas básicas para la web

Elementos a tener en cuenta

¿Cómo editar una página? Builders

SECCIÓN 3Diseño de la web

Menús

Etiquetas

Categorías

Entradas

SECCIÓN 2Panel de administración

Usuarios

Ajustes de blog

Apariencia (Temas)

Ejemplos de Páginas hechas con Wordpress

¿Web o blog?

El CSM Wordpress

Tipos de contenidos en WP

SECCIÓN 1¿Qué es BlogsAverroes?

índice

01

BlogsaverrOes

BlogsAverroes es un servicio gratuito de la Consejería de Educación de la Junta de Andalucía, que tiene como finalidad proporcionar a toda la Comunidad Educativa (docentes, centros educativos, AMPAS) un espacio propio para la creación, administración y publicación de blogs y sitios web utilizando WordPress, de manera que les permita difundir sus experiencias educativas, publicar contenidos y actividades educativas o utilizarlo como recurso didáctico en el aula.

¿Qué es ?

Soporte integral

Además de alojamiento, el servicio incluye soporte para aclaraciones, sugerencias o dudas (por email)

Es una herramienta altamente customizable

Se adapta a las necesidades de cualquier centro y/o del docente que use la herramienta.

Enlace al sitio web de BlogsAverroes

Proporciona imagen corporativa

El dominio BlogsAverroes es la imagen corporativa bajo la cual se hayan los blogs docentes andaluces.

Se aloja en los servidores de la Consejería

Nos podemos despreocupar de los asuntos de administración de un Hosting.

¿Qué ventajas ofrece blogsaverroes frente a otras soluciones?

+info

Básicamente, es una aplicación web que permite construir páginas web y blogs de manera rápida y sencilla, sin necesidad de tener conocimientos técnicos.

(Sistema de Gestión de Contenidos)

ContentManagementSystem

Es un CMS:

¿Qué es wordpress?

¿Qué es wordpress?

Permite la participación de distintos usuarios con distintos permisos

Es muy fácil de usar. Dispone de una interfaz amigable e intuitiva y no requiere conocimientos de programación o lenguaje HTML.

Puede incorporar multitud de Temas (plantillas), plugins y widgets, que permiten personalizar fácilmente nuestro blog o nuestro sitio web.

Es sofware libre, se distribuye bajo licencia GNU General Public License.

Ambas soluciones. De ahí la elección de usar Wordpress.Este CMS es tan camaleónico que permite adoptar lo mejor de ambos mundos en nuestra web del centro. Se calcula que actualmente alrededor de un 30% de las páginas web de todo el mundo usan Wordpress en alguna de sus múltiples variantes.

¿Qué es lo mejor para la página del centro?

web

Una página web consta de varias páginas con información diversa cuyo diseño está planteado para ser estático en el tiempo y realizarle pocas modificaciones.

blog

Un blog es un sitio web que recopila cronológicamente textos o artículos, clasificados por categorías y etiquetas, apareciendo primero el más reciente.

página del centro: ¿Web o blog?

¿Qué diferencia hay?

Casa Blanca

Skype

Blog oficial Star Wars

Walt Disney Company

Spotify

Toyota Brasil

EJEMPLOS DE PÁGINAS WEB QUE NO IMAGINARÍAS QUE ESTÁN HECHAS CON WORDPRESS

CEIP Manuel Castro Orellana

Gabinete Bellas Artes (Málaga)

IES Villa de Mijas (Málaga)

CEIP Ntra. Sra. de Fátima (Sevilla)

EI El Real (Sevilla)

IES Alhadra (Almería)

EJEMPLOS DE PÁGINAS DE CENTROS EDUCATIVOS EN BLOGSAVERROES (WORDPRESS)

02

Blogsaverroes

Sección 02

PANEL DE ADMINISTRACIÓN(ESCRITORIO)

Es la cara pública y que todo el mundo puede ver

Desde aquí se administra, se diseña y se construye la página web

Página web

PANEL ADMINISTRATIVO

Las dos "caras" de wordpress

ya tengo mi blog activo... ¿Cómo accedo al panel de control?

Tendremos que añadir a la dirección del blog en la barra de direcciones la terminación /wp-admin

Ajustes Generales, de Lectura y para los Comentarios

Imágenes y archivos en general subidos a nuestra web

Añadir usuarios que puedan editar la web. Hay distintos perfiles: Administrador, Autor, Colaborador...

Añaden funcionalidades a nuestra web

Desde aquí podremos cambiar y configurar el tema o plantilla (theme) de nuestra web

Permite insertar un formulario de contacto

Para contenido permanente de la web

Artículos del blog. Clasificados por categorías y etiquetas. Ordenados por fecha. Aparece el autor/a

panel de administración

apariencia(temas)

Al solicita el Espacio de Centro, BlogsAverroes permite elegir entre 4 temas predefinidos, se puede elegir el que se quiera.Hay que tener precaución con el que se elige porque después, de esos cuatro solo aparecerá el tema escogido (los temas de aula sí aparecen todos siempre)

ajustes

En el siguiente vídeo veremos los ajustes que podemos realizar en nuestro blog. Dichos ajustes podremos cambiarlos cuantas veces queramos.

Para más información acerca de los perfiles, podéis entrar en esta página

usuarios

Vídeo sobre los usuarios y los distintos perfiles que podemos establecer en Wordpress para editar la web y/o las entradas del blog

En un blog pueden escribir varios autores/as.

Recopilados cronológicamente, en el blog aparece primero el más reciente.

  • Datos del centro
  • Oferta educativa
  • Instalaciones
  • ....

Son los textos y artículos del blog, clasificados mediante categorías y etiquetas.

Entradas

Se usan para el contenido fijo y más estático de una web, independiente del tiempo:

Páginas

tipos de contenidos en wordpress

En esta imagen se muestran todos los elementos básicos que se pueden observar en un blog de Wordpress.

BARRA LATERAL (WIDGETS)

COMENTARIOS

CATEGORÍA

FECHA

AUTOR

IMAGEN DESTACADA DE LA ENTRADA

TEXTO DE LA ENTRADA

TÍTULO

MENÚ

Análisis deun blog

CABECERA o HEADER

entradas

Vídeo explicativo sobre cómo realizar una ENTRADA en el blog, así como reeditarla o administrarla.

categorías

Las CATEGORÍAS son términos genéricos que sirven para realizar clasificaciones en el blog. Se utilizan palabras o frases para agrupar entradas de igual temática.

etiquetas

Las ETIQUETAS o TAGS se utilizan para etiquetar una determinada entrada del blog con palabras clave relacionadas.

menús

Vídeo explicativo sobre cómo realizar una entrada en el blog, así como reeditarla o administrarlas.

03

Blogsaverroes

Sección 03

Diseño y organizaciÓn de la web

Recuerda que la página ha de verse igual de bien en dispositivos móviles que en un ordenador (Responsive Design)

Visita muchas páginas y obtén ideas. Después boceta sobre un papel lo que quieres obtener antes de empezar con el diseño de tu página.

Utiliza combinaciones de colores que se ajusten y transmitan cohesión visual. No inventes, ya hay páginas que lo hacen por ti.

Utiliza unas fuentes modernas y atractivas (huye de Comic Sans) que sean legibles y "transmitan calma". Open Sans, Roboto, Montserrat...

La máxima MENOS ES MÁS es totalmente cierta y aconsejable. Demasiados elementos en una página pueden perder de vista lo importante y "agobian" visualmente.

ElemEntos a tener en cuenta en el diseño de una web

DOCUMENTOS OFICIALES DEL CENTRO

Servicios ofertados y edades

  • Una cabecera atractiva, significativa y que rememore al centro (fotografía, carrusel de imágenes, logo, etc).
  • Módulo con los últimos articulos publicados en el blog.
  • Módulo con las novedades más recientes.
  • Otros módulos con acceso a las secciones más importantes de la web.

Sugerencias para una buena página de INICIO

INSTALACIONES

Fotografías y/o descripción de los edificios y/o dependencias del centro

INICIO

Será la página más visitada de nuestra web y, por tanto, la más importante. Hay que cuidar su diseño y que nunca esté desactualizada

DATOS DEL CENTRO y OFERTA EDUCATIVA

Dirección, teléfonos de contacto, mapa con la ubicación, horarios de atención al público...

BLOG

Con las actividades significativas que se realizan en el centro

Páginas básicas de una web de centro

AMPA

Información y noticias de interés por parte del AMPA

Planes y programas

Planes y programas más relevantes del centro

Galería de fotos

Galería de fotos de interés

Secretaría electrónica

Documentación y formularios relevantes relacionados con la secretaría del centro

Este es un listado de otras páginas recomendables para incluir en el menú de nuestra web(incluir en el menú cuando ya estén terminadas)

Otras páginas recomendables

Biblioteca

Enlace al blog de la biblioteca del centro, catálogo, librería digital...

Plan de Apertura

Servicio de Comedor, Aula Matinal y Actividades extraescolares

¿cómo editar una página?

El modo de edición básico de una página es muy parecido al de una entrada del blog. En realidad, es tan básico que no permite realizar diseños atractivos y los elementos simplemente se van intercalando de manera ordenada uno detrás de otro

  • Las distintas partes de una página se dividen en SECCIONES, que pueden tener a su vez una o varias FILAS y cada una de éstas, uno o varios MÓDULOS.
  • Todos los elementos se pueden mover mediante drag & drop.
  • Cada parte puede tener su propio fondo y estilo.

entonces, ¿qué podemos hacer?

En este caso, nos vamos a ayudar de un CONSTRUCTOR visual. Algunos temas ya incluyen uno por defecto. Sus ventajas son:

elementor

Constructor que se puede activar por medio del Plugin Elementor para cualquier otro tema

themify

Constructor que viene por defecto con el tema de AULA Ultra

divi

Constructor de los cuatro temas de CENTRO: Pencil, Backbag, Typewriter y Chalk

¿qué constructores (builders) tenemos disponibles en blogsaverroes?

+info

+info

+info

Los tres constructores que se han mencionado tienen dos modos de edición:

Es el modo de edición "trasero". Muestra de manera esquemática con "cajas" las distintas secciones, filas y módulos.

Es el modo de edición "frontal" que nos permite editar directamente sobre la página tal cual la verían los visitantes.

Backend

Frontend

frontend vs backend

En el caso del constructor de Themify, se puede editar entrando en la página publicada y pulsando sobre el botón del MENÚ DE NAVEGACIÓN

¿Cómo se activan los constructores en modo frontend?

En el caso de Divi o Elementor, aparece un BOTÓN bien visible al crear o editar una página desde el menú.

El vídeo es largo, pero muy instructivo (comienza en el 23:51 la parte que nos interesa)

Vídeo explicativo sobre cómo realizar el diseño de una página con DIVI builder

Si quieres ver otro en el que cambio una cabecera pulsa aquí

Vídeo explicativo sobre cómo realizar el diseño de una página con THEMIFY builder

El vídeo es largo, pero muy instructivo (comienza en el 20:32 la parte que nos interesa)

Vídeo explicativo sobre cómo realizar el diseño de una página con el plugin ELEMENTOR

Página en construcción

Una buena opción mientras estamos construyendo nuestra web de inicio u otras que consideramos indispensables para empezar a funcionar es hacer una página de construcción para mostrar mientras tanto

plugins

Los plugins son aplicaciones o software que añaden funcionalidades a WordPress.Existen más de 30.000 plugins (la mayoría de pago), pero BlogsAverroes cuenta solo con unos cuantos.

Google Slider

Un carrusel de imágenes y/o texto informativo para la página que se edita desde Presentaciones de Google

Facebook

Al igual que con el anterior, con este módulo puedes integrar el timeline del Facebook del centro

TWITTER

Con este módulo vas a poder integrar el timeline del Twitter de tu centro en la web

MÓDULOS INTERESANTES PARA INCLUIR EN INICIO

+info

+info

+info

Para tener una página privada para el profesorado enlazada desde la web del centro podemos optar por dos opciones:

Página clásica con contraseña. Tiene el inconveniente de que hay que cambiarla cada cierto tiempo.

Accesible solo al claustro por medio de su correo electrónico personal y su contraseña.

Página de WP con contraseña

Google Site privado

Página del profes0rado

Mi Blog

Maestro de música y coordinador #TDE delCEIP Ntra. Sra. de FátimaOsuna - Sevilla

Sebastián Giraldo Jiménez