Download - Taller diseño-web
![Page 1: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/1.jpg)
TALLER DE DISEÑO WEB
Iniciación
![Page 2: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/2.jpg)
ÍNDICE
UNIDAD 1: PLANIFICACIÓN
1. Análisis de necesidades y objetivos: el briefing web
2. Definición de contenidos3. Estructurar la navegación4. Prototipado
UNIDAD 2: DISEÑO
1. Resoluciones2. Retícula - webs modulables 3. Diseñar para web con photoshop
UNIDAD 3: PRODUCCIÓN
1. Dominios y alojamientos2. Gestores de FTP y editores de
texto: dreamweaver, dos en uno3. El esqueleto de la página: los
documentos html4. Los estilos: las css5. Interactuar con el usuario: javascript
y sus librerías6. Armando la página: maquetación
html7. Dándole estilo: css8. Testeo cross browser
![Page 3: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/3.jpg)
UNIDAD 1
Planificación
![Page 4: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/4.jpg)
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.
![Page 5: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/5.jpg)
¿QUÉ OTRAS FUNCIONES - BENEFICIOS DE LA PLANIFICACIÓN SE OS OCURREN?
PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO
Soluciones más ajustadas a las necesidades
Distribución adecuada de tiempos de trabajo
Posibilidad de controlar sus márgenes de beneficio
Control de la inversión
![Page 6: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/6.jpg)
¿SE OS OCURRE ALGÚN INCONVENIENTE?
PARA EL CLIENTE PARA EL DISEÑADOR PARA EL PROYECTO
![Page 7: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/7.jpg)
LAS FASES DEL PROYECTO WEB
1. Problema2. Definición del problema3. Elementos del problema4. Recopilación de datos5. Análisis de datos6. Creatividad
1. Materiales y tecnologías2. Experimentación3. Modelos4. Validación5. Dibujos constructivos6. Solución
En general, son las mismas que para cualquier proyecto de diseño, adaptadas con un poco de sentido común. [B. Munari]
![Page 8: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/8.jpg)
EL BRIEFING
Análisis de necesidades y objetivos
![Page 9: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/9.jpg)
¿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.
![Page 10: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/10.jpg)
EJEMPLO DE BRIEFING 1
1. 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.
![Page 11: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/11.jpg)
EJEMPLO DE BRIEFING 1
2. 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).
![Page 12: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/12.jpg)
EJEMPLO DE BRIEFING 1
1. 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.
![Page 13: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/13.jpg)
EJEMPLO DE BRIEFING 1
1. 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?
![Page 14: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/14.jpg)
EJEMPLO DE BRIEFING 1
1. 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.
![Page 15: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/15.jpg)
EJEMPLO DE BRIEFING 1
1. 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.
![Page 16: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/16.jpg)
EJEMPLO DE BRIEFING 2
1. 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.
![Page 17: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/17.jpg)
EJEMPLO DE BRIEFING 2
1. 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.
![Page 18: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/18.jpg)
EJEMPLO DE BRIEFING 2
1. 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
![Page 19: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/19.jpg)
EJEMPLO DE BRIEFING 2
1. 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.
![Page 20: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/20.jpg)
EJEMPLO DE BRIEFING 2
1. 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.
![Page 21: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/21.jpg)
EJEMPLO DE BRIEFING 2
1. 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.
![Page 22: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/22.jpg)
DEFINICIÓN Y ORGANIZACIÓN DE CONTENIDOS
Taxonomías y arquitectura de la información
![Page 23: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/23.jpg)
• 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.
![Page 24: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/24.jpg)
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 la jerarquía y organización de los contenidos que se presentan en un sitio web, intentando establecer coincidencias entre la terminología del usuario y la del sistema.
Cuanto mayor sea la estructuración y organización de la información, más fácil será para el usuario hallar lo que realmente busca.
![Page 25: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/25.jpg)
![Page 26: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/26.jpg)
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án al contenido, se pasa a la creación de los esquemas estructuras de organización de la información.
![Page 27: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/27.jpg)
ARQUITECTURA DE LA INFORMACIÓN
EL Á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.
![Page 28: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/28.jpg)
ESTRUCTURAR LA NAVEGACIÓN
Sistemas de navegación
![Page 29: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/29.jpg)
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).
![Page 30: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/30.jpg)
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.
![Page 31: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/31.jpg)
TIPOS DE ESTRUCTURA
LINEAL
LINEAL CON JERARQUÍA
RED
JERÁRQUICA
![Page 32: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/32.jpg)
PROTOTIPADO
Esbozar el site
![Page 33: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/33.jpg)
EN QUÉ CONSISTE EL PROTOTIPADO
Es una representación esquemática de una página web (sin elementos gráficos) que muestra contenido y comportamiento de las páginas.
Sirve como herramienta de comunicación y discusión entre arquitectos de información, programadores, diseñadores y clientes.
También se puede utilizar para comprobar la usabilidad de un sitio web. [Interacción]
![Page 34: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/34.jpg)
EJEMPLOS
Es posible que oigáis hablar de wireframes y mockups… viene a ser lo mismo.
![Page 35: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/35.jpg)
CÓMO CONSTRUIR VUESTROS PROTOTIPOS
• 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.
![Page 36: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/36.jpg)
MÁS EJEMPLOS
![Page 37: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/37.jpg)
![Page 38: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/38.jpg)
ALGUNOS RECURSOS DE UTILIDAD
• http://konigi.com/tools/wireframe-magnets-diy-kit• http://konigi.com/tools/graph-paper• http://webwithoutwords.com/blog/
![Page 39: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/39.jpg)
UNIDAD 2
Diseño
![Page 40: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/40.jpg)
RESOLUCIONES DE PANTALLA
Saber para qué dispositivos vamos a diseñar
![Page 41: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/41.jpg)
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)
![Page 42: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/42.jpg)
RESOLUCIONES DE PANTALLA MÁS USADAS
Resolución % de uso
1024 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%
![Page 43: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/43.jpg)
RESOLUCIONES DE DISPOSITIVOS MÓVILES
320x240 Blackberry, Android, Symbian OS
320x480 Apple OS, Android
480x360 Blackberry
360x640 Symbian OS
480x800 Android, Linux, Windows mobile 6 - 7
768x1024 iPad
640x960 iPhone
1280x800 Android, Apple OS, Windows OS
![Page 44: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/44.jpg)
PREPARAR VUESTRO .PSD PARA EMPEZAR A 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.
![Page 45: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/45.jpg)
RETÍCULA
Hacer que todo encaje y reutilizar código
![Page 46: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/46.jpg)
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)
![Page 47: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/47.jpg)
LA RETÍCULA
QuickTime and aᆰ decompressor
are needed to see this picture.
QuickTime and aᆰ decompressor
are needed to see this picture.
12 UNIDADES 3 COLUMNAS
![Page 48: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/48.jpg)
LA RETÍCULA
2 COLUMNAS 4 COLUMNAS
QuickTime and aᆰ decompressor
are needed to see this picture.
QuickTime and aᆰ decompressor
are needed to see this picture.
![Page 49: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/49.jpg)
LA RETÍCULA
6 COLUMNAS
QuickTime and aᆰ decompressor
are needed to see this picture.
![Page 50: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/50.jpg)
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.
![Page 51: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/51.jpg)
VUESTROS ARCHIVOS SIEMPRE PREPARADOS
• En mi caso se trata de un PSD con las resoluciones estándar y con la retícula ya definida.
![Page 52: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/52.jpg)
UNIDAD 3
Producción
![Page 53: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/53.jpg)
DOMINIOS Y ALOJAMIENTOS
El nombre de tu sitio y su hospedaje
![Page 54: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/54.jpg)
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.
![Page 55: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/55.jpg)
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
![Page 56: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/56.jpg)
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.
![Page 57: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/57.jpg)
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]
![Page 58: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/58.jpg)
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.
![Page 59: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/59.jpg)
ASÍ ES UN SERVIDOR
Para ver esta pel cula, debeメdisponer de QuickTime y deᆰ
un descompresor .
Para ver esta pel cula, debeメdisponer de QuickTime y deᆰ
un descompresor .
![Page 60: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/60.jpg)
CLIENTES Y SERVIDORES
![Page 61: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/61.jpg)
FTP
Subir y bajar archivos de tu ordenador al servidor y viceversa
![Page 62: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/62.jpg)
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.
![Page 63: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/63.jpg)
DATOS NECESARIOS PARA CONECTAR
• La dirección del servidor• El usuario• La contraseña
DIRECCIÓN DEL
SERVIDOR
USUARIO CONTRASEÑA
En FileZilla:
![Page 64: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/64.jpg)
DATOS NECESARIOS PARA CONECTAR
DIRECCIÓN DEL
SERVIDOR
USUARIO
CONTRASEÑA
En Dreamweaver: site > new site [advanced] > remote info > FTP
![Page 65: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/65.jpg)
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.
![Page 66: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/66.jpg)
SITIO LOCAL - SITIO REMOTO en Dreamweaver
Sitio localSitio remoto
![Page 67: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/67.jpg)
SITIO LOCAL - SITIO REMOTO en FileZilla
Sitio local Sitio remoto
![Page 68: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/68.jpg)
EL ESQUELETO DE UN SITIO WEB
Estructura de archivos de un sitio web
![Page 69: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/69.jpg)
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
![Page 70: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/70.jpg)
![Page 71: Taller diseño-web](https://reader034.vdocuments.co/reader034/viewer/2022042505/559c0fd41a28abab398b470f/html5/thumbnails/71.jpg)
DOCUMENTOS HTML
Los pilares de una web