Reconstrucción virtual en el entorno web (google) para la promoción de la escuela

7:32 7:32 PROYECTO FINAL DE CARRERA TÍTULO: Reconstrucción virtual en el entorno web (google) para la promoción de la escuela. AUTOR: Carlos Romero Santos TITULACIÓN: Ingeniería Técnica en Telecomunicaciones, especialidad en Sistemas Electrónicos DIRECTOR: Manuel López Membrilla DEPARTAMENTO: 717, Expresión Gráfica a la Ingeniería FECHA: Febrero 2010 7:32 7:32 TÍTULO: Reconstrucción virtual en el entorno web (google) para la promoción de la escuela. APELLIDOS: Romero Santos NOMBRE: Carlos TITULACIÓN: Ingeniería Técnica en Telecomunicaciones ESPECIALIDAD: Sistemas Electrónicos PLAN: 95 DIRECTOR: Manuel López Membrilla DEPARTAMENTO: 717, Expresión Gráfica a la Ingeniería 7:32 7:32 Este Proyecto tiene en cuenta aspectos medioambientales:    Sí    No PROYECTO FINAL DE CARRERA RESUMEN (máximo 50 líneas) El objetivo principal de este proyecto es la reconstrucción virtual en un entorno web (google) para promocionar la escuela universitaria de Vilanova i la Geltrú. Por un lado este trabajo se basa en el diseño y desarrollo de una página web, escrita en HTML, que pretende identificar cada una de las titulaciones de los nuevos grados. Además, se basa en el diseño y modelaje de los edificios que componen el campus universitario en 3D, para poder mostrar donde se sitúan los edificios principales dentro del campus para su localización. Asimismo, los edificios en 3D serán introducidos en la nueva página web para que los estudiantes y futuros estudiantes puedan orientarse dentro del campus, pudiendo identificar donde tienen que dirigirse y conociendo donde se sitúan los espacios comunes de la escuela. Para la realización de lo anteriormente comentado, se hará un estudio de la estructura a seguir, de las características y tecnologías que contamos para realizar nuestra página con un contenido dinámico. A continuación, se explicará cómo hemos creado nuestra web. Explicaremos como hemos creado nuestros edificios en 3D, como ha sido posible el diseño y el trabajo que nos ha representado conocer su estructura. Por eso, hemos tenido que desplazarnos a realizar fotografías de nuestros edificios. Estas fotografías, nos ayudarán en nuestro modelado y también serán utilizadas para la texturización de nuestros edificios. El resultado final del modelado de los edificios en 3D, se podrán visualizar a través de google utilizando una herramienta suya, Google Earth. También veremos cómo hemos creado nuestro video o visita virtual, gracias a las tecnologías que nos ofrece nuestro software. Finalmente, llegaremos a las conclusiones donde haremos un repaso de los objetivos cumplidos y las dificultades que hemos encontrado en la realización de este proyecto. 7:32 7:32 Palabras claves (máximo 10): Web HTML Modelos 3D Virtual Google Earth Edificios Fotografías Universidad 7:32 7:32 Reconstrucción virtual en el entorno web (google) para promocionar la escuela 6 ÍNDICE 1. Introducción ................................................................................................................ 8 1.1. Objetivos .............................................................................................................. 9 1.2. Motivaciones del proyecto ................................................................................. 9 2. Consideraciones previas ........................................................................................... 11 2.1. Búsqueda de información .................................................................................. 11 2.2. Búsqueda de software adecuado ...................................................................... 12 2.3. Elección del servidor .......................................................................................... 13 3. Herramientas informáticas utilizadas ...................................................................... 14 3.1. Adobe Dreamweaver CS4 .................................................................................. 14 3.2. Adobe Photoshop CS4 ....................................................................................... 15 3.3. Google Sketchup ................................................................................................ 16 3.4. Google Earth ...................................................................................................... 17 3.5. Filezilla ............................................................................................................... 18 4. Diseño y desarrollo de la web interactiva .............................................................. 20 4.1. Estructura .......................................................................................................... 20 4.2. Características ................................................................................................... 22 4.2.1. Servidor FTP .......................................................................................... 22 4.2.2. Esquema web ........................................................................................ 24 4.2.3. Enlaces o hiperenlaces .......................................................................... 25 4.2.4. Aplicaciones y tecnología ...................................................................... 26 5. Implementación de la página ................................................................................... 28 5.1. Creación de una nueva página del portal .......................................................... 29 5.2. Estilo del portal .................................................................................................. 30 5.3. Introducción de las fotografías .......................................................................... 32 6. Descripción de la página .......................................................................................... 33 6.1. Acceso ................................................................................................................ 33 6.2. Página principal .................................................................................................. 33 6.3. Página titulaciones ............................................................................................. 36 7. Modelado de los edificios en 3D ............................................................................. 37 7.1. Optimización de un modelo ............................................................................... 37 7.2. Introducir terreno .............................................................................................. 38 7.3. Modelar estructuras (edificios) ......................................................................... 40 7.4. Texturización ...................................................................................................... 50 7.4.1. Como hacer fotografías ........................................................................ 50 7.4.2. Retocar fotos ........................................................................................ 52 7.4.3. Como colocar textura ........................................................................... 54 7.5. Preparación de los edificios ........................................................................... 59 8. Colgar edificios en 3D ............................................................................................... 60 8.1. Cómo cargar un modelo .................................................................................... 60 8.2. Lo mejor de la Galería 3D .................................................................................. 64 Reconstrucción virtual en el entorno web (google) para promocionar la escuela 7 9. Introducir modelos 3D en la página web ................................................................. 68 9.1. A través de streaming ........................................................................................ 68 9.2. Utilizando el plugin de google Earth .................................................................. 69 10. Conclusiones …………………………………………………………………………………………………………..72 10.1. Objetivos …………………………………………………………………………………………………..72 10.2. Motivaciones del proyecto …………………………………………………………………….…72 10.3. Experiencia personal ………………………………………………………………………………..73 10.4. Futuro de la web ……………………………………………………………………………………...73 11. Dificultades y soluciones ............................................................................................ 74 12. Reflexión medioambiental ......................................................................................... 75 13. Bibliografía ................................................................................................................. 76 Reconstrucción virtual en el entorno web (google) para promocionar la escuela 8 1. Introducción Internet se ha convertido en poco tiempo en la herramienta tecnológica más revolucionaria y poderosa de todas, influyendo en prácticamente todos los niveles de la actividad humana. Las primeras páginas web de internet eran de contenido estático, es decir, simples planos con texto, imágenes y enlaces que llevaban a otra página con otro contenido. El aumento de su popularidad e importancia de la red provocó una evolución y mejora de las páginas, tanto en aspectos visuales como en servicios ofrecidos. Hoy en día, las páginas web son la vía de comunicación que permite establecer la cooperación y colaboración entre una empresa con un cliente, o un gran número de comunidades y grupos de interés por temas específicos. Por eso mismo, internet se ha convertido en el medio de comunicación más extendido en toda la historia de la humanidad. Gracias a esta evolución se pueden incluir en ellas aspectos visuales más llamativos y construcciones virtuales que dan un sinfín de oportunidades. Actualmente contamos con un gran número de páginas y servicios diferentes en la red, pero sin lugar a dudas la más utilizada y popular es Google. Su servicio principal es el de buscador, aunque también ofrece muchos otros servicios. Por ello, este proyecto quiere hacerse un minúsculo hueco dentro de uno de sus servicios llamado Google Earth, donde encontraremos los edificios diseñados y creados. Y al mismo tiempo utilizarlo para realizar nuestro paseo virtual para la promoción de la escuela universitaria de Vilanova i la Geltrú. El proyecto que se llevará a cabo es el diseño y desarrollo de una nueva página web para promocionar la escuela y un modelado en 3D de todos los edificios que componen el campus. Con una finalidad en concreto, que los estudiantes y futuros estudiantes puedan conocer mejor el campus y sus servicios con más facilidad, gracias a las ventajas que ofrece hoy en día internet. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 9 1.1. Objetivos El objetivo de este proyecto se centrará en el diseño y desarrollo de una nueva página web para la promoción de la escuela, a través de la reconstrucción virtual (digital) en 3D de los edificios que componen el campus. Utilizando como plataforma el espacio google e identificando cada una de las titulaciones de los nuevos grados. Además, este proyecto se basará en el modelado de la totalidad de los edificios del campus en 3D, para poder situarnos a través de los edificios principales, para luego introducirlos en la nueva página web. Así que, será de las primeras universidades que estarán representadas en 3D en Google Earth. La página web que se diseñará, se le intentará dar un contenido dinámico para su promoción, proporcionando una información más actual y fomentando la comunicación y participación entre los estudiantes o visitantes de la página. Para que una vez acabada pueda sustituir la página actual de la escuela, si así se decide. Esquemáticamente, los objetivos del proyecto son los siguientes: • Diseño y desarrollo de una página web para promocionar la escuela universitaria. • Modelado de los edificios del campus en 3D, con el mayor realismo posible, utilizando el espacio google. • Incluir los modelos 3D en la página web creada. 1.2. Motivaciones del proyecto La idea principal de este proyecto es diseñar y desarrollar una nueva página web para la escuela universitaria de Vilanova i la Geltrú con un contenido más dinámico. Y modelar los edificios en 3D e introducirlos en nuestra web, para poder situarnos con mayor facilidad a través del campus. Las motivaciones que me han llevado a cabo a la hora de realizar este proyecto, han sido la idea de que los estudiantes y futuros estudiantes puedan ubicarse en el campus dentro de la ciudad de Vilanova i la Geltrú. Pudiendo consultar donde están las aulas, donde tienen que ir para realizar los laboratorios o donde se sitúan los espacios comunes para todos los estudiantes y futuros estudiantes. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 16 Con este programa hemos editado, retocado y creado las fotografías que luego aparecerán en nuestra web. Gran parte de estas fotografías han sido utilizadas para dar textura a nuestros edificios del campus en 3D. 3.3. Google SketchUp SketchUp es un programa informático de diseño y modelaje en 3D para entornos arquitectónicos, ingeniería civil, videojuegos o películas. Así que, nos permite dibujar, crear, ver y modificar en 3D de una forma muy intuitiva. Google SketchUp se diseñó para poder combinar la espontaneidad del dibujo a lápiz, con la velocidad y flexibilidad de los medios digitales actuales. SketchUp es un programa, que además de crear edificios en 3D, nos permite hacer animaciones, crear sombreados, iluminaciones, etc. Todo esto apunta a que es una herramienta bastante potente para el modelaje en 3D. Y al ser propiedad de Google, los objetos creados pueden ser exportados fácilmente a Google Earth. Nos encontramos con un gran número de herramientas, tanto para el dibujo como para el control de la cámara. Menú dibujar. Control de cámara Aquí vemos las herramientas más utilizadas para el diseño de los edificios en 3D. En la parte de la izquierda podemos ver el menú dibujar, solo hace falta clicar en ellos para poder elegir el que más te convenga. En la parte central vemos las herramientas empujar, mover y rotar, para poder dar volumen a nuestro dibujo y moverlo según nuestra necesidad. Por último, en la parte de la derecha encontramos los controles de cámara para poder desplazar la vista tal y como deseamos para su dibujo, el más utilizado es el de orbitar por el juego que proporciona a la hora de rotar la cámara hacia donde tú deseas. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 17 Menú Google Earth Con estas herramientas importaremos el terreno, lo colocaremos y comprobaremos que los edificios queden bien asentados en nuestro terreno debido al desnivel existente que encontramos. Por lo tanto, los edificios creados pueden ser georeferenciados y colocados sobre las imágenes de Google Earth. También, nos da la opción de poder subir a la red nuestros modelos mediante el propio programa y almacenarlos directamente en su propia galería 3D, para que luego podamos verlos en Google Earth, menú de la derecha. Con este programa dibujaremos, crearemos y modelaremos a partir de los datos recopilados (fotografías realizadas, planos, etc), creando así unos modelos a escala que posteriormente serán texturizados. E introducidos en nuestra página web, para que podamos situarnos dentro del campus universitario de Vilanova i la Geltrú. 3.4. Google Earth Este programa conocido por la mayoría de la población, te permite volar a cualquier lugar de la tierra y ver imágenes de satélite, mapas, relieve y edificios 3D. Lo que da lugar a un globo terráqueo virtual muy realista. Es posible introducir el nombre de un hotel, colegio o calle y obtener la dirección exacta, un plano o vista del lugar. Este motor de búsqueda te permite ver imágenes a escala de un lugar específico del planeta. La forma de moverse en la pantalla es fácil e intuitiva, con cuadros de mandos sencillos y manejables. Menú buscar Reconstrucción virtual en el entorno web (google) para promocionar la escuela 18 Google Earth contiene un sinfín de características, como un simulador de vuelo, podemos examinar el fondo del mar, utilizarlo como coordenadas para el GPS, contiene el famoso Street View e incluso examinar otros planetas. Pudiendo guardar los lugares que visites y compartirlos con otras personas. En cambio, nosotros nos centraremos en la opción de ver edificios en 3D. Ya que los edificios creados con Google Sketchup, se podrán visualizar en Google Earth. Antiguamente, tenías que tener instalado el programa Google Earth para poder interactuar con cualquiera de sus características. Por lo tanto, no nos era tan cómodo y rápido, ya que tenías que desplazarte a otra ventana para visualizar lo que querías. En cambio, ahora gracias al plugin de Google Earth podemos visualizar los edificios en 3D desde la misma ventana del navegador. Podremos realizar un recorrido virtual, que posteriormente visualizaremos sin necesidad de cambiar de ventana. Este recorrido virtual nos da la opción de interactuar con los edificios desde la misma página del navegador. Esto hace más fácil y cómodo la integración del programa a la hora de hacerlo visible en nuestra página web. Con este programa podremos visualizar los edificios en 3D creados por Google Sketchup. También se convertirá en nuestro programa para la realización de nuestro video, recorrido virtual o paseo virtual, que luego podremos visualizar en nuestra página web. 3.5. Filezilla Filezilla es un cliente FTP (File Transfer Protocol), protocolo que se utiliza para subir y bajar archivos entre un cliente y un servidor. Este cliente FTP sirve de intermediario entre el ordenador (cliente) y el servidor. Una vez tengamos nuestra página web creada, tendremos que subirla a nuestro servidor web, que nos proporciona el departamento de expresión gráfica a la ingeniería. Por lo tanto, utilizaremos este cliente FTP para realizar esta operación. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 19 Imagen página principal Esta imagen nos muestra, donde tendremos que colocar nuestros datos. Es necesario para realizar esta operación poner el nombre del servidor, nombre de usuario y contraseña, para poder conectarse al servidor. Una vez hayamos conectado con el servidor ftp, el trabajo es sencillo. Pasaremos los archivos que encontremos necesarios para el funcionamiento de nuestra página, como si pasáramos un archivo de una carpeta local a otra. Simplemente tendremos que arrastrar nuestros archivos (ubicados en la parte izquierda de la pantalla, llamado “sitio local”) directamente a la carpeta que queramos al lado derecho, “sitio remoto”, de nuestro servidor. Una vez acabada la transferencia, podremos decir que hemos pasado los archivos con éxito y ya pueden ser visualizados a través de un dominio que nos proporcionará nuestro servidor. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 20 4. Diseño y desarrollo de la web interactiva Nuestra página web se basa en la recopilación de información elemental: servicios ofrecidos por la escuela de Vilanova i la Geltrú, como su estructura y contenido de su web. Antes de empezar el diseño de nuestra web, es necesario hacer una serie de pasos para su buen funcionamiento. Por lo tanto empezaremos definiendo un sitio, el cual nos proporcionará el nombre con el que vamos a trabajar y sus características. Ya que en primera instancia, necesitamos definir donde se encontrarán nuestro archivos locales en nuestro ordenador, para que todo lo que introduzcamos se encuentre en una misma carpeta y pueda ser interpretado por nuestro pc. 4.1. Estructura Cuando hablamos de su estructura, nos referimos a la distribución de las diversas zonas de cada página, para poder simplificar la edición o modificación. Por lo tanto, todas las páginas de nuestro portal se basarán en un único patrón. No obstante, mediante algunas modificaciones, en algunas páginas esta plantilla base permitirá ocultar alguna de sus partes. Esta plantilla base sólo define las zonas o espacios de cada página, las partes fijas e idénticas y las partes en las que se insertará el contenido específico y único de cada página. Todo lo que comporta al estilo, como los colores del texto, barra de menú, tipo y fuente de letra es controlado por un estilo CSS, que más adelante comentaremos. Cada página se dividirá en 5 zonas. Esta división se ha efectuado teniendo en cuenta la finalidad de cada espacio. En la siguiente figura veremos la ubicación de estos 5 espacios: Reconstrucción virtual en el entorno web (google) para promocionar la escuela 21 Estructura de la página A continuación se relacionan las 5 partes de la plantilla con una pequeña explicación. • Cabecera: La cabecera es una parte común, visible e invariable en toda la web. Su contenido está formado por una imagen del logotipo de la UPC de Vilanova i la Geltrú y por otra imagen que muestra una primera visión de los edificios modelados en este proyecto. • Menú: La zona del menú también es visible en todas las páginas, y contiene los botones que nos facilitarán el acceso y la navegación a las principales áreas de la web. Este menú se ha realizado de forma que se pueda añadir, editar y borrar elementos de forma dinámica, desde el propio portal. • Barra lateral: En esta zona se ubicarán los botones comunes para cada página. Dependiendo en la página en la que nos encontremos, veremos unos botones diferentes según la información que deseemos visualizar. • Zona principal: Este es el espacio de la plantilla donde se muestra el contenido propio de cada página. Proporcionando la información necesaria en cada momento. • Pie de página: Espacio que se destinará a colocar información sobre la escuela universitaria de la Vilanova i la Geltrú. Observaremos su dirección, teléfono y mail, entre otros. Cabecera Zona Principal Menú Barra lateral Pie de página Reconstrucción virtual en el entorno web (google) para promocionar la escuela 22 4.2. Características La información que muestra el portal web que se desarrolla en este proyecto, se encontrará guardada en el servidor web del departamento de expresión gráfica a la ingeniería. Toda esta información se tiene que crear, añadir, editar o borrar a través del programa para el diseño de nuestra página. Esta herramienta nos proporciona un control sobre nuestra página, así que cualquiera que acceda a ella no pueda modificar el contenido. 4.2.1. Servidor FTP Como ya hemos comentado anteriormente, antes de empezar a diseñar nuestra web, necesitamos hacer una serie de pasos, los cuales nos proporcionarán un sitio para nuestras páginas. Debemos crear un sitio web para poder alojar nuestra página, inicialmente la guardaremos en nuestro ordenador en alguna carpeta local, para que nuestro pc pueda trabajar con mayor comodidad a la hora de necesitar cualquier fichero o imagen. Siendo más sencilla y más rápido la interpretación por parte de nuestro ordenador. Encontramos dos maneras claras de realizar una conexión con el servidor ftp, que nos proporcionará el departamento de expresión gráfica a la ingeniería. Mediante el programa para el diseño de la página, dreamweaver, ya que integra una función específica para realizar este tipo de procedimiento, pero que no resulta muy fiable. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 23 Configurador servidor Y mediante un software externo, como es filezilla, que se encarga de pasar los archivos que tú elijas de una carpeta local a otra del servidor. Software filezilla Siempre teniendo que colocar los datos correctos del servidor, nombre de usuario y contraseña. En el caso de subir la página por dreamweaver, necesitamos colocar el nombre del sitio para que nuestro ordenador pueda relacionarlo con mayor facilidad. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 24 Llegados a este punto, nuestro servidor nos proporciona un dominio, una dirección, con la que podemos visualizar el portal web creado. La página con la que inicialmente trabajaremos, es nuestra página principal, llamada index.html, donde estará ramificará a otras dependiendo lo que queramos visualizar en ella. Utilizará una estructura, la cual siempre nos permitirá estar interconectadas una con las otras. Consiguiendo así, una mejor navegación y rapidez a la hora de cargar nuestra página en concreto. 4.2.2. Esquema web En este apartado, queremos hacer referencia al esquema típico de una web, creado en HTML, ya que la finalidad de la creación de nuestra web será la promoción de la escuela politécnica superior de la ingeniería de Vilanova i la Geltrú. Por consiguiente, observamos el esquema establecido en cada página web, donde entre los parámetros <html> y </html> encontramos la definición de la página propiamente dicha. En el bloque delimitado por <head> y </head> se establecen ciertas características de la página, tales como el título, la fuente, el color empleado, las diferentes opciones en los enlaces, etc. De estas características de la página, la única que es obligatoria declarar es el título, entre <title> y </title>. Por último encontramos los parámetros <body> y </body>, entre los cuales se encierra toda la información que el navegador debe mostrar. Esquema web Reconstrucción virtual en el entorno web (google) para promocionar la escuela 25 Dentro de este esquema, nos encontramos con los elementos <a href> que se usa para describir enlaces y <h1> que nos muestra que se utiliza para encabezados o títulos. Definimos así, nuestro esquema para cada web, con una particularidad, que estas páginas siempre tendrán algunos elementos en común, como la cabecera. Ya que crearemos una cabecera fija e invariable para todas las webs. 4.2.3. Enlaces o hiperenlaces Debemos hablar de enlaces o hiperenlaces, porque es la manera que tenemos de llamar a otra página u otra información en concreto. Crear o decidir donde, en que frase, palabra o imagen, queremos nuestro enlace no resulta complicado. La complicación se hace notable en el momento de enlazar unas páginas con otras, ya que si no lo realizamos con éxito, cuando cliquemos al enlace que queremos nos puede ocurrir que no visualicemos la información que deseemos. Debido a que no se ha cargado la página en cuestión o bien que simplemente no haga nada, ya que el enlace que hemos elegido para esa frase, palabra o imagen no estuviera bien definido. Menú hipervínculo o enlace Una vez definido correctamente el vínculo o enlace, podemos elegir entre varias opciones, ya sea que se cargue en la misma página o bien abrirla en otra totalmente independiente para su visualización. Tenemos la opción de colocar un texto a este vínculo, que nos mostrará al pasar el mouse por encima, antes de clicar en él. También es posible crear enlaces de correo electrónico, éste nos servirá para que alguien que esté navegando en nuestra web, pueda ponerse en contacto con nosotros. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 32 5.3. Introducción de fotografías Las imágenes que hemos introducido en nuestra web, las hemos obtenido de nuestra cámara digital, ya que nos hemos tenido que desplazar alrededor de todo el campus de la universidad para realizarlas. Algunas de estas imágenes las hemos utilizado en nuestra propia web. En cambio, otras serán utilizadas para el modelado de los edificios en 3D, tema que trataremos más detalladamente. Nuestra web, para la inserción de imágenes, admite varios formatos. Tipo de formatos Haciendo referencia a la extensión psd, nos encontramos que son generadas con photoshop, software de la misma familia que dreamweaver, nuestro diseñador de páginas webs. Así que, nos da una serie de ventajas respecto las otras extensiones, ya que es posible su modificación, sin necesidad de cargar la imagen otra vez. En nuestra web, hemos introducido imágenes con extensión jpg, debido que más adelante no consideramos la posibilidad de modificarlas, ya que solo queremos dar a conocer nuestras instalaciones y edificios. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 33 6. Descripción de la página Este apartado se centrará en la descripción de nuestra web, así como sus otras páginas, donde encontraremos una descripción de las posibilidades y servicios que encontramos en nuestra escuela universitaria de la Vilanova i la Geltrú. 6.1. Acceso En primer lugar hacer referencia a que nuestra web no tendrá ningún tipo de restricción a nuestros usuarios, ya que únicamente se proporciona información a los estudiantes y futuros alumnos. Servirá para consultar una serie de datos expuestos, diferenciados para cada titulación, para facilitar tanto la movilidad del estudiante por el campus como para conocer los servicios ofrecidos por esta escuela. 6.2. Página principal La página principal o index.html, es la primera que aparece cuando accedemos a nuestro portal, donde se exponen todas las opciones relacionadas con las titulaciones universitarias ofrecidas por la UPC de Vilanova i la Geltrú. Como contenido estático tenemos, en la parte superior, la imagen de la cabecera constituida para el logotipo y otra imagen creada por nosotros (donde mostramos una primera visión de los edificios en 3D modelados). En la parte inferior, en el pie de página encontramos los datos de la escuela universitaria. Además estas partes son independientes, ya que aparecen invariables en cualquier página de la web. A continuación, debajo justo de las imágenes encontramos el menú principal, con una serie de botones desplegables que enlazan con las diferentes secciones y servicios que se ofrece. Esta parte también la incluimos como contenido estático, ya que será común en toda la web. En nuestro caso, en la página principal no hacemos referencia a la barra lateral, ya que exponemos todo el contenido en un mismo bloque. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 34 Así que, en el centro de nuestra página, nos encontramos con una fotografía de la universidad, que nos muestra donde se encuentra su entrada principal. A su derecha, tenemos una pequeña presentación o explicación de lo que encontraremos y podremos realizar dentro de la escuela politécnica superior de ingeniería. Debajo de nuestra fotografía, vemos unos enlaces que nos proporcionarán más información de la universidad. Uno de ellos nos llevará directamente a la presentación oficial de nuestro rector, otro a una galería de imágenes de nuestra escuela. Por último, un enlace que nos dará la posibilidad de visualizar los edificios del campus en 3D, a través de una visita virtual, para poder ubicarnos y conocer mejor su localización. También encontramos una serie de enlaces, tanto a izquierda, con texto, como a derecha, con imágenes, que nos acercarán la posibilidad de obtener más información de la escuela y de los servicios ofrecidos por ésta. No tenemos que descuidar, un listado de la agenda y de las últimas noticias ubicadas en el centro de nuestra página relacionadas con la escuela universitaria, que nos proporciona una mayor información y el poder acercarnos a los diferentes actos en que se relaciona nuestra universidad con otras entidades. Esta lista se encuentra ordenada de manera que las entradas más recientes son las primeras. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 35 Página principal Reconstrucción virtual en el entorno web (google) para promocionar la escuela 36 6.3. Página titulaciones Mediante el correspondiente botón de menú, dentro de estudios, podemos acceder a las titulaciones de nuestra web. No hay más contenido estático que la cabecera y el pie de página. Menú titulaciones En esta primera hoja, aparecen la totalidad de las titulaciones universitarias existentes, donde podemos observar los nuevos grados que se imparten en la escuela. Dentro de cada titulación nos encontraremos con información necesaria de cada una por separado. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 37 7. Modelado de los edificios en 3D A la hora de empezar a modelar nuestros edificios en 3D, tenemos que tener muy claro la estructura de estos, para poder realizar un dibujo con el mayor realismo posible. Para poder hacernos a la idea, toda imagen, plano o fotografía, nos es útil para este proceso. Por lo tanto, lo primero que tenemos que realizar es una recopilación de datos elementales de nuestros edificios del campus de la escuela universitaria de Vilanova i la Geltrú. Todo esto, conlleva a que debemos tener en cuenta la localización de cada uno de los edificios a la hora de modelarlos, ya que serán geo-localizados. Para poder representarlos con exactitud, tendremos que conocer sus medidas correctas. En nuestro caso, trabajaremos con nuestros programas simultáneamente, debido que cada uno de ellos nos proporciona en un preciso momento unas características en concreto. Las cuales utilizaremos para nuestro modelado en 3D. 7.1. Optimización de un modelo Antes de empezar a realizar cualquier operación para el modelado de nuestros edificios, tenemos que partir de unas bases que nos comenta google. Porque el resultado final, queremos mostrarlo en Google Earth y en nuestra propia página web, ya que pasa por un proceso de revisión interna antes de incluirlo en la capa. Para ello, tenemos que conocer una de las claves más importantes para la optimización de nuestros modelos. Esta clave consiste en reducir la complejidad del modelo al mínimo, ya que se encuentra directamente relacionada con el número de polígonos (números de caras) que tenga. Esto nos ayudará a reducir el tamaño del archivo. Otras de estas claves que tenemos que tener en cuenta son: • Mantener siempre la precisión en la escala y su localización. • Llevar el foco sobre detalles importantes y que permitan su identificación. • Mostrar detalles pequeños por medio de las texturas de fotografías. • Hacer el modelo bonito para su visualización. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 38 Si tenemos en cuenta, todas estas claves a la hora de realizar nuestro proyecto, no encontraremos ninguna restricción en visualizar nuestros modelos en 3D en Google Earth. 7.2. Introducir terreno En primer lugar, necesitamos una base o terreno para empezar nuestro diseño de los edificios. Gracias a la compatibilidad existente entre los programas empleados, ya que pertenecen a la misma familia, podemos realizar nuestro trabajo con mayor comodidad. En este caso, empezaremos a trabajar con estos dos programas simultáneamente. Necesitamos tener abierto Google Earth y Google Sketchup. Por un lado, tendremos que visualizar el terreno donde se encuentra el edificio que queremos empezar a modelar y por otro lado, importaremos este terreno a Google Sketchup, nuestro software para el diseño y modelado. Para este proceso necesitaremos utilizar una herramienta que se encuentra dentro del menú google. En este caso Obtener vista actual. Una vez hayamos importado el terreno en nuestro software para el diseño y modelado, debemos modificar una serie de elementos antes de continuar. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 39 Terreno importado En la imagen anterior, podemos observar la biblioteca y la residencia universitaria y un poco más abajo el edificio principal de la universidad, que no vemos en su totalidad. Primero escogeremos uno de ellos para empezar su modelado y cuando acabemos con éste, continuaremos con el siguiente. Hacemos esto, porque cada edificio se tendrá que subir a Google Earth por separado, ya que Google nos exige unas reglas mínimas para que éste sea visualizado correctamente. Una de ellas, como hemos comentando anteriormente, es no poder superar un límite de espacio, debido a la gran cantidad de edificios que contiene y muestra nuestro software. Haciendo referencia a la imagen anterior, observamos que el terreno se nos presenta en blanco y negro. Esto es debido, a que por defecto nuestro programa nos lo coloca así, aunque es posible colocar el terreno en color. Pero no nos es necesario utilizar el color para realizar nuestro diseño, porque una vez creado, volcaremos el edificio y lo visualizaremos con color. Por otro lado, encontramos las coordenadas que no coinciden con el edificio que vamos a modelar, así que tenemos que colocarlas correctamente para poder empezar nuestro trabajo. Una vez hemos introducido el terreno deseado y colocado nuestras coordenadas, empezaremos a diseñar nuestro edificio. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 40 7.3. Modelar estructura (edificios) Lo primero que tendremos que definir, son las unidades en las que queremos trabajar. En nuestro caso la unidad elegida han sido los metros, para mayor comodidad, ya que dicha medida nos facilita las mediciones de los edificios debido a su gran longitud. Para empezar nuestro diseño, utilizaremos el menú dibujo. Con el que podremos dibujar nuestra base, para empezar a elevarlo. Menú dibujo En el menú dibujo encontramos la opción de crear líneas, cuadrados, redondas, arcos, etc. Principalmente utilizaremos estas 4 primeras opciones de este menú, y con estas crearemos todos los conjuntos de líneas necesarias para construir nuestros edificios tridimensionales. Tenemos que tener en cuenta, que nuestro edificio tiene que estar a escala, así que gracias a este terreno podemos delimitar el ancho del edificio en cuestión, dibujando su silueta. En cambio, hacer referencia de la altura es un poco más difícil, ya que depende de las plantas que tengan. Nosotros nos referenciaremos gracias a las fotografías realizadas, que explicaremos en otro capítulo más adelante. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 41 Imagen con edificios a escala En esta imagen, podemos comprobar las coordenadas correctamente colocadas. Para dibujar la silueta o base de nuestros edificios, simplemente tenemos que seguir los bordes en cuestión o sabiendo las medidas exactas de nuestros edificios, teniéndolas que introducir en una barra para ello. Si quisiéramos dibujar redondas tendríamos que poner la medida de nuestro radio. Introducir medidas exactas Como hemos descrito anteriormente, podemos introducir las medidas en una barra específica. En este caso, las medidas tienen que ser separadas por punto y coma. Estas en concreto hacen referencia a nuestra residencia. Una vez hayamos hecho nuestra base, pasaremos a levantar el edificio. Para ello utilizaremos el menú modificación, que se compone de empujar, mover, rotar, etc. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 48 Modelo de neápolis Modelo de la biblioteca Reconstrucción virtual en el entorno web (google) para promocionar la escuela 49 Modelo de la residencia universitaria Este programa nos proporciona una ayuda bastante significativa. Si observamos el modelo de neápolis, veremos que aparece un muñeco. Este se encuentra ahí, para proporcionarnos una ayuda y facilitarnos el trabajo a la hora de colocar nuestra altura. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 50 7.4. Texturización Una vez realizados todos los modelos tridimensionales a escala, pasamos a aplicarle materiales y texturas, tenemos diferentes posibilidades: crear las texturas a partir de imágenes reales, que implica el problema de desplazarnos a hacer fotos de gran resolución de las superficies. O bien aplicando las texturas del panel materiales, que nos proporciona unos materiales predeterminados (como ladrillos, piedra, madera, etc.). Ya que estamos intentando que nuestros modelos sean lo más reales posible, hemos decidido decantarnos por desplazarnos y realizar fotografías para poder obtener unos resultados más óptimos. Así que, hemos de realizar unas buenas fotografías de nuestros edificios y sobre todo con buena calidad. 7.4.1. Como hacer fotografías Es importante hacer una gran cantidad de fotografías, para cubrir todas las caras del edificio y en medida de lo posible evitar objetos ajenos (como árboles, coches, personas, etc.). Estos objetos ajenos pueden borrarse mediante el software, adobe photoshop, pero cuanto menos tengamos que editar las imágenes, más rápido será nuestro modelado y mejor quedará nuestro modelo. En nuestro caso, ha sido difícil evitar objetos a la hora de la realización de fotografías, ya que alrededor de la escuela universitaria de Vilanova i la Geltrú encontramos una gran cantidad de objetos (sobretodo árboles y coches). Porque se encuentra en una zona céntrica y de gran influencia de paso, debido a la proximidad de la estación de renfe de Vilanova i la Geltrú y la estación de autobuses. Imagen que enseña cómo hacer fotografías Reconstrucción virtual en el entorno web (google) para promocionar la escuela 51 Teniendo en cuenta que tenemos que texturizar nuestros edificios, debemos que realizar un gran número de fotografías desde todos los ángulos, tal y como muestra la imagen. Ahora trataremos de explicar cómo debemos tomar nuestras fotografías, para utilizarlas para su texturización. Estas fotografías muestran su forma o estructura, que hemos utilizado previamente para su modelado. Para empezar, debemos obtener nuestras fotografías lo más rectas posible, ya que después las colocaremos como nuestras texturas. Podemos unir las fotografías, para ello tendremos que tomar fotografías de las esquinas. Como hemos comentado anteriormente, en la medida de lo posible tendremos que evitar objetos ajenos. Es necesario hacer fotografías contextuales (vistas alejadas que muestren la forma y la estructura del edificio), así podremos hacernos la idea de su forma o estructura para su modelado. También podemos acompañarlas con las fotografías rectas realizadas. Por último, debemos asegurarnos que tomamos fotografías de todas las caras (paredes exteriores) del edificio como del interior (patios interiores) para su buena texturización. Y sobre todo, hacer varias fotografías de cada fachada desde ángulos diferentes. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 52 7.4.2. Retocar fotografías Una vez realizadas todas las fotografías que nos muestran como son nuestros edificios del campus universitario, tendremos que modificarlas para su uso como textura. Para ello, utilizaremos el programa Adobe Photoshop. El cual nos proporciona todas las herramientas necesarias para su modificación. Lo primero que tenemos que hacer, es abrir la foto que queremos modificar para poder editarla. Imagen de la puerta de las aulas En este caso, nos encontramos con un árbol en medio de las puertas que dan acceso a las aulas del edificio B o edificio nuevo. Después de utilizar varias herramientas, que nos proporciona este software, como las herramientas clonar, copiar, utilizando la paleta de ajustes, etc. El resultado es el siguiente: Reconstrucción virtual en el entorno web (google) para promocionar la escuela 53 Imagen retocada Hemos eliminado el objeto, un árbol en este caso, que nos molestaba para poder aplicar nuestra textura. Este método, tendremos que utilizarlo para todas las fotografías realizadas, donde nos encontremos un objeto que nos sea molesto para visualizar nuestros edificios. Obteniendo así unas superficies limpias y claras de nuestros edificios. Este proceso nos resulta bastante costoso, dado que existe una gran cantidad de objetos que aparecen en nuestras fotografías. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 54 7.4.3. Como colocar texturas Una vez hemos editado nuestras fotografías, eliminado todo objeto que nos era molesto. Pasaremos a colocar las fotografías como textura en nuestros edificios modelados. Este proceso no nos resulta muy complicado, pero dado que contamos con una gran cantidad de caras en nuestros modelos, el tiempo a realizar esta operación es bastante duradero. Para empezar, tendremos que importar nuestras fotografías o imágenes como si se tratara de una textura. Imagen importar fotografía Como apreciamos en esta imagen, tenemos que elegir la fotografía que queremos aplicar y marcar la opción de “usar como textura”, para que podamos tratarla como tal. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 55 Imagen elegir extensión Antes de ello, tenemos que tener claro, con que extensión trabajaremos, ya que podemos importar imágenes desde varios programas, según con lo que hayamos trabajado anteriormente. Como nosotros hemos utilizado photoshop, tendremos que elegir “imagen JPEG (*.jpg)”. Una vez elegido la extensión pasaremos a colocar nuestra textura en la cara deseada. Deberemos clicar en una esquina de nuestra cara y estirarla hasta la esquina opuesta y volver a clicar. Nuestra fotografía se ha convertido en una textura sobre la cara deseada. En muchas ocasiones es necesario cambiar la posición de la imagen, ya que no siempre coincide nuestra textura con la totalidad de nuestra cara. Imagen situar textura Por lo tanto, tendremos que posicionarla correctamente para su visualización, ayudándonos de unos alfileres que nos son proporcionados por el mismo programa. Accederemos a la opción de situar, tal y como observamos en la imagen de arriba. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 56 Imagen colocar textura Una vez colocada correctamente, ya podremos importar otra imagen para su colocación en otra cara. Nos encontramos con un impedimento en las superficies redondas, no planas, ya que no se pueden situar igual que todas. Para su colocación nos ayudaremos de nuestro editor de materiales para darle unas medidas en concreto, pudiendo realizar la edición como nos sea necesario. Imagen editar textura Reconstrucción virtual en el entorno web (google) para promocionar la escuela 57 Después de colocar todas las caras, como resultado final obtendremos nuestros modelos (edificios), totalmente texturizados. Imagen aulas y centro tecnológico texturizado Imagen biblioteca y residencia universitaria texturizadas Reconstrucción virtual en el entorno web (google) para promocionar la escuela 64 8.5. Lo mejor de la galería 3D Aquí aparecerán nuestros edificios una vez hayan sido aceptados nuestros modelos. Google tiene unos logotipos para representar la aceptación o no del material enviado, uno de ellos específico por si existe algún problema que impide colocarlos en Google Earth. Imagen estado de los edificios Estos son los tres estados que encontramos dentro de la galería 3D. Empezando de izquierda a derecha, encontramos el estado de espera, que aún no ha sido inspeccionado. En el centro, estado con problemas (debido a alguna textura errónea o modelo incompleto) y estado incluido en la capa, que quiere decir que esta aceptado y podemos verlo en Google Earth. Imagen de mis modelos Estos son todos los modelos que contienen mi perfil, los aceptados y los no aceptados. Ya que hemos realizado algunas pruebas y hemos tenido que modificar algunos detalles antes de que aceptaran los modelos. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 65 Imagen biblioteca y residencia aceptado Imagen centro tecnológico y aulari aceptados Reconstrucción virtual en el entorno web (google) para promocionar la escuela 66 Imagen neápolis aceptado Imagen EPSEVG aceptado Reconstrucción virtual en el entorno web (google) para promocionar la escuela 67 Aquí mostramos los cuatro edificios que hemos subido, que han sido aceptados por google. Por lo tanto, ahora podemos visualizarlos en Google Earth desde cualquier parte del mundo. Desde cualquier ordenador sin ningún tipo de problemas. Imagen de los 4 edificios en Google Earth Reconstrucción virtual en el entorno web (google) para promocionar la escuela 68 9. Introducir modelos en 3D en la página web Ahora que hemos conseguido que nuestros edificios se puedan ver en Google Earth, tenemos que poder verlos en nuestra página web. Para eso tendremos que realizar un video o paseo virtual, para poder mostrar nuestro campus. Por eso, hemos barajado algunas opciones para su edición que ahora comentaremos con más detalle y explicaremos por cual nos hemos decantado. 8.3. A través de streaming Este método es muy conocido entre la población, ya que podemos encontrarnos con un video en cualquier página que visitemos. Como ya sabemos, para insertar un video en nuestra página, lo primero que tenemos que hacer es editarlo. La manera más común en la que estos videos son enseñados o reproducidos, normalmente suele ser con el reproductor “Windows media player”, por lo tanto con una extensión tal como wmv. Ya que es el reproductor que contiene por defecto todo sistema operativo. Para su edición, necesitamos una herramienta que nos proporcione este tipo de acciones, tales como camtasia (que graba lo que ve en la pantalla) o el mismo Google Earth Pro (de pago) donde puedes realizar estos videos. Una vez realizado, tenemos que pasar a colocarlos en nuestra página. La manera más común es a través de unas cuantas líneas de código, donde podemos poner que características queremos que nos enseñe. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 69 Imagen código Aquí nos muestra, la manera para enseñar nuestro video. Encontramos unas características como reproducción automática, que nos enseñe los controles, ver la barra de estado. Pero también es posible mostrar alguna otra característica más, como “loop” que se ejecuta otra vez el video cuando este finaliza. De esta manera, tendremos nuestro video colocado en nuestra página web listo para su visionado. 8.4. Utilizando el plugin de Google Earth Actualmente, el método más utilizado para hacer referencia a la ubicación de una institución, empresa, etc, era utilizando el plugin de Google Maps. Por suerte, ahora contamos con un método que es bastante nuevo e innovador para todos, el plugin de Google Earth, ya que desde hace bien poco ha sido desarrollado por google. Lo primero que tenemos que realizar, es la edición de nuestro video el que queremos mostrar. En este caso no necesitamos realizarlo con otro programa complementario, ya que el mismo Google Earth nos proporciona esta herramienta. Una vez realizado el video es necesario subirlo a un servidor, el cual nos proporcionará un dominio donde lo tenemos ubicado. Después simplemente tenemos que dirigirnos a una página web, que nos indica google. La cual nos proporcionará el código que necesitamos para poder verlo en nuestra propia página. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 70 Imagen obtener código Esta imagen nos enseña las diferentes características que podemos elegir, como los bordes que queremos visualizar alrededor de nuestro video. Si queremos que nuestro video se empiece a reproducir automáticamente, que nos enseñe los controles, los edificios en 3D, el terreno, carreteras e incluso los bordes y etiquetas colocadas por nosotros. Una vez elegidas las características, debemos colocar nuestra ruta o dominio donde nos lo indica. Esta aplicación, nos da la opción de poder visualizar los cambios que hemos realizado antes de obtener nuestro código, el cual luego colocaremos en nuestra página. Después de comprobar que todo este correcto, pasaremos a colocar el código generado en nuestra propia página para su visualización. Este método, nos enseñara los edificios tal y como los podemos ver en Google Earth, pudiendo interactuar con ellos. Así que, para ver este video no hace falta que tengamos instalado Google Earth en nuestro ordenador, pero si tendremos que instalar este plugin para su visualización, cada vez más utilizado en la actualidad. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 71 Las dos maneras comentadas anteriormente, son muy validas para enseñar nuestro video en nuestra web. Pero nos decantaremos por esta última, utilizando el plugin de Google Earth, ya que nos da la opción de poder interactuar con los edificios creados en 3D. Cuando comentamos que podemos interactuar con los edificios en 3D, nos referimos a que mientras está reproduciéndose el video, podemos pararlo y mover nuestra vista como si de Google Earth se tratara. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 72 9. Conclusiones 9.1. Objetivos La finalidad de este proyecto era crear una página web dinámica para su promoción, donde teníamos que diferenciar claramente las titulaciones que se imparten hoy en día en la escuela universitaria de Vilanova i la Geltrú. Además, otro trabajo a realizar era diseñar y modelar los edificios del campus en 3D, para poder conocer con más detalle el campus y poder orientarse con mayor facilidad. Estos edificios en 3D, tenían que ser visibles en nuestra página web para poder ser consultados por los alumnos y futuros estudiantes. Este objetivo se ha cumplido, ya que nuestra página contiene toda la información deseada, tanto a nivel de estudios como la integración de nuestros edificios tridimensionales. Como se ha comentado anteriormente, es posible la modificación de esta página sin tener grandes conocimientos de programación, para poder tenerla siempre actualizada, ya que permite una gestión de forma muy visual e intuitiva. 9.2. Motivaciones del proyecto Como ya hemos comentado, las motivaciones del proyecto son bastantes claras. Ya que la idea que teníamos sobre el diseño y desarrollo de una nueva web y el modelado de nuestros edificios del campus en 3D han sido cumplidas con éxito. Estas motivaciones surgen a partir de hablar con nuestro profesor, para que los estudiantes y futuros alumnos puedan ubicarse sin mucha complicación por el campus de la escuela, obteniendo información de donde se tienen que desplazar a realizar sus clases o conocer donde se sitúan los espacios comunes. Ya que eso, facilita la movilidad alrededor del campus. También, hemos diferenciado las titulaciones de los estudios cursados por separado, para que podamos encontrar cualquier información siempre en la misma página de la titulación en cuestión. Reconstrucción virtual en el entorno web (google) para promocionar la escuela 73 9.3. Experiencia personal Como experiencia personal, lo primero que me ha aportado este proyecto ha sido el aprendizaje de los lenguajes de programación y como modelar edificios tridimensionales. Conocer todas las posibilidades que permite este tipo de trabajo. Fuera del concepto de los conocimientos, me ha enseñado como planificarme y suministrarme el tiempo para nuestro trabajo. Como conclusión, me gustaría mencionar que he puesto todo mi esfuerzo, tiempo y empeño para la realización de este proyecto. Por último, me gustaría dar las gracias a mi familia que me han dado todo el soporte necesario para seguir adelante, en especial a mi novia por su paciencia y dedicación a mi lado. 9.4. Futuro de la web Este proyecto se ha realizado con éxito, sólo nos queda decir que no conocemos cual será el futuro de esta web, ya que la EPSEVG (nuestra escuela) cuenta con un gran grupo de trabajo que se encarga de actualizar constantemente la web, para que funcione sin problemas. Así que, solo comentar que si algún día nuestra web se viera expuesta como web principal de la escuela, siempre actualizada y con algunas mejoras añadidas, sería una gran satisfacción.