Embed Size (px)
Citation preview
54
Capítulo 3:
Desarrollo e Implementación.
55
3.1.- Página web para la empresa Tejuino.
En el mundo, el crecimiento de las organizaciones depende en gran medida, de las
búsquedas y posicionamiento en nuevos mercados y para esto las páginas web, toman
poder como herramienta fundamental en el logro de resultados, dentro de un entorno
competitivo globalizado.
Tejuino ha sido nominados a los premios a! diseño en la categoría Diseño Web con 2
proyectos. También hemos recibido menciones en el sitio Make Better Websites, que
nombra cada día las mejores páginas en distintos paises, asi como reconocimientos por
parte de CSS Design Awards como “Site of the day”.
La empresa Tejuino es una empresa que se dedica al desarrollo de aplicaciones
móviles, posicionamiento web y diseño gráfico, en los cuales la empresa Tejuino ha
logrado ser merecedor de los premios !a que por su diseño original y novedoso se les
otorga a los mejores sitios web.
Para aceptar un proyecto, la empresa Tejuino se reune con el cliente para hablar sobre
los aspectos y funciones de la página web, se toma nota de las funciones que el cliente
quiere para su sitio web y entonces se acuerda una fecha (1 semana después de la
reunión, si es posible), para volverse a reunir y entregar un avance (boceto) del sitio
web que el cliente pidió en formato psd, si algo del “boceto” no le gusta al cliente se
toma nota y se vuelve a programar una reunión para ver el boceto ya terminado con las
correcciones que el cliente pidió y una vez que el cliente lo acepta, se programa otra
reunión mientras que el proyecto es pasado al área de desarrollo web para desarrollarlo
y mostrarselo al cliente en la siguiente reunión.
Una vez que el cliente le dice a la empresa como quiere su sitio web, los diseñadores
de Tejuino hacen un boceto basado en lo que la empresa realiza y con los
requerimientos y funciones de la página que el cliente pidió, entonces se vuelve a reunir
la empresa con el cliente para mostrarle el boceto que los diseñadores crearón, el
cliente realiza correcciones al boceto (si es el caso), ya que es aceptado el diseño por
parte del cliente, éste pasa al área de programación en donde el archivo psd es tomado
como guía y mediante un editor de textos y diferentes lenguajes de programación se
extrae infromación del archivo photoshop (medidas de cada sección, imágenes y
tipografías) para recrear el diseño hecho en photoshop a una página web.
Para crear el sitio web que el cliente quiere y como los sitios web que la empresa
Tejuino crea son responsivos (se adaptan al tamaño de la pantalla de donde se esté
visualizando el sitio web) se hacen 3 diseños de la página; móvil, Ipad y escritorio. De
esta manera se entregan 3 psd (archivo de photoshop) en donde como se dijo
anteriormente se extrae las medidas de cada sección de la página, las imágenes y el
formato del texto.
56
3.2.- Maquetación web
El proceso de maquetación web es la transformación del diseño de un producto web en
un conjunto de archivos (html, css, js) capaces de ser reproducidos por los navegadores
web.
La maquetación web es el proceso en el que el prototipo gráfico también denominado
«layout» (con los requisitos estructurales y estéticos definidos y aprobados en un
análisis inicial) pasa a transformase en código html, css y js (estándares web) para que
los navegadores puedan interpretarlo correctamente. [24]
3.2.1.- Cómo podemos editar los archivos web
La edición de los archivos web y su base de html se realiza mediante el uso de editores
de texto básico como: Notepad++ o UltraEdit, que nos permiten escribir código sobre un
documento en blanco. [24]
Para poder maquetar un documento web con este tipo de editores necesitaremos tener
amplios conocimientos en html y ciertas nociones de programación. Para facilitar este
proceso existen los denominados editores gráficos de html, que nos permiten maquetar
un documento web basado en estándares sin necesidad de teclear ni una línea de
código mediante el uso de un entrono gráfico de trabajo.
Uno de los editores gráficos html más utilizado a nivel profesional es: Adobe
Dreamweaver.
3.2.1.1.- Cómo debemos planificar el proceso de maquetación web
1. Estructura una retícula (visible o invisible) capaz de mostrar los contenidos de la
web: a la hora de plantear una maquetación web debemos fijar unas zonas de
trabajo que soporten la estructura de contenidos de nuestro sitio web y generar
los recursos necesarios que faciliten la futura carga de contenidos. Un error muy
frecuente es plantear una maquetación estática sin pensar en las necesidades
reales de la estructura de contenido. En estos casos, al introducir más o menos
elementos de los inicialmente planteados se produce una desmaquetación del
documento que deteriora su representación.
2. Separa la presentación del contenido: es muy importante, para facilitar tanto el
proceso creativo como el futuro mantenimiento del sitio, separar el contenido y
las funcionalidades de la web de los archivos que definen las propiedades
gráficas (css). Además, este proceso optimiza la velocidad de carga de la web y
permite la personalización del sitio según necesidades de los usuarios.
57
3. Utiliza estándares en desarrollo de la maqueta: para una correcta representación
de un documento web se recomienda el uso de los estándares web (conjunto de
recomendaciones lideradas por la W3C) que nos permiten mostrar la información
de forma universal y robusta y poder acceder al mayor número de usuarios
independientemente del dispositivo o la tecnología que usen. [24]
3.2.1.2.- Los estándares mas utilizados son:
HTML/XHTML: para generar el código del contenido.
CSS: para definir la presentación gráfica de la maquetación.
JS (JavaScript): para mejorar la interacción de sus elementos.
En la pantalla 15 se puede observar que apartir de un diseño dado en photoshop y con
la herramienta regla se puede trazar la linea tal y como se ve en la imagen y de esa
manera se extrae la medida del ancho y alto como se indica en el recuadro verde en la
imágen para posteriormente tomar esos valores y marcarlos la hoja de estilos css
correspondiente para crear el diseño web identico al del archivo psd.
15 Medida de Photoshop
58
En la pantalla 16 se muestra que usando la herramienta de texto se puede posicionar
en el texto y sacar la fuenta, tamaño del texto y tipo de letra para posteriormente aplicar
el formato en una hoja de estilos y de esta manera dejar igual el sitio web.
En la pantalla 17 se puede apreciar el estilo del formato que fué tomado del archivo
photoshop en el cual se le aplica el mismo formato al del archivo psd, en el cual se le
agrega el color, tamaño y tipo de letra.
17 Estilo Css
16 Formato
59
3.2.2.- Proyecto MyMonchis
El tiempo en la realización en su mayoría fue desarrollar pantallas de páginas web,
haciendo todas las páginas web creadas con diseño responsivo, para los diferentes
dispositivos en los que se puedieran visualizar las páginas así como también en
algunas versiones de internet explorer ya que es el navegador con el que más se tiene
problemas.
Tour
En la Pantalla 18 se puede apreciar la pantalla de tour del proyecto MyMonchis, ya que
los usuarios no estan acostumbrados a convivir con este tipo de páginas, se les hizó
este tour para dar instrucciones de como pueden ellos desplazarse por la página y
navegar en ella al 100%.
En la pantalla 19 se puede ver el código html de la pantalla 18.
18 img Tour
19 Código HTML
60
20 Código CSS
En la pantalla 20 se puede observar el CSS de la pantalla 18.
Como se puede observar en la pantalla 21 del proyecto MyMonchis en el cual si se
observa el recuadro rojo, se puede observar 2 filtros de busqueda en los cuales de
puede realizar una búsqueda por ciudad o por tipo de comida y dependiendo lo que
escoja, se mostrarán los restaurantes con el filtro que se halla seleccionado
previamente.
21 img MyMonchis 1
61
En la pantalla 22 se puede apreciar un recuadro verde el cual recalca el área en donde
se verán reflejados los resultados de la búsqueda que se realizó en el filtro, de manera
automática te aparecen los restaurantes.
22 img MyMonchis 2
62
En la parte derecha de la pantalla 23, en lo que contiene el marco amarillo se puede
apreciar a los usuarios de facebook que acaban de realizar pedidos en los restaurantes
registrados de MyMonchis así como tambien el nombre del restaurante en el que realizó
su pedido.
En la parte izquierda de la pantalla 23 se puede observar la en el recuadro morado “Mi
Pedido” que es el apartado donde se va acomulando el pedido de la ordén, el
restaurante en el que realizó la ordén y los platillos que pidió en cada restaurante, como
se puede observar en la pantalla 23.
23 img MyMonchis 3
24 img MyMonchis 4
63
La pantalla 25 fué realizada utilizando la api de google maps para utilizar y ubicar los
restaurantes en el mapa que se aprecia en la pantalla, en esta pantalla se utilizo la
función de “La distancia de Levenshtein” para ofrecer a los usuarios una mejor
experiencia al realizar la búsqueda de restaurantes o platillos que ellos prefieran.
17 img MyMonchis 5
64
3.2.3.- Link To Canada
LinkToCanada es un proyecto que ofrece el traslado a la ciudad de Vancouver, Canadá
a personas interesadas en ise a estudiar y/o trabajar el tiempo que ellos deseen, esta
empresa les brinda facilidades de traslado y alojamiento en Canadá.
Las pantallas de LinkToCanada son pantallas que se acordaron realizar y que la
empresa luego cubriría la información con información verdadera de la empresa, se
podría decir que son bocetos ya armados esperando cambiar la información.
La Pantalla 26 es la imagen principal de la página web que se esta creando para está
empresa que cuenta con una pequeña animación en la oración “you think…” que
obviamente no se puede apreciar por que es una imágen. Está pantalla al igual que las
pantallas anteriores funcionan
26 LinkToCanada 1
65
La pantalla 27 se puede mostrar la sección de trabajo del proyecto LinkToCanada, en la
pantalla al pasar el mouse por las imágenes estas hacen una animación y muestran
información acerca del contenido de cada una de ellas.
En la pantalla 28 se puede ver la sección de estudiar del proyecto LinkToCanada, como
se puede apreciar es un slider en donde irán mostrando las empresas con las que ellos
estan relacionados.
27 LinkToCanada 2
28 LinkToCanada 3
66
En esta pantalla 29 de LinktoCanada se puede observar la galería de imágenes de la
página en donde irán las imágenes de personas que hayan estado en Canadá, las
cuales subiran a esta sección.
29 LinkToCanada 4
67
En esta pantalla 30 se muestra un pequeño formulario con la información de contacto
de la empresa, así como su ubicación geografíca la cual se muestra en el mapa
utilizando la api de google maps.
A continuación se observa la segunda parte del proyecto de LinkToCanada, está
sección va dirigida a informar al público acerca de lo que LinkToCanada ofrece y las
personas pueden registrarse mediante está página mediante un formulario. En esta
parte la empresa brindó un poco más de información pero igual sigue incompleta debido
a falta de información y algo del BackEnd para validaciones y el formulario.
30 LinkToCanada 5
68
En la pantalla 31 se aprecia la pantalla principal de la segunda pantalla de
LinkToCanada.
31 LinkToCanada 6 31 LinkToCanada 6
69
Como se puede observar en la pantalla 32 está seleccionado el menú “Cursos de
Inglés” que aparece de color rojo y muestra el contenido que se aprecia en el reacuadro
verde, esto funciona con las demas pestañas de la misma manera, al seleccionar tra
opción se muestra la información de las demas opciones.
32 LinkToCanada 7 32 LinkToCanada 7
70
En la pantalla 33 se muestra un menú donde se pueden apreciar 3 categorías en las
cuales dependiendo la que seleccione el usuario se mostrará en el slider las
instituciones de la categoría seleccionada que ellos representan.
33 LinkToCanada 8
71
En está pantalla 34 se muestra la secciones que responde a las preguntas en las
imágenes dentro de la pantalla 34 en 2 acordeones los cuales cada pregunta contiene
su respectiva respuesta.
34 LinkToCanada 9
72
En la pantalla 35 se aprecian los testimonios de las personas que han viajado a Canadá
y cuentan sus experiencias en su entancia en Vancouver, Canadá.
35 LinkToCanada 10
36 LinkToCanada 11
73
En la pantalla 36 se puede apreciar las preguntas frecuentes y respecto a cada tema
viene un acordeón con pregunta y respuesta de las preguntas frecuentes de cada
sección.
37 LinkToCanada 12
74
La pantalla 37 muestra un gran formulario con mucha información a llenar por parte del
cliente y dependiedo el objetivo del cliente que tenga al ir a Vancouver es lo que
selecciona en la parte de programas en donde viene un menú donde el cliente
selecciona lo que el prefiera.
3.3.- Animaciones a objetos en una página web.
El Modelo de Objetos del Documento (DOM) es una interfaz de programación de
aplicaciones (API) para documentos HTML y XML. Define la estructura lógica de los
documentos y el modo en que se accede y manipula un documento. En la
especificación del DOM, el término "documento" se utiliza en un sentido amplio. XML se
utiliza cada vez más como un medio para representar muchas clases diferentes de
información que puede ser almacenada en sistemas diversos, y mucha de esta
información se vería, en términos tradicionales, más como datos que como
documentos. Sin embargo, XML presenta estos datos como documentos, y se puede
usar el DOM para manipular estos datos.
Con el Modelo de Objetos del Documento los programadores pueden construir
documentos, navegar por su estructura, y añadir, modificar o eliminar elementos y
contenido. Se puede acceder a cualquier cosa que se encuentre en un documento
HTML o XML, y se puede modificar, eliminar o añadir usando el Modelo de Objetos del
Documento, salvo algunas excepciones. En particular, aún no se han especificado las
interfaces DOM para los subconjuntos internos y externos de XML.
El DOM es un API de programación para documentos. Guarda una gran similitud con la
estructura del documento al que modeliza. Por ejemplo, considérese esta tabla, tomada
de un documento HTML:
38 DOM HTML
75
El DOM representa esta tabla de este modo:
Mediante el model DOM se extrajó el ID de cada elemento con el que se quería trabajar
para manipularlo por medio de JavaScript para realizar las funciones y de esta poder
realizar las animaciones deseadas.
JavaScript (abreviado comúnmente "JS") es un lenguaje de programación interpretado,
dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en
prototipos, imperativo, débilmente tipado y dinámico.
Se utiliza principalmente en su forma del lado del cliente (client-side), implementado
como parte de un navegador web permitiendo mejoras en la interfaz de usuario y
páginas web dinámicas aunque existe una forma de JavaScript del lado del servidor
(Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo
en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también
significativo.
JavaScript se diseñó con una sintaxis similar al C, aunque adopta nombres y
convenciones del lenguaje de programación Java. Sin embargo Java y JavaScript no
están relacionados y tienen semánticas y propósitos diferentes.
Todos los navegadores modernos interpretan el código JavaScript integrado en las
páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de
una implementación del Document Object Model (DOM).
Mediante el modelo DOM se extrajó el ID de cada elemento con el que se quería
trabajar para manipularlo por medio de JavaScript para realizar las funciones y de esta
poder realizar las animaciones deseadas.
39 DOM TABLA
76
3.4.- La Distancia de Levenshtein
La distancia de Levenshtein, distancia de edición o distancia entre palabras es el
número mínimo de operaciones requeridas para transformar una cadena de
caracteresen otra, se usa ampliamente en teoría de la información y ciencias de la
computación. Se entiende por operación, bien una inserción, eliminación o la sustitución
de un carácter. Esta distancia recibe ese nombre en honor al científico ruso Vladimir
Levenshtein, quien se ocupó de esta distancia en 1965. Es útil en programas que
determinan cuán similares son dos cadenas de caracteres, como es el caso de los
correctores de ortografía.
Por ejemplo, la distancia de Levenshtein entre "casa" y "calle" es de 3 porque se
necesitan al menos tres ediciones elementales para cambiar uno en el otro.
1. casa → cala (sustitución de 's' por 'l')
2. cala → calla (inserción de 'l' entre 'l' y 'a')
3. calla → calle (sustitución de 'a' por 'e')
Se desarrolló una función para medir el porcentaje de similitud y mostrar los resultados
que estuvieran en el rango o superior.
La función de aplicó en el proyecto de MyMonchis para realizar búsquedas por medio
de la api de google maps para localizar restaurantes y que los usuarios al momento de
teclear algún nombre de restaurante o platillo equivocadamente, la función les arrojará
los posibles resultados de la búsqueda que estaban realizando, siempre y cuando la
búsqueda cumpla con los parámetros de la función
3.5.- Etapa de Inicialización
Desarrollar las tareas asignadas de una manera eficiente y disminuir las probabilidades
de fracaso en cualquier etapa de cualquier proyecto utilizando la metodología Scrum la
cual se explica en el siguiente punto.
77
3.6.- Ciclo de desarrollo de los proyectos web en la empresa.
La empresa Tejuino aclaró el método de trabajo (scrum) y las etapas de entrega de
cada tarea, para tener un resultado óptimo. Las etapas de entrega de trabajo se dividian
en:
Desarrollo de la tarea asignada.
Revisión de la tarea en busca de fallas.
Corrección de errores (si los hay).
Entregar tarea con los errores corregidos que se dieron a notar en la etapa
anterior (si los hay).
Pasar a la siguiente tarea.
3.6.1.- Desarrollo de la tarea asignada.
El personal del área de diseño gráfico elabora las pantallas para los clientes y cuando
los clientes aprueban el diseño de la página web y lo que va a realizar, se pasa al área
de desarrollo web para llebarla acabo. El área de desarrollo web se divide en 2, los que
desarrollan la parte del FrontEnd de la página y los que desarrollan la parte del
BackEnd de la página.
3.6.2.- Revisión
En esta etapa se entragaba el trabajo terminado y se revisaba en busca de fallas,
cuando se encontraba alguna falla se regresaba con la lista de los detalles a corregir.
3.6.3.- Corrección de errores
En esta parte como el nombre lo indica se corregia la lista de errores que el personal de
revisión realizaba y una ves corregido se pasaba a a resivión una ves más , esto con el
fin de evitar fallas y estar 100% seguros de que es diseño que se busca obtener para
poder seguir con otra tarea ya sea relacionada a ese modulo u otra tarea diferente.
78
3.8.4.- Entrega Final
Se entraga ya con los errores corregidos para la aprobación de esa tarea y así poder
pasar a la siguiente tarea o continuar con otra sección del mismo proyecto.
3.6.5.- Siguiente Tarea.
Cuando se entregaba una tarea y está era aprobada, de inmediato se asignaba otra
tarea ya sea relacionada al mismo proyecto o no, siempre se tenía algo que hacer.
Para aceptar un proyecto, la empresa Tejuino se reune con el cliente para hablar sobre
los aspectos y funciones de la página web y les explica como trabaja la empresa.
Una vez que el cliente le dice a la empresa como quiere su sitio web, los diseñadores
de Tejuino hacen un boceto basado en lo que la empresa realiza y con los
requerimientos y funciones de la página que el cliente pidió, entonces se vuelve a reunir
la empresa con el cliente para mostrarle el boceto que los diseñadores crearón y se
ajustan detalles por parte del cliente. Ya que es aceptado el diseño por parte del cliente,
éste pasa al área de programación en donde el archivo psd es tomado como gría y
mediante un editor de textos es convertido a lenguaje html y css.
Para crear el sitio web que la empresa quiere y como los sitios web que la empresa
crea son responsivos (se adaptan al tamaño de la pantalla de donde se esté
visualizando el sitio web) se hacen 3 diseños de la página; móvil, Ipad y escritorio. De
esta manera se entregan 3 psd (archivo de photoshop) en donde se extrae las medidas
de cada sección de la página, las imágenes y el formato del texto.
