y llegó la hora del ADIOS...

Bueno chic@s, esto ha llegado a su fin!!!!

Tengo que decir que este grupo en general me ha dado una grata sorpresa. Hemos pasado de tener que definir conceptos muy básicos de internet y del múndo informático (tales como diferenciar una página web, del navegador, comprender el funcionamiento electrónico) a manejar programas tan complejos como son Adobe Photoshop y Dreamweaver y no solo eso sino que HABÉIS COMPLETADO VUESTRA PROPIA PÁGINA WEB DESDE CERO!!

Estoy muy orgullosa de vosotros y espero que sigáis practicando y ampliando los conocimientos que habéis adquirido estos días.

A la derecha de este blog, voy adjuntar un vínculo a vuestras páginas, para que las tengáis todas a mano siempre que queráis visitarlas.

ENHORABUENA!!!

Subir la pagina terminada al Servidor

Visto el "éxito" que tuvimos con el alojamiento gratuito de Tripod Lycos (¿hubo alguien a quien no expulsara???) vamos a probar suerte con FORTUNECITY, http://www.fortunecity.com/

Es uno de los portales que lleva más años ofreciendo este servicio y, hasta el momento, nunca antes me había dado ningún problema.

La única pega es que está en inglés , así que tendremos que esforzarnos un pelín más. De cualquier manera os voy poniendo el paso a paso en fotos , para que os resulte más sencillo.

1. Rellenar los datos solicitados en el apartado FREE WEB SPACE/ HOSTING



2. Confirmar la cuenta de correo electrónico.












3. Activar la cuenta en Fortunecity

4. APUNTATE BIEN, los datos de la cuenta.




5. Accede al Gestor de la página o servicio de FTP

Como podeis observar en la imágen, desde el gestor de página, tenemos acceso a la url de nuestra web, también nos ha generado un blog y lo más importante: FILE MANAGER o nuestro servicio de FTP.




6. Si accedéis a la url propuesta, podéis observar que por defecto FORTUNECITY nos ha creado una página de index automática, en la que dice que nuestra página está en construcción. Antes de empezar a subir nuestro contenido, deberemos eliminar esa página, para evitar posibles errores (como sabéis no puede haber dos páginas "index" en el mismo sitio)



7. Una vez dentro del gestor de contenido, tendremos que eliminar la página index que viene por defecto e ir subiendo cada uno de los archivos que conforman nuestra página (archivos .html, .css, imágenes , etc) ES MUY IMPORTANTE QUE TODO SIGA LA MISMA JERARQUÍA, es decir, que si las imágenes están dentro de una carpeta que se llama imagenes_finales, tendréis que crear en el SERVIDOR una carpeta que se llame imagenes_finales (exactamente igual) e introducir en ella las fotos que estuvieran en su carpeta homónima de vuestro site LOCAL.

8. Fijaos que para subir las fotos dentro de la carpeta imagenes_finales, he tenido que entrar dentro de ese directorio (despues de haberlo creado , claro!), el resto de botones marcados son los que nos van a ayudar en esta última tarea.

9. Y VOILÁ!!! Ya tendríamos nuestra página web, en internet, accesible las 24 horas del día y desde cualquier ordenador del mundo!!!

Maquetar en Dreamweaver

Una vez realizado el "despiece" de la maqueta en photoshop, ahora toca la "reconstrucción" en Dreamweaver.

Maquetarlo todo colocandolo en su ubicación exacta, mediante la utilización de tablas y tablas anidadas. Insertar las imágenes, color de fondo, botones o imágenes de sustitución, así como vínculos que faciliten la navegación por vuestro sitio.

Todo esto ya lo habéis hecho así que, en principio, no deberíais tener ningún problema.

AL ATAQUE!!

Recopilar todas las imágenes y creación del sitio

Una vez ya tengáis TODAS las imágenes para CADA UNA de vuestras páginas en su FORMATO CORRESPONDIENTE, entonces si, ahora pasaríamos a trabajar con Dreamweaver .

Como ya hicimos en su día, comenzaríamos por crear el SITIO y el ÁRBOL DE PÁGINAS, continuaríamos por la maqueta, el sistema de navegación y la insercción de los contenidos de cada una de las páginas... bueno en esto ya sois unos expertos así que no me enrollo más....

Crear maqueta y personalizar las imágenes

Una vez hayais conseguido diseñar una maqueta que os guste, tenéis que guardar cada una de las imágenes y gráficos que lo componen , por separado y con el tamaño y resolución final.

Todo eso, para cada una de las páginas... asi que... ya sabéis !!! todavía os queda mucho trabajo!!!

Diseñar el aspecto gráfico de vuestro proyecto personal

Uno de los apartados más complicados en el diseño web, es conseguir la dosis adecuada de diseño y de usabilidad.

Para ello hay que calcular con mucho cuidado la disposición de los elementos dentro de nuestro espacio de página (textos, navegación, imágenes y demás elementos gráficos).

Hoy dedicaremos la clase al diseño de la maqueta de vuestros propios proyectos personales, dejamos por un momento Dreamweaver para darle caña al Photoshop.

Ya hemos terminado NUESTRA PRIMERA PÁGINA WEB

Una vez que hemos terminado nuestro formulario y lo hemos configurado para el envío de datos...

ALEHOP!!!

YA TENEMOS NUESTRA PRIMERA PÁGINA WEB!!!!

Ahora el siguiente paso , es realizar todos los pasos de "preproducción" para poder comenzar con nuestro proyecto personal. Es decir:

1. Necesitamos haber realizado el informe teórico previo (objetivos, público, análisis de competencia...recordais ¿no?).


2. Después realizad el listado de páginas que contendrá vuestro sitio y la información que contendrá cada una de ellas.


3. Ahora sería el turno de diseñar el aspecto gráfico, colocar en el espacio de pantalla cada uno de los elementos (fotos , texto, botones...etc).


4. Más tarde, cuando todas estas cuestiones estén ya completadas, modificaremos nuestras imágenes en photoshop para que coincidan con nuestro diseño.


5. Entonces si! ya podremos comenzar a trabajar en nuestro sitio web con DREAMWEAVER!!

Aaaaaa curraaaaaar!!

Continuación del proyecto común

El pasado viernes ya confeccionamos el árbol de páginas, completamos la maqueta de nuestro site y creamos el sistema de navegación.

Ahora continuaremos con el resto de pasos:

1. Hoja de estilos
2. Insercción de contenidos
3. Prueba del sitio.

Ánimo!

Y por fin.... DREAMWEAVER!!!

Hoy por fin!, nos pondremos manos a la obra y comenzaremos a utilizar Dreamweaver.

Etapas de desarrollo :

1. El árbol de páginas.
2. La maqueta de las páginas.
3. El sistema de navegación.
4. Hoja de estilo.
5. Insercción del contenido.
6. Prueba del sitio.

AAAAAAAAAllll ataaaaaque!!

Repaso Imagen digital

Responde a las siguientes preguntas.

1. ¿cómo se denomina el proceso por el cual convertimos una imagen analógica en una digital?

2. ¿ De qué dos tipos de imágenes se componen principalemente los gráficos digitales?

3. ¿Cuál es la característica de las imágenes de mapa de bits?

4. ¿ Cuál es la cualidad principal de las imágenes vectoriales?

5. ¿Qué profundidad de bits tiene una imagen que sólo me permita tener un tono más el color de fondo?

6. Si tanto el modo de color medios tonos, como el modo de color indexado tiene una profundidad de color de 8 bits, ¿en que se diferencian?.

7. Si en la codificación de color RGB, tengo : R=255 , G=255 y B= 0, ¿que color tengo?

8. En la codificación de color CMYK el 0 equivale a: ......

9. ¿photoshop es un programa de retoque de gráficos vectoriales o de mapa de bits?

10.¿qué es la resolución? ¿explica como influye la resolución en la representación de las imagenes en pantalla.


¿Cuál es la respuesta correcta?

1. ¿Por qué el formato TIFF es el más apropiado para ser impreso?
...Porque es el único que se puede imprimir.
...Porque contiene información adicional para ser impreso.
...El formato TIFF nunca se utiliza para ser impreso.

2. ¿Para qué tipo de imágenes será ideal el JPEG?
...Las imágenes de arte de línea y fotográficas,
...Sólo las imágenes pequeñas de arte de línea
...La fotográficas o que presenten degradados.


3. El formato GIF se caracteriza por...
...ser un formato obsoleto.
...ser utilizado en imágenes en blanco y negro.
...comprimir una imagen de colores sólidos sin perder calidad.

4. ¿En qué formatos podemos encontrar la imagen dividida en capas?
En el PSD y el TIFF
...Sólo en PSD
...En el PNG y el PSD
...En el GIF


5. ¿Qué formato gráfico utilizaríamos para publicar documentos en Internet?
...BMP
...GIF o JPEG
...EPS
...PDF


6. Si queremos crear una aplicación interactiva para web, y deseamos utilizar imágenes vectoriales, ¿qué formato utilizaríamos?
...SVG
...SWF
...Cualquiera de los anteriores.

La imagen digital

Proceso de digitalización.
-Periféricos de entrada.
-Periféricos de salida.

Las imágenes de mapa de bits.



-modos de color.
Resolución de la imagen
-Resolución de pantalla.

Las imágenes vectoriales.
-objetos bézier.
-la resolución en las imagenes vectoriales.

Los formatos gráficos de las imágenes digitales
-Formatos de imágenes de mapas de bits
-Formatos de imágenes vectoriales

Presentación del Proyecto común e Interface de Dreamweaver

Presentación del Proyecto Común: Residencia canina.

Realizad los informes previos a la realización del diseño del sitio web, siguiendo la cronografía que vimos ayer, y publicar las conclusiones en una nueva entrada de vuestro blog.

Es decir:

Elegir dominio, comprobar disponibilidad, "comprar/comparar precios de dominio...

Elegir alojamiento (Tripod), diseñar el sitio...

Especificar los objetivos del sitio, definir el público, enumerar toda la información necesaria para mostrar, informe de la competencia

Organizar jerarquía de páginas, diseñar el árbol del sitio...

Definir la estructura/formato visual...

Interface Gráfica de Dreamweaver Mx2004

1. Los menús de Dreamweaver pueden mostrarse u ocultarse desde el menú Ventana.



2. Desde Dreamweaver se puede trabajar con el código fuente.



3. El código fuente sólo puede modificarse en Dreamweaver.



4. Identifica en la imagen las herramientas: "mostrar vista de código", "menú emergente de tamaño de página" y "ver opciones".



5. ¿Cómo podemos insertar una regla horizontal en Dreamweaver? (una regla horizontal es un elemento de html para separar textos o párrafos en una página web).



6. ¿Cuáles serían los paseos para mostrár los números de linea en la vista de código y aplicar colores a la sintáxis?



7. ¿Cómo se pueden mostrar las reglas y la cuadrícula?

Introducción al Diseño Web

• Definición.

Cronología.

El kit de creación.

Participantes.

• Paso 1: Obtener un dominio.

Tipos de sufijo TLD genéricos y TLD geográficos.

Los dominios ".es"

La base Whois

• Paso 2: Alojamiento Web

Alojamiento Interno

Alojamiento Externo

1. Gratuito


2. De pago: Servidor Compartido, Servidor dedicado.

• Paso 3: Diseñar/ Concebir el sitio.

Definir: Objetivo, Target o público, Competencia.

Diseñar el árbol de páginas.

Diseñar la navegación.

Mapa del sitio.

Los lenguajes: html, JavaScript, Flash, xml, php...

Las herramientas

Los Objetos técnicos y temáticos.

• Paso 4: Publicar el sitio


• Paso 5: Darlo a conocer.

Ejercicios:

Señala cuál de estas afirmaciones es correcta:

1. El codigo fuente de una página está constituido fundamentalmente por lenguaje Java Script.


2. Las páginas web, no pueden tener acceso a bases de datos.


3. Todos los sitios web necesitan una página de inicio.


4. Html significa "hipermarcas de texto matemáticas y de lenguaje".


5. Las animaciones para internet se suelen hacer en Flash


6. Un enlace es un objeto de una página web que abre un archivo de texto.


7. Todos los hipervínculos de texto abren las páginas en la misma ventana del navegador.


8. Las imágenes también pueden ser hipervínculos.


9. Las páginas web suelen tener extensión htm o html.


10. Desde el navegador no puede verse el código fuente.


11. Las páginas web se llaman index.


12. Los sitios web pueden ser remotos o locales según si los tenemos instalados en un servidor o en nuestro pc.


13. En un sitio web sólo pueden incluir imágenes pero no animaciones.


14. Sólo podemos hacer enlaces a páginas contenidas en el mismo sitio web.

Test Recordatorio

Ha pasado bastante tiempo desde las primeras tres clases. Además muchos de vosotros no pudisteis asistir a alguna o a la totalidad de ellas.

Por este motivo, me gustaría emplear gran parte del tiempo de hoy, para repasar los contenidos impartidos en esos días, de manera que refuerce los conocimientos de aquellos que sí asististeis y que los compañeros que no pudieron asistir tengan acceso a ellos. Así una vez metidos en materia, podamos todos, avanzar en un nivel lo más igualado posible

Para empezar, y para aquellos que ya creásteis vuestros blogs, copiad y pegar las preguntas del siguiente test y respondedlo en una nueva entrada.

Aquellos que no lo tengáis es buen momento para obtener uno e intentar poneros al día respondiendo también a las preguntas del test. No os preocupéis si no conocéis todas las respuestas ya que hoy nos encargaremos de resolver todas vuestras dudas al respecto.


1. Enumera los diferentes usos de internet.

2. ¿Cuál es el papel del Navegador en internet?

3. ¿Cuántos navegadores conoces? Explica alguna de sus características.

4.¿Cuál es el lenguaje básico de internet? ¿en qué se basa?

5.¿Qué es un vínculo? ¿cómo lo podemos identificar?

6-Herramientas del navegador: Utiliza la siguiente imagen para nombrar alguna de las herramientas del navegador, ¿para que sirven?

7. Herramientas del navegador: ¿cómo podemos volver a una página que ya hemos consultado?

8. Herramientas del navegador: ¿cómo podemos conservar las direcciones que nos resulten de interés?

9.Herramientas del navegador: Describe las diferentes opciones que tenemos para guardar una página web en nuestro ordenador.

10.Herramientas del navegador. describe las diferentes opciones que tenemos para imprimir una página web. ¿qué conseguimos con cada una de ellas?

11.Herramientas de búsqueda web: ¿qué tipos de buscadores web conoces?Explica en que se basa cada uno y nombra a alguno de ellos y explican en que basan la búsqueda.

12. ¿qué ocurre si , al realizar una búsqueda en google pulso el botón , "voy a tener suerte"?

13. En resumen, si queremos visitar una página web en concreto, ¿dónde debemos y que téxto debemos introducir si ya conocemos la dirección ? ¿Y si no la conocemos?

14. Explica como podemos ajustar los resultados de una búsqueda en Lycos.

15. Explica el proceso que conlleva el envío de un email. (esquema).

16. ¿Cómo reconocemos una dirección de correo electrónico?

17. ¿Qué tipos de correos electrónicos conoces?¿de que tipo es el que utilizas?

18. ¿Qué datos son indispensables para configurar una cuenta de correo electrónico en un programa CLIENTE, como es por ejemplo, outlook?.

19. Describe paso a paso el proceso de configuración de tu cuenta en outlook.

20. ¿Qué es una lista de distribución?


Las respuestas a las siguientes preguntas (21-27) , las veremos hoy, de cualquier manera, intenta responder con lo que sepas.

21. ¿Qué es un foro?

22. ¿Qué componentes son comunes a todos los foros?

23. ¿Qué podemos hacer en un foro?.

24. ¿Qué es un blog?

25. ¿Qué es un chat?

26. Comenta las características de la mensajería instantánea. ¿Qué aplicaciones de este tipo conoces?

27. ¿es lo mismo una videocámara y una webcam?

Descarga y compresión de ficheros

Los protocolos de descarga de ficheros (FTP).


Los pluggins para poder visualizar diferentes tipos de archivos.

1. Acrobat reader.


2. Flash y Shockwave


3. Reproductores de video y audio.

La música en internet.

Controlar la navegación (antivirus, control parental,de publicidad...).

Descarga en internet: Freeware, Shareware y demo...

Utilidades de descarga.

EL peer to peer.

Compresión de ficheros.

1. ¿por qué comprimir ficheros?
2. formatos.
   
3. comprimir con winrar.

Las salas de discusión de Internet

Los Foros:

1. definición


2. comprender las direcciones de los foros.


3. buscar informacion en un foro.

1. Participar

Los blogs.

Aunque este apartado, supongo que lo tenéis totalmente dominado, ya que es una de las herramientas principales de este curso, nunca está de mas añadir más información sobre el tema.

Los chats y las webcams.

Conocer la herramienta de correo electrónico

El correo electrónico.

1. Conocer las aplicaciones de gestión de correo (outlook) y el correo web (webmail:hotmail/gmail..etc).

1. Administrar los mensajes, desde una aplicación de correo electrónico (outlook) y desde webmail (hotmail/gmail).
   


2. Leer correos, redactar correos, responder (a remitente, a
   todos, copia, copia oculta..)..


3. Crear tu libreta de direcciones o contactos.


4. Insertar archivos adjuntos en vuestros correos electrónicos.


5. Agregar una cuenta de correo en outlook.

Las listas de distribución y newsletters.

Entrando en materia.

Observando vuestras respuestas a los primeros ejercicios, veo que antes de entrar en materia, debemos incidir sobre ciertos conceptos que tenéis algo confusos, como la diferencia entre email y páginas web, entre lo que es un navegador y un buscador web.

• Discutamos sobre los diferentes usos de internet.
• Vamos a aclarar la utilidad del navegador .
• Hablemos sobre los vínculos y los hipertextos, hiperenlaces , hipermedia...
• Resolveremos el ejercicio de las herramientas fundamentales de los navegadores.
• Resolveremos las consultas sobre el guardado e impresion de paginas web.
• Vamos a ver los diferentes navegadores y sus características principales.
• Vamos a profundizar, ahora si, en los buscadores, tipos y herramientas.

Tareas.

1. Corrige tus errores y modificalos en la entrada. (Editar entradas).

2. Ahora, tras la teoría, copia los apuntes de hoy en una nueva entrada, incluye vínculos a páginas relacionadas.

3. Describe, las funcionalidades de los siguientes apartados del buscador google.


4. Realiza una búsqueda avanzada en Lycos. Describe cada uno de los apartados de la búsqueda. ¿para qué se utilizan?.

Inicio

Para empezar este módulo, discutiremos sobre los diferentes usos de internet.

También profundizaremos sobre el papel del navegador y sus herramientas fundamentales. Hablaremos sobre la navegación, los vínculos, el hipertexto y su influencia en la documentación.

Para ello, espero que la clase se convierta en una charla dinámica donde intercambiemos opiniones que luego publicareis en vuestros propios blogs.

Entonces el primer paso será, que os creeis una cuenta de correo electrónico (si no la tenéis ya) y deis de alta vuestro diario electrónico de clase. Es allí donde iremos colocando los apuntes, ejercicios etc, de cada clase.

Tareas

1. Crea tu propio blog, nombralo apropiadamente, configuralo a tu gusto, incluye en él , tu perfil, descripción del blog. Añade una caja de vínculos para mostrar el blog de la clase y el del resto de tus compañeros. También puedes añadir imágenes, etc.

2. Crea la primera entrada del blog. Incluye los apuntes de la clase de hoy y el resto de ejercicios que os propongo. NO OLVIDES incluir vínculos a páginas externas para complementar la información, (de texto , imágenes , videos... etc).

3. Copia y pega la siguiente imagen en tu entrada, añade además, la descripción de cada uno de los apartados numerados en la misma; ¿a qué elementos del navegador corresponde cada uno de ellos?¿Cual es su función?

4. Tests sobre el uso del navegador.
Copia y pega las preguntas del siguiente test y respóndelas en tu blog, sería muy interesante que adjuntárais capturas de pantalla para aclarar las respuestas.

a/ ¿Cómo identificamos los vínculos que hay dentro de una página web?

b/ ¿Cómo podemos volver a una página que ya hemos consultado? describe los diferentes métodos.

c/ ¿Cómo podemos conservar las direcciónes de interés? Describe el proceso paso a paso.

d/ ¿Cómo podemos conservar una copia del texto de una página web? Describe lo que obtenemos con las diferentes opciones de guardar como (pagina web completa, sólo html...etc).

e/ Imprimir una página web, describe las diferentes maneras de imprimir una web que tenga marcos y describe cómo hacer que se incluya una lista de todos los vínculos que aparecen en la página que vayamos a imprimir.

f/ ¿Cuántos navegadores conoces? nombralos , vinculalos a sus páginas de descarga y comenta un poco sus propiedades.