Issuu on Google+

Curso de Diseño Web Nivel Básico


Curso de Diseño Web - Nivel Básico CONTENIDOS UNIDAD 1: Objetivos del Curso. Alcances laborales. Introducción al Diseño Web y los programas a utilizar. Características y funciones del FrontPage. Interfaz gráfica del FrontPage 2003. Planificación del sitio web. Tipos de sitios. Creación de la estructura de una web. Lenguaje HTML. Asistente para crear sitio web. Configuración del sitio web. Bibliografía: Carpeta del Curso. Apunte_FrontPage 1: “Introducción a FrontPage y a la configuración de un sitio” (unidades 1 y 2).

UNIDAD 2: Hipervínculos, definición y tipologías. Introducir hipervínculos de texto. Hipervínculos dentro de una imagen. Zonas activas. Destino del vínculo. Marcadores. Quitar hipervínculos. Las tablas en FrontPage, definición y funciones. Insertar una tabla. Ingreso de datos. Modificar valores de alto y ancho. Operaciones con filas y columnas. Formato de celdas y tablas. Agregar imágenes de fondo. Bibliografía: Apunte_FrontPage 3: Hipervínculos y Tablas (unidades 6 y 7).

UNIDAD 3: Conceptos y terminología del CorelDraw. Espacio de trabajo de CorelDraw X3. Barra de herramientas estándar. La caja de herramientas. La barra de propiedades y la barra de estado. Ventanas acoplables. Terminología del Corel Photo-Paint. Espacio de trabajo de Corel Photo-Paint X3. Barra y caja de herramientas. Barra de propiedades y barra de estado. Ventanas acoplables. Bibliografía: Apunte_CorelDraw. Apunte_CorelPP.

UNIDAD 4: Concepto de imagen digital. El pixel. Profundidad de color. Tamaño de archivo y resolución. Formatos de imagen. Cámara fotográfica digital. Obtención de imágenes digitales. Insertar y redimensionar imágenes en FrontPage. Imágen fondo de página. Propiedades de imagen. Bibliografía: Apunte_FrontPage 2: “Imágenes” (unidad 5). La imagen digital, disponible en: www.slideshare.net/maixu61/caractersticas-de-laimagen-digital.

Contenidos

1


Curso de Diseño Web - Nivel Básico UNIDAD 5: Conceptos básicos de Flash. Entorno de trabajo de Flash 4. Creación y configuración de películas. Previsualización y prueba. Paleta de herramientas. Línea de tiempo. Uso de la biblioteca. Herramientas de visualización. Alineación y agrupación de objetos. Desplazamiento del punto de registro. Separación de grupos y objetos. Restablecer transformaciones. Bibliografía: Apunte_Flash 1: “Conceptos básicos de Flash” (capítulo 2) Apunte_Flash 3: “Trabajo con objetos” (capítulo 4)

UNIDAD 6: Crear una animación. Fotogramas clave. Capas. Imágenes fijas. Animación interpolada. Interpolación de movimiento. Publicación de películas Flash. Configuración de la publicación. Insertar archivos Flash en páginas web con Dreamweaver. Bibliografía: Apunte_Flash 2: “Creación de animación” (capítulo 9). Apunte_Flash 4: “Publicación” (capítulo 13). Apunte_Dreamweaver: “Insertar películas Flash”.

UNIDAD 7: Concepto de formulario. Elementos de un formulario. Crear un formulario en FrontPage. Configurar el envío. Insertar elementos. Propiedades del formulario. Cuadro de texto y desplegable. Alta de cuenta en Melodysoft. Servicio gratuito de formularios de envío. Creación de formularios de envío en Melodysoft. Página de envío correcto e incorrecto. Control y organización de formularios recibidos. Bibliografía: Apunte_FrontPage 4: “Formularios”. Apunte_Melodysoft: “Formularios de envío con Melodysoft”.

UNIDAD 8: Crear un dominio propio “.com.ar”. Trámite online en Nic.ar. Mantenimiento de dominios. Cómo elegir un hosting pago. Extensiones de FrontPage. Publicar un sitio web desde FrontPage. Prueba de funcionamiento online. Administración de datos del servidor. Actualización y mantenimiento de sitios web. Bibliografía: Apunte_Dominio-Nic. Recomendaciones para contratar un servicio de hosting. Apunte_FrontPage 5: “Publicar Sitio”.

Contenidos

2


Curso de Diseño Web - Nivel Básico OBJETIVOS DEL CURSO El objetivo del presente curso es realizar una introducción al diseño de páginas web, no así a la programación web que abarcaría temas de una enorme complejidad. Sin embargo, pese a ser una introducción esto no significa que una vez finalizado el curso uno no pueda encontrarle una salida laboral. Es posible en efecto, realizar páginas completamente funcionales con fines comerciales utilizando los contenidos aquí expuestos. El curso se estructura básicamente en ocho módulos teóricos, cada uno complementado con una clase presencial o vía videoconferencia en Skype de una hora y una actividad práctica. La idea de las actividades prácticas es finalmente completar todas las etapas para conformar un sitio web comercial que funcione en un servidor real accesible por internet.

Junto con el curso se proporciona un DVD con los programas que se enseñarán: FrontPage 2003, Corel Graphics Suite X3 (Corel Draw y Corel Photo-Paint), Flash 4 y Dream Weaver 3. Además se incluirán en el DVD recursos para el diseñador web: fuentes tipográficas, galerías de fotos y dibujos, texturas y sonidos para decorar tus páginas web, entre otros elementos útiles. Vale aclarar que el aprendizaje del diseño web no se agota en este ni en otros cursos que se realicen con posterioridad, ya que existen en el mercado infinidad de programas, herramientas, procesos y lenguajes de programación web que se van actualizando constantemente. Por lo tanto, la clave está en mantenerse al tanto de las novedades en la materia para diseñar páginas más eficientes y atractivas para los navegantes.

A modo de conclusión, este curso te permitirá: - Obtener una salida laboral ofreciendo la confección y mantenimiento de páginas web a comercios, empresas, profesionales independientes e instituciones. - Crear tu propia página profesional para promocionar tus servicios como diseñador web u otro emprendimiento en el que te desarrolles laboralmente. - Utilizar el diseño web con fines de esparcimiento, difundiendo tus hobbys o compartiendo actividades de tu interés con otros usuarios de internet. - Sumar conocimientos para poder ampliar tus horizontes a la hora de enfrentarte a una búsqueda laboral. - Acercarte en forma amena y práctica a las nociones del diseño gráfico en general, la comunicación, el marketing y la publicidad.

El proyecto del trabajo final consiste en crear la web comercial de una empresa ficticia proporcionada por el docente, poniendo en práctica todo lo aprendido. Este sitio contendrá una página principal y otras secundarias para presentación de la empresa (Quiénes somos), catálogo de productos, ofertas y contacto (un formulario para consultas de los clientes). Asimismo se diseñarán logos, encabezados, botones, animaciones y banners (publicitarios).

Objetivos del curso

3


Curso de Diseño Web - Nivel Básico BREVE INTRODUCCIÓN AL DISEÑO WEB Y LOS PROGRAMAS Diseñar una página o sitio web requiere una serie de pasos fundamentales para que cumpla sus objetivos con éxito, a continuación veremos la importancia que posee cada uno de ellos en particular. Primero se debe pensar el propósito de la web, una respuesta a la pregunta ¿Para qué se va a utilizar la página? No es lo mismo un sitio de ventas por internet, que la web institucional de una fundación o una página de la colección particular de Arte de determinada persona. Es importante saberlo porque nos va a orientar a la hora de elaborar la idea de la apariencia visual de nuestra página web o la del cliente. Luego hay que pensar en el diseño que utilizaremos, intentando contestar a la pregunta ¿Cómo sería la apariencia de la web? Podría ser a una, dos o tres columnas; con un encabezado o no, alguna barra de menú superior o lateral; en pocos colores o en toda una determinada gama, con tipografías de diferentes estilos; etc. Mucho tiene que ver, cuando se trata de empresas, con la imagen que esta ya posee como organización (logotipos, folletería, decoración de sus instalaciones, rubro al cual pertenece la misma y demás elementos relevantes). Otro paso de vital importancia es determinar la dirección por la cual nos podrán ubicar los visitantes de la página y además la misma se utilizará dentro del sitio en banners y

elementos decorativos así como en materiales impresos (tarjetas personales, folletos, productos de merchandasing, carteles, gráfica vehicular, etc. Lo básico de esta cuestión es que la dirección sea breve y fácil de recordar. De más está decir que debe estar disponible el dominio o dirección (ej. www.tusitio.com.ar), es decir que no haya otra persona que haya registrado el nombre que queremos usar. El trámite para dominios “.com.ar” se realiza en la web nic.ar de manera totalmente gratuita. Ya avanzados sobre las etapas anteriormente desarrolladas hay que definir la ubicación final de los elementos dentro del esquema pensado, en base al tipo de materiales a utilizar (tablas, objetos interactivos, fotos, textos, videos, etc.). Se procede a la recopilación y elaboración de contenidos: tipeo de textos, digitalización o copia a la PC de fotos, audios y videos, descarga de materiales de internet, diseño de los elementos de interfaz (botoneras, íconos, etc.) y generación de todo tipo de contenidos a utilizar (texturas, imágenes de fondo, banners, animaciones, tablas, encuestas, formularios, etc). El quinto paso es la contratación del hosting, es decir la empresa que nos proporciona , a través de un alquiler mensual, el espacio para alojar nuestra web de modo que sea accesible las 24 horas. Al elegir quien nos va a brindar el servicio es necesario conocer el mercado de proveedores

para contratar el que mejor se adapte los requerimientos de nuestro proyecto. Hay que comparar las tarifas, las características de los servicios, formas de pago, contratación y mantenimiento, ancho de banda (el tráfico máximo de visitantes por mes), la capacidad de almacenamiento (el espacio total disponible para cada sitio web), herramientas para administrar los contenidos, etc. Llega el momento de darle la forma final al resultado de todo el proceso realizado hasta el momento, el armado de la web. Acá es donde se compaginan todos los elementos dentro del diseño elegido de modo que integren un site funcional y operativo, de momento dentro de nuestro equipo. Sin embargo ciertos componentes (como el contador de visitas, los videos de páginas externas como Youtube, formularios de consulta y demás) únicamente funcionan estando online. El último punto consiste en subir el sitio web completo al servidor (computadora del proveedor de hosting donde se almacena la información para ser accesada por los usuarios) y probar si su funcionamiento es correcto o si hay aspectos por mejorar antes de difundirlo. A partir de allí se realiza periódicamente un mantenimiento para evitar o solucionar los inconvenientes que pudieran dejar inactiva la página y la actualización de la información si es que la hubiera. Para llevar a cabo la tarea se emplean programas FTP (sirven para gestionar la

Breve introducción al diseño web y los programas

4


Curso de Diseño Web - Nivel Básico carga de los archivos en el servidor) o se publica directamente desde el FrontPage.

¿Qué es FrontPage y para qué sirve? FrontPage 2003 es

un programa con el cual podemos crear páginas Web de una forma visual. Gracias a esto el usuario sólo tiene que concentrarse en el diseño de su Web sin necesidad de saber programar. No obstante, un usuario avanzado puede usar las características avanzadas de FrontPage 2003 para hacer sitios Web más complejos. Una página Web es un documento que puede ser visualizado con un navegador de Internet. Un sitio Web es un conjunto de páginas Web relacionadas entre sí. FrontPage 2003 nos permite diseñar y modificar tanto el sitio como cada página individual, y nos ayuda en su edición y mantenimiento. Junto con el FrontPage hay una serie de programas que nos permiten elaborar la mayor parte de los contenidos que componen un sitio de internet. Veremos un pantallazo de cada uno de ellos. CorelDRAW es una aplicación de diseño gráfico. El programa está preparado para satisfacer las necesidades de los profesionales. Tanto si trabaja en el área de la publicidad como en el de la impresión, la publicación, la creación de carteles, etc. También sirve para diseñar objetos web (barras, separadores, íconos, botoneras, etc.). CorelDRAW ofrece las herramientas que necesarias para crear ilustraciones precisas y creativas, y

diseños de página de aspecto profesional.

pero sería impráctico ya que sólo lo acepta mediante programación en código HTML.

Corel PHOTO-PAINT es una aplicación de edición de imágenes completa que permite retocar y mejorar las fotos. Corel PHOTO-PAINT ofrece potentes herramientas, rápidas y fáciles de utilizar, con las que se pueden corregir el efecto de ojos rojos y los problemas de exposición, recortar o extraer áreas de imagen o crear y publicar imágenes en la Web. Es imprescindible utilizarlo ya que no siempre las imágenes tienen el tamaño apropiado para nuestra web y/o se encuentran en archivos demasiado pesados como para subirlos al servidor. Flash es un programa ideal para hacer más dinámica e interactiva a cualquier página web. Permite manejar en una línea de tiempo animación y sonido para armar atractivos banners publicitarios que decoren nuestros sitios. Sirve también para crear elementos de navegación como botoneras o barras laterales. Es posible crear sitios enteros con Flash, sin embargo los mismos resultarían muy pesados y la demora que esto implicaría en la carga ahuyentaría a la mayor parte de los visitantes. Por lo que solo se recomienda utilizar archivos Flash en la medida que atraigan la atención sin relentecer la navegación. Dreamweaver es un editor web similar al FrontPage, pero en este curso solo se explica su uso para insertar los archivos de Flash en las páginas que creemos en nuestro sitio. Se podrían insertar películas Flash directamente en FrontPage

Breve introducción al diseño web y los programas

5


Carpeta Curso