Introducción al Diseño Web para Diseñadores Gráficos

Aprende como utilizar los conocimientos de Diseño Gráfico que ya tienes para crear verdaderos Sitios Web que funcionan!
4.5 (3 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
14 students enrolled
Instructed by Gabriel Capaccio Design / Web Design
$19
$20
5% off
Take This Course
  • Lectures 41
  • Length 5 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2015 Spanish

Course Description

Cientos de Diseñadores Gráficos no ingresan al campo de la Web por falta de orientación apropiada y pierden por esto una importante cantidad de ingresos. Cuentan con la capacidad para realizar excelentes maquetas, pero no saben como convertir ese diseño en un verdadero Sitio Web y publicarlo en Internet.

Con un lenguaje apropiado para Diseñadores Gráficos encontrarás en este curso, paso a paso, trabajando en tu máquina y siendo guiado por un colega, la forma de llevar tus diseños al mundo de la Web. Desde el programa de diseño que prefieras hasta verlo terminado y publicado en Internet con su propia dirección.

Podrás ver tus diseños realizados en Ilustrator, Corel o Photoshop convertidos en verdaderos Sitios Web que si funcionan. La clave es aprender el lenguaje de la Web HTML y sumarle estilos visuales con CSS. Aprenderás en tu tiempo y a tu ritmo, tendrás acceso a los Videos Tutoriales cuando quieras y cuantas veces quieras. En todo momento tendrás contacto directo con el docente por si se te presentan dudas.

No hace falta ser un genio o un programador experto para comprender el código del Sitio Web que estás construyendo. Aprenderemos despacio y con ejemplos prácticos a incluir botones para sumar Fans de Facebook, Videos de You Tube, crear Formularios de Contacto y hasta insertar Botones de Compra para vender productos On Line.

What are the requirements?

  • Debes tener manejo básico de herramientas de Diseño Gráfico. Photoshop, Corel o Ilustrator. Si no tienes Dreamweaver instalado no te preocupes, veremos como instalarlo durante el curso.

What am I going to get from this course?

  • Aprende a Diseñar Sitios Web para tus Clientes!
  • Aprovecha el conocimiento que ya tienes de Diseño Gráfico para llevarlo al mundo del Diseño Web

What is the target audience?

  • Este Curso está dirigido a Diseñadores Gráficos que quieran iniciarse en el Diseño Web y no tengan experiencia previa.
  • Este Curso No es adecuado para Diseñadores Web que ya tengan experiencia

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Descubriendo el Mundo del Diseño Web
03:23

Conocemos como está estructurado el curso y vemos algunos consejos útiles para tener en cuenta durante el cursado.

05:46

Repasaremos brevemente la historia de la Internet.
Conoceremos a Tim Berners Lee y sus principales aportes a nuestra web moderna.
Los estándares del futuro HTML + CSS + JavaScript. Dónde está Flash, y el futuro de una web inclusiva.

06:44

Los lenguajes HTML y CSS desde cero. Para qué sirven y cuál es su función. Las partes de un documento para la Web. Los Selectores, qué son y para qué sirven.

09:28

Los formatos de imágenes para trabajar en la Web, modo y resolución. Todo lo que debemos conocer sobre navegadores actuales, y cómo construir un Sitio Web que resulte efectivo.

05:26

Comenzamos a estructurar el diseño de nuestro Sitio Web dentro de un programa de diseño. Tomaremos como referencia una imagen de 980px de ancho. Construiremos nuestro sitio pensando en crear diferentes IDs para identificar cada sector.

07:30

Conocemos la interfaz de Dreamweaver. Escribiremos los primeros textos de prueba para ver como las vistas de Código y Diseño trabajan al unísono.

05:00

Aprendemos sobre el flujo natural del documento HTML y los tipos de elementos que pueden encontrarse, Inline y Block.

08:26

Aprendemos como crear una clase y otorgarle a los textos un tamaño color y tipografía. Además veremos rápidamente la ventana de Definición de Regla desde donde estableceremos las reglas de CSS para nuestro documento.

04:42

Aprendemos como crear un ID, el tipo de selector que nos servirá para establecer los diferentes sectores de nuestra página.
Cada ID sólo puede ser utilizado una vez dentro del documento HTML.

02:31

Conocemos como modificar las etiquetas estándar que forman parte del lenguaje HTML. Estas etiquetas ya tienen características estéticas definidas por defecto, pero podremos modificarlas mediante reglas de CSS.

03:15

Este tipo de selector nos permite modificar las características estéticas de una etiqueta que se encuentra dentro de otra. Su uso será imprescindible cuando trabajemos los estilos del menú de navegación.

07:19

Esta elegante propiedad nos permite sacar a nuestros elementos del flujo natural del documento, haciéndolos flotar a la izquierda o a la derecha de su elemento contenedor. El manejo de esta propiedad requiere de bastante práctica, así que...¡a no desesperar!

04:07

Estas propiedades nos permiten darle rellenos y márgenes a nuestros elementos. No debemos olvidar que los valores que le asignemos, se sumarán al alto y al ancho que nuestro elemento ya tenga establecido.

04:49

Vemos las posibilidades de enriquecer nuestra página con imágenes de fondo. De la misma manera que establecemos fondos para el "body", podremos establecer luego fondos para los distintos elementos contenedores de nuestra página.

06:28

Conocemos las formas de incorporar una imagen a nuestra página, como fondo de un contenedor o insertada dentro del código. Las precauciones que debemos tomar al modificarla externamente, y la creación de una zona activa.

09:23

Creamos nuestro primer menú en HTML. Veremos como convertir texto en botones y darle mediante reglas de CSS los estilos que queremos a los diferentes estadíos.

04:08

Durante muchos años las tablas se utilizaron para crear sitios web completos y todo era muy caótico. Ahora las tablas se usan únicamente para ordenar textos que necesiten presentarse en forma tabular.

02:57

Hace muchos años, quienes trabajábamos para web, disponíamos sólo de un puñado de tipografías para nuestros diseños. Hoy Google Fonts nos permite incluir una infinidad de nuevas y hermosas tipografías listas para usar.

04:23

El Iframe o marco inline es una poderosa herramienta que nos permite embeber una página dentro de la nuestra. La integración de elementos de páginas externas como Facebook y Google se realizan utilizando el Iframe.

06:05

Conocemos cuales son las unidades de medida con las que debemos familiarizarnos en el diseño web. Estas unidades se dividen en Relativas y Absolutas, cada una tiene su función y su forma de actuar.

16:24

Esta categoría nos presenta una ventana muy similar a la que ya conocemos como persiana de párrafo. Allí podremos darle al texto su alineación, sangría y otras características. También conoceremos la propiedad Display que nos ayudará a modificar el comportamiento natural de los elementos.

09:34

Una de las propiedades más importantes en el diseño web. Nos entrega el control total sobre la posición de los elementos en la página. Static, relative, absolute y fixed, pueden provocar algún dolor de cabeza al comienzo, pero son maravillosas cuando se aprende a usarlas.

11:45

Vemos las opciones que faltan en la ventana de Posición: Visibility, Z-Index, Overflow y Clip. Además conoceremos las muy poco utilizadas Extensiones. Con esto cerramos nuestro recorrido por la ventana de Definición de Regla de Dreamweaver.

Section 2: ¡Comenzamos a armar nuestro propio Sitio Web!
11:42

Iniciamos las transición de nuestro diseño a un verdadero sitio web exportando nuestra maqueta modelo y tomando en Photoshop las medidas de los elementos.

10:57

Continuamos armando nuestro cabezal. Agregaremos el logo de la empresa, sus datos de contacto y el botón con vínculo a la Fan Page de Facebook.

06:45

Avanzamos con el armado del menú. Aprenderemos como lograr que nuestro contenedor tenga curvas redondeadas aplicando CSS3.

07:12

• Galería de fotos On Line
Aprendemos la forma más fácil de incluir una galería de fotos en nuestro sitio web. Conocemos la herramienta on line que nos da el sitio Photosnack.

05:54

Incluimos un breve texto sobre la empresa y diferenciamos el cabezal h1 del texto de párrafo. Veremos un buen ejemplo de porqué es importante manejar las etiquetas dentro del código.

05:56

• Caja Me Gusta de Facebook
• Comentarios en el código
Veremos el sitio donde Facebook pone a disposición de los desarrolladores todas sus valiosas herramientas sociales y aprenderemos como integrar comentarios invisibles dentro del código.

06:08

• FileZilla
• Hosting Gratis
Conocemos FileZilla el programa que nos permitirá transferir los archivos a un servidor. Además, conoceremos como habilitar un Hosting Gratuito con un dominio transitorio a donde subir nuestros archivos y testear nuestro sitio.

08:56

• Formulario de contacto
Integramos el formulario de contacto utilizando una valiosa herramienta on line que nos permite crear un formulario en forma fácil y gratuita.

07:22

Recta final de nuestra página, colocamos el pie con el logo y la información de la empresa.

06:11

Retocamos algunas cosas pendientes y le damos a nuestro menú los estilos para cada uno de los estadíos del botón. Usaremos lo que aprendimos sobre el selector compuesto.

10:08

• Favicon
• Etiquetas Meta
Aprendemos como hacer el pequeño ícono para la barra del navegador. Conocemos las Etiquetas Meta y la forma de crear las secciones interiores partiendo de nuestro index.

09:22

• Estilos CSS al Formulario
Le damos a nuestro formulario de contacto "estilos" mediante reglas de CSS.
Vemos que más tiene para nosotros el CSS3. Además de bordes redondeados, veremos sombras para textos y cajas.

12:08

Aprendemos como insertar:
• Un botón de Compra de Mercado Pago
• Un video de YouTube
• El botón Me Gusta y una caja de comentarios de Facebook
• Un ancla en nuestra página
• Un mapa de Google Maps

06:26

Conocemos el perfil comercial de la red social más importante del mundo. La diferencia entre un posteo promocionado y uno orgánico. Cómo crear una Fan Page, y donde recurrir para migrar una página personal.

06:32

Vemos como se coloca una galería de imágenes que utiliza JavaScrip con la popular biblioteca JQuery. Desde el link "Material Descargable" podrás descargarla y modificarla a tu gusto.

12:08

Develamos como funciona el Responsive Design y elaboramos una versión de nuestro sitio web destinada exclusivamente a los dispositivos móviles.

02:56

Repasamos algunas recomendaciones sobre Registro de Dominio, el error de las cuentas con dominio propio y las ventajas de Gmail.

07:59

Conocemos que ventajas nos trae HTML5, las inmensas ramificaciones de sus áreas. Las etiquetas para una mejor semántica, las APis más interesantes y los consejos finales para mantenerse actualizado.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Gabriel Capaccio, Diseñador Gráfico Universitario

DG. Gabriel Capaccio

Docente del Instituto de Estudios Superiores "Antonio Ruiz de Montoya" / Miembro Fundador y actual Tesorero del Colegio de Diseñadores Gráficos de Misiones.

Estudios Universitarios:
Diseñador Gráfico, egresado de la Universidad Nacional de Misiones. Facultad de Arte y Diseño /1998

Experiencia en:
Diseño Gráfico de Imprenta
Diseño Web y Multimedia
Diseño de Identidad Corporativa

"Luego de recibirme en 1998 trabajé durante dos intensos años en una conocida imprenta céntrica de Posadas. Allí conocí a fondo los secretos del sistema de impresión Offset y sus trucos. Desde el año 2000 me desempeño como Diseñador Gráfico independiente. Con la llegada de Internet me sentí muy atraído hacia el mundo del Diseño Web. Dediqué muchos años de trabajo a ese campo y los resultados han sido muy satisfactorios. Desde hace algunos años he encontrado también un gran placer en el ejercicio de la tarea docente. Tengo el honor de ser Miembro Fundador del Primer Colegio de Diseñadores Gráficos de la Argentina, el cual presidí durante 8 años. Actualmente vivo junto a mi mujer y mi pequeño hijo en un tranquilo barrio de la ciudad de Posadas".

Ready to start learning?
Take This Course