Seguimos con la web empresarial

Repetiremos una vez más la estructura de los frames.
Tras ello, haremos uno botones y definiremos tanto una página de fotoportada, como una de presentación de la empresa, otra de catálogo y otra más de contacto.
Estamos teniendo bastantes problemas con el servidor de iespana, motivados por errores contantes de conexión que tienen lugar tanto desde el aula como desde los domicilios particulares al intentar ejecutar el FTP tant en la versión WEB como con el programa que utilizamos para ello.
De momento, el alumnado dispone de una copia de la web del profesor en usuarios.lycos.es/profesorcarlos2009
En la base de las páginas web veréis una imagen tal que así:
Si pulsáis sobre ella tendréis acceso al código fuente "limpio" del documento.
Y, para relajarse un poco, algunas cosillas de Photoshop:
Cambiar color de ojos:
1.- Abrir imagen
2.- Nueva capa
3.- Luz suave
4.- Elegir color y pintar
5.- Imagen + Ajustar + Tono saturación
6.- Juguetear
Cambiar fondos
1.- Abrir imagen 1
2.- Duplicar capa + MASCARA RAPIDA
3.- Pincel y pintar contorno
4.- Bote pintura para el interior del objeto
5.- MASCARA RAPIDA (Aparece contorno seleccionado)
6.- Darle a SUPRIMIR en el Teclado. Ocultar capa ORIGINAL
7.- Abrir IMAGEN 2
8.- Arrastras CAPA COPIA de IMAGEN 1 a IMAGEN 2

De frames

Repaso de las cuestiones del día anterior.Frames.
Práctica frames, botones y java.
Quitar ojos rojos con Photoshop CS2.
Impefecciones piel. Tampón de clonar (Alt)
Cambio color pelo:
MODO A
a1.- Abrir imagen
a2.- Nueva capa; pintar con pincel
a3.- Probar TONO
a4.- Probar LUZ SUAVE; jugar con OPACIDAD
MODO B
b1.- Abrir imagen
b2.- Modo MASCARA RAPIDA
b3.- Pintamos con el PINCEL
b4.- VARITA MAGICA + Click en pelo
b5.- NUEVA CAPA DE RELLENO + COLOR SOLIDO + LUZ SUAVE

De botones y scripts

¡Ultimo día hoy para tener completa la web personal!Recopilemos:
index.htm.- Inicio web con enlace a webdesign.htm y pagina2.htm. Debe comprender alguna foto propia
webdesign.htm.- Hoja publicitaria de la supuesta empresa que diseña nuestra web.Debe contener un ejercicio MARQUEE
pagina2.htm.- Debe contener enlaces a 1.htm, 2.htm, 3.htm y 4.htm mediante imagenes insertas en una TABLA
1.htm.- Currículum Vitae inserto en una TABLA
2.htm.- Mi trabajo. Debe contener una imagen de un negocio, empresa o similar que nos servirá como inicio de una web empresarial
3.htm.- Mi equipo. Ejercicio de inserción de un tema sonoro (himno futbolístico) como fondo musical a un fondo gráfico diseñado por el alumno y una foto de la plantilla del equipo electo.
4.htm Mi música. Ejercicio de inserción de un videoclip musical.

MUY IMPORTANTE: Debe formarse una telaraña de enlaces entre pagina2.htm (que debe enlazar directamente con 1,2,3 y 4.htm y éstas, que deben enlazar con pagina2.htm y con la anterior y posterior numéricamente)
Recuerdo que también debemos realizar otra documento web (amigos.htm) en el que debemos mapear la imágen del grupo de cursillistas de modo tal que si clickamos en cualquier cabeza, veamos la foto de la persona señalada). Ya lo enlazaremos posteriormente con el tronco de la web.

Y haremos algo de diseño de botones-web mediante Photoshop y mediante la utilización del programa Free Web Buttons. Y probaremos algunos efectos java scripts.

Enlaces recomendados:
1.- Botones para descargar
2.- Más botones para descargar
3.- Fondos para páginas web
4.- Más fondos para páginas web
5.- Algunos Javascripts

Trabajo para hoy

Hay que ir terminando la primera web, la de contenido más personal. Finalizar 2.htm, 3.htm y 4.htm. Tras ello embellecer la web con los motivos pertinentes (a gusto del diseñador, o sea que ...)
Y, si resta tiempo, hay que hacer una web con el mapeado del grupo de modo que cada vez que se haga click en la cabeza de alguno de ellos, nos salude. (O así...)
¡Ah! , y subir los archivos, que para algo hemos aprendido FTP.

Fotos de cursillistas

Al objeto de realizar las prácticas pertinentes, se han realizado una serie de fotos a los integrantes del cursillo. Por supuesto, todas ellas con la autorización verbal correspondiente. Tras la finalización del cursillo, esta entrada se suprimirá y las fotos dejarán de estar accesibles.
Para verlas, pulsa AQUÍ

Cruce del Ecuador + Marca de agua en Photoshop

Hoy sobrepasamos la mitad del cursillo.
Lo cierto es que hemos avanzado mucho. Los "novatos totales" se ven, aún con la inseguridad propia de los iniciados, con unos conocimientos infinitamente superiores a los de hace sólo tres semanas.
Lo celebraremos conociendo el programa FileZilla FTP Client, para hacer FTP sin precisar del FTP Web del servidor que aloja nuestros archivos.
Continuaremos con elaboración de diversos fondos y finalización de la página 1.htm acerca del C.V. en la web.
Y haremos fotos para su posterior utilización.
Y que no se me olvide: (APUNTES (IV) Marcas de agua con Photoshop, paso a paso
Modo 1.-
1) Abre la foto sobre la que quieras aplicar la marca de agua
2) Selecciona la herramienta texto, fija el color en blanco, y escribe lo que quieras que contenga la marca de agua.
3) Ajusta la posición y el tamaño del texto para que quede centrado en la fotografía.
4) Baja la opacidad de la capa de texto recién creada de forma que se aprecie pero moleste lo menos posible a la hora de visualizar la foto.
Y listo: ya tienes tu marca de agua creada.
Modo 2.-
1) Abre la foto sobre la que quieras aplicar la marca de agua
2) Selecciona la herramienta texto, fija el color en H:0,S:0,V:50, y escribe lo que quieras que contenga la marca de agua.
3.- En la ventanita de CAPA, cambia NORMAL por LUZ INTENSA (desaparece el texto)
4.- Vamos a CAPA - ESTILO DE CAPA - BISEL y RELIEVE
5.- Ponemos la profundidad al 75%
6.- Ajusta la posición y el tamaño del texto para que quede centrado en la fotografía.
Y listo: ya tienes tu marca de agua creada.

Programita para el lunes

Comenzaremos la página web de evaluación donde debemos ir plasmando todos los contenidos, hasta ahora no sujetos a una misma directriz de página web.
Para ello, terminaremos de adquirir un espacio para cada alumno y seguiremos las primeras plantillas.Aprovechando la coyuntura, aprenderemos a redimensionar las imagenes y, para ello, además del omnipresente Photoshop, utilizaremos el programa Easy Thumbnails.
También crearemos un primer fondo personalizado.
Práctica de estructuras, marquee, links varios y tablas...
Y el primer FTP

Algunos apuntes (III). De formularios

Todo formulario comienza con < FORM> y termina en </FORM>
Los atributos para la etiqueta inicial son:
*ACTION.- El valor de este parámetro es la URL del programa o guión en el Servidor Web utilizado para procesar la información recolectada.
*METHOD.- Puede asumir el valor GET o el valor POST, y definen la manera en la cual los datos son transferidos al servidor.
*ENCTYPE.- Este atributo está reservado para que la información viaje en forma encriptada a través de Internet

La instrucción INPUT es la siguiente a considerar. Admite estos atributos:
1.- TYPE="...", que, a su vez, puede ser ...
... TEXT (texto)
... RADIO (Botón circular)
... CHECKBOX (Cuadrado)
2.- NAME="..." Nombre del campo
3.- VALUE="..." Texto que se verá dentro del campo

La etiqueta <SELECT> </SELECT> da lugar a una lista desplegable desde donde debe escogerse una opción. Entre ambas se escribe <OPTION> </OPTION> (una vez por cada opción de la lista desplegable), y entre OPTION y /OPTION ,el texto.

La etiqueta <TEXTAREA> </TEXTAREA> se emplea para definir un área de entrada de texto, generalmente comentarios o mensajes largos. Para definir el tamaño se colocan los atributos COLS="..." y ROWS="..." en la etiqueta de inicio.

Finalmente, los botones para envíar el formulario y para borrarlo responden a estas etiquetas:
a.- ENVÍO <input type="submit" value="ENVÍAR">
b.- BORRAR <input type="reset" value="BORRAR">

Algunos apuntes (II). De tablas

Resúmen de etiquetas básicas:
1.- <table> </table> : Inicio y final de tabla
* * * * Atributos para la etiqueta table:
a.-align="..." Define alineación. Usualmente center, left o right (centrado, izda o dcha.)
b.-border="..." Grosor del las líneas externas e internas de la tabla (indicar número)
2.- <tr> </tr>: Inicio y final de FILA
3.- &lytd>&ly/td>: Inicio y final de COLUMNA dentro de la misma fila. El contenido debe ir entre estas dos etiquetas siempre.

PLANTILLAS:
** Una fila, tres columnas
<table border="0" align="center">
<tr>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
</tr>
</table>

** Una fila, cuatro columnas
<table border="0" align="center">
<tr>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
</tr>
</table>

** Dos filas, tres columnas
<table border="0" align="center">
<tr>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
</tr>
<tr>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
</tr>
</table>

** Tres filas, tres columnas
<table border="0" align="center">
<tr>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
</tr>
<tr>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
</tr>
<tr>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
<td>Aquí el contenido </td>
</tr>
</table>

Algunos apuntes (I) De Mapeado de imágenes

HTML - Imágenes activas o Image Maps
Las imágenes activas (image maps, denominadas mapas o imágenes ‘clickables’, son gráficos en los que se ha definido una asociación entre zonas de la imagen y URLs, de forma que cuando se pulsa sobre una de estas zonas se activa la URL correspondiente.La imagen que sirve de base al mapa puede tener cualquier formato, pero la mejor opción es GIF, ya que es uno de los más soportados.
Para crear un mapa de este tipo, se añade a la etiqueta <img src=""> el atributo USEMAP="#nombre de mapa.
La estiqueta Crea un mapa de descripción de zonas activas en una imagen.
Atributos:
1.- NAME= Nombre que se asigna al mapa, con el cual una imagen podrá hacerlo referencia.
2.- SHAPE= Forma del área activa a definir. Puede ser:
* * * RECT: se incluyen las coordenadas de las esquinas superior izda e inferior dha.
* * * CIRCLE: se crea con las coordenadas del centro y la longitud del radio.
* * * POLIGON: Se deben especificar las coordenadas de los vértices consecutivos.
3.- COORDS="…" Coordenadas necesarias para la forma elegida; es una secuencia de números (medidas en píxel separados por comas. El borde superior izquierdo se corresponde a 0,0.
4.- HREF="…" URL que activará esta zona.

Y el último de la semana ...

Terminamos formularios. Etiquetas malditas: MARQUEE y BLINK
Conseguimos un espacio web en IESPANA. Iniciamos la web de evaluación. Primer FTP.
Listamos las webs:
0.- La página web de Carlos
1.-La página web de Ana
2.-La página web de Aroa
3.-La página web de Fernando
4.-La página web de Javier
5.-La página web de José Ángel
6.-La página web de Andrei
7.-La página web de Comentarios de Luis
8.-La página web de Katy Katia
9.-La página web de Lucia
10.-La página web de Pilar
11.-La página web de Joxe
12.-La página web de Irram
13.-La página web de Dan
14.-La página web de Pepe SLG
15.-La página web de Oscar
16.-La página web de Mishba
AVISO: Los datos (direcciones, teléfonos, etc...) y fotos en las webs no son necesariamente reales. Se recomienda al alumnado proteja su privacidad.

Un paso más...

Al final el mapeado de imágenes nos complicó la tarde ayer.¡Menos mal que hicimos un buen repaso de los enlaces!Hoy continuaremos con la inserción de tablas y formularios.
Por otra parte, recuerdo al alumnado que en la evaluación a la que será sometido entrarán:
1.- Elaboración del blog (al menos 10 entradas)
2.- Elaboración Web Evaluación (colgada en la red)
3.- Prueba de conocimientos

Seguimos adelante

Este martes comenzamos con un pequeño repaso de los links vistos. Veremos como se hace una llamada a otro tipo de archivos (doc, jpg ...)
Y también bajaremos, instalaremos y utilizaremos el programa CuteMap v. 1.1 con el cual conoceremos y edtaremos TAGS de mapeo, para hacer una imagen polienlace.
Acabaremos la clase de hoy con la inserción de tablas.
¡¡No está mal para un día post-puente!!

Y hoy, jueves, linkamos

Que si colocar una imagen en la web, que si alineaciones diversas, que si nuevas etiquetas...
Y continuando nuestro recorrido por las etiquetas y HTMLlandia, este jueves aprenderemos cosas tales como los hiperenlaces, bien sea mediante texto o mediante imagen.En suma, tres horas a tope ... Y comienzan las fiestas del Pilar.
¡¡Hasta el martes!!

Martes de TAGS

Este post está escrito (así me sirve como guión) horas antes de la sesión de hoy.
Se terminaron los conceptos básicos del mundo internauta (aunque seguro que alguno que otro que no hemos tratado aflorará) y empezamos con el lenguaje HTML.
Aprenderemos el doble juego Editor de Notas-Internet Explorer y utilizaremos los primeros TAGS.
<html> </html>
<head></head>
<body></body>
<title></title>
<FONT></FONT> (Con sus extensiones FACE (tipo de letra), SIZE (tamaño) y COLOR (¿que definirá esta última extensión?)
<body bgcolor="...."> y su similar <body background="....">
La etiquetas para negrita, itálica, subrayado y tachado, etc ...

Lunes de álbumes fotográficos

Este lunes, día 5 de Octubre, hemos instalado el programa Hofmann y, con las imágenes personales que cada cual ha traído de casa, hemos elaborado un diseño utilizando formatos de tapas, retoque gráfico del mismo programa, diversas plantillas, fondos y máscaras.
Ha sido interesante y divertido. Posteriormente hemos diseñado un minicatálogo usando las propiedades del citado programa.

Tras ello hemos conocido diferentes redes sociales (Facebook, Myspace,XING...) y hemos hablado de la mensajería instantánea. También hemos charlado de los peligros existentes latentes: troyanos, información sensible fuera de control y otros aspectos de seguridad que han constituído el final de la clase.
También hemos aprovechado para enumerar los diferentes blogs en proceso de realización.

Con lo visto hoy, hemos terminado el primer bloque que versaba sobre conceptos básicos de internet. 12 horas para hablar y probar un poco de todo como puede apreciarse por el temario incluído.

Semana 1. Cosas que hemos visto.

Esta ha sido una semana intensa. De momento, todos los cursillistas son ya bloggers y espero, en breve, poder disponer de sus direcciones de blog en el márgen de este escrito. Pero no es lo único que hemos visto; aquí tenéis la relación pormenorizada de nuestros avances.

Lunes, 28/09/09
Conceptos básicos Internet: ¿Qué es la WWW?
Creación carpeta propia en D:/ para prácticas
Navegadores I.Explorer, Mozilla Firefox, Google Chrome …
Configuración I.E. Gestión favoritos. Página Inicio. Borrado elementos (historial, cookies …)
Buscadores,con especial atención a Google.
Wikipedia y RAE
Utilización programa Vdowloader. Ejemplos prácticos.
Bajamos vídeos. Youtube.

Martes, 29/09/09
Adquisición e-mail para prácticas (yahoo)
Mailings. Envío mensajes. Adjuntar mensajes. Gestión Contactos.
El terrorismo cibernético: Los mail-bombers
Creación blog. Utilización de blogspot.com
Configuración y personalización
Realización comentarios.
Comenzamos a linkar vídeos (a href y embed)
Destripamos una página web (Acceso al Código Fuente)

Jueves, 01/10/09
Repasamos el enlace de vídeos.
Lo ampliamos con extensiones de etiqueta. (TARGET)
Utilizamos imagen como vía de enlace.(IMG SRC)
P2P . Introducción histórica (Napster). Consideraciones legales.
Ares. Bajada e instalación del programa. Configuración.
Descarga archivos mp3.La propiedad intelecutal en internet. El anonimato imposible, o casi.