02_CLASES

Temas tratados en las clases

20190219 (1)

• Profesor: Gonzalo Berné  -  gera1397@gmail.com
• Sesión PC Clase: BLOG / blog
• Mi cuenta Google para Blogger: salvadorescuderjoaquin@gmail.com / UPZblog_xxxxxx
• Web Blogger: www.blogger.com
• Crear Blog con Blogger
• Panel de Control: Tema, Entradas (Guardar, Publicar, Editar, ......)
• Posicionamiento en Google, para busquedas
• Código HTML

20190221 (2)

• Diferencia ENTRADA  /  PAGINA
• Creación de "Páginas Nuevas". Para su visualización, es necesario añadirlas en <Páginas a Mostrar> dentro de <Configurar Lista de Páginas>. Gadget de Páginas.
• Cambiar TEMAS. Probamos con "Sencillo" y posteriormente "Vistas Dinámicas"
• PERSONALIZAR TEMAS (las distintas opciones pueden cambiar según el tema elegido): Tema  /  Fondo /  Ajustar Ancho  /  Diseño (Cuerpo y Pie de Página)  /  Avanzado..... 
• GUARDAR TEMA: Tema / Crear-Restaurar Copia de Seguridad
• GUARDAR CONTENIDO: Configuracion / Otros / Hacer Copia de Seguridad de Contenido

20190226 (3)

• Cambiamos a Tema "Emporio (2)"
• Recordamos PANEL DE CONTROL / TEMA / PERSONALIZAR : -Temas - Fondo - Ajustar Ancho - Diseño - Avanzado (Ir probando y viendo resultados)
• PANEL DE CONTROL / DISEÑO:
• FAVICON = Cambia logo de la pestaña del blog (yo lo cambio a mi foto de ferfil)
• VEMOS / AÑADIMOS GADGET´s (Herramientas de configuracion, para cuerpo del blog, barra lateral, etc..).  En particular:
• ADSENSE= Añade Publicidad
• CABECERA=Configurar cabecera... poner imagen, etc...
• SUSCRIPCION
• LISTA DE PAGINAS= Se indican las que deben ser visibles, su orden, ....
• ENTRADA DESTACADA= Resalta entradas que queremos indicar como "especiales"
• CUERPO DE PAGINA
• ETIQUETAS= Palabras clave que se añaden a las entradas, para su localizacion/busqueda. Para que se vean Etiquetas, previamente deben crearse en las entradas --> Entrada / Editar / Configuración de la Entrada (a la derecha) / Etiqueta .... Listo
• LISTA DE ENLACES
• ENTRADAS POPULARES
• ESTADISTICAS

20190228 (4)

• ESTADISTICAS
• LISTA DE BLOG´S
• SEGUIR POR CERREO ELECTRONIO
• FEED y ENLACES DE SUSCRIPCIÓN (los veremos mas adelante)
• TRADUCTOR (Translate de Google)
• LISTA (para publicar relación de cosas que nos gustan)
• FORMULARIO DE CONTACTO (Nombre-opcional / Correo Electronico y Mensaje-obligatorios) 
• WIKIPEDIA (enlace a Wikipedia)
• RECONOCIMIENTO
• DENUNCIAR USO INADECUADO
• HTLM / JAVASCRIP --> para insertar codigo de terceros que puede buscarse en la REd. En la Página de "Enlaces", pongo algunas referencias encontradas al respecto)

20190305
CINCOMARZADA. FESTIVO, SIN CLASE

20190307 (5)

• PANEL DE CONTROL / COMENTARIOS:
• LO BÁSICO: Titulo, Descripción, Privacidad, ........ Dirección del blog, ...... Https, ..... Autores,..... Lectores
• ENTRADAS, COMENTARIOS Y ELEMENTOS COMPARTIDOS: ...... verlo ......
• CORREO ELECTRONICO: Publicar entradas mediante envio por correo electronico (salvadorescuderjoaquin.xxxxxxxxxxxx@blogger.com). Tambien existe la opción de enviar las entradas a una lista de direcciones de correo electronico que se introduce, separada por comas.
• IDIOMA Y FORMATO: ...... verlo ......
• PREFERENCIAS PARA MOTORES DE BUSQUEDA: Etiquetas meta, Errores y redireccionamientos .... Google Search Console .... (nivel avanzado)
• OTROS: Importar y hacer copias de seguiridad (de contenido), Gestionar videos del blog, Eliminar blog (¡¡ojo!!), Feed del sitio ....., Google Analytics ....... (ya lo veré yo por mi cuenta) .....,
• CONFIGURACION DE USUARIO

20190312 (6)

• PANEL DE CONTROL / ESTADISTICAS:
• VISION GENERAL
• ENTRADAS
• FUENTES DE TRAFICO
• AUDIENCIA

• PANEL DE CONTROL / ENTRADAS (o PAGINAS) -- INSERTAR VIDEO:
• SUBIR
• DESDE YOUTUBE
• MIS VIDEOS DE YOUTUBE

• PANEL DE CONTROL / ENTRADAS (o PAGINAS) -- INSERTAR AUDIO:
• Necesitamos alguna página de "ayuda", como por ejemplo "ivoox".
• https://www.ivoox.com/
• Entramos con nuestra Cuenta-Google asociada al blog.
• Buscamos el AUDIO que queremos subir
• Pinchamos sobre + 
• Compartir
• Reproductor
• Copiamos el Codigo HTML de la versión (NO AMP) que queramos .... 
• ..... Y lo llevamos a una ENTRADA (o PAGINA), copiándolo en HTML

20190314 (7)

• PANEL DE CONTROL / DISEÑO:
• CABECERA - Editar y ver
• ENTRADAS DE BLOG - Editar
• Texto de enlace de la página. Puede cambiarse. 
• Reacciones .......

• INSERTAR FOTOS DE FLICKR EN EL BLOG:
• MI CUENTA FLICKR: jsalvadorescuder@yahoo.com xxxxxxxxx
• ALBUM = Mis Fotos (14 fotos) / Album para Blog (7 fotos)
• COMPARTIR
• INSERTAR = Aperece Codigo HTLM ... 
• Copiar .... y lo llevamos a una ENTRADA/PAGINA

• INSERTAR TWEET´S:
• MI CUENTA TWITTER: @twrboleta / jsalvadorescuder@gmail.com / xxxxxxxxx
• Elegir Tweet. Abrir el desplegable (flecha abajo) y elegir "Tweet insertado = Embed Tweet"
• .... Aparece Codigo HTLM. Copiar y llevar a ENTRADA/PAGINA 

• PANEL DE CONTROL / LISTA DE LECTURA:

  • Se ven entradas de todos los Blog´s a los que seguimos .... y también lista de los Blog´s seguidos.

20190319 (8)

• PRACTICAMOS HACIENDO UNA ENTRADA CON "TODO" LO QUE SABEMOS ...

• TEMAS (Templates = Plantillas)
• DE COMUNIDAD BLOGGER
• EXTERNOS
• Está bien la página: https://btemplates.com 
• Buscar en "Plantillas por:" (Templates by)
• Buscamos ELEGANTE / GREATMAG (Descarga y Demo ...). Lo descargamos. Descomprimimos
• Preguntas frecuentes
• GreatMag.XML. Es el fichero donde está la plantilla
• Logo
• Acceso directo xxx... Donde se facilitan especificaciones de configuración
• CARGAMOS GREATMAG en nuestro Blog: TEMA/ CREAR RESTABLECER COPIA DE SEGURIDAD / SELECCIONAR EL ARCHIVO "GREATMAG.XML" / ABRIR / SUBIR

20190321 (9)

• ELECCION DE DELEGADO DEL CURSO (Al final de clase)

• EDITAMOS / MODIFICAMOS la Plantilla GREATMAG, viendo la configuración facilitada en el Acceso Directo de la descarga
• COMO CONFIGURAR LOS MENUS DE NAVEGACION
• COMO CONFIGURAR EL CONTROL DESLIZANTE ......
• DIVERSAS PRUEBAS y ETC., ETC ......

• Para conseguir la URL de fotos para el slider -->Descargar Foto a PC / Abrir Entrada / Insertar la Imagen / Copiar la direccion ... y ya tenemos la URL. Se puede borrar la Entrada, porque la imagen permanecerá para siempre en nuestro Blog ...

• Tambien desde Flickr, se puede conseguir la URL de una imagen: ENTRAR A LA FOTO / DESCARGAR / VER TODOS LOS TAMAÑOS / COPIAR DIRECCION DE IMAGEN .... y ya... 

20190326 (10)

• Cambiamos TEMA a "Emporio" (de la Comunidad Blogger), para ver mejor lo que quiere enseñarnos el profe. 

• En Google, buscamos "bootstrap", para encontrar y acceder a la siguiente web:

• https://getbootstrap.com  (libreria de programacion HTML/CSS, con utilidades varias)

• DOCUMENTACION

• COMPONENTES
• LAS ALERTAS
• TARJETAS
• BOTONES
• CORRUSEL
• HILANDEROS
• PROGRESOS (barras de progreso)
• FORMULARIOS (FORMAS)
• NAVBAR (BARRAS DE NAVEGACION)
• etc, etc, ... 

• PRACTICAMOS, METIENDO EL CODIGO DE UNA "TARJETA" EN UN GADGET/HTML

• Previamente, para que se vea bien en nuestro blog, deberemos coger el código CSS de Getting started, y ponerlo en la cabecera de nuestro blog: TEMA / EDITAR EL TEMA EN HTML / BUSCAR EL INICIO DE LA CABECERA <head> y ahí (debajo del <head>), pegar el codigo. La cabecera se cierra con la ETIQUETA </head>.
• Si observamos un ERROR, deberemos de añadir "/" al final del codigo insertado, que finalizará en />. Este es el codigo, a poner debajo de <head>:
• <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"/>
• Si el codigo comentado anteriormente, se pone en nuestra cabecera, las "utilidades" de bootstrap se entenderán en cualquier parte del blog. Pero tambien existe la posibilidad de copiar el codigo al principio de una ENTRADA / PAGINA donde debajo pongamos el codigo de la utilidad .... y todo se verá bien en esa Entrada/Pagina...

20190328 (11)

• Trabajamos con otra "libreria de codigo", ... sobre "reacciones", "emoticononos", etc...

• En Google, buscamos "sharethis", para encontrar y acceder a la siguiente web:

• https://www.sharethis.com

• Deberemos registrarnos
• salvadorescuderjoaquin@gmail.com
• UPZblog_xxxxxx
• Dominio = Direccion del blog = miprimerblogbloggerjse.blogspot.com
• PODEMOS VER UN ERROR de verificación de dominio. Para resolverlo deberemos añadir a la cabecera de nuestro blog, el codigo que obtenemos en GET THE CODE ..... Y ANTES DE "product" TENEMOS QUE PONER "amp;" // Este es el código, a poner debajo de <head>:
• <script async='async' src='//platform-api.sharethis.com/js/sharethis.js#property=5c9cfa0e9b272f00119ab7e7&amp;product=social-ab' type='text/javascript'/>

• y VERIFICAR EN SHARETHIS

• DASHBOARD

• SOCIAL ANALYTICS.... estadisticas que se pueden exportar al blog.

• REACTION BUTTONS --> CONFIGURAR / COPIAR CODIGO / PEGARLO EN GADGET O ENTRADA/PAGINA

• BOTONES PARA COMPARTIR --> NO HACE FALTA COPIAR CODIGO (no hay) ... Y LOS BOTONES APARECERAN AUTOMATICAMENTE EN NUESTRO BLOG. Estos botones pueden ser de distintos tipo (probarlos):
• PEGAJOSOS
• LINEAS EN BOTONES
• BOTONES PERSONALIZADOS
• COMPARTIR ..... 

20190402 (12)

• Licencias, condiciones, copyright ..... y comentarios sobre lo que se puede / debe hacer .....

• Si copiamos algo .... debe DECIRSE QUIEN ES EL AUTOR DE LA APORTACION ORIGINAL, Y/O REFERENCIAR EL SITIO DE DONDE COGEMOS LA INFORMACION

• Conocer la NORMATIVA DE LA UNION EUROPEA: Ley Copyright (Art. 13, ... ) 

• Añadimos en nuestro Blog, LICENCIA DE CREATIVE COMMONS: 

• https:// creativecommons.org

• "Share your work"
• Choose a license / GET STARTED, para crear nuestra licencia. Deberemos responder obligatoriamente a dos preguntas (1.- ¿Permitir que se compartan las adaptaciones de su obra? / 2.- ¿Permitir usos comerciales de su obra?) y cumplimentar, opcionalmente, el apartado de "Ayuda a que se reconozca su autoria". --> Se genera codigo HTML
• Copiaremos el codigo generado en DISEÑO / PIE DE PAGINA / AÑADIR GADGET/HTML-JAVASCRIP, con un titulo similar a "Mi licencia Crative Commons"

• Retomamos el tema del dia anterior.....

• https://sharethis.com

• Login
• FOLLOW BUTTOMS (Botones de Seguimiento ... para que nos sigan)
• Configuramos los botones 
• Copiamos codigo HTML generado en DISEÑO /
   PIE DE PAGINA / AÑADIR GADGET/HTML-JAVASCRIP, con un titulo similar a "Sigueme"

20190404 (13)

• Gadget con PROGRAMACION TV
• Ver Gadget PROGRAMACION TV. Analizar y depurar Código HTLM

• Efecto Nieve.
• http://workshop.rs/2012/01/jquery-snow-falling-plugin/#more-279
• Ver Codigo HTML en cabecera del Tema: