Índice
Resumen / Palabras clave_____________________________________________4
Abstract / Keywords__________________________________________________5
Briefing____________________________________________________________6
Objetivos___________________________________________________________7
Antecedentes_______________________________________________________8
Hipótesis de trabajo_________________________________________________10
Metodología_______________________________________________________11
Cuerpo de trabajo___________________________________________________16
Cronología________________________________________________________23
Presupuesto_______________________________________________________24
Conclusiones______________________________________________________25
Bibliografía________________________________________________________26
Resumen | Palabras clave
4
Una página web es una herramienta indispensable para promocionar algo o alguien. Este medio de poco más de veinte años de vida, ha ido evolucionando de forma vertiginosa a raíz del avance tecnológico actual, y el diseño web ha ido de la mano de este gran crecimiento.
Un diseño web requiere hoy día usabilidad, interactividad, y un cierto atractivo, para esta forma de comunicación esencial y vital para la sociedad de nuestros días.
Este proyecto ‘Iniciando’ supone el comienzo en este ámbito del desarrollo web.
Palabras clave
- Web- Diseño- Colorista- Ilustración- Dibujo- Sencillez
Keywords
- Web- Design- Colorist- Illustration- Drawing- Simplicity
Abstract | Keywords
5
A website is an essential tool to promote something or someone. This means little more than twen-ty years, has been evolving at a dizzying rate as a result of technological advancement and web design has gone hand in hand with this great growth.
A web design today requires usability, interactivity, and a certain appeal to this form of communica-tion essential and vital to society of today.
This project ‘Starting’ is the start in this field of web development.
Briefing
6
Para llevar a cabo este proyecto se asignan las siguientes pautas a seguir:
Creación de una página web personal en el que se incluya, al menos los apartados básicos de una web (index, home, contenido y contacto). La temática es libre, al igual que hay máxima liber-tad en cuanto a disposición, estructura y estética general.
Para mayor rendimiento, se recomienda que la calidad de las imágenes no supere los 72ppp de resolución, para aligerar el peso global de la web. Por último, para una correcta organización de los elementos, cada archivo deberá estar nombrado adecuadamente (sin espacios y separado por un guión bajo) y ubicado en su carpeta correspondiente.
Objetivos
7
Objetivos generales:
- Crear un estilo característico a la hora de crear un proyecto.- Aprender las nociones básicas para la creación de una página web.- Transmitir una imagen con un estética en la web en relación con la dirección artística personal.
Objetivos específicos:
- Modificar cada archivo correctamente de la web, para que sea reconocible y fácil de navegar por la red.- Estructurar de manera ordenada y de sencillo manejo visual, para no entorpecer al usuario.- Crear una estética acorde con la sensación que cada uno quiera transmitir.
Antecedentes | Antecedentes históricos
8
En los años 60 se inició una herramienta que cambiaría el mundo: Internet. Un producto de la guerra fría creado para el uso de los militares americanos. Un medio para garantizar que una cierta información llegue a su destinatario.
Años más tarde, se crea una parte fundamental de Internet: La World Wide Web (WWW o 3W) también llamada a veces la ‘Gran Telaraña Mundial’, fundada por físicos nucleares con la ayuda del informático Tim Berners-Lee. Los científicos deseaban poder transmitir a cualquier lugar del mundo datos relacionados con sus investigaciones con mayor rapidez. Por aquel entonces solo se podía enviar simples datos de texto.
Sin embargo, a partir de 1990/1991 aparecieron las páginas interactivas de colores, tam-bién conocidas como páginas personales. En los últimos años la World Wide Web había crecido de un modo vertiginoso, y se empezó a crearse millones de páginas, cuando en 1994 estalló el boom de las páginas personales como forma de comunicación y comercia-lización.
Tim Berners-Lee. Fotografía de www.tumblr.com/
Antecedentes | Antecedentes estéticos
9
Los referentes artísticos para la creación de este proyecto virtual –en cuanto a su estética- son los mismos que influyeron en el resto de proyectos anteriores, en cuanto a la realización de ilustraciones, continuando en la misma línea estética habitual.
Es indudable no apreciar la influencia del artista digital Adhemas Batista, por ejem-plo en la ilustración que muestra la página de bienvenida a la web. Los alucinantes colores y ritmos vibrantes de Brazil, resuenan constantemente en las obras de este artisa, creando composiciones llenas de vida y color. Este aspecto es el punto más atractivo que fue tomado como punto de partida estético.
Una de las obras de Adhemas Batista.
Hipótesis de trabajo
10
Para crear la estructura de la web se utilizó la plantilla facilitada por el profesor, y a partir de esa composición se empezó a elaborar los bocetos iniciales. Para realizar dichos bocetos, se observa más detenidamente -durante bastante tiempo- las pági-nas webs que frecuentemente visitamos, para descubrir cómo están organizadas y cuál es la tendencia visual de las mismas.
Hay que tener una idea básica de cuáles son las preferencias gráficas actuales en cuanto a diseño web.
Estos bocetos anteriormente mencionados, se realizan a lápiz sobre papel de esbozo y se traducen digitalmente en imágenes vectoriales de forma rápida, simple-mente para hacerse una idea de cómo quedaría el “cuerpo” de la web. Cuando se tenga claro el modelo y la distribución de los elementos estaremos preparados para comenzar a elaborar nuestra página web.
Metodología
11
El modo de trabajo que se ha seguido para realizar este proyecto es principalmente de la siguiente manera; primero, se ha elaborado los bocetos iniciales de lo que se quiere conseguir para luego ser digitalizado, y estudiar qué cambios le favorece a nuestro trabajo.
Con la idea clara del modelo a seguir, tanto estructural como estéticamente, se em-pieza a lanzar mediante Adobe Dreamweaver los distintos elementos, contemplan-do que partes son factibles en una página web, con las características que posee la aplicación de Adobe. Al situar cada uno de los elementos, el modelo inicial sufrirá sus cambios y modifi-caciones (inevitablemente) e irá transformando la web, mientras ésta va cogiendo forma y apariencia.
Creación de una de las ilustraciones, en mitad de su proceso.
Metodología
12
A continuación se visualiza el proceso de trabajo, y transformación progresiva de la página principal de la web mediante las siguentes imágenes: (pág. 12-15)
Metodología
13
Metodología
14
Metodología
15
Cuerpo de trabajo
16
Esta página web se compone de una primera entrada o “index” (página de bienve-nida al navegante), una página principal (“home”) que enlazaran a tres secciones diferentes; una galería de imágenes –muestra el portafolio personal-, una sección biográfica para que el internauta tenga alguna información sobre el creador de las anteriores obras, y un apartado de contacto para poder comunicarse con el público que visita la página web.
El diseño general de la web recoge la estética habitual y personal propia, donde se unen los elementos bastantes coloridos y alegres, con el contraste de un blanco neutro y puro. Algunas de las ilustraciones componen distintos espacios para darle un aspecto más creativo, vistoso y artístico.
La página index da la bienvenida a través de un motivo imaginario, aludiendo a la mente creativa, creando una dirección visual que te lleva hasta la palabra “Entrar” que es la que te direcciona a la página principal de la web. En esa página princi-pal un menú de color negro, que aparece desde la parte izquierda y una cabecera colorista procedente desde la derecha, dan el dinamismo a una estructura comple-tamente equilibrada, destacándose frente a un fondo blanco.
A continuación, se muestra cada una de las secciones que contiene la página web:
Cuerpo de trabajo
17
Página Index.
Cuerpo de trabajo
18
Página Home.
Cuerpo de trabajo
19
Página de galería.
Cuerpo de trabajo
20
Página de galería de ilustración.
Cuerpo de trabajo
21
Página de información biográfica.
Cuerpo de trabajo
22
Página de contacto.
Realización de la página web definitiva.
Realización de bocetos iniciales y primeras pruebas con Dreamweaver.
Briefing.
Entrega proyecto
Cronología
23
L M X J V S D1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
MARZO
L M X J V S D1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
ABRIL
L M X J V S D1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
MAYO
Presupuesto
24
La web “fullwebsystem.com” te da una estimación de presupuesto, teniendo en cuen-ta las características de esta web. El presupuesto es el siguiente:
Conclusiones
25
Este proyecto es un punto de inicio hacia un ámbito tan extenso como es Internet y las páginas webs. La plantilla facilitada por el profesor, sirve como apoyo e iniciativa para abrir un camino hacia el diseño web, tan solicitado y demandado en nuestros días. También se ha podido conocer el software Adobe Dreamweaver, un programa que ayuda a la hora de crear tu web, permitiendo algunas soluciones a las ideas que se tienen en mente. Además el largo plazo para entregar este proyecto, ha ayudado a conseguir unos resultados positivos en la creación de las páginas webs, algo des-conocido hasta entonces.
Bibliografía
26
Libros:
Johann-Christian Hanke. “Cree su página Web (I) ”. Michael S. Karbo. “Cree sus páginas web”.Johann-Christian Hanke. “Introducción a PHP “.Bryony Gomez-Palacio and Armin Vit. ”Guia completa del diseño gráfico : compen-dio visual y reseñado sobre el lenguaje, las aplicaciones y la historia del diseño gráfico”.
Bibliografía en la red:
www.creaciondepaginaweb.net/informacion-pagina-web.htmwww.dugage.com/blog/blog2.html www.adhemas.com/
27