Web site Tedetresdigital

Un ejemplo de web sites y algunos apuntes (tutoriales, etc.) de Sites y Kinovea

https://sites.google.com/site/tedetresdigital/

Los videos del TD3 2011

Sandra Fanlo

Patricia Subías

Lydia Ibarra

Aitor Asla

Motse Camps

Lucas Sáez

Huesca la magia del cicloturismo from Almontgrave on Vimeo.

Javi Fernández

Bruno de la Barrera

Nacho Pérez

Joan Albert Serra

Marcos García

Victoria Villa

Joan Gómez

Álvaro Pérez de Zavalda

Adrián Moral

Jokin Ruiz de Larramendi

Carlos Andrés Ruiz

Los blogs del TD3 2011

• Marcos García: Esquí Alto Campo
• Lydia Ibarra: TD32012
• Javi Fernández: Panticosa Esquí Club
• Joan Gómez: This is Sport
• Bruno de la Barrera: Gimatbru
• Aitor Asla: Mungiako Alpetar Taldea
• Victoria Villa: Try the cupcake
• Juan Carlos González: Club de tecnificación de esquí Laciana
• Oscar Pagés: Nuevas herramientas ski
• Joe Estévez: Esquimal
• Sandra Fanlo: Gorritos bonitos
• Patricia Subías: Pitifaldi
• Nacho Pérez: HRCAMPS 
• Jokin Ruiz de Larramendi: Lijando cuneta
• Álvaro Pérez de Zavalda: TedetresXtrem
• Martín Dena: MADELEG (SCP) 
• Montse Camps: Pequeños grandes esquiadores
• Adrián Moral: Paseos en helicóptero 
• David Mozota: Ride the live
• Joan Albert Domenech Serra: Telemark Port del Comte 
• Alfonso Montañana: Viajesqui
• Lucas Saez: Almontgrave 
• Carlos Andrés Ruiz: SKANDY Ski Club

Nieve en vuestros blogs y otros adornos

Ambas cosas hay que insertarlas en código HTML y para ello tendrás que ir a Diseño/Edición de HTML

Te aconsejo que antes de añadir nada te copies entero el código html y te lo guardes en un word o te hagas una copia de seguridad de tu plantilla.

Copos de Nieve

http://ciudadblogger.com/2009/11/nieve-en-el-blog.html

Para poner nieve en el blog descarga este archivo y pega el contenido antes de </head>

Luego antes de </body> pega esto:

<script language='javascript' type='text/javascript'>
nieva()
</script>

Al inicio del primer código que pegaste verás que dice var numero = 16 ahí puedes modificar el número de copos que quieres que aparezcan y en var velocidad = 4 la velocidad con la que caen.


Lazo de color en la esquina superior derecha

Colocarlo o quitarlo es sumamente fácil y no te quitará ni 3 minutos hacerlo. Basta entrar a Diseño | Edición de HTML y pegar antes de </body> el código del listón que quieras.

Azul


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi55avi2a5aIYRiJwg7rqM8c4tkFe-uzWLsn0NiNpBIp1dzkRw5n44FIAhvLFKkZc5YeeD10bJgb-xZi0CgYd6rPKGBjKlW6LqRwbFbmf5yGssAM_vML-jtmkYmXLRMlpQg0kYcMWJea2g/s1600/liston-azul.PNG' style='position:absolute; top:0; right:0;'/>


Rosa


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh82TaUxBp0F3iaCLea4Ig43qDtNlzOjaIdVQeycXiayJTnhAMc5MvrE0fWqp1DD-yhErC_SA8W5qrLQUc2h3m7jAaZkbzxhiXpPLhp0B7GsT8jidUc4pXISVG9Ycc8ORW-XZKsCfoAITQ/s1600/liston-rosa.PNG' style='position:absolute; top:0; right:0;'/>

Amarillo


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihHma7yJLWfnFbBTke99cn2y_oEnJVMK8BDi_FhD4xlzo7u-FR8RZPPx1Q8fbWuKXN8rMgTeb9JWp9dHbW6jqcL7Kyg6IA1kJdU9KgWCbzzfX7Qb8VND9JFoZWEeJkKpm1SVg_oSqEMEg/s1600/liston-amarillo.PNG' style='position:absolute; top:0; right:0;'/>

Blanco


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVOod89Fv_ptRMsMj-dTyVQXCACjspEbyKJ7_pnrYGctAgodC8Y1ncK7FzM8nGbHbX4cC6sD1FpGdmVNmrWkJ0mA2oJ-l_rAuTXNuCaGqn2YRxrQXPbtVEYCMFhKdYqRCZNfUHWTGq4pY/s1600/liston-blanco.PNG' style='position:absolute; top:0; right:0;'/>


Negro


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgjw-wTlcILrD7e3iMqyYtE2f9jPHaFaiGn2guU0zn4ieBPAiZ6S5Jd_Y8XMa4GUdoPu3y5159BhUcw5ThXwmnF04Eqm2uqRp3m9pUUzJhSjaOlgvrc8hMRqMWnrfJn-Zhegr0IYMy5Pg/s1600/liston-negro.PNG' style='position:absolute; top:0; right:0;'/>


Morado


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1T8z1-jQ5v6uIXLxFj74nglZ_0vHEIJRWLLRrHsEsLlWpayCim2bnOaNYIAm82Qtx_DBE6_u7uPFoRHZOdOYyeik3WboRVIr-iT9dEqRH_vhlFdUq38mIpM3C_YMA_Kpo5tuWq7uK8qE/s1600/liston-morado.PNG' style='position:absolute; top:0; right:0;'/>

Rojo


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YLTmVpz-7Sl2N9tjtKF12CT9zIola2wiM5RfPZIqqXvuAvRFVH0Nql8jyiE1ix5saN8Xqfb3YdV71CHEgbZUxY6nwoOvY9OfFNCQnsDALJe-N9yYHd5x7XDdIxAf81ku6lPa9Lx1f_Q/s1600/liston-rojo.PNG' style='position:absolute; top:0; right:0;'/>


Verde


<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggJBfSAVShtFt_rBIE-eDUVFQy0kAS5wDxJif018WGM0jIB6le9zDwhXJ_8DgoRT8mZmr5dnHMrNnWU8mQ5CtPEeDVWnhbkm7If-okKGTCmaFb9rEs0S7IvhV9nANbGWMMOZYEZ4l12K0/s1600/liston-verde.PNG' style='position:absolute; top:0; right:0;'/>


Arcoiris




<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghr9ufpXp-usuMFS_zazmPwL-M2haKIdLEC6OmsZPbEb6kRTb5rvAGyRIkNW1u2KlgvX-5egalVX_DvG1WEBWYlBuqTa7hXFPYnyL53Vn6BRR16MCJxSX1SY4cXPy-JkTjXMybEZ_nFHE/s1600/liston-arcoiris.PNG' style='position:absolute; top:0; right:0;'/>

Insertar otros sitios webs en una ventana o marco: IFRAME

Blog de Joan Gómez                            

Me lo ha enseñado Javi Fernández. Gracias por investigar y compartir.

¿Qué hay qué hacer?

Tan fácil como pegar en código HTML exáctamente lo siguiente:

<html>
  <head>
    <title>IFrames</title>
  </head>
 
  <body>
    <iframe src="http://tedetresdigital.blogspot.com/" name="SubHtml"
      width="500" height="500" scrolling="auto" frameborder="0" transparency>
      <p>Texto alternativo para navegadores que no aceptan iframes.</p>
    </iframe>
  </body>
</html>

En este texto vemos los atributos de la etiqueta iframe, es decir los parámetros de dicha etiqueta, que están colocados dentro de la etiqueta de apertura:

1. src: es la ruta o URL de donde se encuentra guardado el archivo en otro servidor.
2. frameborder: es la anchura del borde del marco expresado en píxeles.
3. height: es la altura del marco. Hay que ajustar esta altura si se quiere que no se vea la barra de desplazamiento y parezca que el objeto está incrustado en el blog.
4. width: es la anchura del marco. Hay que tener cuidado de no poner una anchura que sobrepase los 500 píxeles, pues el marco podría invadir el lateral del blog.
5. scrolling: es la barra de desplazamiento. Escribimos auto para que la barra aparezca automáticamente cuando sea necesario. Si escribimos yes, la barra aparecerá siempre, y si ponemos no, no aparecerá nunca. En este último caso, hay que impedir que el test se esconda por debajo del marco y el usuario no pueda verlo entero.
6. No hay que olvidarse de las comillas y de cerrar el iframe con su etiqueta de cierre, que incluye una barra. 

Información extraida del blog "Creamos blogs educativos"

Gadgets, widgets

Cosas para insertar en los gadgets (HTML/Javascript):

1.- Contador de visitas. Tenéis uno como gadget nuevo en los primeros puestos de la lista de gadgets (“Estadísticas del blog”) pero hay muy poca oferta de diseño.

. 

Otras opción es hacer hacer búsqueda en google: "contador de visitas para bloguer"; encontraréis numerosos sitios. Lo único que hay que hacer es copiar el código que te ofrecen y pegarlo en un gadget HTML/Javascrit

Mirad en este enlace, recomienda sitios.

2. Otros Widgets: Relojes, condiciones meteorológicas de un lugar determinado, mapas, etc. Y hay que hacer lo mismo. Pegar el código de inserción html en un gadget nuevo HTML/Javascript o en la caja de texto de una entrada nueva directamente.

3. Google AdSense es, junto con Google AdWords, uno de los productos de la Red de publicidad online de Google. Basicamente, permite a los Editores obtener ingresos mediante la colocación de anuncios en sus sitios Web, ya sean de texto, gráficos o rich-media. Estos anuncios son administrados y ordenados por Google en asociación con los Anunciantes de AdWords a través de un complejo sistema de subasta instantanea. Sólo tienes que ir a Gadgets, buscarlo y seguir los pasos.

Insertar un video del Youtube

Casi todos los videos del Youtube facilitan un código de inserción html para poder ponerlo en blogs y sitios webs.

1. Elegimos el video y le damos al botón de Compartir
2. Clicamos sobre el botón de "Insertar" y elegimos el tamaño en píxeles con el que queramos verlo en nuestro sitio
3. Copiamos el código

 Una vez hecho esto, nos vamos a nuestra entrada y la visualizamos en Edición HTML, ponemos el cursor de texto en el lugar que queremos insertar el video y pegamos el código. Sólo nos falta volver a "Redactar" y centrarlo o alinearlo como queramos.

Mi cuenta de google. Crear un blog en Bloguer.

Al abrirte una cuenta en gmail vas a tener acceso a varias aplicaciones o servicios a los que tendrás que darte de alta y que estarán vinculados entre ellos: 

1. Docs: un lugar donde guardar y crear documentos
2. Álbumes web de Picassa. Almacenamiento de fotos en albumes y posibilidad de generar presentaciones e insertarlas luego en tu blog o web
3. Bloguer: creación y publicación de blogs on line
4. Sites: creación y publicación de sitios web on line

 Crear un blog en bloguer   

Documento en PDF subido a Google docs y enlazado aquí.

Primeros pasos

Vete a la página htpps://blogspot.com

Dale a "Comenzar" y sigue los pasos. Piénsate bien el nombre de tu blog y especialmente la URL intentando que sea lo más sencilla posible para su posterior disfusión.

 

Recuerda que si pegas texto copiado de otras páginas es mejor que lo selecciones todos y le borres el formato (la T con una cruz roja que aparece a la derecha de las opciones de texto al lado de las comillas verdes).

Piénsate bien el título de cada entrada antes de darle a "Publicar entrada" pues aunque luego podrás cambiarlo de este primer título dependerá la URL de la entrada siempre.

¿Qué es un blog?

Blogs que te pueden interesar más adelante, cuando ya seas "bloggero":

Oloblogger
Ciudad blogger
Ayuda Bloggers

Presente y futuro: deberes para el próximo curso

Que una vez entregadas las prácticas (incluído "el examen" de photoshop) y el gif animado, ¡no habéis acabado!

La materia es la misma partida en dos cursos así que la nota que cuenta es la final, la correspondiente el curso que viene a la evaluación del trabajo fianl: un par de blogs enlazados que incluyan:

1. Blog principal (informativo): Descripción de la empresa, servicios, tarifas, localización, contacto, contador de visitas, otros datos de interés, enlaces varios, imágenes (creadas o retocadas por vosotros con Photoshop, jpg o gif), videos, etc.
2. Blog secundario (seductor): Muestrario de experiencias en videos (movie maker o similar de mac) de vuestra empresa, sean clases de vuestros monitores, excursiones varias, ratos de ocio familiares en, por ejemplo, vuestros alojamientos, ski y niños, vuestra empresa y la tercera edad, naturaleza y ocio, deportes de riesgo... Lo que queráis que sirva para mostrar a vuestros posibles clientes qué bien se lo van a pasar con vosotros y lo felices que van a ser. Combinaremos videos grabados por vosotros con vídeos descargados de la red.

El curso que viene

1. Necesitaréis todos una cuenta de correo de gmail
2. Estudiaremos el Windows Movie Maker (aplicación para crear pequeños videos) o su similar para mac
3. Aprenderemos a descargar videos del youtube y a subir los vuestros
4. Os enseñaremos cuatro cositas de bloguer y crearéis un par de blogs anunciando vuestra empresa y sus servicios

Deberes recomendados para este invierno que os facilitarán muchísimo el trabajo del curso que viene

1. Abriros una cuenta de gmail e iros acostumbrando a ella ;) Dificultad verde
2. Grabar con cámara de fotos digital o similar pequeños videos de unos 30 segundos de duración. Cuantos más mejor. No necesitamos en absoluto que tengan mucha resolución. Fotos también. Dificultad verde. Imágenes de interiores con poca luz no recomendados.Descargar las fotos y videos a disco duro (ordenador, pendrive, etc) Clasificarlos y guardarlos bien en carpetas para su rápida localización posterior. Dificultad azul (¡Y hay de aquel que no sepa qué grabó, dónde lo guardó y cómo lo llamó!) 
3. Crearos una biblioteca personal con la música que más os guste como banda sonora de los videos. Copiar las pistas seleccionadas, clasificarlas y guardarlas en carpetas. Preferente formato MP3.Dificultad verde
4. Pensar cómo va a ser vuestra "empresa" y qué puede ofrecer, dónde la váis a localizar, a qué grupos de clientes queréis atraer: raquetas, fondo, alpino, snow, travesía, escalada en hielo, competiciones, paseos a caballo, deportes de riesgo, turismo rural, birdwatching o macramé, me da igual, la "empresa" es cosa vuestra, sea real o ficticia. Dificultad roja
5. Recomendable: id guardando en word enlacesinteresantes que pudieran tener relación con vuestra empresa como por ejemplo información de la comarca donde estéis localizados, planos del google maps, etc. y repasar de tanto en tanto lo aprendido con el photoshop y el image ready. Dificultad azul