TALLER DE DISEÑO WEB       Iniciación
ÍNDICEUNIDAD 1: PLANIFICACIÓN                   UNIDAD 3: PRODUCCIÓN1. Análisis de necesidades y objetivos:   1. Dominios ...
UNIDAD 1Planificación
FUNCIONES DE LA PLANIFICACIÓN• Permite la elaboración de un PRESUPUESTO lo más ajustado  posible:   – Estimación de tiempo...
¿QUÉ OTRAS FUNCIONES - BENEFICIOS DELA PLANIFICACIÓN SE OS OCURREN?PARA EL CLIENTE             PARA EL DISEÑADOR          ...
¿SE OS OCURRE ALGÚN INCONVENIENTE?PARA EL CLIENTE   PARA EL DISEÑADOR   PARA EL PROYECTO
LAS FASES DEL PROYECTO WEBEn general, son las mismas que para cualquier proyectode diseño, adaptadas con un poco de sentid...
EL BRIEFINGAnálisis de necesidades y objetivos
¿PARA QUÉ SIRVE?• Para acotar el problema de diseño.    – Conocer las necesidades.        • De comunicación.        • Func...
EJEMPLO DE BRIEFING 11. Definir el sitio:     –   ¿A que se dedica la empresa?     –   ¿Qué pretende conseguir con este si...
EJEMPLO DE BRIEFING 12. Definir aspecto    – ¿Tiene identidad visual corporativa?         Si la respuesta es no:    – ¿Qué...
EJEMPLO DE BRIEFING 11. Contenidos   – ¿Qué contenidos hay?   – ¿Que contenidos faltan?   El cliente dará los contenidos q...
EJEMPLO DE BRIEFING 11. Estructura (después de leer/mirar los contenidos)         Todas estas preguntas, son para ir crean...
EJEMPLO DE BRIEFING 11. Ordenar contenidos    –    ¿Donde van los contenidos dados?    –    ¿Donde irían los contenidos qu...
EJEMPLO DE BRIEFING 11. Requisitos tecnológicos    –   Resolución de la pantalla.         Por ejemplo puede ser el diseño ...
EJEMPLO DE BRIEFING 21. Información básica sobre la entidad.    – Quiénes sois y a qué os dedicáis, persona de contacto té...
EJEMPLO DE BRIEFING 21. Estructura.    –   Un esquema con las secciones principales. Por ejemplo: quiénes somos,        qu...
EJEMPLO DE BRIEFING 21. Referencias funcionales.    –   Si hay algún sitio que funciona de forma similar al que deseas, in...
EJEMPLO DE BRIEFING 21. Nivel de accesibilidad.2. Usabilidad.3. Compatibilidad con diferentes navegadores.    –   Especifi...
EJEMPLO DE BRIEFING 21. Indicad si necesitáis un dominio o no.2. Plazos.    –   Indicar cuándo se debe entregar la propues...
EJEMPLO DE BRIEFING 21. Presupuesto.    –   Desglosado lo máximo posible que incluya cuánto cuesta el hosting, el        d...
DEFINICIÓN Y ORGANIZACIÓN DE         CONTENIDOS Taxonomías y arquitectura de la información
•   Un sitio que contiene información bien estructurada y clasificada puede    ser fácilmente entendido por otros sitios w...
LAS TAXONOMÍAS•   Ciencia que se ocupa de los principios, métodos y fines de la clasificación.•   Clasificación que se rea...
ARQUITECTURA DE LA INFORMACIÓN• Es la disciplina que se ocupa de estructurar y organizar los  contenidos (información) de ...
ARQUITECTURA DE LA INFORMACIÓNEL ÁRBOL DE CONTENIDOS• Muestra de manera práctica cuántas secciones tendrá el sitio  en des...
ESTRUCTURAR LA NAVEGACIÓN      Sistemas de navegación
SISTEMAS DE NAVEGACIÓN• Una vez que se cuenta con los árboles de contenido  desarrollados, la tarea siguiente consiste en ...
CARÁCTERÍSTICAS DE LA NAVEGACIÓN• CONSISTENTE: el sistema debe ser similar en todo el sitio, en  lo referido a su ubicació...
TIPOS DE ESTRUCTURA                      LINEAL CON     JERÁRQUICA                      JERARQUÍA       LINEAL            ...
PROTOTIPADO Esbozar el site
EN QUÉ CONSISTE EL PROTOTIPADOEs una representación esquemática de una página web(sin elementos gráficos) que muestra cont...
EJEMPLOS   Es posible que oigáis hablar de wireframes y        mockups… viene a ser lo mismo.
CÓMO CONSTRUIR VUESTROSPROTOTIPOS• Estáticos:   – Papel y lápiz.   – Illustrator, InDesign…• Dinámicos, es decir, que mues...
MÁS EJEMPLOS
ALGUNOS RECURSOS DE UTILIDAD• http://konigi.com/tools/wireframe-magnets-diy-kit• http://konigi.com/tools/graph-paper• http...
UNIDAD 2 Diseño
RESOLUCIONES DE PANTALLASaber para qué dispositivos vamos a diseñar
RESOLUCIÓN DE PANTALLA•   Es número de píxeles que puede ser mostrado en la pantalla. Viene    dada por el producto del an...
RESOLUCIONES DE PANTALLA MÁSUSADASResolución       % de uso1024 x 768       16,22%1366 x 768       13,49%1280 x 800       ...
RESOLUCIONES DE DISPOSITIVOSMÓVILES320x240           Blackberry, Android, Symbian OS320x480           Apple OS, Android480...
PREPARAR VUESTRO .PSD PARA EMPEZARA TRABAJAR•   Una vez hayáis determinado para qué dispositivos vais a    trabajar, podéi...
RETÍCULAHacer que todo encaje y reutilizar código
LA RETÍCULA• Limitaciones:   – Tamaño de los anuncios, si los hubiera (periódicos y sitios     comerciales)   – Tamaños de...
LA RETÍCULA    12 UNIDADES                        3 COLUMNAS             QuickTimeᆰ and a                   QuickTimeᆰ and...
LA RETÍCULA    2 COLUMNAS                            4 COLUMNAS             QuickTimeᆰ and a                  QuickTimeᆰ a...
LA RETÍCULA    6 COLUMNAS             QuickTimeᆰ and a               decompressor     are needed to see this picture.
DISEÑAR PARA WEB CON PHOTOSHOP    Hay quien utiliza fireworks o quien maqueta          directamente tecleando código…    C...
VUESTROS ARCHIVOS SIEMPREPREPARADOS• En mi caso se trata de un PSD con las resoluciones estándar y  con la retícula ya def...
UNIDAD 3Producción
DOMINIOS Y ALOJAMIENTOS  El nombre de tu sitio y su hospedaje
DOMINIOS•   Un dominio es el nombre con que es identificado un sitio Web    [www.tudominio.es]•   El propósito de los nomb...
DIRECCIÓN IP Y DNS•   Dirección IP: es una etiqueta numérica que identifica a un dispositivo    (habitualmente una computa...
ALOJAMIENTO WEB - HOSTING• El alojamiento web (en inglés web hosting) es el servicio que  provee a los usuarios de un sist...
TIPOS DE ALOJAMIENTO•   Alojamiento gratuito: estos servicios generalmente agregan publicidad    en los sitios y tienen un...
TIPOS DE ALOJAMIENTO•   Servidores virtuales: la empresa ofrece el control de un ordenador    aparentemente no compartido,...
ASÍ ES UN SERVIDOR    Para ver esta pelメcula, debe    Para ver esta pelメcula, debe   disponer de QuickTimeᆰ y de     dispo...
CLIENTES Y SERVIDORES
FTPSubir y bajar archivos de tu ordenador al servidor y                       viceversa
QUÉ ES FTP• FileTransferProtocol  – (Protocolo de Transferencia de Archivos): desde un equipo cliente    se puede conectar...
DATOS NECESARIOS PARA CONECTAR• La dirección del servidor• El usuario• La contraseñaEn FileZilla:     DIRECCIÓN        USU...
DATOS NECESARIOS PARA CONECTAREn Dreamweaver: site > new site [advanced] > remote info > FTP                              ...
SITIO LOCAL - SITIO REMOTO• Sitio local: conjunto de páginas, imágenes, carpetas y demás  archivos que están en tu ordenad...
SITIO LOCAL - SITIO REMOTO en Dreamweaver    Sitio remoto          Sitio local
SITIO LOCAL - SITIO REMOTO en FileZilla    Sitio local            Sitio remoto
EL ESQUELETO DE UN SITIO WEB   Estructura de archivos de un sitio web
ESTRUCTURA DE ARCHIVOS Y CARPETAS•   Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de    ...
DOCUMENTOS HTML  Los pilares de una web
Taller diseño-web
Taller diseño-web
Taller diseño-web
Upcoming SlideShare
Loading in...5
×

Taller diseño-web

678

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
678
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Taller diseño-web

  1. 1. TALLER DE DISEÑO WEB Iniciación
  2. 2. ÍNDICEUNIDAD 1: PLANIFICACIÓN UNIDAD 3: PRODUCCIÓN1. Análisis de necesidades y objetivos: 1. Dominios y alojamientos el briefing web 2. Gestores de FTP y editores de2. Definición de contenidos texto: dreamweaver, dos en uno3. Estructurar la navegación 3. El esqueleto de la página: los4. Prototipado documentos html 4. Los estilos: las cssUNIDAD 2: DISEÑO 5. Interactuar con el usuario: javascript y sus librerías 6. Armando la página: maquetación1. Resoluciones html2. Retícula - webs modulables 7. Dándole estilo: css3. Diseñar para web con photoshop 8. Testeo cross browser
  3. 3. UNIDAD 1Planificación
  4. 4. FUNCIONES DE LA PLANIFICACIÓN• Permite la elaboración de un PRESUPUESTO lo más ajustado posible: – Estimación de tiempos. – Estimación de recursos (técnicos y humanos).• Permite establecer un CALENDARIO DE HITOS, de manera que el cliente está al tanto de los procesos, haciendo los cambios y observaciones correspondientes en el momento adecuado y ahorrando sorpresas al final del proceso. – Depuración de responsabilidades. – Claúsulas contractuales.
  5. 5. ¿QUÉ OTRAS FUNCIONES - BENEFICIOS DELA PLANIFICACIÓN SE OS OCURREN?PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO Distribución adecuada de tiempos Soluciones más ajustadas a las Control de la inversión de trabajo necesidades Posibilidad de controlar sus márgenes de beneficio
  6. 6. ¿SE OS OCURRE ALGÚN INCONVENIENTE?PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO
  7. 7. LAS FASES DEL PROYECTO WEBEn general, son las mismas que para cualquier proyectode diseño, adaptadas con un poco de sentido común.[B. Munari]1. Problema 1. Materiales y tecnologías2. Definición del problema 2. Experimentación3. Elementos del problema 3. Modelos4. Recopilación de datos 4. Validación5. Análisis de datos 5. Dibujos constructivos6. Creatividad 6. Solución
  8. 8. EL BRIEFINGAnálisis de necesidades y objetivos
  9. 9. ¿PARA QUÉ SIRVE?• Para acotar el problema de diseño. – Conocer las necesidades. • De comunicación. • Funcionalidades tecnológicas. – Conocer las limitaciones o condicionantes: • Presupuesto. • Limitaciones en cuanto a aspecto visual - imagen corporativa. • Target.• Conocer las expectativas del cliente y contrastarlas con la realidad del problema de diseño.
  10. 10. EJEMPLO DE BRIEFING 11. Definir el sitio: – ¿A que se dedica la empresa? – ¿Qué pretende conseguir con este sitio web? – ¿A qué público objetivo quiere dirigirlo? – ¿En cuanto tiempo pretende lograr sus objetivos? – ¿Tiene el cliente ya el dominio contratado? Si la respuesta es no: ¿Nos encargamos nosotros de ese tema? – ¿Dispone de alojamiento para el site? No: ¿Se lo contratamos nosotros? Si: Es importante que el cliente proporcione todas las claves, acceso ftp, etc para poder copiar la web cuando esté terminada. También es fundamental saber los lenguajes de programación admitidos por el servidor (php), bases de datos instaladas (MySQL), si hay posibilidad de instalar herramientas propias o librerías de funciones específicas, herramientas ya instaladas o preinstaladas.
  11. 11. EJEMPLO DE BRIEFING 12. Definir aspecto – ¿Tiene identidad visual corporativa? Si la respuesta es no: – ¿Qué colores/tonos prefiere? – ¿Tiene constantes visuales? ¿cuales? (logos, folletos, tarjetas) Aquí podríamos plantear otro cuestionario enfocado a desarrollar la identidad visual corporativa, pero no es el caso. Si la respuesta es si: – ¿Nos puede facilitar un libro de estilo? – ¿Tiene sitios web de referencia? (intentar Averiguar qué le gusta de cada uno).
  12. 12. EJEMPLO DE BRIEFING 11. Contenidos – ¿Qué contenidos hay? – ¿Que contenidos faltan? El cliente dará los contenidos que tenga, y los que no tenga aún que nos diga que va a ser y tomamos nota, se leen con el y se miran las fotos juntos.
  13. 13. EJEMPLO DE BRIEFING 11. Estructura (después de leer/mirar los contenidos) Todas estas preguntas, son para ir creando la estructura junto con el cliente, lo mejor es sugerir y escuchar, pero que el cliente entienda por qué se debe desarrollar una estructura. – ¿Cuantas secciones hay? – ¿Cuantas subsecciones hay y en qué secciones están? – ¿Qué se va a mostrar en cada sección/subsección? – ¿A que página entra? (si no hay intro, landing page) En el caso de que el proyecto sea complejo (una tienda, un portal etc. o incluso en alguna sección de los sitios sencillos), explicar el funcionamiento de cada sección/subsección, con sus detalles, separando bien la parte de usuario y la de administrador (si hubiera ), y especificando como funciona cada una: – ¿Que sección es? ¿Que hace? ¿Para que sirve? ¿Donde lleva? ¿Que debe mostrar?
  14. 14. EJEMPLO DE BRIEFING 11. Ordenar contenidos – ¿Donde van los contenidos dados? – ¿Donde irían los contenidos que faltan? Esto es para recibir los materiales con un mínimo orden, que no tengamos que adivinar donde van los textos y las imágenes (para evitar cosas como un cd con 200 imágenes muchas parecidas, todas juntas con nombres del tipo dsc_110.jpg directamente salidas de la cámara), porque se pierde demasiado tiempo y a menudo se tienen que cambiar después de la entrega preliminar.
  15. 15. EJEMPLO DE BRIEFING 11. Requisitos tecnológicos – Resolución de la pantalla. Por ejemplo puede ser el diseño de una intranet donde los usuarios de la misma tengan todos el monitor a 1024x768), diseño fijo/elástico/liquido y los dispositivos para los que debe ir diseñada la web (por si quiere adaptar los estilos para una PDA por ejemplo). – Gestión de contenidos.1. Presupuesto – ¿Cuánto dinero está dispuesto a invertir en la aplicación web?1. Otras observaciones – Revisar todo lo apuntado (leyéndolo con el cliente) para asegurarse de que no hay ningún malentendido, o confusión y que no falta nada.
  16. 16. EJEMPLO DE BRIEFING 21. Información básica sobre la entidad. – Quiénes sois y a qué os dedicáis, persona de contacto técnica que va a seguir el proyecto y la persona que va a llevar los pagos.1. Objetivo del sitio. – Lo más concreto posible.1. Reparto de responsabilidades: – Especifica claramente qué quieres que haga la empresa y qué haréis desde la organización. Por ejemplo: la empresa sólo va a instalar una herramienta y la organización se encargará de actualizar las noticias.
  17. 17. EJEMPLO DE BRIEFING 21. Estructura. – Un esquema con las secciones principales. Por ejemplo: quiénes somos, qué hacemos, noticias de actualidad, dónde estamos, anuncios de voluntariado…1. Servicios. – Herramientas que incluirá el sitio que llevan por detrás cierta programación: buscador, sistema de suscripción por correo-e, RSS, sistema de estadísticas, una agenda automatizada, etc.1. Disposición. – Un esquema orientativo con indicaciones sobre cómo irá organizada la estructura y los servicios. Por ejemplo: un menú superior con información estática (quiénes somos, qué hacemos, dónde estamos, contacta) y uno lateral con las secciones de actualidad que se renueva habitualmente (anuncios de voluntariado, denuncias, informes…), una cabecera con el logo y el buscador, un pie de página con la licencia copyleft, etc.
  18. 18. EJEMPLO DE BRIEFING 21. Referencias funcionales. – Si hay algún sitio que funciona de forma similar al que deseas, incluye los enlaces. Por ejemplo: si queréis hacer una red social y os gusta cómo funciona Ning más que Facebook, agregad el enlace explicando qué cosa os gusta.1. Referencias estéticas. – Si tenéis algún material ya diseñado anteriormente (logos, folletos…), un libro con pautas estéticas o conocéis sitios con una estética que os gusta, aportad todas estas referencias.1. Requerimientos tecnológicos. – Software libre o privativo.1. Administrador. – Si queréis contar con una herramienta con la que accedáis al sitio y lo actualicéis o modifiquéis de forma sencilla
  19. 19. EJEMPLO DE BRIEFING 21. Nivel de accesibilidad.2. Usabilidad.3. Compatibilidad con diferentes navegadores. – Especificar cuáles: Internet Explorer, Mozilla, Ópera, Google Chrome…1. Indicad si necesitáis un alojamiento (hosting) o no. – Si disponéis de uno, también podéis especificar qué cualidades tiene: capacidad, bases de datos, etc. Esta información técnica te la da la empresa o web donde has contratado el servicio.
  20. 20. EJEMPLO DE BRIEFING 21. Indicad si necesitáis un dominio o no.2. Plazos. – Indicar cuándo se debe entregar la propuesta con el presupuesto y para qué fecha pensáis que debería estar el sitio en funcionamiento.
  21. 21. EJEMPLO DE BRIEFING 21. Presupuesto. – Desglosado lo máximo posible que incluya cuánto cuesta el hosting, el diseño, la maquetación, etc.1. Presupuesto para el mantenimiento del proyecto.2. Metodología de trabajo. – Cómo y cuándo os irán informando de sus avances. En proyectos grandes, puede ser recomendable utilizar un gestor de proyectos.
  22. 22. DEFINICIÓN Y ORGANIZACIÓN DE CONTENIDOS Taxonomías y arquitectura de la información
  23. 23. • Un sitio que contiene información bien estructurada y clasificada puede ser fácilmente entendido por otros sitios web y por los buscadores.• Permite al usuario encontrar fácilmente lo que busca, facilitando la interacción entre usuario y el espacio de información.• El crecimiento del sitio web, así como su adaptación a otras plataformas tecnológicas será más fácil.
  24. 24. LAS TAXONOMÍAS• Ciencia que se ocupa de los principios, métodos y fines de la clasificación.• Clasificación que se realiza según esta ciencia, en especial la que ordena, jerarquiza y nombra, dentro de la biología, los seres vivos.Las taxonomías en el ámbito del diseño web permiten crear lajerarquía y organización de los contenidos que se presentan en unsitio web, intentando establecer coincidencias entre la terminologíadel usuario y la del sistema.Cuanto mayor sea la estructuración y organización de lainformación, más fácil será para el usuario hallar lo que realmentebusca.
  25. 25. ARQUITECTURA DE LA INFORMACIÓN• Es la disciplina que se ocupa de estructurar y organizar los contenidos (información) de los sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información.• No se ocupa de los aspectos formales del diseño de las interfaces.Una vez determinadas las etiquetas [taxonomías] que designaránal contenido, se pasa a la creación de los esquemas estructurasde organización de la información.
  26. 26. ARQUITECTURA DE LA INFORMACIÓNEL ÁRBOL DE CONTENIDOS• Muestra de manera práctica cuántas secciones tendrá el sitio en desarrollo y cuántos niveles habrá dentro de cada uno.
  27. 27. ESTRUCTURAR LA NAVEGACIÓN Sistemas de navegación
  28. 28. SISTEMAS DE NAVEGACIÓN• Una vez que se cuenta con los árboles de contenido desarrollados, la tarea siguiente consiste en generar los sistemas de acceso a dichos contenidos en el Sitio Web. – NAVEGACIÓN TEXTUAL: menús, guías, botones y otros elementos que deben ser claramente distinguibles dentro de la interfaz. – NAVEGACIÓN CONTEXTUAL: elementos basados en texto o gráficos (imágenes).
  29. 29. CARÁCTERÍSTICAS DE LA NAVEGACIÓN• CONSISTENTE: el sistema debe ser similar en todo el sitio, en lo referido a su ubicación y disposición en las páginas.• UNIFORME: el sistema debe utilizar similares términos con el fin de que el usuario confíe en que sus opciones llevan siempre hacia los mismos lugares dentro del sitio.• VISIBLE: el sistema debe distinguirse claramente dentro del sitio, con el fin de que el usuario cuente con él, como si se tratara de una guía permanente en el área en que se encuentre del sitio.
  30. 30. TIPOS DE ESTRUCTURA LINEAL CON JERÁRQUICA JERARQUÍA LINEAL RED
  31. 31. PROTOTIPADO Esbozar el site
  32. 32. EN QUÉ CONSISTE EL PROTOTIPADOEs una representación esquemática de una página web(sin elementos gráficos) que muestra contenido ycomportamiento de las páginas.Sirve como herramienta de comunicación y discusiónentre arquitectos de información, programadores,diseñadores y clientes.También se puede utilizar para comprobar la usabilidadde un sitio web. [Interacción]
  33. 33. EJEMPLOS Es posible que oigáis hablar de wireframes y mockups… viene a ser lo mismo.
  34. 34. CÓMO CONSTRUIR VUESTROSPROTOTIPOS• Estáticos: – Papel y lápiz. – Illustrator, InDesign…• Dinámicos, es decir, que muestran la interacción: – AXURE [http://www.axure.com/] – FIREWORKS, no está pensado para hacer prototipos, pero tiene posibilidades de interacción.
  35. 35. MÁS EJEMPLOS
  36. 36. ALGUNOS RECURSOS DE UTILIDAD• http://konigi.com/tools/wireframe-magnets-diy-kit• http://konigi.com/tools/graph-paper• http://webwithoutwords.com/blog/
  37. 37. UNIDAD 2 Diseño
  38. 38. RESOLUCIONES DE PANTALLASaber para qué dispositivos vamos a diseñar
  39. 39. RESOLUCIÓN DE PANTALLA• Es número de píxeles que puede ser mostrado en la pantalla. Viene dada por el producto del ancho por el alto, medidos ambos en píxeles. Resoluciones de pantalla más utilizadas (febrero 2012)
  40. 40. RESOLUCIONES DE PANTALLA MÁSUSADASResolución % de uso1024 x 768 16,22%1366 x 768 13,49%1280 x 800 12,72%1280 x 1024 8,43%1440 x 900 6,35%1920 x 1080 4,65%1680 x 1050 4,17%320 x 480 3,72%1600 x 900 3,39%768 x 1024 3,17%
  41. 41. RESOLUCIONES DE DISPOSITIVOSMÓVILES320x240 Blackberry, Android, Symbian OS320x480 Apple OS, Android480x360 Blackberry360x640 Symbian OS480x800 Android, Linux, Windows mobile 6 - 7768x1024 iPad640x960 iPhone1280x800 Android, Apple OS, Windows OS
  42. 42. PREPARAR VUESTRO .PSD PARA EMPEZARA TRABAJAR• Una vez hayáis determinado para qué dispositivos vais a trabajar, podéis empezar a montar vuestro .psd• Porque… ¡OJO! El área del lienzo de vuestro psd no será la misma que las resoluciones de pantalla, sino algo menos.• Haced la prueba… 1. Abre tu navegador. 2. Haz un pantallazo. 3. Ábrelo con photoshop y colorea la zona visible. 4. Cambia la resolución de tu pantalla y repite la operación.
  43. 43. RETÍCULAHacer que todo encaje y reutilizar código
  44. 44. LA RETÍCULA• Limitaciones: – Tamaño de los anuncios, si los hubiera (periódicos y sitios comerciales) – Tamaños de imágenes (apaisados o verticales, por ejemplo en publicaciones de moda)
  45. 45. LA RETÍCULA 12 UNIDADES 3 COLUMNAS QuickTimeᆰ and a QuickTimeᆰ and a decompressor decompressor are needed to see this picture. are needed to see this picture.
  46. 46. LA RETÍCULA 2 COLUMNAS 4 COLUMNAS QuickTimeᆰ and a QuickTimeᆰ and a decompressor decompressor are needed to see this picture. are needed to see this picture.
  47. 47. LA RETÍCULA 6 COLUMNAS QuickTimeᆰ and a decompressor are needed to see this picture.
  48. 48. DISEÑAR PARA WEB CON PHOTOSHOP Hay quien utiliza fireworks o quien maqueta directamente tecleando código… Cada uno donde más a gusto se encuentre.
  49. 49. VUESTROS ARCHIVOS SIEMPREPREPARADOS• En mi caso se trata de un PSD con las resoluciones estándar y con la retícula ya definida.
  50. 50. UNIDAD 3Producción
  51. 51. DOMINIOS Y ALOJAMIENTOS El nombre de tu sitio y su hospedaje
  52. 52. DOMINIOS• Un dominio es el nombre con que es identificado un sitio Web [www.tudominio.es]• El propósito de los nombres de dominio de Internet y del sistema de nombres de dominio (DNS) es traducir una dirección IP. – Todos los ordenadores, en el momento en que están conectados, tienen un número asignado: una dirección de IP. [http://www.see-my-ip.com/] – Sin embargo, nos es fácil de recordar los nombres de dominio que la serie de números que componen una dirección de IP.
  53. 53. DIRECCIÓN IP Y DNS• Dirección IP: es una etiqueta numérica que identifica a un dispositivo (habitualmente una computadora) dentro de una red que utilice el protocolo de Internet (Internet Protocol). Ejemplos: – 127.255.255.255 – 172.31.255.255• DNS (Domain Name System) o sistema de nombres de dominio: este sistema asocia las direcciones IP con nombres de dominios. Su función es traducir nombres inteligibles para los humanos en identificadores binarios asociados con los equipos conectados a la red, esto con el propósito de poder localizar y direccionar estos equipos mundialmente.• Aquí está explicado de manera muy básica: http://www.youtube.com/watch?v=8hp_yIyCqCc
  54. 54. ALOJAMIENTO WEB - HOSTING• El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de un sistema para poder almacenar información (textos, imágenes, vídeo, o cualquier otro tipo de contenido) accesible vía web.• De forma muy simple, es un lugar [SERVIDOR] donde almacenar tu página web o correos electrónicos. – Un servidor es un ordenador que, formando parte de una red, provee servicios a otras ordenadores denominadas CLIENTES.
  55. 55. TIPOS DE ALOJAMIENTO• Alojamiento gratuito: estos servicios generalmente agregan publicidad en los sitios y tienen un espacio y tráfico limitado. [ej. Geocities o los que proporcionan los proveedores de internet como Movistar]• Alojamiento compartido: en este tipo de servicio se alojan clientes de varios sitios en un mismo servidor. Resulta una alternativa muy buena para pequeños y medianos clientes.• Alojamiento de imágenes: servicio para guardar imágenes en internet, la mayoría de estos servicios son gratuitos. [ej. imageshack.us]
  56. 56. TIPOS DE ALOJAMIENTO• Servidores virtuales: la empresa ofrece el control de un ordenador aparentemente no compartido, que se realiza mediante una máquina virtual. Se pueden administrar varios dominios de forma fácil y económica, además de elegir los programas que se ejecutan en el servidor. Recomendado para empresas de diseño y programación web.• Servidores dedicados: es un ordenador comprado o arrendado que se utiliza para prestar servicios dedicados, generalmente relacionados con el alojamiento web y otros servicios en red.• Alojamiento en la nube: (cloud hosting) está basado en las tecnologías que permiten a un gran número de máquinas actuar como un sistema conectadas a un grupo de medios de almacenamiento.
  57. 57. ASÍ ES UN SERVIDOR Para ver esta pelメcula, debe Para ver esta pelメcula, debe disponer de QuickTimeᆰ y de disponer de QuickTimeᆰ y de un descompresor . un descompresor .
  58. 58. CLIENTES Y SERVIDORES
  59. 59. FTPSubir y bajar archivos de tu ordenador al servidor y viceversa
  60. 60. QUÉ ES FTP• FileTransferProtocol – (Protocolo de Transferencia de Archivos): desde un equipo cliente se puede conectar a un servidor para descargar archivos desde él o para enviarle archivos, independientemente del sistema operativo utilizado en cada equipo.
  61. 61. DATOS NECESARIOS PARA CONECTAR• La dirección del servidor• El usuario• La contraseñaEn FileZilla: DIRECCIÓN USUARIO CONTRASEÑA DEL SERVIDOR
  62. 62. DATOS NECESARIOS PARA CONECTAREn Dreamweaver: site > new site [advanced] > remote info > FTP DIRECCIÓN DEL SERVIDOR USUARIO CONTRASEÑA
  63. 63. SITIO LOCAL - SITIO REMOTO• Sitio local: conjunto de páginas, imágenes, carpetas y demás archivos que están en tu ordenador.• Sitio remoto: conjunto de páginas, imágenes, carpetas y demás archivos que están en el servidor, y por lo tanto accesibles a todo el mundo.
  64. 64. SITIO LOCAL - SITIO REMOTO en Dreamweaver Sitio remoto Sitio local
  65. 65. SITIO LOCAL - SITIO REMOTO en FileZilla Sitio local Sitio remoto
  66. 66. EL ESQUELETO DE UN SITIO WEB Estructura de archivos de un sitio web
  67. 67. ESTRUCTURA DE ARCHIVOS Y CARPETAS• Antes de iniciar el diseño de un sitio web es necesario preparar su estructura de carpetas y archivos.• Como norma general, las páginas HTML se guardarán en el directorio o carpeta principal mientras que los elementos que utilizan (audios, vídeos, hojas de estilo, imágenes, etc) se situarán en las subcarpetas correspondientes. – audios: archivos de audio mp3. – css: hojas de estilo css. – descargas: archivos zip, exe, etc que se ofrecen para descarga. – images: imágenes jpg, gif o png. – pdf: documentos pdf. – scripts: archivos js con código javascript reutilizable. – swfs: archivos con animaciones flash (*.swf). – vídeos: ficheros en distintos formatos de vídeo: *.wmv, *.flv
  68. 68. DOCUMENTOS HTML Los pilares de una web
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×