Mostrando entradas con la etiqueta 3º Eso. Mostrar todas las entradas
Mostrando entradas con la etiqueta 3º Eso. Mostrar todas las entradas

Micromundos EX

¡Pues ya está aquí! Mucho hemos hablado en clase de este entorno de programación diseñado especialmente para alumnos de vuestras edades.

Antes de empezar a trabajar con él (hay que instalarlo en los ordenadores), os avanzo algunas cosas sobre el programa en cuestión.

Micromundos EX a primera vista
MicroMundos es un entorno de programación, que utiliza como lenguaje nuestro conocido Logo, con el que podemos construir proyectos que incorporen gráficos, figuras animadas, texto, sonido, vídeos, etc.

Trabaja con proyectos y dispone de distintos tipos con los que podremos trabajar, como presentaciones, programas interactivos y proyectos de investigación.

Los creadores de Micromundos EX, dicen que han creado el entonro para que los estudiantes exploren y prueben sus ideas en dicho ambiente de creación de proyectos y exploración de ideas. MicroMundos es tan versátil que puede ser utilizado para crear:

Simulaciones de ciencia.
Exploraciones matemáticas.
Historias multimedia interactivas.
¡Cualquier cosa que puedas imaginar!

También nos permite programar los Lego Minstorms Bricks de una forma sencilla.

Leer más...

La web 2.0

¿Qué es web 2.0?

La web 2.0 es un conjunto de servicios que nos permiten elaborar, modificar, almacenar, introducir y compartir información y tenerla siempre disponible en Internet.

En la web tradicional se presenta la información de forma directa, no hay interacción ni respuesta del usuario, sólo emisión del mensaje. Lo único que puede hacer el visitante es visualizar la información y en algunos casos puede utilizar el correo electrónico para ponerse en contacto con el responsable de la página.

En la web 2.0 podemos exponer e intercambiar información con el creador de la web, mediante comentarios, chats, foros, etc. Se establece un diálogo abierto entre el emisor del mensaje (creador de la web) y los receptores (usuarios que visitan su espacio). Este espacio puede ser un blog, fotoblog, videoblog, presentaciones... Este blog es un ejemplo claro de web 2.0

Existen infinidad de aplicaciones web 2.0 por descubir, en los siguientes artículos iremos descubriendo algunas de ellas. Os dejo ahora el mapa visual de la web 2.0, creado por La Fundación Orange.

Leer más...

Alojamiento web gratuito

Veamos algunos de los sitios que nos ofrecen alojamiento para las webs que hemos hecho en clase.

Si hacemos una búsqueda en Internet, encontraremos infinidad de sitios que ofrecen el servicio que buscamos, cada uno tiene sus ventajas e inconvenientes, trataremos de ver algunos de los más interesantes.

Pero antes de pasar a ver cuáles son, es conveniente que sepamos en qué debemos fijarnos a la hora de elegir un alojamiento web:

Recursos permitidos
Es importante saber qué recursos ponen a nuestra dispocición. Cuando hablamos de recursos nos referimos al número de programas y herramientas que podremos incorporar fácilmente a nuestra web.

Los recursos más utilizado son: estadísticas, contadores, subdominios, email gratuito, bases de datos, etc.

Estos recursos se hacen imprescindibles cuando nuestra web, no es un simple trabajo del colegio, sino cuando hacemos una web formal que pretendemos mantener a lo largo del tiempo.

Velocidad del servidor
Todos queremos que nuestra web se cargue rápidamente y no haga esperar a los visitantes, y esto no siempre depende de cómo hayamos hecho la web, también influye la velocidad con la que es capaz de trabajar el servidor web.

Una buena opción de visitar páginas que estén alojadas en ese servidor y comprobar si la descarga nos convence o no.

No se nos puede escapar que la ubicación física del servidor puede influir en la velocidad de la web. Lo normal es que un servidor situado en España sea más rápido que otro situado en Estados Unidos, por ejemplo.

Publicidad insertada en las páginas
Otro aspecto importante es la publicidad que de forma automática insertan los servidores en nuestra web. Si nos dieran a elegir seguro que evitaríamos los servidores que introducen publicidad, pero suele ser el método más utilizado por los servidores "gratuitos". De alguna parte tiene que salir el dinero que cuesta mantenerlos.

podemos encontrarnos con distintos tipo sde publicidad:

Publicidad en un marco inferior. Es tal vez la que más afea nuestra web, ya que siempre está visible en la página.
Banner superior. Es el método más habitual. Como desventaja tiene que el banner se exibe en la propia página, modificando nuestra web.
Publicidad en una ventana aparte. Esta publicidad aparece en una ventana aparte (pop-up) del explorador. No modifica nuestra web, pero puede llegar a ser molesta para el usuario.
Publicidad en la propia página, en forma de imagen, texto o animación. Suele ocupar poco y no molesta demasiado.
Sin publicidad, sin duda la mejor opción.

Por manera de subir nuestros archivos al servidor
Existen diferentes opciones de subir los archivos a un ordenador. Algunas de ellas ya las hemos visto y/o utilizado en clase.

Por ejemplo, mediante FTP (File Transfer Protocol = Protocolo de Transferencia de Ficheros) o por medio de una página web que, a través de un formulario, nos permite seleccionar los archivos y enviarlos al servidor.

La más rápida y efectiva es utilizar FTP. Mediante un nombre de usuario y una contraseña, tendremos acceso directo a la carpeta del servidor en la que está alojada nuestra web. Podemos utilizar este protocolo desde nuestro navegador preferido, simplemente escribiremos ftp:// en lugar de http://.

Cuando nos hayamos conectado al servidor podremos simplemente arrastrar sobre la ventana del navegador los archivos que queremos subir.

Pasemos a ver ahora, algunos de estos sitios que nos ofrecen un alojamiento gratuito para nuestra web.

Servidores web gratuitos

000webhost.com
1,5 GB de espacio en disco
Dirección del tipo: www.miweb.netii.net
Tráfico mensual limitado a 100 GB
5 subdominios
5 cuentas de email
2 bases de datos MySql
Páginas de error personalizadas
Hasta 10 herramientas autoinstalables.
SIN PUBLICIDAD

brinkster.com
15 MB de espacio en disco
Dirección del tipo: miweb.brinkster.net
Tráfico diario limitado a 66 MB
Máximo tamañao de archivo 1 MB
No permite la carga de páginas externas
No permite archivos de audio/vídeo
SIN PUBLICIDAD

tripod.lycos.es
1 GB de espacio en disco
Dirección del tipo: www.miweb.netii.net
bases de datos MySql
php5
permite FTP y webFTP
Páginas de error personalizadas
Herramientas includias: contadores, estadísticas, libro de visitas, etc.
CON PUBLICIDAD

Leer más...

Efecto cómic

En esta ocasión transformaremos una fotografía para que parezca la viñeta de un cómic.

Es un proceso largo, pero merece la pena.

Sigue los pasos y guarda el trabajo realizado con el nombre: PS_Final.psd

Este será el resultado final:


1) Abre una fotografía con buena resolución y con colores bien definidos.


2) Pulsa Ctrl-A, para seleccionar toda la foto, luego ctrl-c para copiarla, y por ultimo, ctrl-n para abrir una nueva imagen del mismo tamaño que la inicial.
3) En la nueva ventana, deja todo igual, excepto “modo de color”, que pondremos “color lab”. Pulsa ok. Luego ctrl-v para pegar la selección anterior.


4) Ve a la paleta de canales y haz click en “luminosidad”.


5) Haz click en imagen - modo - escala de grises. Pulsa ok dos veces.


6) Guarda el documento en formato .psd (puedes darle el nombre que quieras). No cierres este documento, minimízalo o mantenlo detrás. Ahora vamos a pasar a modificar la foto original.

7) Duplica la capa de fondo y ponle de nombre "tono".
8) Con la capa "tono" seleccionada, vamos a filtro - artístico - bordes añadidos. Ponemos los valores siguientes:


9) Vamos a filtro - artístico - cuarteado. Nº de niveles : 4, simplicidad de borde: 3 y fidelidad de borde: 2. Ok. Ahora deberéis tener algo parecido a esto:


10) Lo siguiente es aplicar el filtro - desenfoque - desenfoque suavizado. Radio 6, umbral 80, calidad alta y modo normal.

11) Duplica la capa de fondo, ponle de nombre "color" y colócala la primera. Cambia el modo de fusión de "normal" a "color".


12) Filtro – ruido- polvo y rascaduras con: radio 10 y umbral 0.
13) Ahora vamos a imagen - ajustes - tono/saturación. Tono 0, saturación 80 y luminosidad 50. Ok. Queará algo asi:


14) Duplica la capa fondo de nuevo, y ponle de nombre "tinta 1" y colócala la primera de la lista. Cambiamos el modo de fusión a "multiplicar".
15) Vamos a imagen - ajustes - umbral. Valor: 25.
16) Aplicamoe el filtro - estilizar - difusión. Elegimos "anisotropico". Ok.

Paso E:
17) Duplica una vez mas la capa fondo, y ponle de nombre "tinta 2", colócala la primera, con modo fusión "multiplicar".
18) Pulsa la tecla "D" para que los colores frontales y fondo sean los de por defecto (Negro y Blanco).
19) Aplica el Filtro - bosquejar - fotocopia. Detalle:12, Oscuro 15.
20) Vamos a Imagen - ajustes - umbral. Pon un valor de 100.
21) Aplica el Filtro - estilizar - difusión. Elegimos anisotrópico. Ok. Debería ser algo como esto:


22) Creamos una nueva capa arriba de las demás, y la llamamos "tinta 3".
23) Edicion rellenar, con los siguientes valores:


24) Aplicamos el Filtro - bosquejar - modelo de semitono. Tamaño 2, contraste 25, motivo línea.
25) Ahora vamos a utilizar el archivo que guardamos anteriormente (pasos 2 al 6). Para ello, vamos a filtro - distorsionar - desplazar. "Escala horizontal y vertical" con valor 25, "mapa desplazamiento" estirar, y "areas no definidas" dar la vuelta. Pulsamos Ok, y nos aparecerá una ventana. Seleccionamos el archivo que guardamos en el paso 6 y damos OK.
26) Aplicamos el Filtro - desenfoque gaussiano, con radio 2px. Ok.
27) Vamos a imagen - ajustes - umbral, y poner un valor de 120. Ok.
28) Aplicamos Filtro - estilizar - difusion. Seleccionar anisotrópico.OK.
29) Cambiamos el modo de fusión a "multiplicar".

30) Pulsa la tecla "q" para entrar en el modo mascara rápida. A continuación, Ctrl-v para pegar la imagen que teníamos copiada desde el paso 2.
31) Todavia en el modo mascara rápida, vamos a filtro - desenfoque suavizado" y le damos: radio 6, umbral 80 alta calidad y modo normal (es decir, los valores que pusimos anteriormente). Pulsamo Ok, y después pulsamos la tecla "q" para salir de la máscara. Si todo ha ido bien las partes más iluminadas deberían estar seleccionadas.
32) Vamos a capa - añadir mascara de capa - ocultar selección.
33) (Recordar que estamos en la capa tinta 3) Vamos a imagen - ajustes - umbral. Lo normal es darle un valor de entre 190-230. Quedará algo como:


La iamgen ya tiene su forma, pero podemos mejorarlo un poco más, retocando el aspecto de los dientes y haciendo que la foto parezca que realmente está impresa en papel de comic.

Para los dientes:
34) Creamos una nueva capa que llamamos "dientes" y la colocamos debajo de la capa "tono", con modo de fusión "normal".
35) Con la herramienta pincel, pintamos los dientes de blanco. El tamaño del pincel que vaya acorde al tamaño de la foto.

Para el tono de la imagen:
36) Si te ha quedado muy oscuro el resultado, selecciona la capa "tono", y en imagen - ajustes - niveles, mueve el puntero gris hacia la izquierda.

Para la papel:
37) Crea una nueva capa debajo de la capa "tinta 1" y llámala "pantalla de puntos". Seleccionala y ve a edición - rellenar, con color 50% gris, modo normal y opacidad 100%.
38) Aplicamos el Filtro - pixelizar - semitono de color. Deja los valores por defecto, excepto el radio máximo, que le damos valor de 4 pixels.
39) Cambia el modo de fusión de la capa a "superponer". Las capas quedan finalmente asi:


40) El resultado final:

Leer más...

Foto efecto bordes quemados

En esta ocasión transformaremos una fotografía para que parezca que tiene los bordes quemados. Para ello debéis seguir el siguiente tutorial.

Este ejercicio es algo más largo de lo habitual, por lo que debes prestar especial atención para no saltarte ningún paso.

Sigue los pasos y guarda el trabajo realizado con el nombre: PS_tut10.psd

El resultado final será similar al siguiente:



1.- Abrir la imagen con la que queremos trabajar… en este caso hemos utilizado la siguiente:


Puedes utilizar la fotografía que quieras, si es blanco y negro o sepia, mejor.

2.- Seleccionar toda la imagen, para ello ve al menú selección - todo o bien pulsa ctrl+A
3.- Menú selección - modificar - borde y para esta fotografía. Utiliza los valores que puedes ver en la imagen… ten en cuenta que dependiendo del tamaño de la imagen y del tamaño que querais de borde así tendrás que poner este valor…


4.- Ahora tienes que guardar la selección. Para ello ve a selección - guardar selección. Ponle un nombre (por ejemplo, Alfa 1) y pulsa Ok. Acuérdate del nombre que le has puesto, porque lo utilizaremos más tarde.
5.- Selección - deseleccionar o ctrl+D
6.- Ve a la paleta canales y allí encontrarás el canal Alfa 1… haz click sobre él para seleccionarlo.
7.- Filtro - desenfoque - desenfoque gausiano con los siguientes valores:


8.- Filtro interpretar - nubes
9.- Ahora ve al menú edición - transición nubes… o pulsa Mayús+ctrl+F y utiliza los siguientes valores:


10.- Filtro - desenfoque - desenfoque gausiano con los siguientes valores:


11.- Imagen - ajustes - niveles con los siguientes valores:


12.- Debeís tener algo similar a:


13.- Filtro - desenfoque - desenfoque gausiano con los siguientes valores:


14.- Ahora ve al menú edición - transición desenfoque gausiano… o pulsa Mayús+ctrl+F y utiliza los siguientes valores:


15.- Crea un nuevo canal haciendo click en el icono de crear nuevo canal que está al lado del icono papelera. Con esto se crearás un nuevo canal llamado Alfa 2
16.- Filtro - interpretar - nubes
17.- Imagen - ajuste - Curvas… Y aquí viene lo que puede resultar un poco más dificil… Simplemente tienes que ir poniendo puntos con los valores que aparecen a continuación. Después te debe quedar una curva parecida a la que hay en la imagen:
Los valores son:
punto 0,125
punto 19,52
punto 49,53
punto 73,116
punto 78,152
punto 88,109
punto 110,50
punto 159,194
punto 168,243
punto 180,43
punto 192,76

La curva debe quedar como sigue:


18.- Imagen - ajustes - curvas y hacemos lo mismo que antes, ve poniendo puntos con los valores:
punto 100,127
punto 115,161
punto 147,130
punto 171,143

Debe quedar una curva como esta:


19.- Haz click en el canal alfa 1
20.- ctrl+click en canal alfa 2 para fijar la selección.
21.- Menú edición - rellenar con los valores de la imagen:


22.- Menú selección - deseleccionar
23.- Imagen - ajustes - niveles con los valores de la imagen:


24.- Menú selección - cargar selección canal alfa 1
25.- Selecciona el canal RGB y pulsa la tecla suprimir para eliminar lo que hay dentro de la selección.
26.- Menú selección - calar con los valores de la imagen:


27.- Fija el color frontal con los valores de la imagen:


28.- Menú edición - rellenar con los siguientes valores:


29.- Repite el paso anterior otra vez, con los mismos valores.
30.- Ctrl+Click en el canal alfa 1 para fijar la selección.
31.- Menú selección - calar con los valores de la imagen:


32.- Fija el color frontal con los valores HSB tal y como os muestro en la imagen:


33.- Menú edición - rellenar con los valores de la imagen:


34.- Repite el paso anterior otra vez, con los mismos valores.
35.- Menú selección - deseleccionar
36.- Ctrl+click en el canal alfa 1 para fijar la selección.
37.- Menú selección - invertir.
38.- Ctrl+c para copiar o bien Menú edición - copiar.
39.- Menú selección - deseleccionar.
40.- Menú edición - rellenar con los valores de la imagen:


41.- ctrl+V para pegar o Menú edición - pegar
42.- Y por fin, este debe ser el resultado final:

Leer más...

Trabajo "Botones Web"

Estos son los resultados de vuestro trabajo:

Leer más...

Botones para web

Vamos a aprender a crear botones que podremos utilizar en nuestros diseños de páginas web. Para ello debéis seguir el siguiente tutorial.

Sigue los pasos y guarda el trabajo realizado con el nombre: PS_tut09.psd

El resultado final será similar al siguiente:



Primer paso:
Vamos a darle un acabado atractivo a cualquiera de las miles de Formas personalizadas que podéis descargaros de forma gratuita desde internet o a las que el propio photoshop lleva incorporadas...

Para ello, crea un documento de aproximadamente 200x200 píxeles, en el ejemplo utilizamos la siguiente Forma personalizada para después rasterizarla:


Pero recuerda que puedes utilizar cualquier otra forma.

Segundo paso:
Pulsa dos veces sobre la capa en la que se encuentra la forma para abrir la ventana de estilos de capa, aplícale una superposición de colores para rellenarlo de ese color que os interese en cada caso. En el ejemplo hemos elegido un tono verdoso:


Tercer paso:
A continuación, selecciona la forma pulsando con el botón izquierdo del ratón y la tecla control simultáneamente sobre su capa y contrae la selección alrededor de 3 píxeles, para ello pulsa Selección - Modificar - Contraer:


Cuarto paso:
Ahora selecciona en el color frontal el color blanco y utiliza la herramienta degradado. En l parte superior, donde se muestra la flecha en la imagen debes elegir el degradado Color Frontal/transparente:


Crea una nueva capa vacía y aplica el degradado dentro de la selección:


Quinto paso:
Aplica un desenfoque gaussiano en esta capa que contiene el degradado blanco de unos 2 ó 4 píxeles para suavizar un poco los bordes del mismo. Después vuelve a seleccionar laa forma inicial y utiliza la herramienta marco elíptico. Arriba a mano izquierda, debes pulsar sobre el pequeño icono que dice Restar de la selección y trazamos una elipse parecida a esta, con nuestra forma seleccionada:


De esta forma eliminas de la selección de la forma el trozo contenida en ella de elipse. Una vez más, coge la herramienta degradado con el color blanco como color frontal y rellena la selección con él:


Sexto paso:
Ahora debes ir a la capa en la que tenemos la forma y añadir un trazo de color negro de un pixel y con sombra paralela. Lo puedes hacer desde la ventana de estilos de capa y así añadir algo más de volumen a la forma:


Séptimo paso:
Para terminar de decorarla, puedes añadir otra forma encima de esta y la pones en el modo de fusión Superponer. En esl ejemplo se ha utilizado una señal de prohibido el paso. También se ha iluminado alguna zona pintando en una nueva capa vacía de blanco estando el modo de fusión de esta capa en luz suave:


Octavo paso:
Para terminar, puedes usar un fondo y añadir más elementos a tu gusto. Esto es un pequeño ejemplo de lo que puedes hacer, el resto depende de tu imaginación.

Leer más...