Módulo 3- Blogger Completo

MÓDULO 3: BLOGGER

EL TEMARIO •WEBLOGS ¿DE QUÉ HABLAMOS CUANDO HABLAMOS DE BLOGS? 2H •HERRAMIENTAS Y CONCEPTOS 2H •BLOGGER 14H •WORDPRESS 14H •OTRAS PLATAFORMAS 5H •CAJÓN DE SASTRE 3H

MÓDULO 3: ÍNDICE CREAR UN BLOG EL ESCRITORIO DE BLOGGER DISEÑO DEL BLOG APROVECHAR AL MÁXIMO EL BLOG CONFIGURAR UN DOMINIO PERSONALIZADO TRABAJAR CON IMÁGENES CONFIGURAR UNA TIENDA EN EL BLOG SOLUCIÓN DE PROBLEMAS

Chrome

YouTube

Alertas

Picasa

Gmail

UNIVERSO GOOGLE

Maps

CREAR UN BLOG

CREAR UN BLOG • Cuenta en GMAIL.

CREAR UN BLOG

CREAR UN BLOG Perfil de Blogger •Google+ •Perfil limitado

CREAR UN BLOG

CONCURSO FINAL DE CURSO 10 JUNIO

•Blogs gratuitos •Presentación de Ideas •Votación popular •Valoración •Diseño •Contenido •Estructura ¿Premio?

PRÁCTICA

Pensamos un nombre para el blog Lo abrimos y lo apuntamos en la hoja.

EL ESCRITORIO

EL ESCRITORIO Perfil conectado con Google+

Nueva entrada Listado entradas

Crear nuevo blog

Menú Ver blog

Blogs que sigues

EL ESCRITORIO GOOGLE +: La importancia de tener el perfil perfectamente actualizado

EL PERFIL

EL ESCRITORIO

EL PERFIL

Kit-kat Google+

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE +

GOOGLE + Inicio = Muro de Facebook. Actividad de tus Círculos. Páginas = Páginas de Facebook Comunidades = Grupos de Facebook Perfil = Nuestro perfil Explora: Descubrir nuevos contenidos. Fotos: Picasa Encontrar personas Local = Google Places Hancouts = Skype Juegos

EL ESCRITORIO

EL PERFIL

Perfil no conectado con Google+ http://www.blogger.com/edit-profile.g

EL ESCRITORIO

EL PERFIL

Perfil no conectado con Google+ http://www.blogger.com/edit-profile.g

PRÁCTICA

Editamos al máximo nuestro perfil

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

EL ESCRITORIO

PRÁCTICA

• Configurar las opciones del blog. • Crear una página (de prueba) y hacerla visible.

13 Mayo

PUBLICAR UNA ENTRADA

LAS ENTRADAS •Son la esencia del blog •Publicarlas según un calendario de contenidos y regularmente. •NO PLAGIAR CONTENIDOS •Citar siempre la fuente •Publicar contenido relevante para el usuario y nunca en “formato web”.

LAS ENTRADAS

•Igual que un procesador de textos:

añadir fotos, enlaces, formato al texto, alinearlo, viñetas, entrecomillado.... •Interesante Salto de Línea (no entradas completas en index) •Eliminar formato. Para cuando copiamos y pegamos texto. •HTML. Para embeber contenido como vídeos en YouTube (app), presentaciones en slideshare...etc. También para acciones que no podemos hacer con el menú de cabecera.

LAS ENTRADAS Tengo la entrada. Revisada y lista para publicar. ¿Y ahora?

PRÁCTICA

• Editar nuestra primera entrada en el blog.

14 Mayo

DISEÑO DEL BLOG

DISEÑO: ELEMENTOS DE LA PÁGINA

DISEÑO: ELEMENTOS DE LA PÁGINA

LA BARRA DE NAVEGACIÓN

PRÁCTICA

ADAPTAMOS LA BARRA DE NAVEGACIÓN A NUETROS BLOGS.

DISEÑO: ELEMENTOS DE LA PÁGINA

FAVICON

DISEÑO: ELEMENTOS DE LA PÁGINA • Los gadgets ocupan la mayor parte del diseño del blog. En particular la columna lateral. • Los gadgets no le deben restar protagonismo a los post y han de adaptarse al propósito del blog. • Seleccionamos sólo los necesarios. GADGET

DISEÑO: ELEMENTOS DE LA PÁGINA •

PÁGINAS

•

ADSENSE

•

SEGUIDORES

•

CUADRO DE BÚSQUEDA

•

HTML/JAVASCRIPT

•

IMAGEN

•

PRESENTACIÓN

•

LISTA DE ENLACES

•

ETIQUETAS

•

ENLACES DE SUSCRIPCIÓN

•

PERFIL

•

ARCHIVO DEL BLOG

•

CABECERA DE LA PÁGINA

GADGET

DISEÑO: ELEMENTOS DE LA PÁGINA Cada Gadget, tiene sus opciones

GADGET

DISEÑO: ELEMENTOS DE LA PÁGINA CUADRO DE BÚSQUEDA •

Permite a los visitantes buscar con rapidez en nuestro blog, sin tener que desplazarse ni visitar muchas etiquetas para intentar localizar lo que está busacando.

•

Añadir: •

Elementos de la página: Añadir un gadget. (Arriba en la columna lateral derecha)

•

“Lo básico” Cuadro de Búsqueda.

•

Seleccionamos “este blog”.

•

Seleccionamos el título del gadget

•

Guardar

•

Colocar en la posición correcta (si no lo está)

GADGET

DISEÑO: ELEMENTOS DE LA PÁGINA CUADRO DE BÚSQUEDA

GADGET

DISEÑO: ELEMENTOS DE LA PÁGINA ENLACES DE SUSCRIPCIÓN Permite a los visitantes, suscribirse a las entradas o comentarios del blog, informándoles de nuevas actualizaciones. Añadir: •Añadir Gadgets •Lo básico: enlaces de suscripción (seguir por correo electrónico) •Añadimos la URL de FeedBurner •Cambiamos el título •Guardar. Lo veremos en detalle.

GADGET

PRÁCTICA • Añadimos el Gadget de Búsqueda • Añadimos el Gadget de Suscripción (previa configuración Feedburner automático-)

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO ETIQUETAS

• Antes de nada. Comprobamos que hemos añadido varias etiquetas a la entrada de prueba. • Añadimos el gadget como los anteriores.

GADGET

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO LISTA DE ENLACES

• Enlaces que recomendamos a nuestros lectores. • Se van de nuestra página, porque el enlace se abre en la misma ventana. • Lista de enlaces, no de blogs.

Añadimos tres enlaces. Uno de ellos, el blog del curso: http://bloggerprofesionalgijon.blogspot.com.es

GADGET

15 Mayo

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO CALENDARIO •

Configuramos Google Calendar

•

Creamos un nuevo calendario

•

Añadimos los eventos que queramos.

•

Configuración:

¡Vamos a intentarlo!

•

Debajo Mis calendarios - Configuración

•

Compartir este calendario

•

Hacer el calendario público

•

Confirmar.

•

Compartido: editar configuración.

•

Pestaña detalles del calendario, botón HTML.

•

Herramienta de configuración.

•

Anchura: 180 o 220 px.

•

Copiamos el código y lo añadimos en el Gadget.

GADGET

16 Mayo

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO • Cabecera de la página. • Banner diseñado en forma gráfica que ocupa el lugar del texto en la zona de la cabeceera. • Podemos hacer que aparezca detrás del título (si es una imagen de fondo) o en lugar del título y la descripción. • Diseño: Editar cabecera. CABECERA

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO AÑADIR BANNER

CABECERA

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO AÑADIR BANNER

CABECERA

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO • Nos permite aplicar un diseño seleccionado: Plantillas. • Personalizar el fondo. Imagen de fondo y gama de colores principal. • Personalizar el diseño. Diseño del cuerpo del blog, del pié de página y ajustar el ancho. • Avanzado. Elementos de la página (texto, fondos, enlaces, títulos de entrada...) Colores y Fuentes. Código CSS PLANTILLAS

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO

PLANTILLAS

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO

FONDO Y GAMA DE COLORES PRINCIPALES

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO

DISEÑO Y ANCHO

DISEÑO: ELEMENTOS DE LA PÁGINA DISEÑO

Modificar el color y la fuente de elementos específicos del blog (Texto de página, Fondos, Enlaces, Título del blog, Título de la entrada...)

AVANZADO

PRÁCTICA

• Personalizamos nuestro blog.

20 Mayo

APROVECHAR AL MÁXIMO EL BLOG

AUMENTAR TRÁFICO 1. Suscripciones por Email de FeedBurner 2. Contenido de las entradas y palabras clave 3. Metaetiquetas 4. Título y descripción del blog 5. Enlaces de retroceso 6. Lista de blog 7. Gadget Add This

AUMENTAR TRÁFICO • Permitir a los visitantes suscribirse a nuestro blog por correo electrónico. • feedburner.google.com • Creamos una nueva fuente (pegamos la dirección de nuestro blog) • Siguiente 1. FEEDBURNER

AUMENTAR TRÁFICO

X

1. FEEDBURNER

AUMENTAR TRÁFICO

1. FEEDBURNER

AUMENTAR TRÁFICO

1. FEEDBURNER

AUMENTAR TRÁFICO PASO 1

1. FEEDBURNER

AUMENTAR TRÁFICO PASO 2

1. FEEDBURNER

AUMENTAR TRÁFICO • El contenido no tiene que tratar sólo de nuestro producto o servicio. • Temática amplia • Las entradas deben tener una buena redacción. • Contener palabras clave sobre nuestro negocio (o proyecto personal) en la redacción y en el título. • Sin pasarnos. El 2 o 3% del contenido total deben ser palabras clave (si no, nos catalogan de Spam) • Ortografía!! • Periodicidad. 2. CONTENIDO

AUMENTAR TRÁFICO • Línea de código HTML que describe nuestro sitio Web. • Se suelen colocar en la parte superior de la página: Title, keywords y descripción. • Son para los motores de búsqueda. 3. METAETIQUETAS

AUMENTAR TRÁFICO Añadimos Metaetiquetas al Blog: • Escritorio - Plantilla - Edición HTML • Buscamos • Escribimos <meta name=”keywords” content=”aquí ponemos nuestras palabras clave separadas por coma y entrecomilladas”/> <meta name=”description” content=”hacemos una descripción breve de nuestro blog”/> • Guardar plantilla

3. METAETIQUETAS

AUMENTAR TRÁFICO

3. METAETIQUETAS

PRÁCTICA

AÑADIMOS KEYWORDS Y DESCRIPCIÓN AL BLOG

21 Mayo

AUMENTAR TRÁFICO Diseño - Editar Cabecera.

4. TÍTULO Y DESCRIPCIÓN DEL BLOG

AUMENTAR TRÁFICO • Enlaces de retroceso - Backliks Pingback Wordpress • Lo activamos en Configuración Entradas y comentarios - Backlinks Mostrar. • Nos aparecerán los enlaces que otras personas han hecho a nuestro post 5. ENLACES DE RETROCESO

AUMENTAR TRÁFICO • Contenido complementario a nuestro blog. • Recomendaciones • Mejora el posicionamiento web. • Añadimos aplicación, opciones y blogs. 6.LISTA DE BLOGS

AUMENTAR TRÁFICO

6. LISTA DE BLOGS

AUMENTAR TRÁFICO

6. LISTA DE BLOGS

PRÁCTICA

AÑADIMOS EL BLOG DEL CURSO (Y ALGÚN OTRO) A NUESTROS BLOGS

6. AÑADIMOS LISTA DE BLOGS

AUMENTAR TRÁFICO • Ofrecemos la posibilidad a los lectores de compartir de forma rápida y fácil nuestras entradas. • El objetivo: aumentar el tráfico al blog. • www.addthis.com y nos registramos 7. GADGET ADDTHIS

AUMENTAR TRÁFICO

7. GADGET ADDTHIS

AUMENTAR TRÁFICO • Problema: salen duplicados porque blogger los tiene ya activados. • Solución: Borrarlos del HTML. Quita de Edición HTML de Blogger y expandiento privilegios primero, línea:

7. GADGET ADDTHIS

AUMENTAR TRÁFICO

AÑADIMOS EL GADGET A NUESTRO BLOG

7. GADGET ADDTHIS

22 Mayo

Anexo. TWITTER

PERO… ¿QUÉ ES TWITTER EXACTAMENTE TWITTER? ∗ Un microblogging : 140 caracteres ∗ Herramienta para compartir no sólo qué estás haciendo, sino también contenido interesante y relevante. (Links) ∗ Representa los valores de la “web social”: Innovación, creatividad, libertad, meritocracia, comunicación, participación, co-creación y colaboración. ∗ Open innovation (los usuarios redefinen constantemente sus usos) ∗ Multidimensional (diferentes tipos de relación) ∗ Herramienta ∗ No es un blog ni un chat, ni un sitio donde sólo contar qué estás haciendo.

@gijon2013

TWITTER. Tipos de relación ∗ Sigo y no me siguen ∗ Me siguen y yo no les sigo ∗ Nos seguimos los dos (amigos) ∗ Nos nos seguimos pero podemos ver sus actualizaciones (búsquedas)

@gijon2013

TWITTER: Terminología ∗ Avatar: Es la imagen de cada usuario. Block: Es el acto de evitar que un usuario pueda ser tu seguidor, tampoco aparecerán tus Twets en su Timeline y no aparecerás en su lista de Followings ∗ Direct Messages (DM): Son los Mensajes Directos privados, y para poder enviar un DM a un usuario, éste debe de ser tu seguidor ∗ Favoritos: Tweets favoritos y marcados con una estrella. ∗ Followear: Acción de seguir a alguien. ∗ Follower: Es cada uno de los usuarios que te sigue en Twitter. Cada vez que tu "Twittees" algo, aparecerá en su timeline y podrán leerlo.

∗ Home: página de usuario es el centro de tu actividad en Twitter vía web. ∗ Menciones: Son cada uno de los Tweets en los que se incluye (menciona) tu nombre de usuario. Es importante no confundir menciones con Replys, ya que en el segundo caso, se refiere a aquellos Tweets que comienzan con @Nombreusuario. ∗ Followfriday (#FF): Acción realizada en viernes y por la que un usuario de twitter recomienda seguir a otro usuario, por algún motivo. ∗ Following: Usuarios a los que sigues. Todos sus tweets los verás en tu Timeline. ∗ Hashtag (#): Sirve para etiquetar los Tweets que tratan sobre temas específicos y facilitar su búsqueda en Twitter. Pueden introducirse en cualquier parte del texto.

@gijon2013

TWITTER: terminología ∗ Timeline: Es la página donde se muestran los Tweets que tu escribes y los de los usuarios a los que sigues. ∗ Trending Topics: (Temas Populares) : Son los temas más populares en cada momento en Twitter. Segmentado por país. ∗ Tweet: Es cada uno de los mensajes de un máximo de 140 caracteres que se pueden enviar a través del servicio de Twitter. ∗ Twittear: Acción de emitir Tweets en Twitter. ∗ Unfollowear: Acto contrario a Followear, es decir, se deja de seguir a un usuario en Twitter. Sus Tweets no aparecerán más en tu Timeline. ∗ Username: Es el nombre de cada usuario en Twitter.

∗ Perfil: Es la parte de cada cuenta que es pública y visible para el resto de los usuarios y para cualquier navegante. Puedes acceder al perfil de cualquier usuario utilizando la fórmula http://twitter.com/ NombreUsuario en tu navegador. ∗ Reply (@): Es un Tweet enviado directamente a ti. Para enviar una Reply utiliza la fórmula @NombreUsuario + tweet a enviar y el usuario de destino la recibirá en sus Menciones. ∗ Retweet (RT): Son una forma de republicar un Tweet de alguno de los usuarios a los que sigues y que consideras especialmente interesante. Dos formas de hacer el tweet: ∗ Automático: avatar y user del tweet original ∗ Editado: “RT @user texto texto…”

∗ Modified Tweet. (MT). Es un RT pero modificado.

@gijon2013

TWITTER: las listas Son la forma de organizar a tus followers por temática. Imprescindibles en tu cuenta de twitter. Datos: ∗ Nombre de la lista ∗ Descripción ∗ Privacidad ∗ Pública (todo el mundo puede verla e incluso seguirla) ∗ Privada 100% incluso para la gente que agregues a ella)

@gijon2013

TWITTER: usos USOS DE TWITTER ∗ Posicionamiento. Posicionar tu marca o producto en diferentes temáticas ∗ Generación de Branding.  ∗ Generación de Lealtad. Al darte a conocer y estar interactuando con las personas en la red de forma continua, vas a generar un vínculo, van a confiar en tu empresa o marca y producirá que seas la marca de referencia. ∗ Atención al cliente. Atención inmediata, en tiempo real. ∗ Investigación de mercado. Twitter es un estudio de mercado viviente. Es un termómetro del sentir y pensar de la gente, puedes explorar diferentes temas y extraer información relevante de lo que se dice de éstos, puedes conocer el comportamiento de las personas, qué genera reacciones, conocer tendencias, incluso hasta podrías hacer propuesta de productos o servicios y ver la aceptación de las mismas con tu comunidad.

http://www.dosensocial.com/2012/04/06/uso-de-twitter-para-empresas-ganadoras/

@gijon2013

TWITTER: usos USOS DE TWITTER ∗ Encontrar oportunidades de negocio.  ∗ Hacer Networking y crear relaciones.  ∗ Acceder a nuevos mercados. ∗ Monitorear la reputación de tu marca.  ∗ Monitorear a la competencia.  ∗ Generación de tráfico para tu sitio web.  ∗ Convertirse en líder de opinión.  ∗ Aprender del nuevo marketing.  ∗ Dar a conocer temáticas de tu empresa.  ∗ Promoción. 

http://www.dosensocial.com/2012/04/06/uso-de-twitter-para-empresas-ganadoras/

@gijon2013

Anexo. BIT.LY

BIT.LY

BIT.LY •Podemos usarlo registrados (recomendado) o sin registrar •Acortar enlaces. Ahorrar espacio y mejor aspecto visual. •ESTADÍSTICAS: •Número de clics por hora •Origen de los tweets •Distribución geográfica •Código QR asociado •Histórico de enlaces compartidos.

BIT.LY

23 Mayo

INTEGRACIÓN DE LAS REDES SOCIALES

INTEGRACIÓN DE LAS REDES SOCIALES Obtener el widget • Twitter.com • Configuración • Widgets • Selecciono: Cronología de usuarios, favoritos, lista, buscar. • Configuro opciones. Guardar TWITTER

INTEGRACIÓN DE LAS REDES SOCIALES

TWITTER

INTEGRACIÓN DE LAS REDES SOCIALES

TWITTER

PRÁCTICA • Colocamos un widget de twitter en nuestro blog. • Si no tenéis cuenta de twitter: • Usuario: papracticar • Pass: cursogijon TWITTER

INTEGRACIÓN DE LAS REDES SOCIALES

• FEEDBURNER. Automatizar twitter • #consejopersonal NO lo hagáis

INTEGRACIÓN DE LAS REDES SOCIALES

INTEGRACIÓN DE LAS REDES SOCIALES

INTEGRACIÓN DE LAS REDES SOCIALES Obtener el widget • http://developers.facebook.com/docs/ plugins/ • Elegimos el Plugin que queramos • Configuramos las opciones. • Copiamos el código (IFRAME) FACEBOOK

INTEGRACIÓN DE LAS REDES SOCIALES

FACEBOOK

INTEGRACIÓN DE LAS REDES SOCIALES

FACEBOOK

PRÁCTICA • Colocamos el plugin “like box” en nuestro blog. • www.facebook.com/ PÁGINAQUEQUERAMOS • Opción: /CursoCMUCJC TWITTER

27-28 Mayo

GOOGLE ANALYTICS

ANALYTICS Instalar Analytics 1. Entramos en Google Analytics 2. Añadimos el blog. Administrador Nueva Cuenta. 3. Completamos formulario 4. Copiamos el ID de seguimiento. 5. Insertamos en HTML antes de

ANALYTICS

ANALYTICS

ANALYTICS ANALYTICS BLOG • Entradas: Páginas vistas • Fuentes de tráfico: URL, sitios de referencia, Palabras clave • Público: Paises, navegadores, sistemas operativos

ANALYTICS ANALYTICS.COM

ANALYTICS ALGUNAS MÉTRICAS • Páginas Vistas: Páginas distintas que se han visto • Visitas. Sesiones nuevas. (Más de 29 minutos, sesión nueva) • Visitantes únicos. Dispositivos únicos que se conectan (un mismo usuario en tres dispositivos, 3 visitantes) • Tiempo de estancia en el sitio web. (Excepto la última página, que no contabiliza. • Tasa de Rebote. Visitas que estuvieron pocos segundos y sólo miraron una página.

ANALYTICS ALGUNAS MÉTRICAS EL ORIGEN DE LAS VISITAS • Buscadores. Orgánico y pagado • Referrals. Enlaces de otros sitios web. • Campañas. Otros etiquetados. • Tráfico directo. (Url, favorito...)

ANALYTICS ANÁLISIS DEL COMPORTAMIENTO • ¿Por dónde entran? • ¿De dónde nos visitan? • ¿Por dónde salen? • ¿Donde hicieron un clic? • ¿Qué producto visitaron? • ¿Cuánto tiempo se quedaron? • ¿Cuántas páginas vieron? • ¿Qué fichero se descargaron? • ¿Qué buscaron en el buscador interno?

29 Mayo

ADSENSE

ADSENSE PROS Y CONTRAS DE INSTALARLO • Valoración negativa por antivirus • Publicidad que no te interesa, incluso de la competencia (contenido) • No lo controlas, es automático. • A veces está mal visto por usuarios.

ADSENSE

ADSENSE Google AdSense está totalmente integrado en Blogger Es muy sencillo registrarte en Blogger y crear bloques de anuncios: solo tienes que hacer clic en la pestaña Ingresos de tu panel. Una vez que te hayas registrado, indícanos dónde quieres que mostremos los anuncios y empezaremos a hacerlo en cuanto se apruebe la solicitud. AdSense muestra anuncios relevantes en tus blogs AdSense se encarga de buscar anuncios de texto e imágenes adecuados para tu blog en función de su contenido y de sus visitantes. Los anuncios los crean y pagan anunciantes que quieren promocionar sus productos. Continúa creando contenido de calidad Si dedicas tiempo a mejorar el contenido de tu blog, optimizarás el uso de AdSense. Regístrate en AdSense para obtener las noticias, los consejos y las sugerencias más recientes.

ADSENSE

ADSENSE

ADSENSE

ADSENSE

ADSENSE Accedemos a nuestra cuenta de adsense Creamos un nuevo bloque de anuncios Obtenemos el código Pegamos en un HTML Pestaña “ingresos” activamos la publicidad. Esperamos a que nos aprueben la cuenta de Adsense y el contenido del blog para ver los anuncios publicados.

DOMINIO PERSONALIZADO

DOMINIO PROPIO TERMINOLOGÍA • Nombre de dominio. • Dominio. La terminación .com / .es /.gov /.edu /.net /.org • Registradores de dominios: GoDaddy, Google Aps, GoDaddy, Netfirms, 1&1, Red Coruña...

DOMINIO PROPIO REGISTRAR Y USAR UN DOMINIO CON GOOGLE APPS

• Configuración / Lo básico / Añadir un dominio personalizado /elegir nombre/ comprobar disponibilidad. • Coste 10 dólares • Libro.

DOMINIO PROPIO REGISTRAR Y UTILIZAR UN DOMINIO CON OTRO CLIENTE. • Configuración / Lo básico / Configuración avanzada • Configuración de las DNS del dominio.

TRABAJAR CON IMÁGENES

PICASA • EDITOR DE FOTOS

PICASA • Todas las imágenes que subimos al blog, se suben a un álbum de Picasa. • También podemos usar la subida de imágenes sin que sean necesariamente para usar en el blog. • Si eliminamos una imagen del blog, no se elimina de picasa. • Si subimos una imagen duplicada, se almacenará dos veces.

PICASA • PRESENTACIÓN FOTOS Incrustar proyección de diapositivas

PICASA SUBIR FOTOS DE GRAN TAMAÑO • Flickr (1T) • Skydrive (7GB) • Google SITES

Añadir imagen como URL o como HTML

30 Mayo

DISEÑO AVANZADO

DISEÑO AVANZADO LO PRIMERO DE TODO • Crear una copia de seguridad • Escritorio-Plantilla- “crear/restablecer copia de seguridad” - Descargar plantilla completa. • Almacenamos un archivo XML en el ordenador. • Si alguna vez hay que restaurarla, simplemente subimos dicho archivo en la misma pantalla que estamos ahora.

DISEÑO AVANZADO

DISEÑO AVANZADO THE CUTEST BLOG ON THE BLOCK

Diseños gratuitos de blogger.

DISEÑO AVANZADO THE CUTEST BLOG ON THE BLOCK • Para poder usarlos , primero hemos de cambiar la plantilla de blogger a “Sencillo” • Vamos a la página, seleccionamos el fondo “Background” que nos guste. • Copiamos el html y lo pegamos en un gadget del blog • Ponemos como título del gadget : • Listo!!

DISEÑO AVANZADO THE CUTEST BLOG ON THE BLOCK

DISEÑO AVANZADO eBlog Templates / Blogger Templates Free INSTALACIÓN DE PLANTILLAS • Escogemos plantilla • Guardamos el archivo en formato zip. • Guardamos una copia de seguridad de nuestro blog. • Subimos el archivo xml (dentro del zip) al HML. • Seleccionamos mantener widgets y configuramos nuestras opciones (cabecera, lugar de los gadgets..) • Listo!!!

DISEÑO AVANZADO eBlog Templates / Blogger Templates Free INSTALACIÓN DE PLANTILLAS

DISEÑO AVANZADO INSTALAR UN FONDO • Necesitamos la URL de una imagen subida a un servidor propio o a Google Sites. • Google Sites es una herramienta de Google para crear páginas WEB. Nos registramos y creamos cuenta sólo para usarla de servidor (En principio) • Paso 1: Creamos el fondo y lo subimos a Google Sites • Paso 2: Copiamos la URL de la imagen • Paso 3: modificamos el código HML del blog

DISEÑO AVANZADO INSTALAR UN FONDO

1. Creamos Google Sites 2. Subimos nuestro fondo a imágenes

(https://

sites.google.com/site/gijon201314/system/app/pages/admin/attachments)

3. Copiamos la URL: https://sites.google.com/site/gijon201314/FONDO (Eliminamos Attredirects=0)

DISEÑO AVANZADO INSTALAR UN FONDO EDITAMOS EL HTML Sustituimos: body { background : $bgcolor; Por:

body { background: URL; background-position: top center; Background-repeat: not repeat;

URL QUE HEMOS COGIDO DE GOOGLE SITES

ALINEACIÓN CENTRADA

NO REPETICIÓN

DISEÑO AVANZADO CAMBIAR A UN FORMATO DE TRES COLUMNAS CON HTML • PGs 130-136 del blog. • Se puede hacer automático desde el diseñador de plantillas...

DISEÑO AVANZADO PERSONALIZAR DISEÑO DE LAS ENTRADAS • Añadir un separador a las entradas • Subimos la imagen a Google Sites y copiamos la URL • En código HML, buscamos post-footerline 3 • Insertamos la imagen en el código HTML

DISEÑO AVANZADO PERSONALIZAR DISEÑO DE LAS ENTRADAS Página 137

>span class= ‘post-location’>

DISEÑO AVANZADO Imagen de Fondo en una barra lateral Libro, página 138-139

CONFIGURAR UNA TIENDA EN EL BLOG

TIENDA EN EL BLOG LO PRIMERO DE TODO • Nos creamos una págnia para colocar todo lo que vamos a ver en este capítulo. • La llamamos “Productos”

TIENDA EN EL BLOG UTILIZAR PAYPAL • Servicio para recibir pagos en línea. • Los compradores no necesitan crear PayPal para utilizar esa opción de pago (Los vendedores sí :D) • Comisión de venta entre un 1,9 y un 2,9% (Variable)

TIENDA EN EL BLOG EJERCICIO PARTE 1 . AÑADIR LA TABLA DE PRODUCTOS

• En la página que hemos creado de productos, copiamos el HTML de la página 146 (Tabla) en la pestaña “HTML” • Editamos, en la pestaña “Redactar”Item name, Description y Price.

TIENDA EN EL BLOG

TIENDA EN EL BLOG EJERCICIO PARTE 2 . BOTONES DE PAYPAL

• Creamos o accedemos a la cuenta de Paypal • Creamos un botón de compra para cada producto “carro de la compra” • Hacemos el botón y copiamos el HTML que nos da. • Lo insertamos (etiqueta html) después del precio correspondiente y después de poner un
(salto de línea).

TIENDA EN EL BLOG

TIENDA EN EL BLOG AÑADIR BOTÓN DE COMPRAR AHORA • Los mismos pasos que antes, pero copiamos otro html de paypal, el de “comprar ahora”

SOLUCIÓN PROBLEMAS

SOLUCIÓN DE PROBLEMAS ERRORES COMUNES HTML • Desaparece columna derecha: Hemos añadido HTML incorrrecto. Suelen ser las etiquetas