Detalles que marcan la
|
|
|
- Eduardo Cárdenas Sánchez
- hace 6 años
- Vistas:
Transcripción
1 Diseño Blogger Detalles que marcan la Diferencia Elai the Blogger
2 Detalles que marcan la Diferencia 1.- Introducción 2.- Barra superior con botones para RR.SS. 3.- Cambiar botones para compartir el post 4.- Galería de imágenes en el footer 5.- Footer que ocupe todo el ancho del blog Elai the Blogger
3 Detalles que marcan la Diferencia 1.- Introducción A lo largo de este mini e-book vamos a aprender a hacer unos pequeños cambios en nuestra plantilla a través del código html. Esos detalles que hacen que nuestro blog se vea más completo Detalles que marcan la diferencia! Si ya has llegado hasta aquí es porque ya habrás estudiado y puesto en práctica lo que Celia explica en sus e-books Diseña tu blog en blogger y Programa tu blog en blogger. Si no es el caso, te aconsejo que antes los leas y los pongas en práctica ya que lo que explicaremos en este mini e-book son detalles, pinceladas, para complementar la base que ya tienes. Como siempre, antes de embarcarte en el cambio de tu plantilla, guarda una copia de seguridad. Esto es primordial en caso de que el cambio no sea el deseado, o al final no nos guste. Así como para rectificar errores que no podamos resolver de otra forma que no sea volviendo a poner la copia de seguridad anterior. Si una cosa he aprendido con la práctica y con los cursos que he realizado, es que siempre, absolutamente siempre, hay que probar. Si no te arriesgas a equivocarte, nunca llegarás a hacer lo que quieres. Sé que a veces acometer la empresa de cambiar la plantilla nosotros mismos nos da un poco de pavor A mí me lo daba al principio!... Pero a base de pruebas, de buscar y de equivocarme he llegado a perderle el miedo. Y ahora, nos vamos a la aventura!! Elai the Blogger
4 Detalles que marcan la Diferencia 2.- Barra superior con botones para RR.SS. En este apartado vamos a aprender a poner una barra en la parte superior de nuestro blog, cambiar los colores y añadir los botones de las redes sociales. Recuerda guardar una copia de tu plantilla antes de comenzar a hacer cambios! Lo primero que tendréis que hacer es crear los iconos en cualquier programa de diseño de imágenes, Inkscape, Photoshop, Gimp (el que sea). O descargaros algún juego de iconos que os guste. Seguidamente los subís a un alojador de imágenes (yo utilizo photobucket). Vamos a Plantilla, Editar HTML. Hacemos click dentro del código de nuestra plantilla y pulsamos CTRL+F para que se nos abra el buscador y ponemos lo siguiente: <body
5 Como resultado os saldrá esta líneas <body expr:class='"loading" + data:blog.mobileclass'> Damos al intro al final de esta línea y justo debajo pegamos el siguiente código <div id='barra-superior'> <div id='menu'> <ul> <li><a href='url DE LA RED SOCIAL' rel='nofollow' target='_blank'><img border='0' src='url DE LA IMAGEN DEL BOTÓN'/></a></li> </ul></div> </div> Deberéis poner el siguiente trozo de código por cada red social que tengáis: <li><a href='url DE LA RED SOCIAL' rel='nofollow' target='_blank'><img border='0' src='url DE LA IMAGEN DEL BOTÓN'/></a></li> Y deberás tener cuidado de que quede justo debajo del anterior y antes del cierre: </ul> Por supuesto yo he colocado sólo imágenes, pero podéis poner un menú texto substituyendo el código: <li><a href='url DE LA RED SOCIAL' rel='nofollow' target='_blank'><img border='0' src='url DE LA IMAGEN DEL BOTÓN'/></a></li> Por este otro: <li><a href='url'>texto</a></li> Una vez colocados todos los enlaces de las RR.SS. y las imágenes, buscaremos lo siguiente en nuestra plantilla: }]]></b:skin> Y justo encima pegaréis el siguiente código:
6 /* Barra superior iconos*/ #barra-superior { background: #ffffff; /*Color de la barra*/ width:100%; height:40px; /*Alto de la barra*/ margin:0; position:fixed; /*Para que la barra se quede fija*/ z-index:101; /*Para que la barra se quede fija*/ } #menu{ margin:0 auto; width:920px; /*Ancho del menú dentro de la barra*/ height:30px; } #menu ul{ float:left; /*Donde queréis que quede alineado el menú*/ background:none; margin:0px; padding:0; list-style-type:none; height:25px; } #menu ul li{ display:block; float:left;
7 height:30px; } #menu ul li a{ display:block; float:left; color:#ffffff; /* Color del texto */ font: 12px 'Arial'; /* Tamaño del texto y tipografía que queráis usar*/ text-decoration:none; padding:0px 0px 0 10px; } #menu ul li a:hover{ background:transparent; /* Color del fondo al pasar el ratón por encima de cada pestaña*/ color:#ffd0c2; /* Color del texto al pasar el ratón por encima*/ height:20px; Yo el color de la barra lo tengo puesto en color blanco, pero podéis poner el que más os guste para contrastar. El alto de la barra deberéis modificarlo en consonancia al tamaño de los iconos que hayáis escogido. Personalmente me gustan los botones pequeños, pero podéis poner el tamaño que más os convenga. Una vez hechos los cambios guardamos la plantilla. Elai the Blogger
8 Detalles que marcan la Diferencia 3.- Cambiar botones para compartir el post Los botones de compartir post de blogger no es que sean pasables, es que, bajo mi punto de vista, son bastante feillos, y es por eso que vamos a hacer un cambio para pasar de esto: A esto: La diferencia es notable y queda el diseño del blog mucho más cuidado. Lo primero que tendrás que hacer es crear los iconos de redes sociales (puedes utilizar los mismos que pusiste en la barra superior, siempre que hayas escogido un tamaño no muy grande) y tendrás que crear también, una imagen con la palabra Compártelo. Lo ideal es que esa imagen tenga 153 pix de ancho y 28 pix de alto. Utiliza una tipografía que ya tengas puesta en el resto del diseño de tu plantilla. En ese caso escogí una muy sencilla para no cargar el diseño. Una vez tengas tus imágenes creadas, súbelas al alojador de imágenes que utilices.
9 Ahora comenzamos con el cambio en la plantilla. Primero hemos de anular la vista de los botones que Blogger trae por defecto. Ves a la vista Diseño de tu blog y haz click en Editar del apartado Entradas del blog. Allí encontrarás esta vista:
10 Desmarca la opción Mostrar botones para compartir y guarda los cambios. Ahora iremos a la vista Plantilla y haremos click en Editar HTML. Hacemos click dentro de la plantilla y pulsamos CTRL+F y en la casilla del buscador ponemos el siguientes código: <div class='post-footer'> Si te aparece más de una vez, la que nos interesa es la segunda. Y justo debajo de esa porción de código pega el siguiente código: <! Botones compartir post --> <div class='addthis_toolbox'> <div class='custom_images'> <a class='addthis_button_share'><img alt='share this Post' border='0' src='url IMAGEN COMPARTELO'/></a> <a class='addthis_button_facebook'><img alt='share to Facebook' border='0' height='30' src='url BOTON FACEBOOK' width='30'/></a> <a class='addthis_button_twitter'><img alt='share to Twitter' border='0' height='30' src='url BOTON TWITTER' width='30'/></a> <a class='addthis_button_ '><img alt=' This' border='0' height='30' src='url BOTON ' width='30'/></a> <a class='addthis_button_pinterest_share'><img alt='pin This' border='0' height='30' src='url BOTON PINTEREST' width='30'/></a> <a class='addthis_button_google_plusone_share'><img alt='share on Google Plus' border='0' height='30' src='url BOTON GOOGLE PLUS' width='30'/></a> </div> </div> <script type='text/javascript'>var addthis_config = {"data_track_addressbar":false};</script> <script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra- 511bbe8405a64ebd' type='text/javascript'/>
11 <! FIN Botones compartir post --> De este código, sólo hay dos cosas que podéis tocar: 1- La URL de la imagen (esto es obvio). 2- Y la parte del código donde se especifica el alto y ancho de la imagen del botón. Estos botones están programados para que, independientemente del botón que pongas, se muestren en unas medidas de 30pix de ancho y 30 pix de alto. O sea, que aunque pongas un botón que sea 50 x 50 pix, se verá de 30 x 30 pix. Si quieres que se vea el tamaño que tú quieras debes cambiar los parámetros que te pongo en rojo: <a class='addthis_button_facebook'><img alt='share to Facebook' border='0' height='30' src='url BOTON FACEBOOK' width='30'/></a> Una vez hechos los cambios guardamos la plantilla. Elai the Blogger
12 Detalles que marcan la Diferencia 4.- Galería de imágenes en el footer El footer en nuestro blog es como cuando nos arreglamos. Elegimos el vestido, el peinado, el maquillaje (afeitado, o no, en caso de los chicos) y no podemos descuidar nuestros zapatos! El footer sería eso, los zapatos que pueden hacer que nuestro blog quede complementado y profesional. Y en caso de descuidarlo, sería como ponerse unos zapatos que no complementen nuestro atuendo. No suelo poner muchas cosas en esa parte del blog, pero sí que encuentro que una galería con las imágenes de nuestros últimos posts puede quedar muy bien (sobre todo si no queremos cargar la barra lateral) y es un plus de atracción cuando nuestro blog vende productos cuya imagen vale más que mil palabras. La galería que vamos a poner es esta: Yo la tengo puesta para 30 posts, pero pueden ser más, o menos A gusto del consumidor.
13 Para implementar esta galería vamos a la vista Diseño de nuestro blog y en la parte que corresponde al footer hacemos click en Añadir un gadget y escogemos un gadget html. En ese gadget hemos de poner el siguiente código: <div id='bp_recent'></div> <script style='text/javascript' src=' /script> <script style='text/javascript'> var numberofposts = 30; var showpostdate = false; var showsummary = false; var titlelength = 0; var showcommentcount = false; var showthumbs = true; var shownoimage = false; var imgdim = 75; var imgfloat = 'left'; var mymargin = 5; var mediathumbsonly = true; var showreadmore = false; </script> <script src='url DE TU BLOG//feeds/posts/summary?maxresults=33&orderby=published&alt=json-inscript&callback=bprecentpostswiththumbnails'></script> En la parte azul tendrás que poner la url de tu blog. Y ahora atención!! Veréis que hay marcado en rojo este signo / esto es para que os fijéis que han de haber dos barras juntas, sino no funciona este script.
14 Y ahora las variaciones que podéis realizar: Para aumentar, o disminuir, la cantidad de posts a mostrar debéis cambiar el número en esta línea: var numberofposts = 30; Para que aparezca el título del post: var titlelength = 0; Cambiamos el 0 por la cantidad de caracteres que queremos, aunque la visión del gadget cambia y queda de esta forma: Para cambiar el tamaño de la miniatura: var imgdim = 75; Desde mi punto de vista 75 es un tamaño ideal, pero podéis ponerlas más grandes, o más pequeñas. Para cambiar el tamaño de la separación entre las miniaturas: var mymargin = 5; Elai the Blogger
15 Detalles que marcan la Diferencia 5.- Footer que ocupe todo el ancho del blog Y como colofón, vamos a rematar nuestro blog poniendo un footer que ocupe todo el ancho del blog. De esta forma se verá un diseño cuidado y profesional. Como siempre comenzamos guardando copia de nuestra plantilla. Vamos a la vista Plantilla de nuestro blog Editar HTML. Hacemos click dentro de la plantilla y CTRL+F para abrir el buscador, y ponemos: </body> Justo encima colocamos el siguiente código: <div class='footer-wrapper'> TEXTO QUE QUERAIS PONER EN EL FOOTER<br/> </div> Ahora volveremos a situarnos en la casilla del buscador y pondremos: }]]></b:skin> Justo encima pegaremos este código: <! Footer del blog --> }.footer-wrapper { background: #896e7f; padding-top: 15px; padding-bottom: 15px; width: 100%; text-align: center; font: normal normal 12px 'Maven Pro', sans-serif;
16 color: #ffffff; }.footer-wrapper a{ color:#cccccc; text-decoration:none; }.footer-wrapper a:hover{ color:#ffffff; } <! FINAL Footer del blog --> Ahora vamos a retocar el código para adaptarlo a nuestras necesidades Para cambiar el color del fondo del pie. En mi caso está en color lila oscuro. background: #896e7f; Para cambiar la altura de la barra: padding-top: 15px; padding-bottom: 15px; Lo ideal es poner lo mismo en las dos líneas, pero esto dependerá un poco del diseño y de si, por ejemplo, queréis que el aviso de cookies se vea también al final del blog. Para cambiar la alineación del texto: text-align: center; Podéis poner: right, left, center dependiendo de dónde queráis alinear vuestro texto.
17 Para cambiar la tipografía y el tamaño: font: normal normal 12px 'Maven Pro', sans-serif; Para cambiar el color del texto: color: #ffffff; Para cambiar el color del enlace en caso de que pongáis alguno. color:#cccccc; Si queréis que el enlace aparezca subrayado aquí podéis ponerlo text-decoration:none; Para que aparezca subrayado en vez de none pondremos underline (sin las comillas!) Para cambiar el color del enlace al pasar el ratón por encima: color:#ffffff; /*Color del enlace al pasar el ratón por encima*/ Guarda los cambios realizados y ya tendrás el footer de tu blog bien bonito. Elai the Blogger
18 Detalles que marcan la Diferencia Espero que este mini e-book te sirva de complemento a todo el gran material e información que has recibido en este curso de Visual Storytelling. Para mí ha sido un placer poder participar en este proyecto y ayudarte a darle esos toques diferenciales al diseño de tu blog. Un saludo, Aisha (Elai the Blogger) Elai the Blogger
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
Índice de contenido Crear un tema nuevo...3 Editar un tema...6 Insertar diferentes elementos en el body...7 Insertar una imagen...
1 Manual de foros Índice de contenido Crear un tema nuevo...3 Editar un tema...6 Insertar diferentes elementos en el body...7 Insertar una imagen...7 Insertar una imagen que se abra en tamaño original...12
MAILCHIMP: CÓMO CREAR UNA PLANTILLA PERSONALIZADA. Una vez dentro de MailChimp pinchamos en Templates (Plantillas) y damos a Crear Template
Una vez dentro de MailChimp pinchamos en Templates (Plantillas) y damos a Crear Template En la siguiente página, veremos un menú con tres opciones: Basic, Themes y Code Your Own. En la primera encontramos
Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;
Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;
GOOGLE SITES INICIAL
1º.-Acceder a Google Sites. GOOGLE SITES INICIAL Google Sites es un alojamiento gratuito de Google para páginas web. Pero además de alojamiento lo que ofrece es una herramienta para crear la página web
TEMA 4: CREACIÓN Y DISEÑO DE UN BLOG EN BLOGGER
TEMA 4: CREACIÓN Y DISEÑO DE UN BLOG EN BLOGGER Cómo dar de alta un blog en blogger Como paso previo debes disponer de una cuenta de correo electrónico de Google. Debéis utilizar la que creamos a principio
3. Lógate con la misma contraseña que la de tu correo electrónico
COMO CREAR UN BLOG CON BLOGGER 1. Entra en tu cuenta de correo 2. En la pestaña de la izquierda pulsa en Blogger 3. Lógate con la misma contraseña que la de tu correo electrónico 4. Crear perfil de Blogger
DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2.
Barra de navegación vertical con Botones rollovers ver. 2_TIC 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2
Blog. Configuración. Reconocimiento-NoComercial-CompartirIgual 2.5 España:
Blog. Configuración Realizado por: Reconocimiento-NoComercial-CompartirIgual 2.5 España: http://creativecommons.org/licenses/by-nc/2.5/es/ José Sánchez Rodríguez (Universidad de Málaga) josesanchez@uma.es
Diseño de columnas con CSS
Para el diseño de una web con varias columnas mediante CSS no existe una receta universal. De momento, y mientras se sigue desarrollando el CSS, nos basaremos en dos principios esenciales: position:absolute
En que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
Personalizando Plantillas
Personalizando Plantillas Ya que se tiene la estructura general del sitio web, se comienza a trabajar con la apariencia de cada una de las plantillas. Página Principal (index.html) La página principal
1ª TAREA: CREACIÓN DE UN BLOG PERSONAL
SUMARIO 1. Crear un blog personal 2. Escribir una entrada o post a. Realizar enlaces o hipervículos a otras páginas Web 3. Insertar y publicar una imagen en la entrada a. Imágenes de la web b. Imágenes
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
CREACIÓN DE UNA PÁGINA WEB CON JIMDO
CREACIÓN DE UNA PÁGINA WEB CON JIMDO Con esta sencilla aplicación online se diseñará una página web sobre un tema elegido por cada grupo. Se mandará el enlace de la página web al mail de la asignatura.
SPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D)
APRENDERAPROGRAMAR.COM SPRITE CSS: CONCEPTO. QUÉ ES, CÓMO CREAR Y USAR UN SPRITE? EJEMPLOS Y EJERCICIO RESUELTO EN CÓDIGO CSS (CU01037D) Sección: Cursos Categoría: Tutorial básico del programador web:
CREAR UN BLOG EN BLOGGER
CREAR UN BLOG EN BLOGGER PRIMER PASO Lo primero que debes hacer es escribir en la barra de dirección del navegador la siguiente URL: http://www.blogger.com, te saldrá la siguiente ventana, donde se iniciará
CÓMO INSERTAR UNA GALERÍA DE IMÁGENES REALIZADA EN UNA WEB EXTERNA COMO SLIDE EN UNA PÁGINA O SECCIÓN
CÓMO INSERTAR UNA GALERÍA DE IMÁGENES REALIZADA EN UNA WEB EXTERNA COMO SLIDE EN UNA PÁGINA O SECCIÓN IMPORTANTE: Siempre que dependemos de una página externa a nuestra web estamos expuestos a tener problemas
CÓMO ACCEDER A NUESTRO BLOG. Para acceder al blog que hemos abierto tenemos que ir a
CÓMO ACCEDER A NUESTRO BLOG Para acceder al blog que hemos abierto tenemos que ir a http://www.blogger.com Una vez allí, pueden ocurrir dos cosas: 1º-. Que ya estemos registrados en Gmail, con lo cual
CÓMO HACER UNA IMAGEN CON TEXTO USANDO PHOTOSHOP
CÓMO HACER UNA IMAGEN CON TEXTO USANDO PHOTOSHOP Para comenzar elegimos la imagen deseada y esta imagen si no está en blanco y negro debemos de ponerla, para eso, cuando tenemos la imagen abierta en nuestro
Índice de contenido Entra en tu blog... 3 Configura tu blog...4 Blog publicado... 7 Título del blog...8 Descripción del blog... 9 Fondo del blog...
Tu blog Índice de contenido Entra en tu blog... 3 Configura tu blog...4 Blog publicado... 7 Título del blog...8 Descripción del blog... 9 Fondo del blog... 10 Color de fondo... 10 Imagen de fondo...11
Técnicas para la enseñanza de. Desarrollo Web. M is notas de CSS. Liliana Gutiérrez Flores. Enero de 2016
Técnicas para la enseñanza de Desarrollo Web M is notas de CSS. Liliana Gutiérrez Flores Enero de 2016 En el presente documento se presenta el proyecto de creación de una página Web con notas de CSS. Se
PHOTOSHOP CÓMO CREAR DOCUMENTOS A TAMAÑO FOTO CON VARIAS IMÁGENES DENTRO. Raquel Bermudo Jiménez Diseño Gráfico y Diseño Web
PHOTOSHOP CÓMO CREAR DOCUMENTOS A TAMAÑO FOTO CON VARIAS IMÁGENES DENTRO PARTE 1: DOS FOTOS EN UN 1OX15 PARTE 2: CUATRO FOTOS EN UN 10X15 Hola chicas! Bienvenidas al primer tutorial de photoshop, Cómo
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
TEMA 5: INTERNET Y PÁGINAS WEB. Realización de páginas web con HTML. Servicios de Internet
TEMA 5: INTERNET Y PÁGINAS WEB Realización de páginas web con HTML. Servicios de Internet Qué vamos a ver? Qué es el lenguaje HTML Uso de sus características básicas: párrafos, títulos, y algunos estilos
PEQUEÑOS TRUCOS PARA LA REALIZACIÓN DE UNA WEB CON HTML. <title>seguridad Informática por nombre y apellido alumno</title>
PEQUEÑOS TRUCOS PARA LA REALIZACIÓN DE UNA WEB CON HTML Se establece el título de la web que se usa en el navegador y el que aparece si por ejemplo queremos añadirlo a favoritos.
MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO.
APRENDERAPROGRAMAR.COM MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO. (CU01050D) Sección: Cursos Categoría: Tutorial básico del
1. Instalar el componente en el sitio por Extensiones gestor de extensiones.
COMPONENTE ICAGENDA 1. Instalar el componente en el sitio por Extensiones gestor de extensiones. Ejemplo: 2. Seleccionar el archivo de la ubicación donde lo guarda y le da subir e instalar 3. Verifico
SOPA DE LETRAS. Para crear una actividad de panel gráfico debemos ir al menú Arquivo Nova actividade Xogos de palabras Sopa de letras
SOPA DE LETRAS. Objetivos: Afianzamiento de vocabulario.. Para crear una actividad de panel gráfico debemos ir al menú Arquivo Nova actividade Xogos de palabras Sopa de letras Una vez allí se nos abre
Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:
Mi primera web... El ejemplo que utilizaremos para este tutorial, es la misma página web de los tutoriales. Puede descargar los archivos desde aquí. Para la creación de las imagenes he utilizado Fireworks
MOODLE 1.9 BASE DE DATOS
MOODLE 1.9 BASE DE DATOS Unitat de Suport Tecnicopedagògic - CAMPUS EXTENS Universitat de les Illes Balears. Edifici Aulari. Ctra. de Valldemossa Km. 7.5. 07122 Palma (Illes Balears) Primera edición: marzo
TUTORIAL: COMO CREAR UN BLOG EN BLOGGER PASO A PASO
TUTORIAL: COMO CREAR UN BLOG EN BLOGGER PASO A PASO Tienes ganas de crear un blog? Quieres redactar sobre algo que te gusta? Pero no sabes como iniciar? Pues bienvenido al tutorial donde aprenderás como
INSERCIÓN DE IMÁGENES Y VÍDEO.
INSERCIÓN DE IMÁGENES Y VÍDEO. Estimados alumnos, en primer lugar, deben entrar de nuevo al blog y abrir sesión. Primero cambien el idioma donde indica la flecha roja, luego coloquen usuario y contraseña
IES María de Molina Ejercicios de KompoZer KOMPOZER. Vamos a crear una página Web que contendrá información sobre MECANISMOS.
KOMPOZER Vamos a crear una página Web que contendrá información sobre MECANISMOS. 1. CREACIÓN DE LA ESTRUCTURA DE UN SITIO 1.1. CREACIÓN DE LA CARPETA DEL SITIO WEB Para empezar hay que crear un sitio
Manual FOXTIR Editor HTML MOBILE MARKETING
Manual FOXTIR Editor HTML MOBILE MARKETING Editor de HTML: en las siguientes páginas te explicaré una por una las diferentes funciones del Editor de HTML. Una vez ampliada la pantalla al espacio que te
Para utilizar los plug-ins widgets debemos de acceder a nuestro perfil de Twitter e ir a configuración.
Los Widgets son herramientas para dotar a nuestras páginas de conectividad con la red social de Twitter, mediante los cuales podemos insertar en nuestro blog o espacio web un módulo desde el que mostrar
Acceder al backend de la web
Acceder al backend de la web Para acceder al backend de nuestra web, tan solo necesitamos añadir /admin después de nuestro dominio (www.mipagina.com/admin) en la barra de direcciónes del navegador con
CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
GOOGLE SITES GUÍA RÁPIDA DE USO
GOOGLE SITES GUÍA RÁPIDA DE USO Manuel López Caparrós Febrero 2009 Introducción Esta guía se ha elaborado como material complementario para responder a una serie de cuestiones básicas e importantes sobre
FLICKR SERVICIO DE PUBLICACIÓN DE FOTOS ONLINE
FLICKR SERVICIO DE PUBLICACIÓN DE FOTOS ONLINE Laura Aragón Rivera Primeros pasos Abrimos el navegador de internet. Entramos en Google, tecleamos flickr y pulsamos con el ratón en el botón de Buscar :
Proyectos Terminales y Descargas de Software
Proyectos Terminales y Descargas de Software En esta práctica se realizará el diseño de las plantillas de Proyectos Terminales y de Descargas de Software. Proyectos Terminales Se trabajará con la plantilla
PREPARANDO EL ENTORNO DE DESARROLLO. DESCARGAR E INSTALAR NOTEPAD++ COMO EDITOR DE CÓDIGO (CU00708B)
APRENDERAPROGRAMAR.COM PREPARANDO EL ENTORNO DE DESARROLLO. DESCARGAR E INSTALAR NOTEPAD++ COMO EDITOR DE CÓDIGO (CU00708B) Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde cero
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
OPENOFFICE IMPRESS. Creación básica de presentaciones digitales
OPENOFFICE IMPRESS Creación básica de presentaciones digitales Qué es OpenOffice Impress? Es la herramienta que nos ofrece OpenOffice para realizar presentaciones Las presentaciones permiten comunicar
Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
Maquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
PROGRAMACION III. VISUAL BASIC SALOMON GONZALEZ GARCIA TALLER 1.
TALLER 1. CONTROL LABEL. El control label se usa para mostrar en el formulario form un texto estático en la pantalla es decir que el texto no se puede cambiar por el el usuario. A menos que utilices la
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas
INTRODUCCIÓN A HTML Qué es HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto
Crear un Blog en Wordpress
Crear un Blog en Wordpress 1. Registrar nuestro blog... 2 2. Panel de Control... 5 3. Cambiar la apariencia... 8 4. Entradas a. Insertar entrada con Texto... 11 b. Insertar entrada con Imagen... 12 c.
Diseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
TEMA 1: LAS PRESENTACIONES EN EL LIBREOFFICE
TEMA 1: LAS PRESENTACIONES EN EL LIBREOFFICE 1- CÓMO ABRIR EL PROGRAMA? 2- CÓMO EMPEZAR CON NUESTRA PRESENTACIÓN? 3- CÓMO AÑADIR UNA NUEVA DIAPOSITIVA? 4- CÓMO CAMBIAR EL FONDO DE LA DIAPOSITIVA? 5- CÓMO
Elaboración de un modelo de impresión de facturas. Jesús Martínez
Elaboración de un modelo de impresión de facturas Jesús Martínez 1 Planteamiento Si queremos imprimir facturas con MGD, es necesario que previamente elaboremos un formato de impresión que esté adaptado
Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:
Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:
Edición HTML. Estilos CSS MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL
MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN
3.1 Entrar en un blog ya creado.
TEMA 3 POSTS O ENTRADAS 3.1 Entrar en un blog ya creado. Podemos hacerlo de dos maneras: 1. Si lo hemos creado con la plantilla de Blogger, escribiendo nuestra dirección del Blog en la Barra de Direcciones,
EXCEL 2007 BÁSICO REV: 20/05/11
1. #### Que significan estos símbolos en una celda? Que no es lo suficientemente ancha 2. DIV/0 Qué significa este error en una celda? Que se esta dividiendo una celda entre 0 3. OPCIONES DE PEGADO Mantener
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
CRUCIGRAMA. Para crear una actividad de panel gráfico debemos ir al menú Arquivo Nova actividade Xogos de palabras Encrucillados
CRUCIGRAMA. Objetivos: Afianzamiento de vocabulario. Para crear una actividad de panel gráfico debemos ir al menú Arquivo Nova actividade Xogos de palabras Encrucillados Una vez allí se nos abre la ventana
NUEVAS TECNOLOGÍAS EN EL CONTEXTO EDUCATIVO NIVEL 2. Dirección de Formación Continua. Equipo Técnico Regional TIC. Valeria Accomo.
NUEVAS TECNOLOGÍAS EN EL CONTEXTO EDUCATIVO NIVEL 2 Dirección de Formación Continua Equipo Técnico Regional TIC Valeria Accomo Blogs - Edublogs Qué es un? Es un sitio Web periódicamente actualizado que
Demostrar los pasos para la creación y aplicación de elementos multimedia al sitio Simplify.
Tema: Galería de imágenes, formularios y recursos para desarrolladores: Google fonts y Google maps. CONTENIDOS Creación de galería de imágenes por medio del panel comportamiento. Aplicación de formulario
Práctica: OpenOffice IV Aplicar estilos e insertar. un índice de contenidos
Práctica: OpenOffice IV Aplicar estilos e insertar un índice de contenidos Cuando un documento de texto es muy extenso y contiene varios apartados es muy difícil crear un índice temático que nos muestre
Después de haber creado la nueva hoja de cálculo, veremos qué debes hacer para ponerle el nombre y cómo eliminarla.
Eyber Augusto Gaviria Montoya Para insertar, eliminar, y cambiar el nombre de las hojas en Excel 2010, debes realizar procedimientos muy sencillos. A continuación te mostraremos lo que debes hacer. CÓMO
SOMBRAS CON CSS ver. 2
Sombras con CSS para Diseño WEB ver. 2_TICO 1º Bachillerato página 1/6 SOMBRAS CON CSS ver. 2...1 Procedimiento 1: Diseño con Gimp 2.6 de una sombra...2 Procedimiento 2: Diseño Web con Kompozer...3 Código
Instrucciones para crear un blog de empresa en el Portal Renovables Andalucía
Instrucciones para crear un blog de empresa en el Portal Renovables Andalucía 2 Material necesario para la configuración de un blog en el Portal de Energía Renovables. Antes de comenzar la configuración
Configuración del Panel o Quadre.
Índex de continguts Configuración del Panel o Quadre. 1.- Crear un nuevo panel...2 2.- Menús...3 3.- Lanzadores...5 4.- Applets o miniaplicaciones...6 5.- Propiedades generales del panel...8 6.- Edición
Escribir. Qué es Escribir? Abriendo Escribir
Escribir Qué es Escribir? Es un procesador de textos que te ayuda a hacer trabajos, poemas, historias, ensayos, etc. de una manera fácil y divertida. Puedes poner imágenes, tablas, y darle color a tu texto.
Ejercicio paso a paso Unidad 7. Insertar y rellenar tablas.
UNIDAD 7 Ejercicio paso a paso Unidad 7. Insertar y rellenar tablas. a.- Buscar el material. 1. Arranca FrontPage si no lo habías hecho ya. 2. Si estuvimos trabajando con el sitio web webpersonal, este
OPENOFFICE CALC. Manejo básico de hojas de cálculo
OPENOFFICE CALC Manejo básico de hojas de cálculo Qué es una hoja de cálculo? Podemos verla como una gran tabla para mostrar información y realizar operaciones con esa información Cada una de las casillas
Índice. Calendario... 3
CALENDARIO Índice Calendario... 3 Calendario En primer lugar, para empezar a trabajar en calendario tendremos que ir a la opción calendario de centro. Apareceremos en un buscador, donde tendremos opción
Implementación de widgets AvaiBook en Wordpress
Implementación de widgets AvaiBook en Wordpress Introducción Wordpress es un sistema de blogs del cual seguro has oído hablar. La ventaja que tiene es que es muy personalizable, hasta el punto de que deje
COMO USAR PLATAFORMA DEL SISTEMA DIGITAL PERÚ EDUCA
COMO USAR PLATAFORMA DEL SISTEMA DIGITAL PERÚ EDUCA Una vez que en el salón de centro de recursos tecnológicos con la orientación de la daip responsable y tu docente de curso, te has creado una cuenta
UNIDAD 6 TEMA 4: OFIMÁTICA AVANZADA. CLASE 03: PÁGINAS WEB CON WORD
UNIDAD 6 TEMA 4: OFIMÁTICA AVANZADA. CLASE 03: PÁGINAS WEB CON WORD Vamos a ver cómo se puede hacer una sencillapágina web usando Word. Abre un nuevo documento en Word 2007. 1. Lo primero va a ser convertirlo
4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES. A continuación abriéremos el bloc de notas: Inicio>Programas>Bloc de notas.
4º ESO INFORMÁTICA TEMA 7: LENGUAJE HTML ACTIVIDADES FECHA LÍMITE: 13 de mayo Práctica 1: Lo primero que vamos a hacer es crear en nuestro pendrive una carpeta que llamaremos WEBnuestronombre como por
Una vez esté en la pantalla principal de Mahara pulse en la pestaña Content y luego en la pestaña Diarios
MaharaIndalo. Práctica guiada 1 Una vez en la página principal del curso pulse en el enlace MaharaIndalo que encontrará en la parte superior de la columna derecha bajo el bloque titulado Servidores de
MANUAL PARA LA CREACIÓN DE UN BLOG USANDO LA HERRAMIENTA BLOGGER
MANUAL PARA LA CREACIÓN DE UN BLOG USANDO LA HERRAMIENTA BLOGGER CTE/SMET/DAATE/SRE 1 Para darse de alta como usuario - Lo primero que debemos hacer es acceder a la siguiente página de internet www.blogger.com.
Crear artículos en Joomla 3
Crear artículos en Joomla 3 July 12 2016 En el presente documento se incluye un manual de los pasos a seguir para la publicación de un artículo en Joomla 3. Contenido 1. Acceso... 2 2. Creación de un artículo...
Manual de actualización de los portales de Educación Primaria y Secundaria
Manual de actualización de los portales de Educación Primaria y Secundaria En el presente documento se detallan los pasos a seguir para actualizar las extensiones y activar la nueva plantilla adaptativa
MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D)
APRENDERAPROGRAMAR.COM MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D) Sección: Cursos Categoría: Tutorial básico del programador
February 10, wordpress.notebook. Tema 4. Wordpress. Sonia Lafuente Martínez
Wordpress Tema 4 Sonia Lafuente Martínez 1 1. Introducción a Wordpress Acceder a Wordpress: http://es.wordpress.com/ Pulsa sobre Acceder para registrarte como usuario nuevo. Como somos nuevos usuarios
Lola Maicas 1 PORTADA 2 BARRA DE HERRAMIENTAS
1 PORTADA 2 BARRA DE HERRAMIENTAS TABLAS 3 TABLAS 4 TABLAS 2ª PARTE 5 FORMA DE SELECCIONAR 6 COMBINAR CELDAS 7 CONVERTIR TEXTO EN TABLA 8 PROPIEDADES DE TABLA 9 SUMAS 10 RESTAS 11 MULTIPLICAR Y DIVIDIR
Manual FOXTIR Editor de Plantillas MOBILE MARKETING
Manual FOXTIR Editor de Plantillas MOBILE MARKETING s Elige la Plantilla base: Primero que todo debes elegir la plantilla que utilizarás de base para tu comunicación. Recuerda que esto es sólo la estructura,
MEDIADORESENRED. Como crear un blog. Liberty Seguros. Tu nuevo punto de encuentro
B Como crear un blog. Interáctua con tus clientes En la actualidad, tener un espacio en la red es muy importante. Estar en Internet es más que una obligación, es una necesidad. Nos sirve para gestionar
Tutorial de Blogger. Diseñada por: Equipo FEDITIC (2012)
Universidad Nacional Experimental Francisco de Miranda Vice-Rectorado Académico Coordinación Aprendizaje Dialógico Interactivo Programa de Formación Docente en Estrategias Didácticas con TIC Bajo el Enfoque
Tutorial para la creación de un blog en Blogger
1 Tutorial para la creación de un blog en Blogger 1. Entramos a la página : https://www.blogger.com/ y hacemos clic en la flecha roja: Crear tu blog ahora : 2. Luego escribimos: (a) la dirección de nuestro
Insertar imágenes en las páginas con el editor TinyMCE
Insertar imágenes en las páginas Recomendaciones previas: Se recomienda preparar una carpeta con las imágenes que vamos a usar para la web, estas imágenes se recomienda que sean de un tamaño adecuado para
Unidad 2. Crear una Presentación (I)
Unidad 2. Crear una Presentación (I) A continuación veremos cómo crear una Presentación. PowerPoint nos permite crear una presentación de formas distintas, bien a través del asistente que es muy útil cuando
1.- Abrimos Publisher 2010 y seleccionamos plantillas de correo electrónico
1.- Abrimos Publisher 2010 y seleccionamos plantillas de correo electrónico 2.- Seleccionamos "Tamaños en Blanco" la opción "Corto" y le damos click a "Crear" 3.- Elegimos el tema sobre el cual queremos
Curso Excel Básico 2003 Unidad 1
Formatos Formatos FORMATO DE CELDAS... 6 Descripción... 6 NÚMERO... 6 Tipo Número... 6 Tipo Moneda... 7 Tipo Fecha... 8 Tipo Hora... 8 Tipo Porcentaje... 8 Tipo Personalizada... 9 ALINEACIÓN... 9 Alineación
Georreferenciar imágenes de Google Earth con ArcGIS (Curso SIG1. Roy Cruz.)
Georreferenciar imágenes de Google Earth con ArcGIS (Curso SIG1. Roy Cruz.) Hay ocasiones en las que nos puede hacer falta incluir en nuestro proyecto SIG archivos en formato de imagen. Lo haremos gracias
Juego 1: DALE AL BALÓN CON EL RATÓN
Juego 1: DALE AL BALÓN CON EL RATÓN Este primer y sencillo juego va a consistir en hacer clic con el ratón sobre una pelota que rebota en unas paredes. Cada vez que lo hagamos, obtenemos un punto. Luego
CREACIÓN Y DISEÑO DE UN BLOG
2.1. Crearse un blog en Blogger. TEMA 2 CREACIÓN Y DISEÑO DE UN BLOG Son muchos los lugares en internet en los que podemos crearnos un blog... nosotros/as lo haremos con BLOGGER. Para ello, buscaremos
TUTORIAL SAPPSCHOOL CREAR ENTRADAS EN EL BLOG DESDE ORDENADOR
TUTORIAL SAPPSCHOOL CREAR ENTRADAS EN EL BLOG DESDE ORDENADOR Introducción En este tutorial se explica cómo crear entradas en el blog. Se describe cada paso de manera numerada. Si tiene cualquier pregunta,
ANEXO IV SEMINARIO BLOGS PARA EDUCADORES SOCIALES CONOCIMIENTOS MÍNIMOS PARA ELABORAR UN BLOG CON BLOGGER
ANEXO IV SEMINARIO BLOGS PARA EDUCADORES SOCIALES CONOCIMIENTOS MÍNIMOS PARA ELABORAR UN BLOG CON BLOGGER 3.1. Conocimientos mínimos para elaborar un blog con blogger El objetivo que nos planteamos ahora
ACTIVIDADES BASE DE DATOS ACCESS 2007
ACTIVIDADES BASE DE DATOS ACCESS 2007 En un primer momento vamos a practicar las opciones de Crear, abrir y cerrar una base de datos de Access 2007. Abrimos Access 2007 y haz clic sobre la opción Base
Conceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
5.CREACIÓN DE TABLAS.
5.CREACIÓN DE TABLAS. Cómo se crea una tabla?. Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,, e instrucción
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER
TUTORIAL SOBRE CÓMO CREAR Y GESTIONAR UN BLOG CON BLOGGER Existen muchos proveedores de servicios para crear un blog. En nuestro caso se ha decidido crear uno en Blogger, que es, a su vez, donde muchas
Contenedores. Elementos <div>
Html5 añade nuevos elementos semánticos pero todos ellos se basan en el uso del . Estos elementos sirven para dividir la página (de ahí el nombre div, de divisor) en contenido relacionado, un div