Your SlideShare is downloading. ×
0
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Cheeta Graphics (PDF interactivo)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cheeta Graphics (PDF interactivo)

590

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
590
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. 1 2 3CAPÍTULO CAPÍTULO CAPÍTULOCONCEPTOS RECONOCIMIENTO DEFINICIÓNBÁSICOS DE DE ETAPAS DE DEL TEMAMEDIOS DESARROLLO4 5 6CAPÍTULO CAPÍTULO CAPÍTULORECOPILACIÓN DE DEFINICIÓN DE DETERMINACIÓNANTECEDENTES VIABILIDAD Y DE CRONOGRAMAS CONTENIDOS Y PRESUPUESTOS7 8 9CAPÍTULO CAPÍTULO CAPÍTULOCONTROL DE CONTROL DE LA CONTROL DEVARIABLE DE ARQUITECTURA DISEÑOSOPORTE DE LA INFORMA- CIÓN
  2. INTRODUCCIÓNEste informe contiene todos los detalles de Luego de tener toda la información y decómo se diseñó el sitio web para la imprenta tener un brief completo, podemos comenzarCheeta graphics. El proceso completo parte a diseñar las propuestas para este sitio yen los conceptos básicos de los procesos, presentarlas al cliente para que opine y veaprogramas, tecnologías y soportes que se si realmente nuestro diseño cumple con lasutilizaron en el diseño de este proyecto. expectativas de ellos y puede satisfacer las necesidades de los usuarios.El tener claros los conceptos básicos nospermiten poder recopilar toda la información Todo eso es lo que se detalla en este informeposible de parte de nuestro cliente y estudiar y que de seguro podrán comprender todos losa los posibles usuarios de la página web. Luego procesos del encargo.de esto debemos organizar a nuestro equipode trabajo y distribuir de manera equiparaday aprovechando las capacidades de cada unopara poder trabajar de manera óptima. 3
  3. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SINTERACTIVIDADLa interactividad es el valor de Internet.Los usuarios pueden preguntar, comentaro aportar más información, y cuanta másfacilidad se les de para ello, más eficaz será lacomunicación.La interactividad es la capacidad que tieneel usuario para navegar por el sitio web demanera no-lineal hasta el grado que hayamosestablecido, dentro de los límites del medio.La forma más sencilla de aplicar estainteractividad es con el uso de los hipertextos.Con ellos se le ofrece al usuario la posibilidad deampliar, si quiere, información sobre conceptosconcretos y se evita saturarlo. Para ello serándestacados cromáticamente para indicar quéenlaces ha visitado y cuáles no. Con ello sefacilita la navegación y ayuda a definir sussiguientes pasos. 4
  4. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S MULTIMEDIA Multimedia es un término que procede de la lengua inglesa y que refiere a aquello que utiliza varios medios de manera simultánea en la transmisión de una información. Una presentación multimedia, por lo tanto, puede incluir fotografías, videos, sonidos y texto. En el contexto de nuestra página web se puede presentar desarrollos multimedia, con animaciones en Flash, videos insertados desde YouTube, galería de imágenes, música de fondo y material para leer. En estos casos, puede hablarse de multimedia interactiva, ya que es el usuario quien decide cómo será la presentación de la información y en qué momento iniciarla a través de sus clics. 5
  5. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SHOSTINGHosting es también conocido como serviciode alojamiento. Este servicio es un espaciodentro de un servidor y sirve para alojar unsitio web.Un sitio web es un conjunto de archivos weblos cuales contienen: texto, imágenes, audio,video, etc. Y estos están almacenados en unservidor.Los servidores se encuentran operativos las24 horas del día, los 365 días del año. Y debe deser así puesto que las personan navegan porsus sitios web deben encontrar la informaciónen cualquier momento a toda hora.Los visitantes podrán acceder a nuestro sitioweb por medio de la dirección web. Nuestrodominio. 6
  6. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SHOSTINGYTRANSFERENCIAD E D AT O SLa transferencia de datos es la cantidad de hosting recibe o envía, transferencia que secontenidos transferidos medidos en Giga puede medir tanto en Mega Bytes como enBytes, que un determinado servicio de Giga Bytes teniendo en cuenta un tiempo dehosting ofrece durante determinado periodo un mes desde que comenzó el servicio.temporal, generalmente estamos hablando deun tiempo estipulado de un mes.Es por ello que decimos que cuanto mayor seael número de visitantes que posea el sitio web,y cuanta más información se envíe, mayorserá la carga de transferencia de datos que serealice.En otras palabras, hosting y transferenciade datos se encuentran íntimamenterelacionados: el hosting brinda asilo al sitioweb, este asilo posee una cantidad decapacidad de transferencia, y esta capacidadde transferencia sencillamente es la cuantíade información que dicho servidor de web 7
  7. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SHOSTINGYTRÁFICOENLAWEBEn cada momento que un visitante ingresa a asegure un nivel más alto de transferencia deun sitio web, toda los contenidos que posee contenidos por mes para asegurar el correctoel sitio se transportan desde el servidor funcionamiento de la página.de web hosting hasta la computadora delusuario. Es necesario aclarar que, si nuestrapágina web es liviana, esto quiere decir, si nocontiene más que archivos de textos y algunaque otra imagen, y si no posee gran númerode concurrencia, el trafico web será mínimo,por lo que no será un elemento problemático,lo que podría bastar con una monto detransferencia mensual de 1 a 3 Giga Bytes.Ahora bien, si nuestro sitio web está plagadode videos, animaciones, imágenes, música,y demás contenidos multimedia, el montodel trafico mensual crecerá enormemente, ymucho más si se trata de una página web cuyonúmero de visitantes es notable. En este caso,precisaremos de un servicio de hospedaje que 8
  8. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S HOSTINGY TRÁFICO DECORREOS Este elemento trata de la cantidad de correos que se envían por mes: en este sentido, por más que el sitio web no sea visitado por muchos usuarios, pero si existen 500 empleados que mantienen un uso extendido del servicio de correo para asuntos comunicativos, puede que la cantidad del monto de transferencia de contenidos aumente de manera considerable, casi en los 100 Giga Bytes de transferencia por mes, lo que llevaría a aconsejar contratar un servicio de hosting y transferencia ilimitada. 9
  9. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SHOSTINGYNÚMERODEVISITASEs necesario aclarar que, cuando se hablade hosting y transferencia de datos, esimportante tener en cuenta la cantidad devisitas que piensa recibir el sitio web. Si bienpuede que el sitio web que poseemos searápido, eso no implica que si el número devisitantes es enorme, funcione de maneracorrecta. En otras palabras, si los visitantesingresan de manera masiva a nuestro sitio, yse ponen a descargar contenidos en el mismomomento, puede que el sitio colapse, y que latransferencia de información llegue a su cima.Es recomendable entonces que, si el númerode visitantes que posee la página llega a lacifra de 2.500, se contrate un servicio de webhosting y transferencia ilimitada. 10
  10. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S MySQL Es un sistema administrativo relacional de bases de datos (RDBMS por sus siglas en ingles Relational Database Management System). Este tipo de bases de datos puede ejecutar desde acciones tan básicas, como insertar y borrar registros, actualizar información o hacer consultas simples, hasta realizar tareas tan complejas como la aplicación lo requiera. MySQL es un servidor multi-usuarios muy rápido y robusto de ejecución de instrucciones en paralelo, es decir, que múltiples usuarios distribuidos a lo largo de una red local o Internet podrán ejecutar distintas tareas sobre las bases de datos localizadas en un mismo servidor. Utiliza el lenguaje SQL (Structured Query Language) que es el estándar de consulta a bases de datos a nivel mundial. 11
  11. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S Hosting.clCOTIZACIÓN 300 Mb espacio total / 10 cuentas Email / Transferencia Ilimitada CPanel Español / Activación inmediata $ HOSTING Hostingcenter.cl 1 GB espacio total / 25 cuentas Email / Transferencia Ilimitada / CPanel Webmail en español / Discos Duros en Raid / PHP 5 – MySQL 5 29.900 SWF - HTML Hostingcl.cl 22.900 200 Mb de espacio total / 15 cuentas Email / CPanel Español Activación Inmediata / HTML - Flash – PHP MySQL / Webmail 16.900 PlanetaHosting.cl 500 Mb de espacio total / 10 cuentas Email / CPanel Español - Web- mail MySQL / 10 GB Transferencia mensual 17.900 Powerhost.cl 15.300 300 Mb espacio total / 10 cuentas Email/ Backup diario automático / 12 GB Transferencia mensual / 6 Bases de datos MySQL / CPanel Español / Soporte WAP Servidores en Chile Data Center propio Escogimos Hostingcenter, que a pesar de no ser el de menor costo, es el que cubre mejor nuestras necesidades de espacio y transferencia de datos. 12
  12. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SDOMINIOEs un nombre o dirección única dentro deinternet, que se registra con un nombre desdeque se adquiere o se compra, no hay otro igualy por la que cualquier persona con acceso ainternet puede acceder a un determinado sitioweb, en nuestro caso es www.cheeta.cl. Losdominios se categorizan en: Dominios Genéricos. Dominios Territoriales. Los dominios de reciente incorporación. 13
  13. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SDOMINIOSGENÉRICOSLos dominios genéricos son conocidos comodominios internacionales o globales. Cualquierempresa que realice negocios a través deInternet o que tenga intención de hacerlo deberegistrarse en uno de estos dominios dada lapopularidad que han adquirido.Tienen tres letras, y los más conocidos son losdominios .com los cuales inicialmente fueronprevisto para empresas comerciales, .orgoriginalmente previsto para organizaciones y.net fue previsto para empresas relacionadascon la Internet.El dominio más popular es .com que en laactualidad cuenta ya con más de 2.000.000 dedominios registrados. 14
  14. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S Los dominios patrocinados reciben el apoyo de organismos privados, mientras Patrocinados No Patrocinados que los segundos, por ser considerados de interés público, son mantenidos y regulados directamente por el ICANN (Corporación de Internet para la Asignación de Nombres y Números) y las entidades internacionales. 15
  15. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SDOMINIOSTERRITORIALESUn dominio territorial es un nombre dedominio con una extensión asociada a un país.Estos son utilizados por las organizacionesy empresas que desean establecerse enInternet o que quieren proteger la identidadde su marca o su nombre comercial en un paísconcreto.Un dominio comprende dos o máscomponentes separados por puntos. La mejormanera de comprender su estructura es leerel dominio de derecha a izquierda. El primercomponente mirando desde la derechadistingue un dominio genérico o territorial.Actualmente existen más de 200 dominiosterritoriales. 16
  16. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SDOMINIOSTERRITORIALESEl uso del dominio .cl es para lograr que losusuarios se sientan cómodos y seguros enel sitio. Si por ejemplo tenemos un dominio.arg y nuestro contenido es para usuarioschilenos, lo estamos haciendo mal porque laterminación .arg indica que el sitio está enArgentina y nuestro usuario chileno podríapensar que la información es poco relevanteen Chile y no tomada en cuenta, por lo cual elsitio fracasaría al promover los servicios que laimprenta ofrece. 17
  17. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O SREGISTRODE Si queremos tener nuestra página propia, para adquirir un espacio web (hosting) podemos optar por varias opciones. Entre y comprar un dominio (en nic.cl) PrimeroUNDOMINIO ellas comprar un espacio en un hosting, hay que comprar el dominio para obtener uno gratuito, o si queremos asegurarse que nadie se va a apropiar de hacer un blog, hacer uno gratuito en nuestro nombre antes que nosotros. Hay WordPress, Blogspot Blogger o alguna que buscar un servicio de hosting que otra parecida. En este caso, mostraremos cubra nuestras necesidades de espacio y a grandes rasgos, los pasos necesarios sobre todo de precio. C ex omo se istí el gu a, d ir no om co h in n ub io PASO 1 nombre de el o re pr hee gi c ob t str le a.c dominio o ma l n sp o ingr ar es a ir a l bir ar s iti o cri nic.cl Es RUT Correspon- TITULAR y Dirección diente a los responsables de mail del dominio. sitio para registrar nuestro nombre para la web. 18
  18. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S Vemos la información ingresada en el paso 1. PASO 3 PASO 2 Debemos agregar Se confirman los datos del contac- to administrativo. En este caso, los mismos del paso 2. Dirección Comuna Ciudad Teléfono Giro PASO 4 ingresa Que el proveedor de hos- PASO 5 rd ting registre el nombre Tenemos at os 3 opciones Contacto Técnico Optar por autoadministrarlo Aquí vamos a la página del hosting para empezar a unir el hosting con el dominio. Escogemos esta Usar un subdominio gratis. opción Es la persona responsable de la operación técnica del dominio. Dejamos los datos igual que en la pantalla anterior. 19
  19. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S se recibe del hosting Se coordina el un del mail con: pago con el con- tacto del hosting (que se hizo a El dato de los DNS el más importante través de transfe- para terminar este proceso de registro Datos rencia electrónica) DNS yl ink tem Teniendo estos datos, hay que volver a la po para conectar al página de Nic. ral a l CPanel FTP El Domain Name System, o Sistema de Nombres File Transfer Protocol o Protocolo de transferen- de Dominio, es una base de datos distribuida, con cia de ficheros es un software cliente/servidor información que se usa para traducir los nombres que permite a usuarios transferir ficheros entre de dominio, fáciles de recordar y usar por las per- ordenadores en una red TCP/IP. sonas, en números de protocolo de Internet (IP) que es la forma en la que las máquinas pueden encon- El funcionamiento es sencillo. Una persona desde trarse en Internet su ordenador invoca un programa cliente FTP para conectar con otro ordenador, que a su vez tiene El servicio de DNS es indispensable para que un instalado el programa servidor FTP. Una vez esta- nombre de dominio pueda ser encontrado en Inter- blecida la conexión y debidamente autenticado el net. usuario con su contraseña, se pueden empezar a intercambiar archivos de todo tipo. 20
  20. C A P I T U LO I - CO N C E P TO S B Á S I CO S D E M E D I O S Ingresé los nombres de los servidores DNS y sus respec- tivas IP. PASO Datos de Es decir Nombre de quién va a llegar se ingresan los facturación el cobro PASO 7 por m n edio tació Electrónico Emisión de la acep factura de la Que llegue Obtendrá un cupón de pago en formato el papel a la PDF lista para imprimir, que puede ser PASO 8 dirección indi- pagada en cualquier sucursal de Servi- cada. pag. El sistema considera un plazo de 2 días hábiles para registrar el pago en Se confirman NIC Chile. Formas de pago Datos ingresados webpay Servipag Paypal PASO 9 Pagar Dominio Luego Aceptación Permite pagar en línea con una de Finalmente tarjeta de crédito y usando el declaración sistema seguro de Transbank. Este sistema permite un registro inmediato del pago en NIC Chile, y produce la activación del dominio al día siguiente. 21
  21. C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E BRECONOCIMIENTO DE ETAPAS DEDESARROLLO ORIENTADAS A UNSITIO WEBPresentamos aquí las distintas etapas que se culmina y esta característica incide en elforman parte de la creación y puesta en proceso de creación.marcha de un sitio WEB. Si bien se establecenen forma cronológica como sucesión de Para desarrollar el sitio web que nuestroactividades, el acto de la creación y puesta en cliente requiere es imprescindible cumplir conmarcha de esta página web no es lineal. Como las etapas y requisitos necesarios para unaen la ejecución de cualquier proyecto, muchas construcción digital eficiente.etapas se desarrollan en paralelo y en algunasinstancias volver atrás.A diferencia de otros proyectos de diseño, unsitio web no se concluye, registra y distribuye,muy por el contrario permanece en un lugarlógico, mostrando información, creciendo,actualizándose manteniendo un feedbackcon los usuarios y en una constante evoluciónacorde a los tiempos y soportes tecnológicosque pueda abordar. Es casi un ser vivo, nunca 22
  22. C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B PLANIFICACIÓN Lo primero que debemos hacer como equipo es organizarnos. El trabajo en equipo requiere una gran organización para designar de manera justa los cargos de construcción, evaluación y mantenimiento del sitio. El equipo debe contar con integrantes de diferentes áreas y ser capaces de entregar a los usuarios de esta web las experiencias que el cliente quiere expresar. Como equipo debemos estar en contacto constante con nuestro cliente para estar al tanto de los avances y poder efectuar los cambios que se requieran de manera clara y eficaz. Es muy importante que el equipo tenga un líder (que puede en un futuro ser el webmaster o no) porque formar un equipo de trabajo web requiere un gran compromiso personal e institucional. Los equipos web no construyen de un día a otro, ni de acuerdo a una decisión administrativa o mandato, requieren un proceso de consolidación, que pasa por tiempos de búsqueda, acuerdos y adecuación. 23
  23. C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E BREUNIRINFORMACIÓNLuego de que estén designados los cargosy cada integrante sepa bien lo que debedesarrollar, es necesario tener una reunióncon el cliente y recopilar toda la informaciónnecesaria. Además como equipo de diseñodebemos buscar y analizar toda la informacióntécnica para llevar a cabo el sitio web.La información es tanto teórica y técnica,como la búsqueda de bibliografías, normativasy el análisis de sitios referenciales o parespara poder ser emulados.Otra cosa muy importante a tener en cuentay que se debe priorizar a la hora de reunirinformación es los tipos de tecnologías yfunciones adecuadas para una navegaciónclara. 24
  24. C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B MISIÓNYOBjETIVOS DELAWEB Como equipo de diseño debemos definir la misión del sitio y poder discutirla para perfeccionarla. Es importante que organicemos esto con tiempo para poder formular en un futuro, mientras avanzamos el proyecto, ideas como: “se presentara”... “que contenderá” ... “se priorizará”... “se omitira”, entre otras. Una forma de poder organizar y discutir estos temas, es como equipo formular todo por escrito y así poder llegar a un resultado óptimo. Además de aclarar todo con el cliente y poder expresar en este sitio web la misión y visión de la imprenta hacia sus futuros visitantes. 25
  25. C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E BTIPOS DEUSUARIOEn este punto debemos definir y estudiar muybien a todos los que navegaran en esta web,para esto corresponde buscar, identificar yconocer a estos potenciales usuarios.Todo esto es necesario ya que la página webestá basada en la utilidad e intereses de losusuarios, es importante poder conocer anuestra primera audiencia destinada y asípoder contabilizar y estudiar a la audienciaposible.Se debe presentar información útil a losintereses de la audiencia a la que se dirigey declarar sus objetivos desde un comienzodejando claro que es lo que la página se proponea aportar, para poder ser más eficaz y tomandosiempre en cuenta los distintos intereses quepueden llevar a un usuario a visitar el sitioweb que estamos desarrollando. 26
  26. C A P I T U L O I I - R E C O N O C I M I E N T O D E E TA PA S D E D E S A R R O L L O O R I E N TA D A S A U N S I T I O W E B PLANES DE TRABAjO Una parte vital y que como equipo se debe priorizar, es establecer un orden u organización para poder realizar el encargo solicitado por nuestro cliente. Esta forma de organización facilita y guía todas las acciones, estructura de información, selección de contenidos, elaboración y construcción del sitio web. De este modo el equipo tendrá contabilizados y estructurados los horarios y etapas del proyecto. 27
  27. C A P I T U LO I I I - D E F I N I C I Ó N D E L T E M APERFILDE DISTRIBUCIÓN DEMOGRÁFICA DE USUARIOS DE INTERNET POR EDAD La distribución demográfica se relaciona altamente con los niveles de penetraciónUSUARIO de Internet y la madurez relativa del mercado de Internet: los usuarios jóvenes son tradicionalmente usuarios de adopción temprana. PENETRACIÓN DE INTERNET 26% 26% 21% 15% 12% AÑOS 15-24 25-34 35-44 45-54 55+ 28
  28. C A P I T U LO I I I - D E F I N I C I Ó N D E L T E M APERFILDEUSUARIOUSUARIOS SEGÚN NIVEL DE ESCOLARIDADEl sitio se relaciona altamente con el nivelde escolaridad y la madurez relativa del 8%mercado de Internet: los usuarios jóvenesuniversitarios o técnico - profesionales son 17% 3%tradicionalmente los solicitantes del serviciodel cliente. 20% 19% 17% 16% 29
  29. C A P I T U LO I I I - D E F I N I C I Ó N D E L T E M A PERFILDE USUARIO USUARIOS SEGÚN GSE El gráfico muestra el acceso a internet que poseen las distintas clases sociales en la comuna de Maipú, lugar en el cual se GSE encuentra la imprenta, dónde podemos observar que nuestro posible usuario tiene un alto acceso a la internet, por lo cual podrá llegar sin problemas a la información del sitio. 30
  30. C A P I T U LO I I I - D E F I N I C I Ó N D E L T E M AMAIPÚWI-FILa red implementada en Maipú corresponde adesarrollos de ingenieros y técnicos chilenos,a partir de tecnología Wi- Fi y equipamiento dela empresa Ruckus Wireless, de Silicon Valley,California, EEUU. TMDicha red consta actualmente de 241 nodoso antenas separadas por alrededor de 500metros unas de otras. En conjunto, tejen unared inalámbrica que permite dar cobertura atoda la comuna de Maipú.Esto permite que el usuario pueda navegara través de dispositivos móviles, y deacuerdo a esto debemos tener en cuenta queaplicaciones son los que usaremos al momentode construir nuestro sitio, ya que en esosdispositivos no se es posible visualizar todo aligual que en un computador. 31
  31. SITIOS MÁS VISITADOS % Alcance Microsoft Sites 85.3% Google Sites 95.5% Facebook.com 87.4% Terra -Telefonica 57.9% Uc.cl 14.6% Banco Estado 15.5% Musica.com 18.0% Wikimedia Foundation Sites 45.2% WordPress VEVO 19.1% 29.2% Grupo La Tercera RapidShare Empresa el 19.2% 30.6% MercadoLibre Mercurio S.A.P. 28.9% 40.6% Taringa.net Megaupload 30.6% 23.3% 32
  32. C A P I T U LO I I I - D E F I N I C I Ó N D E L T E M AUSODEREDESSOCIALES Facebook es la red social más popular, con un 85% del total de la audiencia. Muchos sitios que se categorizan así mismos como Redes Sociales pueden en realidad operar paralelamente a sitios como Facebook ofreciendo funcionalidades extendidas. Estos datos nos beneficia, ya que nuestro cliente Redes cuenta con su propio espacio en Facebook sociales relacionado con su negocio, para poder tener un contacto directo con sus propios clientes. Maipú tiene un gran alcance de Redes Sociales, con un crecimiento significativo durante el año pasado. En el gráfico se puede ver el porcentaje de uso de cada red social en la comuna. Las redes sociales ofrecen una importante vía a los usuarios de la comuna, para estar en % alcance contacto frecuente con amigos y familia, por lo tanto creemos que usando las redes sociales podemos difundir los servicios de Cheeta y permitir que sea mucho más fácil acceder a la página web. 33
  33. C A P I T U LO I I I - D E F I N I C I Ó N D E L T E M AUSODEREDESSOCIALESLa utilidad de Facebook radica en que y mantenerse al día de su actividad. Es porla empresa puede crear su página con esto que una red social no puede plantearseinformación sobre actividades, eventos, como su sitio web principal sino como unnoticias de su sector y comentarios sobre complemento de la comunidad que generasus productos; es un lugar donde entablar su marca; su empresa debe tener un sitiorelación con potenciales clientes más allá de lo web corporativo que ofrezca sus productosmeramente comercial, desde ese lugar puede de forma muy clara y cumpliendo con susenviar tráfico hacia su web oficial. objetivos comerciales más importantes.El contenido a ofrecer debe ser de interés,cuando a la gente le gusta (o no) un producto,escribe sobre ello en los foros y lo comenta ensus comunidades virtuales. De esa manera elcliente forma parte activa de la campaña delservicio.Para poder ofrecer una visión más clara,debemos considerar que Facebook no es unapágina web, sino que se trata de un perfilpúblico de la información que queremosofrecer sobre un producto u organización, delas que otros usuarios pueden hacerse fans 34
  34. C A P I T U LO I I I - D E F I N I C I Ó N D E L T E M AUSODEREDESSOCIALESMayormente se utilizan las cuentas de permitiéndonos conocer directamente laTwitter para informar sobre las actividades opinión que se tiene sobre la misma.y novedades de la empresa, anunciareventos, promociones y ofertas, conocer la Lo principal para obtener el mejor provecho,competencia y compartir información que es captar público o seguidores, por mediose considere interesante para los contactos, de mensajes originales y que resulten degenerando un feedback entre la empresa y el utilidad. Es importante mantener un contactomedio que resulta siempre beneficioso para fluido con ellos respondiendo siempre que noslos negocios. escriban de un modo distendido y personal.Dependiendo del objetivo y de lascaracterísticas de nuestra compañía oproducto, se define el perfil de la cuenta, quepodrá estar orientada a marketing y ventas,comunicación con clientes, contacto concolegas y competidores o como una fuentemuy valiosa de información para evaluar larepercusión de nuestras campañas e imagenen un público determinado. En este sentido,una aplicación para destacar es el “TwitterSearch”, con la cual se rastrean las mencionesque se hayan hecho a nuestra empresa, 35
  35. OBJETIVOS DEL PROYECTO Cartas de Servicio tener clara ventas calidad principales incluyen Estrategias Precio Construcción Rentabilidad Objetivos principales sitio web Alcanzar éxito Hacer Ganar Atraer negocios Dinero Clientes Comunidad sobre Servicio Usuario ¿Qué se ofrece? identi cado que consigan Servicio de E cacia Calidad imprenta Vinculos Fidelizar con unióna la visitantes web CreaciónSolución de Slogans Contenidos Plantea-problemas mientos Medio Ofrecer comunica- dos principales armas contenidos ción perió- gratuitos o dica descuentos Crear Senti- miento de pertenencia 36
  36. C A P I T U LO I V - R E CO P I L AC I Ó N D E A N T E C E D E N T E SRECOPILACIÓNDE ANTECEDENTESCheeta es un proyecto de personas jóvenescon pasión al diseño, con ganas de emprendery desarrollar nuevos conocimientos en lo querespecta a esta área, impresión de proyectos dediseño, trabajos para la universidad y creaciónde diseños de todo tipo, ya sea tarjetas depresentación y afiches publicitarios.Apuestan a la diferencia, al valor agregado,a la seriedad y formalidad, y por sobre todoal trabajo profesional. Creemos en el buendesarrollo de este proyecto o de cualquier otroque nos propongamos, y que con creatividad ydedicación dará grandes frutos en el futuro. 37
  37. C A P I T U LO I V - R E CO P I L AC I Ó N D E A N T E C E D E N T E S DESCRIPCIÓN DE LA EMPRESA El proyecto, Cheeta Graphics nace como una manera de buscar una pronta, interesante y enriquecedora inserción en el mundo de la pequeña y mediana empresa, pero a la vez abarcando el área de diseño, en la que se posee conocimiento y por sobre todo pasión. Cheeta se encarga de la impresión en láser, en formato carta y tabloide con diferentes materiales que pueden ayudar al estudiante para que su proyecto quede bien impreso y con una excelente presentación. 38
  38. C A P I T U LO I V - R E CO P I L AC I Ó N D E A N T E C E D E N T E SVISIÓNCon este proyecto, se pretende desarrollar y/opotenciar las habilidades, además de fortalecerconocimientos tanto en el diseño, como en eluso de maquinaria, materiales, y por supuestointeracción con el cliente. 39
  39. C A P I T U LO I V - R E CO P I L AC I Ó N D E A N T E C E D E N T E S ANÁLISISDE MERCADO Si bien el desarrollo de la imprenta no es una idea nueva, se necesita un lugar en Maipú que pueda imprimir las 24 horas para los estudiantes, que sea de bajo costo y quede cerca de sus casas, ya que la mayoría de las imprentas que existen en la comuna no atienden todo el día y esto perjudica a los estudiantes que quieren que su proyecto se imprima de mejor manera y a cualquier hora. En la comuna existen varios lugares de impresión, entre ellos: Printing now > Ubicado en el mal Plaza Oeste, al frente de Duoc. Ofrece servicios de impresión digital, fotocopias e internet. Ctrl+P > Ubicado en Plaza Maipú, ofrece servicios de impresión de planos, digital. 40
  40. C A P I T U LO I V - R E CO P I L AC I Ó N D E A N T E C E D E N T E SMÉTODOSDEPROMOCIÓNEntregar flyers, volantes o folletos en lasafueras de universidades.Sitio web, Redes sociales: facebook, twitter,needish, flickr.DETALLES DE ENTREGA- Se entrega la impresión en una bolsa deplástico para que no se pueda ensuciar. 41
  41. C A P I T U LO I V - R E CO P I L AC I Ó N D E A N T E C E D E N T E S MÉTODOS DE PROMOCIÓN: FLYER Los flyers, denominados también, “Volantes” son folletos de pequeñas dimensiones y gramajes reducidos y que se utilizan para transmitir información publicitaria sobre productos y servicios de una empresa. Según la dimensión y plegado del flyer, puede clasificarse en: - Volante: Contiene una sola hoja y dos caras - Díptico: Compuesto por una hoja, un plisado y 4 caras - Tríptico: Compuesto por una hoja, dos plisados y 6 caras Eventualmente una hoja podría plisarse más veces. Los flyers, se encuentran dentro de la categoría de folletos, y son pequeños panfletos de reducido tamaño. Son también los que normalmente se reparten en grandes cantidades, a los clientes o consumidores que circulan a pie. La medida del flyer que mas se usa es de 21.5 x 14 cms (media carta).Esta es la que se usará para la promoción de la imprenta a través de flyer, formato volante, con impresión en una sola cara. 42
  42. C A P I T U LO I V - R E CO P I L AC I Ó N D E A N T E C E D E N T E SPRECIOS: REFERENCIADE MEDIDAS Y VALORES DISEÑO DE TARjETA DE PRESENTACIÓN, DEPENDIENDO DEL DISEÑO Y FORMA $ $ BANNER GRS $ CARTA TABLOIDE 30x150 BOND 90 250 450 123 COUCHE 135 250 450 123 COUCHE 170 260 460 123 COUCHE 300 300 500 123 OPALINA 225 280 480 123 ADHESIVO 80 400 600 123 43
  43. C A P I T U LO V - D E F I N I C I Ó N D E V I A B I L I DA D Y CO N T E N I D O SDEFINICIÓN DE Para la creación de la página web es imprimir trabajos de calidad y tambiénVIABILIDAD necesario realizar una investigación en que tengan internet, que es lo más la comuna de Maipú y cerrillos cuantas importante en este caso. Se hizo personas y estudiantes de institutos una investigación y se calculó que 1Y CONTENIDOS y universidades que estudian una carrera tienen la necesidad de universidad y 2 institutos, cuentan con carreras de diseño. UDLA INACAP DUOC UC Diseño de Diseño Diseño Diseño Diseño vestuario Gráfico Gráfico Industrial Gráfico 44
  44. C A P I T U LO V - D E F I N I C I Ó N D E V I A B I L I DA D Y CO N T E N I D O SDEFINICIÓN DE La mayoría de las personas en contacto en caso de alguna consultaVIABILIDAD Maipú cuentan con internet y lo por mail o por teléfono. Como la ocupan regularmente, es por eso mayoría de las personas que imprimen que es necesario crear un sitio web son estudiantes, es necesario crearY CONTENIDOS que permita dar información de la imprenta, el lugar en donde se una página interactiva y con diseño que llamen la atención al público encuentra, el portafolio realizado y objetivo. c to nta Co Qu CHEETA i somenes os Portafolio Ser vic ios nios Co nve 45
  45. C A P I T U LO V - D E F I N I C I Ó N D E V I A B I L I DA D Y CO N T E N I D O S DEFINICIÓN DE VIABILIDAD Y CONTENIDOS CHEETA Hoy en día toda empresa de cualquier tamaño necesita tener una presencia en internet para dar una buena imagen de prosperidad y futuro. Se da a conocer El tener pagina web aumenta en gran medida el conocimiento de su empresa o negocio, dándose a conocer por un inmenso número Nacional Internacional de empresas y personas (futuros clientes) no sólo locales, sino nacionales o incluso de todo el mundo. Mediante las búsquedas que hacen los clientes en los buscadores de internet informándose de productos y servicios que necesitan, aparecen como resultados las páginas web de las empresas que ofrecen esos productos y Nuevos Clientes servicios. Es decir, su empresa se da a conocer a otras personas y empresas que posiblemente se conviertan en nuevos clientes gracias a aparecer en un buscador de internet. 46
  46. C A P I T U LO V - D E F I N I C I Ó N D E V I A B I L I DA D Y CO N T E N I D O SDEFINICIÓN DEVIABILIDADY CONTENIDOSUna página web ayuda mucho como un canalde comunicación adicional para informar sobrelos productos y servicios que más interesapromocionar para aumentar la rentabilidad.Una de las mejores formas de promocionarproductos es por medio de un sitio web quetenga rankings elevados en los motores debúsqueda. Sin embargo, con tu propio dominioy tu propio sitio web, publicando contenidoúnico y consiguiendo enlaces externos estarásencaminado a conseguir tráfico gratuito de losmotores de búsqueda. 47
  47. C A P I T U LO V I - D E T E R M I N AC I Ó N D E C R O N O G R A M A S Y P R E S U P U E S TO S . CRONOGRAMA Días El siguiente cronograma indica las horas de trabajo de cada integrante del equipo de diseño durante el mes de Septiembre. Días Los días parten del 9 ya que ese fue el día que se comenzó a trabajar en el proyecto del sitio web, además están señalizados los días en Días rojo que fueron feriados. Las horas de trabajo fueron contabilizadas sumando en diferentes horas el día la cantidad total de horas en el Días encargo. 48
  48. C A P I T U LO V I - D E T E R M I N AC I Ó N D E C R O N O G R A M A S Y P R E S U P U E S TO S .CRONOGRAMA En este cronograma se puede apreciar el proceso de diseño durante las semanas que se trabajó en el proyecto. Los puntos graficados son los más importantes del desarrollo del encargo. Reunion de información y Busqueda de información Revisiones y correciones conversaciones con el cliente Diagramación del informe Diseño y grá cas Impresión 49
  49. C A P I T U LO V I - D E T E R M I N AC I Ó N D E C R O N O G R A M A S Y P R E S U P U E S TO S .PRESUPUESTOSCosto de hosting: Flash Catalyst CS5.5Hostingcenter.cl : $22.900 Fireworks CS5 Acrobat X Pro Bridge CS5Costo de dominio: Device Central CS5.5Tarifa de creación por 2 años _ $18.900 valor Media Encoder CS5.5de la creación {19% iva incluido} Flayers:Tarifa de renovación por 2 años $18.900 valor Flyer: 6.5x9.5 , 500 flyer =31 pesos cadade renovación (19% iva incluido} costo por año uno,=15500: $9.450 Afiches: tamaño tabloide, 30 afiches, 500 pesos cada uno=15000Licencia programas adobe:CS5 Adobe Design Premium 5.5 Windows$149.900Contenido:Photoshop CS5 ExtendedIllustrator CS5InDesign CS5.5Dreamweaver CS5.5Flash Professional CS5.5 50
  50. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T ECONTROL DE Es importante que nuestro sitio se vea Existen varios tipo de utilidades queVARIABLE DE de forma atractiva y agradable, para podemos incorporar en la pagina, que nuestro público se sienta cómodo y pero debemos tomar en cuenta queS O P O RT E S puedan encontrar lo que ellos quieran. información contendrá el sitio, y así optar por lo más adecuado. Home Donde Portafolio { -6.0 Mapa El menú desplegable es un elemento en que dispone varios niveles, que se despliegan mediante el usuario pasa el puntero del ratón por encima de cada elemen- to. Pueden ser horizontales o verticales, pero existe el riesgo de que en algunos navegadores no dispongan del su ciente soporte de CSS. 51
  51. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E Close La galería de imagenes (Lightbox) nos permite mostrar los productos y servicios de la empresa. Estas imáge- nes se muentran en una serie de miniaturas que se amplían al pinchar sobre cada imagen. El uso JavaScript ha supuesto una revolución en la creación de las galerías de imágenes y ha permitido mejorar la experiencia de navegación del usuario. Es una técnica muy sencilla de utilizar, funciona correcta- mente en todos los navegadores y permite mantener la semántica del documento (no ensucia la página con código JavaScript). 52
  52. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E @ Los formularios nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir información de los usuarios de nuestro sitio. Los formularios están compuestos por campos de texto y botones. Una vez el usuario ha rellenado el formulario e introducido los valores en los campos, éstos son enviados para poder procesarlos. El envío de estos datos puede hacerse a un correo electrónico o a un programa que procese toda la información y nos ayude a hacer un seguimiento. 53
  53. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E <script type = “text/javascript”> < >Las galerías Jquery añaden muchas otras Por todo ello, es imprescindible utilizarnuevas ideas para crear una librería librerías JavaScript que simplifiquen elespectacular: muy pequeña, rápida, ligera desarrollo y permitan crear aplicacionesy con cientos de utilidades. Las aplicaciones compatibles con todos los navegadores,web cada vez son más complejas, ya que razón por la cual hemos seleccionado a Jqueryincorporan nuevos efectos visuales e para poder compatibilizar el encargo delinteracciones dinámicas. sitio web y tenga las condiciones optimas de funcionalidad al ser compatible y editableAl mismo tiempo, el desarrollo de las gracias a las opciones de CSS.aplicaciones web avanzadas es cada vezmás complicado, ya que deben funcionarcorrectamente en al menos 5 navegadoresdiferentes (Internet Explorer, Firefox, Chrome,Opera y Safari) y el tiempo de desarrollo sereduce por la necesidad continua de incluirnovedades en la aplicación. 54
  54. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T EPhotoshop es una aplicación para la creación, Se considera que el formato jpg es mejor paraedición y retoque de imágenes. Éste nos fotografía digital mientras que los formatospermite la combinación de sus herramientas .gif y .png son mejor para imágenes gráficas.y filtros, lo cual puede dar lugar a un sinfínde creaciones artísticas y publicitarias. El Para nuestro proyecto web y pensando en losmejor programa para trabajar con gráficos, en requerimientos del cliente la mayoría de losnuestro caso podemos retocar los afiches, fotos exploradores actuales soportan este formato.de productos y mejorar la estética de la pagina.El formato de imagen que nos permite unamejor calidad será JPG. Es un formato decompresión de imágenes, tanto en color comoen escala de grises, con una variedad de gamay calidad de exportación. 55
  55. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E Slider en un rotador de imágenes, en ella se muestran diversos efectos para las transiciones de las imágenes añadiéndole mayor dinamismo. Además de tener distin- tas animaciones, puede tener enlaces, descripciones de las fotos y se podrá navegar a través de ellas ya sea con los botones anterior y siguiente. Con HTML, CSS y JQuery podemos crear una forma de ver nuestras imágenes de forma sencilla y e caz. 56
  56. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T E Se utiliza para dar estilo a documentos html, separando el contenido de la presentación. Los estilos de nen la forma de mostrar los elementos. Permite controlar el estilo y el formato de múltiples páginas web al mismo tiempo. Protocolo de red para la transferencia de Es usado para describir la estructura y el archivos entre sistemas conectados a un contenido en forma de texto, así como red TCP (Protocolo de Control de Transmi- para complementar el texto con objetos sión), basado en la arquitectura cliente- tales como imágenes. HTML se escribe en servidor. forma de <etiquetas>, rodeada de corchetes angulares (<,>). Lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Es un lenguaje interpretado, usado para la creación de aplicaciones para servidores, o creación de contenido dinámico para sitios web. Va encapsulado dentro de los documentos html, de forma que se puedan introducir instrucciones php dentro de las páginas. 57
  57. C A P I T U L O V I I - C O N T R O L D E VA R I A B L E D E S O P O R T ECACOOHay una gran cantidad de sitios que nosofrecen el poder realizar diagramas ywireframes, el que nosotros utilizamos fueCacoo.Las opciones que nos brinda van desde losclásicos UML, Diagramas de Red, bosquejos desitios web, entre otros. Pero acá eso no es lointeresante, ya que el plus de esta herramientaes la colaboración en equipo en tiempo real.Cacoo permite crear los diagramas entre variosusuarios, y todo al instante.Es de fácil uso y es completamente gratis. 58
  58. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó N CONTENIDOS DELSITIO NORMAS Lo que debe llevar un sitio web Acerca de la Productos o Novedades de institución Servicios empresa Una vez que se han identificado los objetivos del sitio, se debe proceder a hacer las Cheeta Servicio de impresión definiciones más concretas que permitan decidir qué contenidos son los que va a tener ¿Quiénes son? ¿Qué hacen? el Sitio Web que se desarrolle. Cheeta es un proyecto realizado por Cheeta se encarga de la impresión en Hay que partir por las normas como se personas jóvenes con pasión al diseño, láser, en formato carta y tabloide con con ganas de emprender y desarrollar diferentes materiales que pueden presenta en la gráfica, teniendo en cuenta nuevos conocimientos en lo que ayudar al estudiante para que su respecta a esta área, impresión de proyecto quede bien impreso y cuales podrían ser las necesidades que podría proyectos de diseño, trabajos para la presentado. tener el usuario. universidad y creación de diseños de todo tipo, ya sea tarjetas de presenta- ción y a ches publicitarios. Esto debe ir para dar a conocer la identidad de la empresa, para saber cuales son exactamente los servicios que ofrecen. 59
  59. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó NCONTENIDOSDELSITIO El nombre hace alución a la rapidez del trabajo, haciendo Es importante presentar a la referencia al animal del empresa y darle a conocer al Informar el tipo de servicio que mismo nombre ofrece la empresa es importante Mostrar trabajos impresos usuario quiénes son las para que el usuario sepa a que se anteriormente es una manera persona detrás del servicio. enfrenta y no pierda el tiempo si CHEETA de dar a conocer la calidad del busca otra cosa. servicio. ¿QUIÉNES SERVICIO CONVENIO CONTACTO PORTAFOLIO SOMOS? Es necesario tener un medio de contacto para aclarar dudas o EMPRESA ESTUDIANTES aceptar sugerencias de los clientes de acuerdo al funcio- Crear un espacio donde los namiento del sitio o del servicio usuarios puedan informar lo que desean hacer, en caso de ser proyectos grandes y la imprenta puede ofrecer las soluciones que a ellos les parezcan adecuadas de acuer- do a los precios. 60
  60. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó NUSUARIOSDELSITIOViendo la lista mínima de contenidospresentada anteriormente, nos damos cuenta Seguidoque crecerá en la medida de las necesidades Información Contacto conde entrega de información de la institución, Externo de trámites por la empresa Intereseshay que hacer énfasis en que el interés de loscontenidos variará si se trata de un usuariointerno o externo.Un Sitio Web desde el punto de vista delusuario externo de la institución, lo que más Usuariole interesará será la información referida a lostrámites, seguida por la que informe acerca de Organigramacómo tomar contacto con la institución.Si la miramos desde el punto de vista del Información Seguidousuario interno, lo más importante será la Interno de noveda- por desinformación de Novedades, seguida por la de Interesesorganigrama y presentación interna. Presentación InternaPor lo mismo, es muy relevante que tanto losobjetivos como la audiencia del sitio se hayandefinido muy bien en forma previa, porque delo contrario no habrá posibilidad de atender aambos usuarios de manera adecuada. 61
  61. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó N Buena parte de la información que se TIPOYFUNCIÓN maneja en la red está relacionada con los negocios tanto desde el punto de vista del DELAINFORMACIÓN desarrollo y mantenimiento como desde el punto de vista estratégico y organizativo. Nuestra web se basa en este ámbito ya que En Internet se pude obtener información sobre lo que el sitio se usará básicamente para dar los más variados temas abarcando desde la a conocer los servicios y los productos de la bibliografía de un personaje famoso hasta imprenta. aspectos de la Historia del Mundo . En la gráfica se muestran algunos de los temas más importantes que se pueden conseguir en Internet. Se destacó la sección de negocios porque Educación Negocios la imprenta Cheeta, usará el sitio en la web con el fin de dar a conocer un servicio. Tipo de información en la web Entretención Deportes 62
  62. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó NINFORMACIÓNPÚBLICAOPRIVADALa información que se encuentra en el sitioes en su mayoría pública, es decir, que todoslos usuarios que entren al sitio pueden ver sucontenido e informarse de los servicios que serealizan y los productos que se entregan.No obstante en la sección de convenios, sólolos interesados y aquellos que manden un PÚBLICAcorreo mediante los formularios establecidos,podrán acceder a información de preciosespecífica, relacionada con los trabajos quequieren imprimir. PRIVADA 63
  63. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó N CANALESDE A ches COMUNICACIÓN Flyers Como se muestra en el gráfico, son las maneras de como se dará a conocer la existencia de la empresa, su servicio y su sitio web, para aquellos que estén interesados entren en este y se informen en su totalidad de como funciona Cheeta. 64
  64. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó NVÍNCULOSENTRELAINFORMACIÓNLa información que se encuentra en elsitio varia según el contenido elegido. Lanavegación en el sitio es no-lineal, es decir, elusuario tiene completo control de a donde ir yque contenidos ver.La información en el sitio está distribuida endiferentes formatos para lograr mantenerel interés del usuario. Por lo tanto seincluirá texto, imágenes, y videos que secomplementan entre si, haciendo amena lavisita. 65
  65. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó NM A PA D ENAVEGACIÓNEs el tratamiento comunicacional de los contenidos,en otras palabras es la organización de lapresentación de la información expresada en undiagrama denominado mapa de navegación.La importancia de elaborar un mapa de navegacióndel sitio web radica en la comprensión del orden depresentación de las pantallas con los contenidos y laflexibilidad de moverse entre ellas. 66
  66. C A P I T U LO V I I I - CO N T R O L D E L A A R Q U I T E C T U R A D E L A I N F O R M AC I Ó NM A PA D ENAVEGACIÓN SERVICIO ¿QUIÉNES SOMOS? ESTUDIANTES CONTACTO CONVENIO EMPRESA PORTAFOLIO EDITORIAL CORPORATIVO 67
  67. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OWIREFRAMEUn wireframe es una representación Notas que nos indiquen el comportamiento deesquemática de una página web sin algunos elementos.elementos gráficos, que muestran contenido ycomportamiento de las páginas. Sirven como En general esta herramienta es parte delherramienta de comunicación y discusión entre proceso de arquitectura de información yarquitectos de información, programadores, permite definir el detalle del contenido de lasdiseñadores y clientes. páginas más relevantes, por ello es aconsejable realizar el wireframe antes de empezar con elLas ventajas de usar Wireframes son por un diseño y la programación del proyecto web.lado que el equipo y el cliente se centra en eldiseño de contenidos y no en el diseño visual, Es también una valiosa herramienta paray por otro lado, definiendo la organización determinar claramente los contenidos a nively estructura en etapas previas al diseño y de página, junto con marcar hitos con el clienteprogramación se evitan cambios posteriores respecto al desarrollo del proyecto.más costosos, reduciendo así costos y tiempos.La información que deben contener loswireframes es: Inventario de contenido.Elementos cómo: cabeceras, enlaces, listas,imágenes, formularios, vínculos, títulos, layout. 68
  68. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OWIREFRAMEPrimera propuesta de wireframe, para el indexde nuestro sitio. 69
  69. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O WIREFRAME Primera propuesta de wireframe, para la sección de Quienes Somos, del sitio. Con las medidas en píxeles. También se muestra la interacción del usuario con el menú. 70
  70. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O WIREFRAME Primera propuesta de wireframe, para la sección de Portafolio del sitio. Con las medidas en píxeles y mostrando la interacción del usuario con el menú. 71
  71. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OWIREFRAMESegunda propuesta de wireframe, para indexdel sitio. Con las medidas en píxeles. Cambia elheader con el logo. 72
  72. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O WIREFRAME Segunda propuesta de wireframe, para sección quienes somos del sitio. Con las medidas en píxeles. Cambia el header con el logo. 73
  73. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OWIREFRAMESegunda propuesta de wireframe, paraportafolio del sitio. Con las medidas en píxeles.Cambia el header con el logo. 74
  74. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O WIREFRAME Tercera propuesta de wireframe, para Index del sitio. Con las medidas en píxeles. En esta propuesta cambia completamente la distribución de los elementos. 75
  75. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OWIREFRAMETercera propuesta de wireframe, parasección quienes somos del sitio. Con lasmedidas en píxeles. En esta propuestacambia completamente la distribución de loselementos. 76
  76. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O WIREFRAME Tercera propuesta de wireframe, para Portafolio del sitio. Con las medidas en píxeles. En esta propuesta cambia completamente la distribución de los elementos. 77
  77. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OGRÁFICAESTÁTICAPrimera propuesta de gráfica estática, paraindex del sitio. Rechazada por la pobredistribución de los elementos. 78
  78. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O GRÁFICA ESTÁTICA Primera propuesta de gráfica estática, para sección quienes somos del sitio. 79
  79. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OGRÁFICAESTÁTICAPrimera propuesta de gráfica estática, paraPortafolio del sitio. 80
  80. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O GRÁFICA ESTÁTICA Segunda propuesta de gráfica estática, para index del sitio, cambia la parte superior y el fondo. 81
  81. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OGRÁFICAESTÁTICASegunda propuesta de gráfica estática, parasección quienes somos del sitio, cambia laparte superior y el fondo. 82
  82. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O GRÁFICA ESTÁTICA Segunda propuesta de gráfica estática, para Portafolio el sitio, cambia la parte superior y el fondo. 83
  83. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OGRÁFICAESTÁTICATercera y definitiva propuesta de gráficaestática, para index del sitio, cambia la partesuperior, menú y el fondo. Esta propuesta fueaprobada por el cliente. 84
  84. C A P I T U LO I X - CO N T R O L D E D I S E Ñ O GRÁFICA ESTÁTICA Tercera y definitiva propuesta de gráfica estática, para quienes somos del sitio, cambia la parte superior, menú, y colores del fondo. Esta propuesta fue aprobada por el cliente. 85
  85. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OGRÁFICAESTÁTICATercera y definitiva propuesta de gráficaestática, para Portafolio del sitio, cambia laparte superior, menú y el fondo. Esta propuestafue aprobada por el cliente. 86
  86. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OR E SOLUCIÓ N Hemos establecido las pruebas de usuario en diferentes navegadores y resoluciones de pantalla, las más utilizadas en chile y estandarizadas. LosDEPANTALLA navegadores que utilizamos para realizar estas pruebas son Chrome, Mozilla e Internet Explorer, como se aprecia en las imágenes. 800x600 1024x768 1280x768 87
  87. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OR E SOLUCIÓ NDEPANTALLA 800x600 1024x768 1280x768 88
  88. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OR E SOLUCIÓ NDEPANTALLA 800x600 1024x768 1280x768 89
  89. C A P I T U LO I X - CO N T R O L D E D I S E Ñ OEVALUACIÓNDEPROPUESTASEn este punto del proyecto debemos evaluar ytestear la manera en que reciben los clientes lainformación y cómo se comportan en nuestrositio web. Lo primero es saber que piensan de laestética y forma de navegación de la página, paraesto hemos hecho pruebas en línea para que laspersonas naveguen y den su opinión al respecto.Todo esto lo hicimos llegar a personas al azarque fueron consultadas de realizar este testeoen las diferentes sedes educacionales (queimparten carreras relacionadas al diseño), lascuales son nuestro público objetivo, del cualrecopilamos mucha información y buenascríticas.Los resultados de estas pruebas fueronsatisfactorios y se planea hacer encuestas cadaun tiempo establecido y poder ir evolucionandode acuerdo a los avances y encargos de losusuarios. La información está bien distribuiday es fácil llegar a los contenidos principales einformación, está bien definido el espacio pararedes sociales y es fácil de ubicar y recordar. 90
  90. CONCLUSIÓNPodemos concluir con este informe, lo Gracias a este informe logramos aprenderimportante de conocer los procesos y cómo trabajar como equipo y organizarconceptos básicos de diseño y estructuración mediante cronogramas y juntas, los tiempos ypara poder realizar un proyecto de página segmentos del proyecto para poder trabajar deweb. manera eficaz y conseguir un buen resultado.El poder informarse de manera adecuaday detallada tanto de la empresa, como delos usuarios y posibles clientes, para poderentregar y satisfacer por medio de nuestrodiseño de navegación todas las interrogantesde ellos.Como equipo de diseño entendimos loimportante de aprender y saber los procesospara poder mostrar de la mejor manera, losconceptos que la imprenta Cheeta Graphicsdesea. La buena organización y planificaciónpermite concretar este objetivo de maneraeficiente y clara. 91
  91. BIBLIOGRAFÍACapítulo I:http://www.maestrosdelweb.com/editorial/intera/http://www.internetips.com/articulos/detalle.php?iid=69http://definicion.de/multimedia/http://vectoralia.com/manual/html/la_navegacion.htmlhttp://www.hipertexto.info/documentos/glosario.htm#Mhttp://www.comparahosting.cl/?gclid=CJO5q8vSp6sCFZBb7AodTj165whttp://www.hosting.cl/http://www.hostingcl.cl/plans.phphttp://www.powerhost.cl/hosting-corporativoshttp://www.planetahosting.cl/hosting.phphttp://www.hostingcenter.cl/http://www.contratar.org/que_es_un_dominio.phphttp://www.sinemed.com/recursos/docs/MySQL.pdfhttp://www.nic.clCapítulo II:http://www.google.com/url?sa=t&source=web&cd=7&ved=0CGQQFjAG&url=http%3A%2F%2Fdialnet.unirioja.es%2Fservlet%2Ffichero_articulo%3Fcodigo%3D293019%26orden%3D0&rct=j&q=etapas%20sitio%20web&ei=L6t-TtbiCcqgtgfN9IjdCQ&usg=AFQjCNF309ejNW-Hj-n9nlU3jgwDzOh_Tg&sig2=KSoURexdv4rD5sCzmzMr9QCapítulo III:http://estudios.anda.cl/recursos/comScore%20SOI%20Chile%20August%202010.pdfhttp://www.slideshare.net/glever/usuarios-internet-perfil-y-hbitos-presentationhttp://www.maipuasuservicio.cl/noticias2.php?id=507http://www.gestiopolis.com/Canales4/ger/elobweb.htm 92
  92. BIBLIOGRAFÍACapítulo IV:Imágenes sacadas:http://culturacliente.com/boletin/BoletinCulturaClienteCRM1-2010.htmlhttp://dzineblog.com/2008/06/cool-business-card-3.htmlhttp://www.facebook.com/CtrlPeCapítulo VI:http://www.reifstore.cl/http://www.nic.clCapítulo VII:http://www.librosweb.eshttp://www.dinvaders.comhttp://www.abcdisegno.comhttp://www.manualdephp.comhttp://www.manualdecss.com/http://www.desarrolloweb.com/Capítulo VIII:http://www.guiaweb.gob.cl/guia/capitulos/dos/contenidos.htmhttp://www.mitecnologico.com/Main/TiposDeInformacionhttp://www.mariapinto.es/alfamedia/mapa_canales.htmhttp://www.hipertexto.info/documentos/map_navegac.htmCapítulo IX:http://www.creativosinformados.com/blog/herramientas/wireframes/ 93

×