Anteproyecto - Diseño de Paginas Web (Terminado)

República Dominicana Universidad Autónoma de Santo Domingo UASD Centro Mao Facultad de Ciencias Escuela de Informtica

DESARR!""! DE #$%I&AS 'E( #ARA E" ACCES! A "A I&F!RMACI!& DESDE CUA")UIER DIS#!SI*I+! DE &A+E%ACI!& ,CAS!- DISE.! DE #A%I&A 'E( DE "A AS!CIACI!& DE #R!DUC*!RES DE (A&A&! "AS MERCEDES/0 Curso optativo e1uivalente a la tesis de grado para optar por el t2tulo de "icenciado en Informtica0 #resentado #resentado porMiguel $ngel #eralta #olanco 33333333333 (C34546 Eliú "eandro %on7le7 Cru7 33333333333333 D(3896: Ed;in Antonio %u7mn Rodr2gue7 3 85554996< Asesor =uan Miguel "iriano> MES> MSI0 Coordinador =uan Miguel "iriano Duran> MES> MSI0

Mao> +alverde Agosto> ?58:

"os conceptos emitidos en la presente tesis son de la e@clusi e@clusiva va res respons ponsabil abilidad idad de los sustentantes

 **U"!Desarrollo de #ginas 'eb para el acceso a la información desde cual1uier dispositivo de navegación ,caso- DiseBo de pgina ;eb de la Asociación de #roductores de (anano las Mercedes/0

CA#I*U"! I AS#EC*!S %E&ERA"ES

808 #"A&*EAMIE&*! DE" #R!("EMA

"a pgina ;eb de una marca o empresa es la representación de la misma0 o en d2a es imprescindible tener presencia en internet para e@istir>  la pgina ;eb es la muestra de lo 1ue una empresa ace  cómo lo ace0 #or eso es mu importante tener un sitio ;eb profesional austado a las necesidades> interactivo  1ue sea adaptado a los distintos dispositivos electrónicos de navegación0 En la actualidad e@isten apro@imadamente ms de <555 millones de dispositivos conectados a la ;eb8> tales como Smartpone> tabletas> libros electrónicos> televisores> videoconsolas> etc0>  a medida 1ue pasa el tiempo va creciendo la demanda del acceso a la información en la red0 Una pgina ;eb se deGne como un documento electrónico el cual contiene información te@tual> visual Ho sonora 1ue se encuentra aloado en un servidor  puede ser accesible mediante el uso de navegadores0 Una pgina ;eb forma parte de una colección de otras pginas ;ebs> dando lugar al denominado sitio ;eb> el cual se encuentra identiGcado bao el nombre de un dominio?0 Actualmente e@isten mucas empresas 1ue utili7an esta erramienta> pero son mu pocas las 1ue realmente obtienen beneGcios>  todo esto se debe al mal uso de la publicidad> mareting o por 1uJ no> el diseBo de la misma pgina0 Estamos en un mundo móvil>  cada ve7 ms accedemos a internet desde dispositivos variados> con necesidades  en situaciones diferentes0 As2 como los diseBadores sobre el papel ten2an el control absoluto de lo 1ue se presentaba estticamente> Go e impresoK al diseBar para ;eb se encuentran con multitud de resolución de pantallas> con navegadores diferentes  con formas de interactuar 1ue van desde un teclado> un mouse> un stlus ,"pi7 óptico/ o los dedos0 Como dice  =on Allsop> desarrollador- LDebemos entender  adoptar la idea de 1ue la ;eb no tiene los mismos l2mites>  debemos diseBar con esta e@ibilidadK pero primero debemos aceptar la marea  el uo de las cosasN0 En consecuencia al avance de la gran variedad de tipos de tecnolog2as 1ue se integraban para navegar en internet> les surge a los diseBadores ;eb la necesidad de buscar alternativas para adaptar las interfaces de usuario a la pluralidad de tamaBos de pantallas  resoluciones de los diferentes tipos de terminales0 8 Intel> O+isual0l>P QEn l2nea0 Disponible en- ttp-HHvisual0lHinternet3

tings ? ttp-HH;;;01uees0infoH1ue3es3una3pagina3;eb0tml

#ara el aBo ?555> los diseBadores en busca de una solución para dico problema comen7aron a crear pginas ;eb estndar en base a la resolución de pantalla de los dispositivos> no siendo esto una solución real ni conveniente para una empresa a 1ue para 1ue esta tJcnica de diseBo fuera funcional ab2a 1ue diseBar la misma ;eb para cada tipo de dispositivo> aciendo la misma ms costosa  era el usuario 1uien deb2a acoplarse al diseBo para el cual el contenido estaba adaptado0 El antes  despuJs 1ueda establecido en el aBo ?559 con la aparición del tJrmino Smartpone  los sistemas diseBados para estos> los cuales ten2an una alta capacidad para navegar en internet0 A tal acontecimiento los diseBadores trataron de buscar una alternativa para dar respuesta a las diversas plataformas  las 1ue se presentar2an en el futuro> dando como solución la creación de dos dominios> el cual consist2a en diseBar un sitio ;eb para versiones móviles  uno para e1uipos de escritorio detectando dico sitio el tipo de dispositivo 1ue se conectaba0 Esto no resulto ser una solución factible a 1ue aún se tiene la problemtica de diseBar una pgina ;eb por tipo de dispositivo de navegación0 Una pgina ;eb no optimi7ada ofrece una mala e@periencia de usoElementos fuera del campo de visión> necesidad de acer 7oom para ver obetos pe1ueBos> ampliar el te@to> etc0/0 En deGnitiva> si muestras contenidos no adaptables al conte@to> a las pantallas o resoluciones desde las 1ue se accede> la efectividad de tu portal cae en picada0 Mucas empresas estn tomando la decisión de reestructurar su *I ,*ecnolog2a de la información/> a 1ue se estn dando cuenta de todos los cambios positivos 1ue esto implica para su negocio0 Es mu importante 1ue las empresas logren identiGcar cundo es necesario cambiar sus procesos de información> siempre  cuando estos no estJn funcionando correctamente0 En vista de lo planteado> el diseBo de una pgina ;eb 1ue pueda ser accesible desde cual1uier dispositivo de navegación> cada ve7 ms se vuelve imprescindible> a 1ue el uso de los dispositivos móviles es maor  sigue en aumento> en consecuencia la navegación en la red usando los mismos va en aumento>  se ace ms comúnK a la ve7 de 1ue les da a los diseBadores de pginas ;eb la solución a una problemtica para meorar la e@periencia del usuario a tener meor  ms fcil acceso a la información0 Con el uso de ese concepto de diseBo se pretende diseBar la pgina ;eb de la empresa AS!CIACI!& DE #R!DUC*!RES DE (A&A&! "AS MERCEDES>  as2 acer 1ue dico sistema 'eb se auste a un nuevo concepto de diseBo> el cual ar 1ue la información de la empresa sea accesible con respecto los usuarios  a los clientes> desde los diferentes

dispositivos de navegación 1ue e@isten en la actualidad> sin la necesidad de 1ue el contenido de la pgina se pierda0 Debido a la situación planteada> en la investigación se da respuestas a las siguientes interrogantes1.

Cules principios de diseBo ;eb acen posible una pgina ;eb con acceso a la información desde cual1uier dispositivo de navegaciónT

?0 )uJ beneGcio le proporciona a las empresas una pgina ;eb accesible desde cual1uier dispositivo de navegaciónT 0 Cules son las ventaas  desventaas 1ue tiene la implementación de una pgina ;eb accesible desde cual1uier dispositivo de navegación en la AS!CIACI!& DE #R!DUC*!RES DE (A&A&!S "AS MERCEDEST Estas  otras interrogantes no menos importantes son respondidas durante el desarrollo de la presente investigación0

80? =US*IFICACIV& E IM#!R*A&CIA Actualmente es de muca importancia 1ue las empresas ofre7can servicio en l2nea mediante una pgina 'eb> a 1ue esto es una forma de e@posición para obtener nuevos clientes> si se utili7an estrategias adecuadas de mareting0 El comercio electrónico  la comunicación inalmbrica> son tambiJn parte de esta tecnolog2a con la 1ue actualmente mucas empresas suelen ofrecer sus productos Ho servicios> permitiendo a Jstas obtener grandes oportunidades de crecimiento> a 1ue los mismos estarn a la vista de sus clientes durante todos los d2as del aBo> a la ve7 1ue les permite reducir sus costos de manera signiGcativa> adems de 1ue o en d2a la maor parte de dico comercio se reali7a a travJs de medios inalmbricos0 Esta forma de desarrollo de pginas ;eb meora la e@periencia del usuario> viendo la ;eb de la meor manera posible para el dispositivo desde el cual se acceda> a la ve7 1ue reduce los costos de creación  mantenimiento> a 1ue no es necesario desarrollar aplicaciones para distintas versiones móviles> permitiendo 1ue al acer una bús1ueda apare7ca una UR" única en los resultados> por lo 1ue se aorran redirecciones  posibles fallos0  *ambiJn permite la correcta visuali7ación  navegación en cual1uier dispositivo0 Esto no signiGca simplemente 1ue la pgina pueda ser vista en telJfonos móviles> sino 1ue ser posible navegar con comodidad ,sin tener 1ue ampliar el tamaBo para leer> ni acer scroll ,acia un lado  a otro/  1ue la funcionalidad ser la misma 1ue en la versión de escritorio0 Meora la e@periencia del usuario> sobre todo de a1uellos 1ue acceden con pantallas de escasa resolución> telJfonos móviles o tabletas0 "a facilidad de navegación> el acceso fcil a los contenidos>  la usabilidad

de una ;eb> son aspectos claves para 1ue el usuario se sienta cómodo> encuentre la información 1ue busca> vuelva  convierta su visita en una compra0 ace ms sencillo el mantenimiento> a 1ue solamente a una ;eb  una única plantilla  favorece el posicionamiento SE! ,tJcnicas 1ue buscan 1ue una pgina ;eb apare7ca en las primeras posiciones de los resultados en buscadores/0 %oogle puede descubrir meor tu contenido0 Un punto importante 1ue a 1ue seBalar es 1ue> el ad1uirir esta erramienta> ocasionalmente puede resultar costosa> pero puede otorgarle grandes beneGcios a las organi7aciones> adems de 1ue las pone en competencia directa en el mercado> a 1ue mucas de las medianas  grandes empresas 1ue estn teniendo J@ito> es debido al uso adecuado  actuali7ación constante de la tecnolog2a0

80 !(=E*I+!S8008 %E&ERA"Desarrollar pginas ;eb para el acceso a la información desde cual1uier dispositivo de navegación0

800? ES#ECFIC!S80 IdentiGcar los diferentes tipos de dispositivos de navegación ;eb0 ?0 IdentiGcar los principios bao los cuales se debe estructurar una pgina ;eb0 0 IdentiGcar las ventaas  desventaas 1ue representa la implementación de una pgina ;eb 1ue se auste a cual1uier dispositivo de navegación0 40 Implementar el diseBo ;eb 1ue sea accesible desde cual1uier dispositivo de navegación en la pgina ;eb de la AS!CIACI!& DE #R!DUC*!RES DE (A&A&!S "AS MERCEDES0

804 A&*ECEDE&*ESEn el trabao de =on Allsopp ,?555/ titulado LA Dao of 'eb DesignN ,El Camino del DiseBo 'eb/ sobre las diGcultades de controlar el diseBo cuando trabaamos en un medio como la ;eb> podemos ver 1ue los diferentes tamaBos de pantalla  capacidades de los dispositivos> acen 1ue no nos podamos enfrentar a un proecto de diseBo de este tipo con las mismas concepciones con las 1ue nos enfrentbamos a un proecto cua Gnalidad era la impresión0 Wa no tenemos el control del tamaBo> los colores o las tipograf2as0 DiseBando para la ;eb tenemos la necesidad de adaptarnos0 Se empe7aban a trabaar los conceptos 1ue culminar2an en el diseBo ;eb adaptativo0 En el aBo ?556 el consorcio 'C en su recomendación LMobile 'eb (est #racticesN ,(uenas #rcticas en la 'eb Móvil/ deGnieron el concepto L!ne'ebN ,Una 'eb/> 1ue se basa en la idea de reali7ar un diseBo ;eb para todos  accesible desde cual1uier dispositivo> buscando 1ue la e@periencia del usuario se enri1ue7ca0 Etan Marcotte ,?55X/> publicó un art2culo sobre diseBo ;eb con reillas> en la prestigiosa revista digital alistapart0com ,ttp-HHalistapart0comHarticleHresponsive3;eb3design o traducción de la misma al espaBol ttp-HH@n33diseo;ebresponsive315b0orgH/0 Este art2culo deGne el concepto de diseBo ;eb uido con e@actitud> como solución para adaptar a la pantalla de cada dispositivo la ma1uetación de una

pgina ;eb0 #odr2amos decir 1ue esta Glosof2a de diseBo es uno de los pasos previos al diseBo ;eb adaptativo o Responsive 'eb Design0 En el ?588> =erem Yeit> a travJs de dos conferencias ,L!ne 'ebN  L*ere Is &o Mobile 'ebNK en espaBol LUna 'ebN  L&o a &inguna 'eb MóvilN/> plantea el diseBo adaptativo como solución a los LerroresN cometidos asta el momento en cuanto a la concepción del diseBo ;eb0 emos de tener claro> cuando diseBamos una pgina ;eb> 1ue no lo estamos aciendo para un dispositivo determinadoK no a una ;eb para un ordenador de escritorio o una ;eb para un dispositivo móvil0 E@iste un único contenido> una sola ;eb sobre la 1ue s2 tenemos 1ue trabaar para adecuar su usabilidad> adaptndola a las caracter2sticas de cada dispositivo0 En ese mismo aBo ,?588/> el (oston %lobe> con el diseBo de su pgina ;eb adaptable> causó una gran sensación en el mundo del diseBo ;eb0 Fue el primer gran medio de comunicación 1ue apostaba por este tipo de solución  demostró su utilidad> independientemente del tipo de sitio 1ue se estuviese diseBando0 Su perfecta reali7ación  cuidado diseBo> i7o ms 1ue la labor evangeli7adora de los diseBadores de vanguardia0 En el ?58?> Miguel $ngel $lvare7> en su conferencia sobre LEl DiseBo 'eb #ara Dispositivos MóvilesN> muestra cules son las corrientes de diseBo ms actuales 1ue nos permiten encarar un desarrollo 1ue sea compatible con la ;eb en movilidad0 #ropone acer sitios ;eb 1ue se ven correctamente en todos los dispositivos  ordenadores de escritorio0

80< !#ERACI!&A"IZACIV& DE "AS +ARIA("ES !(=E*I+! %E&ERA"- Demostrar la importancia del desarrollo de pginas ;eb para el acceso a la información desde cual1uier dispositivo de navegación0 !betivos espec2Gcos IdentiGcar los diferentes tipos de dispositivos de navegación ;eb0

+ariables Dispositivo de navegación ;eb

Indicadores

DeGnición

Dispositivos de navegaciónEscritorio0 Móvil0  *ableta0

Dispositivo de navegación- *ipos de computadora de tamaBos diversos> con capacidades de procesamiento> con cone@ión a Internet > con memoria> diseBado espec2Gcamente para

• • •

una función> pero 1ue pueden llevar a cabo otras funciones ms generales0

IdentiGcar los principios bao los cuales se debe estructurar una pgina ;eb0

IdentiGcar las ventaas  desventaas 1ue representa la implementa ción de una pgina ;eb 1ue se auste a cual1uier dispositivo de navegación0 Implementar el diseBo ;eb 1ue sea accesible desde cual1uier dispositivo de navegación en la pgina ;eb de la AS!CIACI!&

#rincipios de diseBo ;ebUsabilidad 0 EstJtica0 (alance0 Contraste0 [nfasis0 Repetición o ritmo0 #ro@imida do unidad0 •

•

#rincipios de diseBo ;eb0

• • • •

#rincipios de diseBo ;eb- Serie de tJcnicas destinadas a acer al sitio útil  atractivo a la ve70

•

+entaasComparati va0 Competiti +entaas0 va0 Desventaas0 DesventaasComparati va0 Competiti va0

+entaa- condición favorable 1ue algo o alguien tiene0

Implementa ción de la pgina ;eb0

Implementación instalación de una aplicación informtica> reali7ación o la eecución de un plan> idea> modelo cient2Gco> diseBo> especiGcación> estndar> algoritmo o pol2tica

•

•

•

•

Marco lógico0

DesventaaCircunstancia 1ue ace 1ue una persona o cosa sea peor o estJ en peor situación 1ue otras0

DE #R!DUC*!R ES DE (A&A&!S "AS MERCEDES0