Ejercico 15. Buscador

Busca el código html de un buscador y añádelo a tu web.

Ejercicio 14: Cortar un vídeo

Existen herramientas on line como tubechop, que te permiten cortar un vídeo para que puedas insertar en tu web solo la parte del vídeo que te interese. Elige un vídeo, corta una parte con tubechop  e insértala en tu web.

Ejercicio 13. Insertar un juego

También los juegos tienen un código html. Algunas web nos permiten copiar estos códigos html para que se puedan insertar en otras web. Busca el código de alguno e insértalo en tu web.
Aquí tienes un ejemplo:
http://www.comoserungeek.com/insertar-juegos-en-html/

Ejercicio 12: Reloj

Busca en internet el código HTML que pertenece a un reloj digital. Inserta dicho código en tu web y mira si funciona.
Como siempre, sube el trabajo a tu cuenta de Dropbox.

Ejercicio 11:Chat en tu web.

Pega este código html en tu web y mira que ocurre:

<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" width="640" height="480" name="chat" FlashVars="id=34810994" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small><a target="_BLANK" href="http://xat.com/web_gear/?cb">Get your own Chat Box!</a> <a target="_BLANK" href="http://xat.com/web_gear/chat/go_large.php?id=34810994">Go Large!</a></small><br>

<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://counters.gigya.com/wildfire/[....]DI2MCZwPTUzMTUxJmQ9Jm49Jmc9MQ==.jpg" />

Ejercicio 10. Scroll box

Copia este código en tu web. Modifica su tamaño y su contenido:


<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;"> As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box. </div>

Ejercicio 9. Insertar una presentación

VAmos a insertar una presentación en nuestra web:
1. Vamos a internet para buscar una presentación que nos guste o que necesitemos. Existen varios sitios con presentaciones, en este caso vamos a utilizar Slideshare.
2. Una vez que hemos encontrado la presentación pulsamos en botón "embed", se mostrará un código html que corresponde al de esa presentación. Este código es el que deberemos copiar y pegar en el código de nuestra pagina web.

Ejercicio 8. Insertar un vídeo.

Vamos a insertar en nuestra web un vídeo de YouTube.
1. Busca en You Tube un vídeo que te guste o que quieras insertar.
2. Abajo del vídeo existe un botón que pone "compartir", pulsalo.
3. Una vez pulsado aparece la opción "Insertar", púlsala y aparecerá un código en HTML que debemos copiar y pegar en el código HTML de nuestra web.

Ejercicio 7. Cambiar el tamaño de una foto

a la etiqueta <IMG> le agregas WIDTH que es el ancho de la imágen y HEIGHT que es el alto de la imágen.
Entonces tienes por ejemplo algo como:

<img src='image.jpg' width='250' height='250'>

Si quieres tambien le puedes poner TITLE para que cuando uno pase el mouse por encima muestre el nombre de la imágen.

<img src='image.jpg' width='250' height='250' title='Esta es mi imágen'>

Y si también quieres puedes hacer un vinculo a otra página con la etiqueta <A> alrededor de la imégen:

<a href='otrapagina.html'><img src='image.jpg' width='250' height='250' title='Esta es mi imágen' border='0'></a>

Ejercicio 6. Añadiendo más páginas a mi web

Vamos crear dos páginas más enlazadas a nuestra web.
Mira en la lista de códigos cuál corresponde a la de los enlaces internos.
Crea cuatro enlaces internos, el primero que te lleve a "inicio.html", el segundo a "Nosotros.html", y el tercero a "contactar.html".

Vamos a crear los siguientes archivos vacíos que renombraremos: "index.html", "nosotros.html" y "contactar.html"

Los subimos a nuestra carpeta en Dropbox.

Ejercicio 5. Subimos nuestro trabajo a Dropbox

Vamos a subir nuestro trabajo HTML a nuestra Dropbox. Accede a tu cuenta, crea un acarpeta que se llame trabajo html, sube el archivo html que has realizado. También tienes que subir las fotos que insertaste en tu web html.

Ejercicio 4: Dropbox

Antes de continuar vamos a abrirnos una cuenta en Dropbox. Es muy útil. Se trata de tener un espacio gratuito de 2 Gigas en internet, donde podemos subir los archivos que queramos y acceder a ellos desde cualquier ordenador (solo puedes acceder tu, claro).

Intenta abrirte una cuenta.
Esta es la página de Dopbox: https://www.dropbox.com/

Dropbox te permite descargarte una aplicación al ordenador con la que tienes la carpeta virtual también en tu ordenador. Tanto si modificas esa carpeta como la de internet, las dos actúan al mismo tiempo. si modificas una, se modifica la otra y siempre están actualizadas.

Ejercicio 3: más html

Te dejo aquí un enlace con los códigos básicos del lenguaje html.
Debe diseñar una web utilizando el máximo de comandos de la lista.
ENLACE: pulsa aquí  o   aquí
Cuando termines copia el código html que usaste y copia y pégalo en una nueva entrada( en la parte redactar). Titua la entrada MAS HTML.

Ejercicio 2: Estructura básica del código fuente de una web

<html>
<meta Charset=utf-8>
<head>
<title>
Página de prueba
</title>
</head>
<body bgcolor="red" text="blue">
<h1>
letras de tipo uno
</h1>
<hr>
<center><img src="nombredeunafoto.jpg"</center>
<h2>
tipo de letra dos<br></br>
</h2>
<h3>
tipo de letra tres
</h3>
</body>
</html>

Hemos aprendido la estructura básica en html de una web. Debes subir a tu blog el código fuente que has empleado hasta ahora ( copiarlo y pegarlo en una entrada- en la parte redactar, no en la de html)

Ejercicio 1: Primeros paso en Lenguaje HTML

1. Busca unas indicaciones sencillas y claras de qué es y para que se utiliza el lenguaje HTML. Sube a tu blog esa pequeña reseña.
2. Observa los dos vídeos tutoriales, vamos a realizar una pequeña página web en lenguaje HTML tal y como nos indica los vídeos.

vídeo 1    vídeo 2

Resumen:

Recordamos los primeros pasos:

1- creamos un archivo vacío en el escritorio, y lo renombramos con el nombre que queramos .html

2- Damos en botón derecho del ratón y abrimos el archivo con gedit.

reducimos el tamaño de la ventana con la que hemos trabajado.

3. pulsamos con doble clic en el archivo html, se abre el archivo desde el navegador para internet.

4. escribimos cualquier cosa en el editor gedit, una frase larga en dos renglones distintos.

damos a guardar. En la ventana del navegador recargamos la página. Aparecerá lo que hemos escrito pero en una sola línea, Así que vamos a dar la orden en lenguaje html de que existan dos renglones y no solo una línea. La orden es esta expresión:   <br>, las expresiones del lenguaje html siempre van entre  estos dos símbolos: < >   br significa break, romper.

es un ejemplo sencillo de como va a funcionar la programación en html, tendremos que seguir indicando en el editor de texto nuevas expresiones html hasta que consigamos la apariencia de página web.

COMIENZA LA TERCERA EVALUACIÓN

Ejercicio 21: Efector Dragan

Dragan es un fotógrafo que da a sus foto un aspecto muy particular, visita esta web y aprende a dar a tus fotos un aspecto igual.

Ejercicio 20. Marco

Vamos a añadir un marco a algunos de los ejercicios anteriores (al menos dos distintos). Aquí tienes dos maneras diferentes de hacerlo. Si quieres puedes buscar en algún vídeo o tutorial que te lo explique de otro modo.
Pulsa en esta web

Ejercicio 19. animación Gif

Bueno, hemos realizado muchos ejercicios con Gimp. Es hora de que seáis independientes, y que sepáis recurrir a la web para buscar toda la información que se necesita para hacer lo que queréis.
Busca un tutorial adecuado para realizar un gif animado. Sube el resultado.

ejercicio 18. Filtros

Accede a esta WEB, curiosea el efecto de los distintos filtros. Busca una foto que te guste y aplícale al menos tres de los filtros que más te llamaron la atención. Sube la tu blog a foto original y las transformadas, especificando en cada una el tipo de filtro usado.

Ejercicio 17. Efecto POP ART

Si has tenido dificultades en el ejercicio 16 y no has podido realizarlo, te dejo aquí otra opción.
Sigue los pasos del tutorial. Espero que esté más claro.

Ejercicio 16. efecto POP ART

Sigue los pasos aquí explicados, conseguirás un efecto parecido al utilizado en el Pop Art.

http://www.linuxzone.es/2008/05/06/tutorial-efecto-pop-art-con-gimp/

Ejercicio 15. Efecto HDR (Hig Dinamic Range)

Esta foto es el resultado de convertir una imagen normal JPG en una imagen HDR (High Dynamic Range), las cuales maximizan la información visual para el ojo humano resaltando más los colores iluminados y las sombras, con una corrección gamma de los mismos.

Vean ahora como era la foto original antes de ser editada:

Imágenes e información obtenidas de: http://www.aeromental.com/2008/03/19/efecto-hdr-gran-foto/

Elige una fotografía adecuada y sigue los pasos de esta página web. Vamos a intentar crear el efecto HRD con Gimp. 

Ejercicio 14. Efecto cámara Lomo.

Las cámaras Lomo produce un curioso efecto alrededor de una imagen. Vamos a intentar crear este efecto con Gimp. Debes acceder a esta web donde se explica de un modo sencillo. Puedes buscar información en internet sobre estas cámaras y como su manera de fotografiar se puso de moda.

Ejercicio 13. Contraste (efecto Che' Guevara)

Observa con atención este vídeo, y realiza una actividad parecida. No necesita sonido.
Puedes parar el vídeo para ver con detenimiento alguno de los pasos.

Ejercicio 12. Puzzle

Vamos a hacer un diseño a modo de puzzle partiendo de una foto.

1. Abrimos una foto.

2. Crear capa nueva ( como color de fondo).

3. Nos situamos en la nueva capa y vamos a filtro, renderizado- patrón-puzzle (aplicamos el filtro). ponemos esa capa en MODO multiplicar.

4. Creamos un archivo nuevo de gimp.

5. Vamos a la capa del puzzle, seleccionamos con la varita una pieza y cambiamos a la capa de la foto, damos en editar- copiar, vamos al archivo nuevo y damos en editar- pegar. y así hasta hacer un diseño con las piezas del puzzle.

Ejercicio 11. Utilización de máscaras

Máscara Gimp

1. Duplicar capa de fondo, activar modo mascara rápida (may + Q) aparece una máscara roja.

2. Seleccionar modo frontal en los dos recuadros de colores de la izquierda (flecha doble blanca)

3. Herramienta lápiz o pincel y pintar sobre la imagen que queremos que destaque teniendo cuidado con los bordes y cambiando el tamaño de pincel según la necesidad.

4. Aplicamos un filtro de desenfoque gausiano para suavizar los recortes y bordes. Salimos del modo máscara pulsando may + Q

5. Vamos a seleccionar, invertir ( con lo que se invierte lo seeccionado)

6. Vamos a colores, colorear y modificamos los colores ( cambiará los colores del fondo, lo puedes poner en sepia)

7. Invertimos de nuevo la selección y vamos a colores, tono y saturación y aumentamos un poco.

Aquí tienes un ejemplo.

Suerte!!

Ejercicio 10. Componer. Cambio de cabeza

Busca dos fotografías de distintos personajes, intercambia la cabeza de uno de ellos cuidando su correcta integración, es decir, cuidando la proporción, tamaño, punto de vista, color, etc. sube las fotos al blog.
Tendrás que utilizar distintas herramientas y capas. Las herramientas de sellección mediante el "lazo"y "escalar" serán muy útiles.

Ejercicio 9.- Restaurar una foto antigua de libre elección.

Busca una foto antigua estropeada (tus abuelas estarán encantadas de dejarte una para que la escanées) y arréglala utilizando las herramientas que has aprendido a utilizar en el ejercicio anterior.

Si la foto te da poco trabajo, te propongo que la colorees al estilo de esa época.

Si pones una capa por encima de la foto, marcas la pestaña "multiplicar" y coloreas con un color fuerte verás que el color se integra perfectamente en la imagen, es como si dieses una veladura de acuarela. Si el color es demasiado fuerte, o saturado puedes reducir la transparencia.

RECUERDA.- para colorear la foto capa nueva con colores trasteando "MULTIPLICAR" Y "TRANSPARENCIA"

Nota.- Estas fotos las he bajado de internet y ya me he revisado cientos de imágenes que hay colgadas en la red con el antes y el después de la restauración de una foto antigua.

Ejercicio 8. Restaurar una foto antigua.

Descarga la foto siguiente ( primero púlsala para acceder a la copia de mayor tamaño) y restáurala de modo que no se aprecien arañazos ni roturas. Mientras vas restaurando la foto mantén una copia de la imagen original. Al final tendrás que subir al blog una composición con las dos fotos, una encima de la otra de modo que puedan apreciarse todos los cambios que has realizado. Ver imagen de ejemplo.

Puede usar herramientas que ya conoces. También te vendrá bien la herramienta que aparece bajo el icono de dos tiritas que se cruzan, averigua para que sirve y utilízala.

PULSA PARA DESCARGAR

PRESENTACIÓN EN BLOG

Ejercicio 7. Dibujar formas

Abre un nuevo archivo de Gimp. Investiga e intenta realizar el dibujo de un cuadrado, un rectángulo, un círculo, una elipse y un triángulo. Rellenalos con colores planos, graduados o con alguna trama.

Ejercicio 6. De foto a dibujo

En este ejercicios aprenderemos a dar el aspecto de un dibujo a nuestra foto.
En el vídeo se explica como hacerlo siguiendo estos pasos:

Abrir foto.

1. Ir al menu colores y bajar toda la saturación, la foto se queda en blanco y negro.

2. Duplicar la capa que tenemos

3. Trabajando en la capa duplicada vamos a colores, invertir. La foto se queda en negativo

4. Vamos a MODO de la capa, y seleccionamos, BLANQUEAR

5. Vamos al menú filtro, desenfoque, desenfoque gausiano y damos un radio de desenfoque horizontal 30 + -

podemos repetir el filtro desenfoque ahora hasta 20 + - Una o dos veces más.

guardar foto ( con extensión JPG).

Subir al blog la foto original y la transformada.

Ejercicio 5. Gimp. CD

Realiza el diseño de una portada para un CD de un grupo musical. Utiliza las herramientas que hemos visto e investiga alguna otra nueva. Añade algún texto en la portada. No olvides que el tamaño de la portada es un cuadrado de 12 x 12 cm.

Ejercicio 4. Eliminar objetos.

Vamos a eliminar los objetos que no queremos que salgan en nuestra imagen.
Utilizaremos la herramienta clonar. Puedes ver este vídeo:

Elige una foto con varios objetos y ábrela con Gimp.
Selecciona la herramienta clonar (el que tiene forma de sello),  Este pincel clonará una zona. Sitúate en la zona que quieres clonar y pulsa ctrl (control)+ boton izq del ratón, así seleccionarás esa parte, después suelta las teclas y pinta con el ratón. Recuerda que puedes cambiar la forma y tamaño del pincel.
Guarda las dos fotos en tu blog.

Ejercicio 3. Gimp: Uso de capas

Utiliza la fotografía recortada y añádele un paisaje detrás. Tendrás que usar una capa para cada imagen.
Cuando tengas las dos capas prueba los distintos efectos de integración entre capas que te ofrece GIMP, en la opción de capas, "modo"

Ejercicio 2. Gimp. Eliminar un fondo.

Vamos a trabajar con la misma fotografía del ejercicio 1.

Eliminaremos su fondo.

Usaremos tres herramientas:

1. Herramienta "selección difusa"  (varita con punta amarilla).

2. La goma.

3. Herramienta de emborronado ( puedes usas la gota blanca- que desenfoca- o la mano con el dedo que emborrona).

También iremos varias veces a "Limpiar" que está en Editar.

Proceso:

1. Con la varita seleccionamos parte del fondo y cliqueamos en limpiar, volvemos a repetir hasta el máximo de veces que podamos. Podemos graduar el "Unbral" de esta herramienta, es decir, si selecciona más o menos extensión (sobre 30 puede estar bien).

2. Con la goma borramos los trocitos que nos queden por ahí. 

3. Algunos bordes de la figura los suavizamos un poquito con el emborronador (con cuidado)

Listo. El éxito depende de lo cuidadoso que seas .


En el menú editar, tenemos HISTORIAL, si pulsa te salen todo los pasos que diste, puedes deshacer e ir a pasos anteriores.


Guarda las fotos y los trabajos que estés haciendo.
Puedes mandártelo a tí mismo por correo para que no se pierdan o puedes insertarla en tu blog. Al final las coleccionaremos y mandaremos al profesor.

Ejercicio 1. Gimp. Cambiar color

Hola a todos. Feliz Año nuevo.
Vamos a comenzar  la 2ª EVALUACIÓN cambiando de actividades. Dedicaremos varias sesiones a trabajar con el programa gratuito GIMP, disponible para Mac, Windows y Linux.

Ejercicio 1.
Vamos a trabajar partiendo de una fotografía de un rostro, a la que le cambiaremos el color de ojos, labios y pelo.
Os indico los pasos:

1. Abre con el gimp una fotografía del rostro de una persona.

2. Abre una capa nueva. Selecciona transparencia y llámala color.

3. Coge el pincel y rellena del color que quieras un ojo.

4. Ve al panel de la derecha ( de las capas) y en la opción modo selecciona tono.

5. Repite el proceso con cada parte.
6. Guarda la fotografía original y la transformada. Mándame un correo con las dos fotos. Pon color ojo y tu nombre (solo nombre) en asunto.

Consejos: El paso tres lleva su tiempo, puedes hacerlo a mano con el pincel o eligiendo una forma y rellenándola.

Puedes ver este vídeo: