Í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