Want to make creations as awesome as this one?

No description

Transcript

Blogsaverroes

guía de inicio básico

@maestroSeb

índice

SECCIÓN 1¿Qué es BlogsAverroes?

Tipos de contenidos en WP

El CSM Wordpress

¿Web o blog?

Ejemplos de Páginas hechas con Wordpress

Apariencia (Temas)

Ajustes de blog

Usuarios

SECCIÓN 2Panel de administración

Entradas

Categorías

Etiquetas

Menús

SECCIÓN 3Diseño de la web

¿Cómo editar una página? Builders

Elementos a tener en cuenta

Páginas básicas para la web

Módudos de interés para Inicio

Página del profesorado

Divi, Themify y Elementor

Página en construcción

Plugins

¿Qué es ?

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.

BlogsaverrOes

01

+info

¿Qué ventajas ofrece blogsaverroes frente a otras soluciones?

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

Se aloja en los servidores de la Consejería

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

Proporciona imagen corporativa

Enlace al sitio web de BlogsAverroes

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

Es una herramienta altamente customizable

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

blogsaverroes.ced@juntadeandalucia.es

Soporte integral

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

¿Qué es wordpress?

Es un CMS:

ContentManagementSystem

(Sistema de Gestión de Contenidos)

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.

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

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

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

Permite la participación de distintos usuarios con distintos permisos

¿Qué es wordpress?

¿Qué diferencia hay?

página del centro: ¿Web o 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.

blog

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.

web

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

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.

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

Toyota Brasil

+

Spotify

+

Walt Disney Company

+

Blog oficial Star Wars

+

Skype

+

Casa Blanca

+

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

IES Alhadra (Almería)

+

EI El Real (Sevilla)

+

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

+

IES Villa de Mijas (Málaga)

+

Gabinete Bellas Artes (Málaga)

+

CEIP Manuel Castro Orellana

+

PANEL DE ADMINISTRACIÓN(ESCRITORIO)

Sección 02

Blogsaverroes

02

Las dos "caras" de wordpress

PANEL ADMINISTRATIVO

Página web

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

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

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

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

panel de administración

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

Para contenido permanente de la web

Permite insertar un formulario de contacto

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

Añaden funcionalidades a nuestra web

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

Imágenes y archivos en general subidos a nuestra web

Ajustes Generales, de Lectura y para los Comentarios

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)

apariencia(temas)

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

ajustes

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

usuarios

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

tipos de contenidos en wordpress

Páginas

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

Entradas

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

Datos del centroOferta educativaInstalaciones....

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

En un blog pueden escribir varios autores/as.

+

CABECERA o HEADER

Análisis deun blog

MENÚ

TÍTULO

TEXTO DE LA ENTRADA

IMAGEN DESTACADA DE LA ENTRADA

AUTOR

FECHA

CATEGORÍA

COMENTARIOS

BARRA LATERAL (WIDGETS)

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

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

entradas

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.

categorías

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

etiquetas

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

menús

Diseño y organizaciÓn de la web

Sección 03

Blogsaverroes

03

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

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.

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

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

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.

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

RESPONSIVE DESIGN

Páginas básicas de una web de centro

Con las actividades significativas que se realizan en el centro

BLOG

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

DATOS DEL CENTRO y OFERTA EDUCATIVA

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

INICIO

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

INSTALACIONES

Sugerencias para una buena página de INICIO

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.

Servicios ofertados y edades

DOCUMENTOS OFICIALES DEL CENTRO

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Servicio de Comedor, Aula Matinal y Actividades extraescolares

Plan de Apertura

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

Biblioteca

Otras páginas recomendables

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)

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

Secretaría electrónica

Galería de fotos de interés

Galería de fotos

Planes y programas más relevantes del centro

Planes y programas

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

AMPA

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

Lorem ipsum dolor sit amet consectetuer adipiscing

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

¿cómo editar una página?

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

entonces, ¿qué podemos hacer?

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.

+info

+info

+info

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

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

divi

Constructor que viene por defecto con el tema de AULA Ultra

themify

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

elementor

frontend vs backend

Frontend

Backend

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

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

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

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

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

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

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

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 THEMIFYbuilder

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 el plugin ELEMENTOR

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

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

Página en construcción

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.

plugins

+info

+info

+info

MÓDULOS INTERESANTES PARA INCLUIR EN INICIO

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

TWITTER

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

Facebook

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

Google Slider

A la hora de personalizar un slider de imágenes y/o mensajes, pocas cosas son más cómodas que crear una presentación. Con este método puedes crear tu propia presentación en Presentaciones de Google y que dichos cambios se vean automáticamente en el slider de tu web:CÓDIGO PARA INCLUIR EL SLIDER<div class="embed-container" style="position: relative; padding-bottom: 25%; height: 0; overflow: hidden; max-width: 100%;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://docs.google.com/presentation/d/e/SUSTITUIRCÓDIGO/embed?start=true&amp;loop=true&amp;delayms=7000&amp;rm=minimal" width="800" height="200" allowfullscreen="allowfullscreen"></iframe></div>Sustituir laparte roja con el código de la presentación PUBLICADA de nuestro slider. Aquí os explico cómo publicar una presentación y dónde obtener el código:Sustituir laparte azul con el tamaño de la presentación de nuestro slider. En el porcentaje poner la PROPORCIÓN entre el ALTO/ANCHO

Página del profes0rado

Google Site privado

Página de WP con contraseña

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

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

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

Sebastián Giraldo Jiménez

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

Mi Blog