Guia 1 Introduccion Al Diseño Web PDF

 

iseño de Página Web

Guía 1  

Introducción al diseño web  Contenidos 

N° Clases 

  ¿Qué es una web?



  Los protocolos de Internet en el desarrollo web



  El hipertexto y la hipermedia



  Las URLs



  Los nombres de dominio



  Los nuevos nombres de dominio



  Las direcciones IP y el sistema de nombres de dominio



  ¿Cómo son interpretadas las webs por los navegadores?



5

  La programación web



  El desarrollo web



  Tecnologías empleadas en el desarrollo web



  Planificación del diseño web



  Sitios web estáticos VS sitios web dinámicos



  W3C y web semántica



  ¿Y qué podemos decir de la web semántica?



  Prototipado: wireframes, mockups y prototipos



  Prototipos visuales de alta fidelidad



INTRODUCCIÓN AL DESARROLLO WEB

Es imposible calcular la cantidad de páginas web que existen en Internet ¡posiblemente miles de millones! Pero no todas ellas tienen un diseño profesional ni están optimizadas para ofrecer una buena experiencia de usuario. La gente tiende a asociar el diseño a la aplicación del buen gusto, pero  los mejores diseños web se preocupan tanto de la forma como de la funcionalidad. Según un estudio est udio de la l a Universidad de Standford, Sta ndford, estas páginas son percibidas como más confiables y fáciles de usar. Para conseguirlo, un profesional del diseño web debe hacer uso de los elementos permitidos en el HTML dentro de los estándares establecidos en la W3C y tener en cuenta todo lo relativo a la web semántica. Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

¿Qué es una web?

Cuando hablamos de un sitio web nos estamos refiriendo en realidad a un conjunto de archivos (texto, imágenes, audio) que se presentan de forma estructurada mediante un lenguaje de marcado llamado HTML.  Así, las webs funcionan como sistemas de distribución distribución y recuperación recuperación de documentos basados en el hipertexto. Estos archivos y documentos se encuentran en los servidores web que son en realidad computadoras especialmente adaptadas y conectadas de forma permanente a Internet. Los buscadores realizan un seguimiento de los enlaces que apuntan hacia estos archivos mediante el protocolo HTTP y el lenguaje de marcado de hipertexto HTML organiza y estructura la información para los navegadores.  A su vez, vez, las hojas de estilo estilo CSS indican cómo se mostrará esta información información en los diferentes dispositivos (computadoras, tablets, móviles). Esta metodología beneficia mucho la accesibilidad del documento. La ventaja del HTML es que nos permite presentar diferentes diferente s tipos de archivo de forma simultánea (texto, gráficos, vídeo) creando enlaces o hipervínculos entre ellos o hacia otras páginas web ubicadas en cualquier lugar del mundo. Este procedimiento aparentemente sencillo con el que estamos tan familiarizados, implica una gran complejidad y la intervención de diferentes tipos de procesos.

Los protocolos de Internet en el desarrollo web

Los protocolos de Internet son conjuntos de normas para compartir datos entre equipos o dispositivos. Son estándares que cumplen un papel fundamental en el funcionamiento de Internet. Este conjunto de protocolos de red se conoce como TCP/ IP. Cada uno de ellos cumple funciones muy específicas, por ejemplo, HTTP para navegar, FTP para transferir archivos o SMTP para el correo cliente/ servidor.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

El hipertexto y la hipermedia

Las páginas web son el ejemplo más conocido de hipertexto e hipermedia pero, existen otros sistemas que también se basan en estos dos conceptos. Mucha gente cree que Tim Berners-Lee, el padre de la web, fue también el inventor del hipertexto, pero pe ro no es así, él mismo lo aclara en su libro "Tejiendo la red": Yo llegué en el momento justo interesado cuando el hipertexto e Internet habían visto ya la luz, la tarea que me correspondía era hacer que casaran. Efectivamente, Tim Berners-Lee no inventó ni el hipertexto ni Internet. Por cierto, el nacimiento de Internet te lo explico en el vídeo, Entonces, ¿quién inventó el hipertexto? El hipertexto no tiene un padre evidente porque fueron varias las personas que idearon sistemas similares al hipertexto en los últimos 100 años. Una de las primeras referencias del concepto de hipertexto se atribuye a Paul Otlet, que es considerado el fundador de la bibliografía y la documentación. A principios del siglo XX, Paul Otlet imaginó Mundaneum, un archivo centralizado en el que se recogiese todo el conocimiento de la humanidad. A principios del siglo XX, no existían los ordenadores así que el sistema se basaba en el empleo de fichas. En estas fichas existían enlaces que permitían conectar las fichas entre sí, como si fueran las páginas web actuales. Mundaneum ofrecía un servicio de búsqueda que admitía solicitudes de búsqueda por correo, correo postal de toda la vida, no correo electrónico actual. En el año 1934, Paul Otlet imaginó una red global que permitiría a la gente buscar y navegar a través de millones de documentos, imágenes y vídeos interconectados. ¿Te recuerda esto algo? ¡Fíjate, fíjate lo que decía! Desde su sillón todo el mundo oirá, verá, participará, incluso será capaz de aplaudir, dar ovaciones, cantar en el coro, añadir sus gritos de participación a los de todos los demás.

¿Es posible hacer todo esto hoy en día? Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

Otro precedente de lo que entendemos en la actualidad por hipertexto lo encontramos Vannevar Bush. Vannevar Bush fue un visionario para su época, ingeniero e inventor, durante la segunda guerra mundial fue administrador del Proyecto Manhattan que desarrolló las dos primeras bombas nucleares. En julio de 1945, Vannevar Bush publicó el artículo "As We May Think en The Atlantic Monthly", sobre un dispositivo fotoeléctrico y mecánico llamado Memex, capaz de crear y seguir enlaces entre distintos documentos almacenados en microfichas. En definitiva, un sistema muy parecido a lo que hoy conocemos como hipertexto. La máquina Memex era bastante tosca y rudimentaria, porque estaba limitada por la tecnología que existía en el momento en que fue concebida pero, no fue hasta en 1963 cuando Ted Nelson acuñó los términos térm inos hipertexto e hipermedia. Ted Nelson es considerado un visionario y también un vendedor de humo por su Proyecto Xanadú, el primer sistema basado en hipertexto que, 50 años después, todavía está en desarrollo. Además, del hipertexto y la hipermedia Ted Nelson también ha desarrollado otras ideas geniales, como la teledildónica. ¿Qué es el hipertexto? Según el diccionario de la lengua len gua de la Real Academia Española hipertexto es: conjunto estructurado de textos, gráficos etcétera unidos entre sí por enlaces y conexiones lógicas. Un texto normal como por ejemplo, un libro, normalmente está limitado a una organización lineal o secuencial. Sin embargo, el hipertexto permite saltar de un punto a otro, en un mismo texto, o a otro texto a través de referencias. De este modo, en lugar de leer el texto de forma continua, en el hipertexto ciertos términos están relacionados y el texto se puede leer siguiendo diferentes caminos. Las relaciones en el hipertexto se establecen entre lo que se suele llamar como referencias, enlaces vínculos o hipervínculos y, ¿qué es la hipermedia? El término hipermedia no figura en el diccionario de la lengua española de la RAE pero, podemos buscar un término relacionado con hipermedia, multimedia. Según el diccionario de la Lengua Española, multimedia es un adjetivo que significa: que utiliza conjunta y simultáneamente diversos

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

medios como imágenes, sonidos y texto, en la transmisión de una información. Por tanto, un sistema multimedia es un sistema de comunicación en el que se emplean dos o más medios de comunicación distintos de forma concurrente. Un sistema multimedia puede integrar texto, voz, audio, fotografías, gráficos interactivos, vídeos, realidad virtual y otros. Un sistema multimedia proporciona una gran riqueza y una mayor flexibilidad a la hora de comunicar la información. La calidad multimedia no está restringida al mundo de los ordenadores así, por ejemplo, un libro acompañado de un CD de música ya es una obra multimedia. Para algunos autores, hipermedia es un término que nace de la unión del hipertexto más la multimedia, por tanto, si juntamos las definiciones de hipertexto y multimedia, podemos obtener la siguiente definición de hipermedia: conjunto estructurado de diversos medios como textos, gráficos, imágenes y sonidos unidos entre sí por enlaces y conexiones lógicas para la transmisión de una información. Si la multimedia proporciona una gran riqueza a la información, el hipertexto aporta una estructura que permite que la información pueda presentarse y explorarse siguiendo distintas secuencias de acuerdo a las necesidades y preferencias del usuario. Existen muchos sistemas que se basan en el hipertexto y la hipermedia pero, la web es el sistema más conocido y por eso la web se ha convertido en sinónimo de hipertexto e hipermedia. Por último, si los conceptos de hipertexto e hipermedia no fueron inventados por Tim Berners-Lee, ¿qué inventó Tim Berners-Lee? Tim Berners-Lee tiene la respuesta, sólo tenía que tomar la idea del hipertexto y conectarlo a las ideas de TCP y DNS y ¡tachan! La Web.

Las URLs

Tim Berners-Lee es considerado el padre de la web, ya que desarrolló las tres tecnologías fundamentales de la web, HTML, Hypertext Markup Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

Language, el lenguaje de marcado o etiquetado que se emplea para crear, para escribir los documentos o páginas web. HTTP, Hypertext Transfer Protocol, el protocolo o lenguaje con el que se comunican el navegador y el servidor web y que se emplea para transmitir los documentos web por Internet, URL, Uniform Resource Locator, el localizador de recursos uniforme, el sistema de localización o direccionamiento de los documentos web. ¿Qué es el esquema en una URL? El esquema suele representar el protocolo es decir el mecanismo o método que se emplea para recuperar un recurso a través de una red de ordenadores, a veces, en vez de esquema se emplea el término servicio en el contexto de una URL son equivalentes.

Los esquemas más conocidos son http, https, ftp, mailto y file. Las URLs son un elemento básico de la web ya que son las que definen los hiperenlaces o hipervínculos y permiten definir el hipertexto que permite relacionar información de diversas fuentes por medio de enlaces hay que ser muy cuidadosos a la hora de definir una URL. Tim Berners-Lee, el padre de la web, nos avisa de ello con la siguiente frase: Es el deber de un webmaster asignar URLs que sean capaces de ser válidas durante 2 años, 20 años, 200 años.

¿Qué es lo que quiere decir Tim Berners-Lee con este consejo? Un sitio web no es algo estático, un sitio web evoluciona con el tiempo, se modifican las páginas se eliminan las páginas y se añaden páginas nuevas. Cuando se asigna una URL a una página web, esa URL debe ser válida durante toda la existencia de esa página web, no se debe de modificar por los posibles cambios que afecten a otras páginas del sitio web. Si una URL deja de ser válida los visitantes de un sitio siti o web se pueden encontrar con la desagradable sorpresa de “página no encontrada”, el famoso error 404.    A veces una URL puede ser muy larga y complicada, por lo que puede ser difícil de memorizar, de copiar o de comunicar. Para solucionar soluciona r este problema se emplean los acortadores de URLs, un mecanismo que permite convertir una URL larga en una URL corta. Estos sistemas se han popularizado en los Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

últimos años debido a la aparición de sistemas como Twitter, que limitan la longitud de los textos que se pueden escribir. Los acortadores de URL más populares en la actualidad son el de Google, el de Bitly y el Owly. Hay más cosas que deberías saber sobre las URLs, por ejemplo, deberías saber qué son las URLs amigables y por qué son importantes, pero eso te lo dejo como ejercicio para que lo investigues. Ya por último, una precisión, desde 1994 en los estándares de Internet el concepto de URL ha sido incorporado dentro del más general de URI, Uniform Resource Identifier, en español identificador uniforme de recurso. Pero el término URL aún se utiliza ampliamente. Los nombres de dominio

Las URLs son las direcciones que se emplean para localizar los recursos en Internet. Una URL se compone de varias partes, aunque una URL se escribe de izquierda a derecha, vamos a analizarla al revés. De derecha a izquierda tenemos el documento, la ruta al documento, el nombre de dominio, que puede contener un subdominio, y el esquema que suele ser el protocolo de acceso o de comunicación. El nombre de dominio es un nombre único que normalmente se emplea para identificar un sitio web en Internet. Hasta hace unos años en los nombres de dominio sólo se podían usar los caracteres ASCII. La tabla ASCII contiene 128 caracteres numerados del 0 al 127, pero solo hay 95 caracteres ASCII imprimibles, numerados del 32 al 126. La tabla ASCII contiene las letras del alfabeto inglés pero no contiene otras letras como las vocales acentuadas o la ñ, lo cual plantea un problema para el español. Debido a esto, antes no podían existir nombres de dominio como españa.es o coruña.es. Sin embargo, gracias a la introducción del nombre de dominio internacionalizado, ya es posible utilizar nombres de dominio con caracteres en otros idiomas, pero por ahora no está muy extendido su uso.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

 Aunque se puede identificar identificar un ordenador ordenador por su nombre de dominio, en realidad internamente, en Internet se identifican los ordenadores por medio de la dirección IP. Como existe una correspondencia entre los nombres de dominio y las direcciones, en una URL también se puede escribir una dirección IP, en vez del nombre de dominio. Un nombre de dominio puede ser el nombre de una empresa o el nombre de una institución o el nombre de una organización o también el nombre de una persona o cualquier cosa que uno quiera. Los nombres de dominio se organizan en diferentes niveles. Los dominios de primer nivel se organizan en genéricos y territoriales. Los genéricos son dominios de propósito general y eran inicialmente los que acababan en .com, .edu, .gov, .mil, .net y .org, pero posteriormente se han añadido otros como .biz, .mobi y .xxx. El registro de nombres de dominio bajo .com .org y .net, no está sometido a ningún tipo de comprobación previa se asignan siguiendo el principio de primero en llegar, primero servido. Los territoriales son los que identifican el país como .es para España, .ec para Ecuador, .fr para Francia o .de para  Alemania. El registro registro de nombres nombres de dominio dominio territoriales territoriales está está sometido sometido a las normas de cada país. Por ejemplo, en España lo gestiona la organización red.es y podemos encontrar toda la información sobre su funcionamiento en el sitio web: dominios.es. Los dominios de nivel 2 son los que normalmente registramos al solicitar un dominio, como, por ejemplo, sergiolujanmora.es. En algunos países existe un tercer nivel de organización, por ejemplo, en España existen los dominios controlados: .com.es, .nom.es, .org.es, .gob.es y .edu.es, que permiten que existan dominios como datos.gob. o mecd.gob.es.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

Ya para terminar, vamos a analizar anal izar una dirección o URL. Por ejemplo, en esta dirección podemos distinguir los niveles .es como nivel 1 o nivel superior dominio territorial .ua como nivel 2 y www.dlsi como nombre de máquina o host. Por último, te propongo que averigües para qué sirven los dominios example. com y example.org y cuál es la organización que los gestiona. Los nuevos nombres de dominio 

El punto hace nuevos amigos, más de 1300 y juntos cambiarán Internet de una manera nunca antes vista. Los viejos amigos como .org, .net y .com, así como muchos amigos de dos letras de todo el mundo seguirán sintiéndose al lado del punto. Pero estos nuevos amigos prometen mostrarnos nuevas cosas, llevarnos a nuevos lugares y abrir nuevos caminos hacia la innovación. Algunos son marcas, nombres que ya conocen que están diseñando nuevas maneras de servir, aún, mejor sus necesidades en línea. Algunos son genéricos, palabras palab ras de uso cotidiano que podrían atraer sus intereses personales o profesionales en línea, otras son ciudades y pueblos que ofrecen un hogar en línea para usted o su negocio y que facilitan su visita. Y por primera vez, nombres de punto pun to en una multitud de idiomas y caract caracteres, eres, dándole voz a los más de mil millones de usuarios de Internet.

Gracias a los muchos nuevos amigos del punto, Internet está cambiando  Aspectos  Aspecto s clave .com, .org, .net y otros más fueron los primeros nombres de dominio que existieron en Internet. Pero Internet ha crecido mucho desde su nacimiento (¿recuerdas cuándo y dónde nació Internet?, si no lo recuerdas, vuelve a ver el vídeo sobre la historia de Internet), las necesidades han aumentado y esos nombres de dominio se han quedado pequeños.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

 A mediados mediados de 2012, 2012, ICANN ICANN (Internet (Internet Corporation Corporation For Assigned Assigned Names Names and and Numbers), el organismo que regula los nombres de dominio, domi nio, publicó una lista con los 1.930 nuevos nombres de dominio de primer nivel que habían sido solicitados durante el proceso que había iniciado unos años antes. Estos nombres de dominio no existen todavía, se están introduciendo poco a poco y algunos han sido rechazados (en Program Statistics se puede consultar el número de nombres de dominio que han sido introducidos o rechazados hasta el momento).  Algunos de de los nuevos nombres nombres de dominio dominio se refieren refieren a profesiones, profesiones, como .abogado o .doctor, así como a empresas y marcas, como es el caso de .microsoft, .google, .canon, .dunlop o .calvinklein. Respecto a España, destacan los dominios geográficos como .barcelona o .madrid, junto a los de marcas como .zara o .movistar, .mo vistar, y entidades financieras como .lacaixa y .bbva. Y respecto a Latinoamérica, algunas empresas han solicitado nombres de dominio específicos, como .avianca., .globo o.uol.

Las direcciones IP y el sistema de nombres de dominio Recuerda que el nombre de dominio puede identificar a toda una red o a un ordenador o dispositivo de red en particular. Los nombres de dominio se

tienen que transformar en direcciones IP ya que ese es el sistema que realmente se emplea para identificar un ordenador en Internet. Pero, ¿cómo se realiza esa transformación? Una dirección IP identifica un ordenador o cualquier otro dispositivo de red, como un router o un switch, en Internet. Cualquier dispositivo que se conecta a Internet ya sea un ordenador una tableta o un teléfono móvil tiene asignada una dirección IP. En la actualidad existen dos sistemas de direccionamiento, dos conjuntos de direcciones IP: IP versión 4 e IP versión 6. Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

Las direcciones IP versión 4, se expresan por un número binario de 32 bits permitiendo un espacio de direcciones de hasta 4.294.967.296 direcciones. Todo esto seguramente te suena a chino pero, lo que quizás no te suena a chino son números como estos, alguna vez los habrás visto en tu ordenador o en tu teléfono móvil. Estos son direcciones IP representadas de una forma más fácil de entender para nosotros los humanos. Quizás pensarás que este número es muy grande, que es suficiente para asignar una dirección IP a cada dispositivo actual que se conecta a Internet, pero per o no es así, este número se ha quedado muy pequeño, así que se ha tenido que ampliar. Para eso se ha desarrollado IP versión 6. Las direcciones IP versión 6 se expresan por un número binario de 128 bits permitiendo un espacio de direccionamiento de hasta 3,4 x 10 elevado a 38. Lo que permite que cada persona en la tierra pueda hacer uso de millones de direcciones IP. Como las direcciones IP versión 6 son más largas se emplea la notación hexadecimal, cuatro dígitos hexadecimales separados por dos puntos. Se emplea esta anotación porque si se siguiera utilizando la de IP versión 4, tendríamos que escribir direcciones con números como estos. IP versión 6 tiene que sustituir a IP versión 4 pero, por diversas razones, su implantación está siendo muy lenta. Hasta ahora hemos visto que tenemos los nombres de dominio y también tenemos las direcciones IP y entre ambas existe una correspondencia. ¿Cómo se realiza esa correspondencia? Los nombres de dominio se transforman en direcciones IP mediante un sistema llamado DNS, Domain Name System o sistema de nombres de dominio, en español. El funcionamiento de DNS es un poco complejo: básicamente, es una base de datos distribuida entre diferentes ordenadores, los servidores de DNS, que se comunican entre sí. Pero de forma simplificada, cada servidor DNS posee una tabla con la correspondencia entre los nombres de dominio y las direcciones IP y cuando un servidor no dispone de una correspondencia concreta, sabe a qué servidor le tiene que preguntar para obtener la respuesta, la correspondencia entre nombres de dominio y direcciones IP.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

El uso de DNS ofrece numerosas ventajas, dos son muy fáciles de entender. Por un lado, los nombres de dominio son más fáciles de recordar aunque algunos nombres pueden ser realmente largos e inútiles. Sí, este nombre de dominio existe y existe una página detrás de este nombre. Por otro lado, el nombre de dominio es más fiable. La dirección IP puede cambiar con el tiempo por diversas razones, sin que tenga que cambiar el nombre de dominio. ¿Qué son los registros DNS? ¿qué tipos de registros DNS existen? Cuando dispongas de tu propio nombre de dominio y tengas tu propio servidor web o tengas contratado un alojamiento, necesitarás conocer los registros DNS. ¿Cómo son interpretadas las webs por los navegadores?

Cuando diseñamos un sitio web no sólo debemos enfocarnos en el usuario final y preocuparnos por cuestiones de estética o imagen corporativa. Nuestras webs, antes de poder ser visualizadas por personas, son rastreadas en Internet por los buscadores (encargados de indexarlas después) y distribuidas al cliente mediante un software lla mado “navegador” que interpreta el código y determina el modo en que estas son mostradas. Los navegadores son indispensables para realizar pruebas en el desarrollo web. Disponen de una interfaz con un marco donde se carga la página, una barra de direcciones y otros elementos (scroll, botones y diferentes extensiones que varían dependiendo de la configuración o de los extra que hayamos instalado). Todos los navegadores tienen un motor interno que se encarga de gestionar las comunicaciones y un motor de renderizado que interpreta inter preta el código HTML y CSS que controla la presentación visual de las páginas. Este motor puede presentar ligeras variaciones dependiendo del tipo de navegador que se utilice; por este motivo muchas webs no se ven igual en todos ellos.  Además, el “intérprete de JavaScript” también puede interpretar de forma diferente el código JavaScript en los distintos tipos de navegadores. Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

Por otro lado existen contenidos que los navegadores no pueden interpretar por sí mismos y necesitan ciertas extensiones o complementos para poder hacerlo, plugins, módulos o componentes añadidos. Los navegadores tienen también la capacidad de almacenar datos asociados a las cookies y otros archivos de las páginas que se visitan.

La programación web

Con el desarrollo de la web surgieron nuevos lenguajes de programación pensados para hacer las páginas más rápidas y seguras o para lograr una mayor interacción con el usuario.

Entre ellos estarían asp y php, dos lenguajes capaces de generar páginas en base a las consultas de los usuarios en el sitio. Buscan la información solicitada en una base de d e datos y crean cr ean las páginas web de forma instantánea. Las bases de datos más utilizadas son MySQL, Oracle, Informix de IBM y Microsoft SQL. Por otra parte, el DHTML (HTML dinámico) dinámi co) y el CSS (hojas de estilo) son dos elementos clave del diseño web ya que sirven para dar forma a las páginas web que visitamos y, además, implementan funciones que mejoran la interactividad con los usuarios (por ejemplo: botones que cambian de color al pasar por encima, textos que cambian de tamaño, etc.) El lenguaje Java crea archivos ejecutables que se instalan en el equipo de la persona que visita la web. Es muy útil para crear animaciones o pequeños programas que se cargan dentro de la propia página (calculadoras, juegos, etc.) Está claro que la programación es uno de los pilares del diseño web. Adem Además ás de ser bonita y actual, una página web debe ser segura y funcional. Una programación sin fallos garantiza que se cumplan estas premisas. El desarrollo web

En primer lugar, cuando se habla de desarrollo desarro llo web, mucha gente lo confunde o lo mezcla con el diseño web. Que quede claro desde un principio que son Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

actividades distintas, que en un proyecto web deberían ser realizadas por personas diferentes pero, es muy normal que en proyectos web pequeños, realizados por una o dos personas, el diseño y el desarrollo web pueden ser realizados por la misma persona. El diseño web se refiere al diseño visual de un sitio web o de una página web y con frecuencia implica el diseño de los elementos gráficos de la página. En el diseño se tienen en cuenta elementos gráficos como la tipografía, los colores, los tamaños y las proporciones. El diseño se suele realizar con una herramienta gráfica como Adobe Photoshop o GIMP y proporciona el marco para la presentación y el comportamiento de la página. El producto final del diseño web no suele contener código. El diseño de la página puede ser una simple imagen en formato png, por ejemplo, es utilizado por el mismo diseñador o por otra persona como base para el código de la página web. El diseño de la página se divide, se trocea, en partes que se pueden representar mediante código HTML, CSS o se convierten en elementos puramente gráficos. La persona que realiza el diseño de un sitio web se le suele llamar el diseñador. Por otro lado, el desarrollo web se refiere a la programación necesaria para construir una aplicación o sitio web. Se suele dividir en dos partes que pueden estar conectadas, la parte cliente y la parte servidor, que funcionan de forma independiente y emplean tecnologías distintas, aunque muchas veces, también interactúan por lo que también se habla de programación de la parte cliente-servidor. Para el desarrollo de la parte cliente, los conocimientos que se necesitan tener son, por un lado, HTML y CSS para la creación de las páginas web, y por otro lado JavaScript y el DOM, para la programación de la parte cliente. El desarrollo de la parte servidor se refiere a la programación necesaria para construir el back-end de un sitio. El back-end en la parte del sitio web que no ven los visitantes de un sitio web pero que es necesario para poder presentar la información correcta en el formato format o correcto a los visitantes. En el desarrollo de la parte servidor se emplean lenguajes de script como PHP, ASP, Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

 ASP.NET, JSP, Perl y Coldfusion para acceder a una base de datos y  ASP.NET, recuperar la información necesaria para visualizar una página web. Por tanto, el desarrollo web también cubre el diseño y desarrollo de las bases de datos y como una aplicación web está al alcance de cualquiera, también es necesario tener en cuenta la correcta seguridad del producto final. La persona que realiza el desarrollo web se le suele llamar el desarrollador. El siguiente gráfico extraído de la Wikipedia, resume las principales tecnologías que se han empleado y se emplean en la actualidad en el desarrollo web. Por un lado, tenemos las tecnologías del lado del cliente entre los que destacan HTML, CSS y JavaScript, por otro, tenemos tenem os las tecnologías del lado del servidor entre entr e las que destacan CGI, PHP, ASP y JSP. Podemos ver que todas estas tecnologías surgieron a mediados de los años 90 y su uso continúa hasta la actualidad. ecnologías empleadas en el desarrollo web

Existen dos tecnologías diferentes desde el punto de vista técnico, aunque complementarias: front end y back end. El término front end se refiere a los lenguajes que operan del lado del cliente para ser interpretados por el navegador. navegador . Los más extendidos son HTML, CSS y JavaScript. El HTML es un lenguaje de marcado de etiquetas et iquetas que define la estructu estructura ra del contenido, el CSS construye la apariencia de la página web y el JavaScript cubre otras funciones avanzadas que se relacionan con el comportamiento del usuario. Por otro lado la tecnología back end se refiere a la programación del lado del servidor. Consiste en procesar las peticiones de los usuarios mediante la interpretación de un script en el servidor web.  Aunque cada cada lenguaje lenguaje tiene sus particularidades, particularidades, el proceso proceso de scripting scripting del del lado del servidor es similar en todos ellos: 1. El usuario realiza una solicitud. 2. El código del lenguaje del lado del servidor hace una consulta a la base de datos que puede incluir cálculos y procesos. Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

3. Las páginas se muestran al usuario componiéndose en el momento de la búsqueda o interacción (secuencia de comandos del servidor).

Este proceso ocurre contínuamente cuando visitamos una web, cuando nos registramos en un sitio, cuando rellenamos y enviamos un formulario, etc. El hecho de que el código se ejecute en el servidor implica proteger esta información para que quede almacenada de forma segura. Por otra parte, la carga de la ejecución recae sobre el servidor que debe estar preparado para ello.  Además de las tecnologías tecnologías anteriormente citadas, citadas, desde hace varios años añ os se imponen los sistemas de gestión de contenidos o CMS que son aplicaciones web prediseñadas y configuradas para crear y administrar contenidos online. Los CMS reúnen varias de las tecnologías anteriormente citadas y han evolucionado hasta convertirse en el nuevo modelo de desarrollo de sitios web. Tienen plantillas con diseños y funcionalidades predefinidas que se pueden adaptar a las necesidades del cliente. Son una buena base para crear un proyecto web personalizado. También los frameworks o marcos de desarrollo agilizan mucho la creación de un sitio web, al igual que los IDE (interfaces (inte rfaces de desarrollo de aplicaciones) que son en realidad entornos de programación empaquetados como aplicaciones que nos facilitan una serie de herramientas: editor de código, compilador, depurador y constructor de interfaz gráfica. Algunos ejemplos de IDE son Eclipse, NetBeans, KDevelop, IntelliJ IDEA, Clarion, Visual C++ y otros. Planificación del diseño web

Ya hemos visto que la creación de un sitio si tio web implica mucho más que elegir los colores o estilo que vamos a emplear en nuestro diseño.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

Existen dos partes bien diferenciadas: la usabilidad y la estética. Ambas son muy importantes ya que una página funcional pero con mala estética no genera confianza ni imagen de marca, pero una página muy bonita con una navegación complicada o con una mala experiencia de usuario no genera conversiones. En los apartados anteriores los hemos explicado algunas cuestiones relacionadas con la funcionalidad de las páginas web, así que en los párrafos siguientes nos centraremos en los criterios para realizar un diseño atractivo. El primer paso es decidir el tipo de diseño que va a tener la web. Este debe estar de acorde a lo que los usuarios buscan en ella y al tipo de productos o servicios que se ofrezcan. El diseñador analizará todos estos factores y plasmará sus ideas en una maqueta. A veces lo más práctico es comenzar con un sencillo bosquejo a papel y lápiz donde damos forma a la estructura de nuestra página web: colocación de la cabecera, menús, footer y todos los elementos que formen parte de la web. Una vez que hagamos esto, pasaremos a trabajar la parte gráfica utilizando editores como Photoshop o Gimp para ordenar y colocar todos los detalles, fondos o estilo de las tipografías. Un elemento muy importante para la imagen corporativa es el logo. Este debe colocarse en un lugar visible, preferiblemente en el extremo superior izquierdo ya que es el primer sitio donde miran los usuarios al ingresar en la página y el lugar donde vuelven a fijarse para recordar dónde están. Debemos siempre guiar al internauta hacia la información que nos interesa que vea. Normalmente los usuarios mantienen una atención de apenas unos segundos en cada sección de una web, razón de más para que nos esforcemos en dirigir su atención hacia aquello que nos interesa. Los estilos de diseño llamados “ landing page” o páginas de aterrizaje cumplen esta función de guiar al usuario hacia las partes esenciales del contenido, esto es, el servicio o producto ofrecido. Tienen por lo general una estructura sencilla sencill a para lograr captar la atención del usuar usuario io y que realice una acción en la web: inscribirse en un boletín, realizar una compra, etc.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

Otro aspecto importante a tener en cuenta es la velocidad de carga de la web y el peso de las imágenes o archivos multimedia que subimos al sitio. Si superan los 100 kb podríamos estar relentizando innecesariamente la velocidad de carga de la web, haciendo así que los usuarios abandonen la página y aumente el porcentaje de rebote. De ahí que el e l tratamiento de las imágenes sea muy importante en el diseño web. Los software de edición de imágenes digitales vienen ya preparados para optimizar las imágenes en diferentes formatos sin que pierdan calidad.  Al final es importante importante conseguir conseguir que el sitio web que creamos obtenga consistencia y una imagen distintiva, logrando un equilibrio visual en el uso de colores, gráficos, fondos, tipografías, etc.

Sitios web estáticos VS sitios web dinámicos Según las características y pautas que sigamos durante el desarrollo web, los sitios que creamos pueden ser estáticos o dinámicos. Ya hemos visto que para acceder al conjunto de archivos que conforman un sitio web, nuestro equipo como cliente realiza una solicitud para ponerse en contacto con el servidor que almacena dicha información. Normalmente utiliza para ello un software de cliente conocido como “navegador ““.. Inmediatamente después, el servidor recoge nuestra solicitud y la atiende enviándonos un código que nuestro ordenador presenta después de interpretarlo. En los sitios web estáticos los contenidos se almacenan en directorios y son transferidos por medio de rutas. Si existe algún script en la página, este se ejecuta en el lado del cliente gracias al navegador.

En el caso de los sitios web dinámicos el proceso es algo más complejo. Después de que el navegador solicita acceder a la página y el servidor DNS brinda la IP, tienen lugar otros procesos del lado del servidor para encontrar y devolver la información. Esta consulta a la base de datos se ejecuta por medio de lenguajes de programación del lado del servidor (php, .NET, Ruby, etc.). Después el navegador interpreta este código y compone la página. El desarrollo de una web dinámica suele ser más complejo ya que requiere de conocimientos específicos de programación, creación y gestión de bases de datos. Pero su potencial también es mayor. Las webs dinámicas permiten crear aplicaciones que funcionan dentro del propio sitio web (encuestas, foros Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

de soporte, listas de suscriptores a un boletín de noticias, pedidos online, etc.). Al trabajar con bases de datos tenemos la posibilidad de almacenar información de nuestros posibles clientes y utilizarla utilizarl a después para campañas de marketing. Realmente merece la pena invertir en este tipo de plataformas.

W3C y web semántica

Ya que todos los navegadores interpretaban el código de manera diferente, hace algunos años los desarrolladores web se veían obligados a incluir indicaciones para cada navegador en concreto desde el que se accedía a la página. Esto hizo que se volviese necesario definir unos estándares que fuesen garantía de cierto equilibrio en los entornos online. Los diferentes comités de estandarización fueron precedidos por el “Web Standars Project”, formado por un grupo de diseñadores y desarrolladores que comenzaron a divulgar de forma organizada las recomendaciones de la World Wide Web, consorcio W3C, una comunidad internacional que promueve estándares para reducir costes y hacer más fácil el desarrollo. Con el paso del tiempo y la incorporación de varios navegadores de código abierto como Firefox o Chrome, los desarrolladores comenzaron a tomar conciencia de la importancia de seguir los estándares web.

 A día de hoy una de las mayores preocupaciones preocupaciones de las empresas empresas que encargan el desarrollo de un proyecto web, es que este tenga un diseño responsivo que funcione correctamente desde cualquier tipo de dispositivo. Sin embargo siempre existen algunas variaciones en la forma de interpretar el código por parte de los navegadores que obligan a los diseñadores a realizar ajustes para mejorar la apariencia y usabilidad de las páginas. Por este motivo cobra cada vez más importancia la adopción de ciertos estándares durante el desarrollo. ¿Y qué podemos decir de la web semántica?

Hemos visto que los estándares de la l a W3C en cuestiones de diseño son muy útiles para los desarrolladores ya que reducen costes y tiempo invertido en la creación de un proyecto. Pero no lo es menos emplear la tecnología para que los datos sean fácilmente legibles por las aplicaciones informáticas. Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

El término “semántica” procede de la Lingüística y se refiere al estudio del significado. Haciendo Hacie ndo las webs más semánticas lo que se busca es proyectar las propiedades lógicas y conceptuales del lenguaje a los entornos digitales, en otras palabras, hacer que las páginas sean más comprensibles para las máquinas, añadiendo metadatos semánticos y ontológicos a la World Wide Web. En 1990 nació la web tal y como la conocemos en la actualidad. Consistía en un programa cliente (navegador/ editor) basado en el lenguaje de etiquetas de hipertexto HTML junto con un protocolo de transferencia de hipertexto HTTP y el identificador uniforme de recursos digitales digital es URI para la localización de objetos digitales.

Pero ya a finales de esta misma década, el W3C comienza a plantear la necesidad de que las webs sean más semánticas. Existían muchas inexactitudes a la hora de estructurar contenidos y una carencia de descripciones normalizadas para los recursos digitales. Como consecuencia los resultados que ofrecían los motores de búsqueda eran bastante ambiguos. De esta forma la web semántica se marcó como objetivo que los usuarios encontrasen respuestas a sus preguntas de forma sencilla e intuitiva.  A todos nos ha pasado alguna vez que al h hacer acer una búsqueda búsqueda en Internet nos aparecían resultados que contenían las palabras clave que buscamos pero sin una relación coherente con la información en la que estamos interesados. La web semántica aspira a spira a superar este problema haciendo que todos los resultados sean más relevantes. Para lograrlo es necesario que la información que anida en las webs sea entendida por las máquinas. Los componentes principales de la web semántica son los metalenguajes y los estándares de representación. El XML (Extensive Markup Language) es una tecnología que se complementa muy bien con otras. Permite la transmisión de datos Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

estructurados, aportando sintaxis superficial sin restricciones sobre el significado. Otro elemento de la web semántica es el RDF (Resource Description Framework) que se encarga de establecer relaciones entre los datos, y los PICS (Platform for the Internet Content Selection) que ayudan a determinar si los datos son relevantes o no para los usuarios.  Además de todo lo anterior anterior,, hay otros elementos imprescindibles imprescindibles en la web semántica. El primero de ellos son las ontologías, una jerarquía de conceptos con atributos y relaciones. Tratan de definir redes semánticas de unidades de información interrelacionadas. El otro elemento clave son los agentes que interactúan con el entorno online para localizar la información que mejor se adapta a los parámetros de búsqueda indicados por el usuario. El objetivo de esta tecnología es garantizar que los entornos digitales tengan un uso lo más natural posible. La web semántica debería ser capaz de procesar los contenidos y razonarlos, realizando deducciones lógicas de forma automática. Para que esto ocurra es necesario estandarizar muchos factores: alfabeto, formatos, anotaciones sobre significados de palabras, conceptos generales… A día de hoy que un software sea capaz de llevar a cabo todas estas acciones de forma automática sin ninguna intervención humana, sigue siendo algo inalcanzable. Con todo, la web semántica tendrá un papel muy importante en los entornos online del futuro. fut uro. Los ordenadores están cada vez más cerca de desarrollar una inteligencia artificial que entienda el lenguaje humano de forma más completa. Existen ya algunos buscadores como Swoogle especializados en búsquedas semánticas. Por este motivo es importante seguir los estándares está ndares de la web semántica o al menos tenerlos en cuenta en el desarrollo de un proyecto web.

Prototipado: wireframes, mockups y prototipos

La responsabilidad de un arquitecto de información es, tal y como la explica Jesse Garrett en su conocido libro los elementos de la experiencia de usuario, identificar los objetivos del proyecto y las necesidades de los usuarios, especificar y requerimientos de la etiquetado aplicación web, definir y diseñar las los funcionalidades sistemas de navegación, organización, Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

y búsqueda, y finalmente, realizar el prototipado de la aplicación, Nuestra responsabilidad final es asegurar que los usuarios podrán encontrar y gestionar la información de manera efectiva. De la misma manera que un arquitecto realiza los planos y la maqueta del edificio antes de que este comienza a construirse, los arquitectos de información, nos valemos de la diagramación y el prototipado para especificar especifi car cuál será la organización, estructura, navegación y funcionamiento de la aplicación web. Es decir, al igual que ellos, realizamos planos y maquetas del sitio antes de que esté comienza a construirse. Los planos son diagramas de organización y funcionamiento y se suelen denominar Blueprint, diagramas de contenido o flujo o mapa web. A la hora de realizar la diagramación de una aplicación web, lo más importante es que sea comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos. Lo más importante es que la diagramación sea clara y comprensible y por ello, es muy recomendable incluir una leyenda con los símbolos utilizados, Las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página. Vamos a ver que hay diferentes tipos y qué distinguimos entre prototipos de baja fidelidad y de alta fidelidad. En ningún caso se debe incluir diseño gráfico en ningún prototipo, que se realiza en etapas posteriores y que es algo que es importante aclararle al cliente, cuando se le presenta el prototipo. protot ipo. No se deben utilizar colores, salvo los estrictamente necesarios y por ello, usamos gamas de grises. Los prototipos de baja fidelidad son dibujos estáticos, hablamos de sketching cuando realizamos bocetos de forma rápida informal en lápiz y papel para transmitir una idea o concepto con rapidez y claridad. Es una técnica muy útil en las entrevistas iniciales con el cliente para comunicar conceptos, proponerle alternativas un problema, durante un brainstorming o en las reuniones internas con un equipo de trabajo.  Antes de comenzar un prototipo más elaborado, elaborado, es conveniente conveniente comenzar con este tipo de bocetos para trabajar ágilmente con varias ideas, ir esquematizando las páginas y definir las diferentes zonas de la misma. Un wireframe es más elaborado e incluye el inventariado de contenido, es decir, qué contenido debe de estar presente en cada página. Los elementos de la misma como cabeceras, enlaces, listas, formularios, etcétera. El etiquetado de los vínculos o de los títulos, el layout, es decir, la ubicación, colocación y agrupación de los elementos de la página, así como la estrategia Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

de navegación y la priorización de los contenidos dentro de la misma. Wireframe así mismo, debería incluir el comportamiento mediante notas asociadas a los elementos para indicar cómo debe demostrarse o para definir su comportamiento funcional. Cuando tenemos una secuencia de wireframes, hablamos de un storyboard. Los prototipos funcionales son prototipos de alta fidelidad, también llamados a menudo maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas. Son prototipos y maquetas dinámicas normalmente en HTML que simulan o tienen implementadas partes del sistema final a desarrollar. Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web. La importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su implementación es vital. En primer lugar, el equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual. El cliente además, ve y comprende cómo será la aplicación mucho mejor que si se ofrece descrita en un documento. El prototipado prototipa do evita malentendidos entre el proveedor y el cliente o incluso entre los propios miembros del equipo, ayuda especificar los requerimientos a detectar inconsistencias o falta de funcionalidad y se convierte en un complemento de gran valor en el análisis. En segundo lugar, el prototipo se modifica con facilidad y rapidez. Se evitan así modificaciones posteriores, mucho más costosas cuando la aplicación ya se está implementando, de modo que se reducen costes y tiempos. Y, en tercer lugar, también permite realizar pruebas de usabilidad, como test con usuarios en etapas tempranas del proyecto. De este modo, se detectan y solucionan los problemas antes de comenzar su implementación y el resultado son aplicaciones web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios. Consejos básicos para realizar un buen prototipo y que se resumen en, sencillez y claridad, hazlo en blanco y negro, representa los tamaños y proporciones de los bloques de contenido, ten en cuenta las pautas de usabilidad y accesibilidad y sobre todo diseña para tus usuarios. En resumen, hemos hablado de la importancia de prototipar una aplicación web, antes de realizar su diseño gráfico o comenzar su implementación y cómo a su vez, el prototipado no debe comenzarse, sin haber definido Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

primero los objetivos del sitio, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web. Hemos visto que se distingue entre planos y maquetas los planos o blueprints, diagramas de contenido o flujo o mapa web sirven para mostrar la estructura de la aplicación y su flujo de navegación. Por su parte, las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página. Hemos visto también que se distingue entre prototipos de baja fidelidad, que son estáticos y prototipos de alta fidelidad, que son dinámicos. Hemos recomendado comenzar con un Sketch, es decir, un boceto rápido informal con lápiz y papel y después, un Wireframe representará con más detalle la aplicación, incluyendo notas asociadas a los elementos, sobre cómo se deben mostrar y su comportamiento funcional. Por último, los prototipos funcionales son maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar. Hemos visto que la terminología es muy variada y no siempre unívoca, pues todavía no está claramente asentada y por ello, al consultar la bibliografía y las referencias os recomiendo que nos centréis en aspectos terminológicos, sino sin o en las recomendaciones para realizar buenos diagramas y prototipos de vuestras aplicaciones web. [A+] Prototipos visuales de alta fidelidad El prototipo o diseño visual es la evolución del Mockup, un documento más elaborado y detallado donde darás estilo a los elementos generales y particulares del diseño, con elementos como el color, la composición, la tipografía y una buena dosis de creatividad, para obtener un prototipo más ajustado a tu diseño final. Así que, en este prototipo definirás las dimensiones en píxeles y los atributos estéticos de la mayoría de los elementos visibles de tu web, como pueden ser asignar el color de fondo y algunas zonas concretas de tu diseño y probar combinaciones. También delimitar y definir las áreas principales de la estructura general, donde irán colocadas las cajas contenedoras y los principales elementos de tu diseño. Definir y dimensionar las cajas de contenido, así como el espacio entre ellas, alineación y los elementos que contienen. También definir el espacio que ocuparán las imágenes, su forma y su posición y alineación, simulando el contenido cuando sea necesario. Trabajar con las tipografías y su comportamiento te ayudará a elegir la mejor opción, así como delimitar el espacio a las áreas de texto el color, el tamaño Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

de letra o aplicar efectos. Definir atributos dimensión y posición a menús de navegación listas y enlaces y diseñar y posicionar iconos, botones, logotipos y elementos decorativos dentro de tu diseño. Te darás cuenta que, a diferencia de los Mockups, donde trabajaste con escala de grises y sin detallar medidas y atributos, en esta clase de prototipos los elementos como el color, la posición, la alineación y la composición son muy importantes. Para empezar a diseñar tus prototipos visuales de la mejor manera puedes empezar usando cualquier software de edición de imágenes, como por ejemplo Adobe Photoshop o Gimp, que es una alternativa gratuita excelente. También puedes usar un software de dibujo vectorial, como Adobe Illustrator o Inkscape, que también es una alternativa gratuita. Puedes elegir para tu diseño el software que prefieras, dependiendo de tus posibilidades y habilidades. Te recomiendo, sin embargo, que busques uno que como mínimo, tenga la capacidad de trabajar en capas, para poder asignar a cada objeto unas dimensiones y espacios propios, también que te permita medir utilizando reglas e inspectores y de esta manera trabajar tu documento con dimensiones reales. Además, debería de permitirte editar imágenes, para poder explorar de una forma adecuada todas las posibilidades del diseño.  Antes de empezar empezar a trabajar con tu diseño, te voy a dar 5 consejos útiles, para facilitarte el primer paso del proceso. Mi primer consejo es que busques inspiración antes de empezar, esto forma parte de la investigación y además es muy importante para preparar un diseño, conceptualizarlo y después marcar las pautas de estilo de todos sus elementos. A continuación, verás algunos enlaces, donde podrás empezar a buscar inspiración, encontrar ideas o explorar tendencias. Una idea puede venir de cualquier parte y mi consejo es que te tomes un tiempo para buscar la inspiración y encontrar así el carácter y el mensaje que quieres dar a tu diseño, te daré a continuación algunas pautas que te pueden servir. Procuro investigar en distintas corrientes creativas, buscando así, referencias diferentes a los habituales, desarrolla tu idea y conceptualizada, probando todas las opciones y eligiendo la más adecuada, toma siempre en cuenta la temática de tu web, las tendencias del mercado y tu público, intenta beber de todas las fuentes posibles sin prejuicios y potencia tu creatividad para conseguir los mejores resultados.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

Mi segundo consejo es que establezcas establezc as una paleta básica de colores par para a tu diseño, es importante, para dar consistencia y estilo al prototipo. Te recomiendo usar una paleta básica de tres colores y después crear gamas y combinaciones a partir de ella, buscando la armonía y la consistencia en tu diseño. Para tu diseño vas a necesitar también una serie de elementos que serán tu principal material de trabajo. Imágenes y elementos gráficos, tipografías para el contenido, también iconos que puedes crear tú mismo y además tendrás el material proporcionado por tu cliente. Todos estos elementos, al igual que el establecer una gama de color, son tus herramientas creativas para dar forma y concepto a tu diseño. Para obtener los recursos necesarios en tu diseño, puedes comprarlos en los proveedores que mejor se ajusten a tu presupuesto. Otra opción es buscarlos en bancos de imagen con licencias más amplias o de uso gratuito o puedes generarlos tú mismo, ya sea con una cámara fotográfica o creándolos con ayuda de un software. También contarás con el material gráfico de tu cliente. Es importante que tengas en cuenta cuando diseñes las imposiciones creativas, como puede ser la imagen corporativa de tu cliente.  Al igual que que el color color con los elementos elementos gráficos, la tipografía tipografía o tipo de letra aportará aportará carácter identidad a tu diseño. Mi cuarto consejo es que definas las tipografías cuidadosamente. Cuando escojas un tipo de letra toma en cuenta siempre la legibilidad y su capacidad de adaptación, así como su significado y la relación que tiene con tu idea, escoger un tipo de letra con carácter, enriquecerá tu diseño. Mi último consejo es que recopiles y organices adecuadamente todo tu material de trabajo para empezar a diseñar. Este material de trabajo puede ser, por ejemplo, los Mockups, los cuales te servirán de base para iniciar tu diseño. También tendrás la información de tu cliente, que tendrás organizada y clasificada y contarás también con los recursos y el material gráfico recopilados previamente. Tendrás también elementos específicos de imagen como pueden ser los logos. Para empezar a diseñar el aspecto visual de tu web es mucho más fácil si tienes parte del camino recorrido con éxito, si has trabajado el Mockup, tienes una idea conceptualizada y tienes los recursos necesarios para desarrollar esa idea, puedes empezar a diseñar libremente con tu software de edición preferida. Te doy cinco consejos para trabajar con tus diseños. Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

En primer lugar, te aconsejo que trabajes tus documentos utilizando capas. En un diseño es muy importante la organización, ya que se trabaja con muchos objetos y áreas distintas. Para poder trabajar cada elemento de tu diseño adecuadamente, debes organizarlo en capas que te permitirán editarlos o sustituirlos con facilidad. Trabajar en capas te facilitará el trabajo de organización dentro de tu diseño permitiendo darle a cada elemento un espacio y dimensiones propias y te facilitará la futura exportación al entorno HTML. Además, te permitirá probar varias opciones de una misma idea.  Al trabajar en tu documento, documento, te recomiendo recomiendo que le asignes una capa a cada elemento de tu diseño, dándole así un espacio propio. También te recomiendo que agrupes en carpetas, los diferentes objetos comunes a una misma zona para poder facilitar futuros cambios. Recuerda guardar siempre una copia de tu documento maestro para futuras ediciones. Mi segunda recomendación es que trabajes en tu documento diseñando de general a particular, esto te facilitará el proceso creativo y de edición. Con ayuda de las capas podrás trabajar por niveles de jerarquía, comenzando así con elementos generales como el fondo y a continuación definiendo y delimitando las áreas de la estructura del prototipo. En estas áreas trabajarás las cajas principales, donde se mostrará el contenido de tu web, ya sean imágenes o texto. Podrás seguir trabajando en los elementos que están dentro de las cajas contenedoras y de esta manera y trabajando el diseño dentro de las áreas y cajas que ya has definido, le aportarás una apariencia más ordenada a todo tu diseño. En tercer lugar, te recomiendo que vigiles el abuso de ciertos recursos y herramientas. Estos abusos pueden ser, por ejemplo, no vigilar el espacio entre elementos, utilizar demasiados dem asiados colores en tu diseño o abusar del uso de la tipografía. También debéis intentar no utilizar una decoración excesiva, no abusar de efectos complejos que no aporten nada a tu diseño y evitar colocar demasiados elementos en un mismo espacio. Mi consejo número 4 es que optimices tu tiempo adecuadamente, cuando diseñes centrándote en las tareas prioritarias y dedicándole el tiempo necesario a cada una de ellas. Para optimizar optimi zar el tiempo y tu flujo de trabajo, puedes seguir algunas al gunas pautas. En primer lugar, define las prioridades de tu diseño estableciendo los plazos según las necesidades del proyecto. No pierdas tiempo diseñando elementos irrelevantes o innecesarios. Elige Eli ge un diseño que se adapte a tus posibilidades y a tus habilidades con las herramientas de diseño, ten siempre en cuenta la visión de conjunto y la coherencia en tu diseño, pensando siempre en las necesidades de tu cliente. Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing.

Drey González Introducción al Desarrollo Web

 

Guía 1

iseño de Página Web

 

En quinto y último lugar te aconsejo que mantengas la organización en todo el proceso de diseño. Te recomiendo que prepares una carpeta organizada con todos los documentos del diseño, en los que estás trabajando, así como el material gráfico que vayas a utilizar para diseñar. Es importante que tu trabajo tenga una carpeta propia, donde guardes todos tus prototipos ordenados. Intenta mantener original y copias de tu documento maestro y registra los cambios relevantes en tus diseños en un documento, trabaja siempre con las versiones editables de tus documentos y reserva una carpeta para documentos finales listos para exportar a tu web.

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web

 

iseño de Página Web

Guía 1  

ACTIVIDADES

Contenidos  N° Clases 1

Temas

Método de Evaluación

  Tim Berners Lee



Ensayo

  Nelson Ted



  Hipertexto.



  Hipermedia.



  Tcp – Dns



  Html – Html  – Url



  Formato Basico de Una Url.



  ¿Cuál es el Formato de una Url?



  Acortadores de Url.



2

Investigación

  Url Amigable.



  Niveles de Dominio.   ¿Qué tipos de Dominios Existen?



Discusión Socializada



  ¿Para qué Sirve una IP?



  Tipos de Sistema de Direccionamiento.



  Como se realiza la correspondencia entre



IP y Dominio.

  Que son los registros DNS



  Que es la Programación web.



  Diferencia entre desarrollo y Diseño



web. 3

  Que es el front-end y Back-end.

Investigación



  Como Se Realiza una Planificación Web.



Lluvia de Ideas

  Diferencia entre web Dinámica y Web



Dinámica

  Diferencias.



  Ventajas.



4

  Desventajas.



Cuadro Comparativo

  Características



(Wiireframes, mackups, Prototipos) Prototipos Visuales de Ala Fidelidad 5

  W3c y Web Semántica



Análisis

Centro de Capacitación Monseñor Monseñor Zabaleta Instructor: Ing. Drey González Introducción al Desarrollo Web