sábado, 23 de mayo de 2020

Prototipado: wireframes, mockups y prototipos

La responsabilidad de un arquitecto de información es identificar los objetivos del proyecto y las necesidades de los usuarios, especificar las funcionalidades y requerimientos de la aplicación web, definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda, y finalmente, realizar el prototipado de la aplicación, que es lo que vamos a tratar en este pagina. 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 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.

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. 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, es 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 (diseño), es decir, la ubicación, colocación y agrupación de los elementos de la página, así como la estrategia 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.
ando 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 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.
Para terminar, me gustaría dar 5 consejos básicos para realizar un buen prototipo:
  1. Sencillez y claridad
  2. Hazlo en blanco y negro
  3. Representa los tamaños y proporciones de los bloques de contenido
  4. Ten en cuenta las pautas de usabilidad y accesibilidad 
  5. Y sobre todo diseña para tus usuarios.
Hemos visto la diferencia entre planos y maquetas.
Los planos o 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.

Diferencia entre el diseño y el desarrollo web

Vamos a ver las diferencias que existen entre el diseño y el desarrollo web.

Diseño web

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 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.

Desarrollo web

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 correcto a los visitantes. En el desarrollo de la parte servidor se emplean lenguajes de script como PHP, ASP, ASP.NET, JSP, Perl y Coldfusion para acceder a una base de datos y 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.

Dominio

¿Qué es un dominio?

El dominio es el nombre que identifica a un sitio web, y se compone del nombre de la web + la extensión del dominio.

El nombre

El nombre de dominio es el que contiene generalmente la razon social, marca o nombre de la pagina. Por ejemplo:

 La extensión del dominio

La extensión identifica el tipo de dominio que es.

Aunque un ordenador se puede identificar por su nombre de dominio, en Internet internamente se identifican 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 de nombres de dominio territoriales está 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 segundo nivel 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 mecd.gob.es.

viernes, 24 de abril de 2020

URL

¿Qué es una URL?

URL = Localizador Uniforme de Recursos 
Url también conocida como dirección web.
Se conoce en informática como URL a la secuencia estándar de caracteres que identifica y permite localizar y recuperar una información determinada en la Internet. Eso que escribimos en la casilla del navegador o explorador para visitar una página web determinada, comúnmente referido como “dirección”, es justamente su URL.

Así como en la vida real cada casa o negocio tiene una dirección postal necesaria para enviarle algo por correo, en Internet cada recurso (imagen, video, texto, audio o página web) posee una dirección asociada, que es necesario tener para tener acceso a la información. 

Por ende, cuando visitamos una página web, introducimos su dirección y la recibimos en el navegador. Pero dentro de ella, cada fotografía, texto o recurso de algún tipo tiene también una URL asociada, con la cual se lo puede recuperar para llevar a cabo el “ensamblado” de la página web como un todo.

 url

Además, al hacer clic en un determinado hipervínculo, éste nos llevará a otra dirección URL, ya sea de una nueva página web o simplemente para ver en solitario alguno de los recursos de la anterior.

Por ejemplo, el buscador más popular en la web, “Google”, responde a la URL https://www.google.com en general, pero sus versiones nacionales personalizadas poseen direcciones levemente distintas: https://www.google.com.ar (Argentina),



¿Para qué sirve una URL?

Con una URL se puede buscar imágenes, descargar archivos, entre muchas otras cosas.
Como se ha dicho, una URL es una dirección específica dentro del océano informativo de la Internet. Sirve para localizar distintos datos e informaciones que son necesarios para la experiencia de navegación on-line, es decir, para construir las páginas Web y para brindar acceso puntual al usuario a cada cosa que desea visitar dentro de la red.
Así, introducir la URL de una imagen nos llevará a ella; la de un archivo específico nos llevará a descargarlo, y la de un programa on-line a ejecutarlo, todo dentro de las capacidades y especificaciones del explorador web que estemos utilizando para ello.

Características

Las direcciones URL tienen las presentas características:
  • Exactitud. Las URL deben escribirse con precisión para que arrojen el resultado esperado. Cualquier error en la cadena impedirá recobrar la información deseada.
  • Secuencia. Las URL son una secuencia de detalles ordenados, que deben introducirse en secuencia precisa, como una dirección postal.
  • Unicidad. Cada URL es única para un recurso o página de la Red, no existen dos iguales ni dos diferentes que conduzcan al mismo exacto elemento (aunque puede haber muchas versiones de un mismo elemento, supongamos, una fotografía, o puede haber muchas páginas usando una misma dirección URL para recuperarla) 

Partes de una URL

Cada URL se compone de una secuencia de partes, que aluden a información específica sobre la ubicación del recurso, y que pueden verse por separado:
  • Protocolo de redHttp, Https, mailto y ftp son los principales protocolos web que encabezan una URL, indicando a la máquina qué tipo de conexión debe realizar y cuál es el lenguaje específico que se hablará con la computadora o la red de computadoras que brindarán la información al usuario.
  • SubDominio o Servicio. Www, www2, etc., se trata de los posibles servicios de soporte de información on-line, de los cuales la World Wide Web es la más popular.
  • Dominio, tipo de dominio y país. Se trata del “nombre” de la empresa que brinda la información, o del proyecto o red o la computadora en donde se encuentran, es decir, el nombre específico de quien tiene lo que buscamos; además el tipo de servicio que presta: comercial (.com), educativo (.edu), etc., y el país al que pertenece: Argentina (.ar), Brasil (.br), Italia (.it), etc.
  • Ruta y nombre del archivo. Las carpetas y directorios en los que se ubica el recurso específico dentro del computador servidor (que brinda la información).





jueves, 23 de abril de 2020

El hipertexto y la hipermedia

¿Qué es el hipertexto?

Según el diccionario de la lengua de la Real Academia Española hipertexto es: conjunto estructurado de textos, gráficos, etc. 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.

Entonces, el hipertexto es texto que contiene enlaces a otros textos por lo tanto su estructura es no secuencial.

¿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 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.

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 TimBerners-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.

viernes, 3 de abril de 2020

Internet y la Web

¿Qué es Internet?


El nombre Internet procede de las palabras en inglés ”Interconnected Networks”, que significa “redes interconectadas”.

Internet se define como una gran “red de redes”, es decir, una red conectada a otra de manera continua y simultánea.



Técnicamente el internet se puede definir como un grupo de redes de ordenadores que se encuentran interconectadas.

Internet conecta millones de ordenadores en todo el mundo a través de una red que permite que cualquier computador pueda comunicarse con otro sin importar en qué lugar del planeta se encuentren, siempre y cuando los dos estén conectados a Internet. Una red es cualquier conexión entre dos o más clientes. Por ejemplo, puedes tener acceso a una red local en tu hogar a la que sólo pueden acceder los ordenadores de los miembros de tu familia y que están conectados a través de un switcher o router; o a una red de trabajo a la que sólo tienen acceso las personas que trabajan en una misma empresa. Internet es una red global a gran escala que permite la conexión de millones y millones de dispositivos al mismo tiempo, y que es completamente libre y abierta.

Para que una interconexión sea realmente global, todas las redes que se conectan a la gran red de redes deben hacerlo a través de un mismo modelo. Es decir, el modelo de comunicación de Internet debe ser una implementación estándar que garantice la conexión desde cualquier origen hasta cualquier destino. 
Durante la década del ´70, un grupo de modelo de comunicación que denominaron TCP/IP, y conectaron entre sí a un conjunto de redes de computadoras a pedido del gobierno de ese país, sin saber que el proyecto resultaría tan exitoso y tendría alcance global. De esta forma, TCP/IP se convirtió en el modelo de comunicación de las redes que componen Internet.

¿Qué es Web?

Internet y la web no son lo mismo, te explicamos por qué



World Wide Web (www) o red informática mundial, o simplemente «web» es una manera de acceder a la información a través de Internet. La web es un modelo para compartir información que está construido sobre Internet. El protocolo que usa la web es HTTP, este es solo una de las muchas maneras en las que se puede transmitir información a través de Internet.

Si un servicio usa HTTP para permitir que aplicaciones se comuniquen, este es un servicio web. Los navegadores web, como Chrome o Firefox, nos permiten acceder a documentos web que conocemos principalmente como páginas o sitios web. Estos sitios están conectados unos a otros a través de hiperenlaces como si se tratara de una telaraña (de ahí el nombre de web -telaraña en inglés-), y todo esto gracias al protocolo de transferencia HTTP.

Entonces, la Web es sólo una de las maneras en las que la información puede fluir a través de Internet, es sólo una porción, y aunque es muy grande y la parte más popular, no incluye la totalidad de Internet.

Berners-Lee desarrolló la arquitectura básica de lo que actualmente es la Web. El mismo Berners-Lee la describía de la siguiente manera: "La WWW es una forma de ver toda la información disponible en Internet como un continuo, sin rupturas. Utilizando saltos hipertextuales y búsquedas, el usuario navega a través de un mundo de información parcialmente creado a mano, parcialmente generado por computadoras de las bases de datos existentes y de los sistemas de información".


lunes, 30 de marzo de 2020

Biografia de Tim Berners Lee

Biográfica

Nació en el sudoeste de Londres en 1955. Sus padres eran matemáticos y formaron parte del equipo que construyó el Manchester Mark I. Se graduó en física en 1976 a los 21 años en el Queen's College de la Universidad de Oxford. Conoció a su primera esposa en este tiempo. En 1978, trabajó en D.G. Nash Limited donde escribió un sistema operativo.


Desarrollo de su carrera


Berners-Lee usó esta eXTcube en el CERN, y fue el primer servidor web del mundo. 
Berners-Lee trabajó en el CERN desde junio hasta diciembre de 1980. Durante ese tiempo, propuso un proyecto basado en el hipertexto para facilitar la forma de compartir y la puesta al día de la información entre investigadores. En este periodo también construyó un programa llamado ENQUIRE que no llegó a ver la luz.​Después de dejar el CERN, en 1980, se fue a trabajar a la empresa de John Poole Image Computer Systems Ltd., pero regresó al CERN otra vez en 1984.En 1989, el CERN era el nodo de Internet más grande de Europa y Berners-Lee vio la oportunidad de unir Internet y el hipertexto (HTTP y HTML), de lo que surgiría la World Wide Web. Desarrolló su primera propuesta de la Web en marzo de 1989, pero no tuvo mucho eco, por lo que en 1990 y con la ayuda de Robert Cailliau, hicieron una revisión que fue aceptada por su gerente, Mike Sendall. Usó ideas similares a las que había usado en el sistema Enquire, para crear la World Wide Web, para esto diseñó y construyó el primer navegador (llamado WorldWideWeb y desarrollado con NEXTSTEP) y el primer servidor Web al que llamó httpd (HyperText Transfer Protocol daemon).El primer servidor Web se encontraba en el CERN y fue puestoen línea el 6 de agosto de 1991. Esto proporcionó una explicación sobre lo que era el World Wide Web, cómo uno podría tener un navegador y cómo establecer un servidor Web. Este fue también el primer directorio Web del mundo, ya que Berners-Lee mantuvo una lista de otros sitios Web aparte del suyo. Debido a que tanto el software del servidor como del cliente fue liberado de forma gratuita desde el CERN.En 1994 entró en el Laboratorio de Ciencias de la Computación e Inteligencia Artificial del Massachusetts Institute of Technology. Se trasladó a EE. UU. y puso en marcha el W3C, que dirige actualmente. El W3C es un organismo internacional de estandarización de tecnologías Web dirigido conjuntamente por el Instituto Tecnológico de Massachusetts, el ERCIM francés y la Universidad de Keiō en Japón.

Tim Berners-Lee es considerado el padre de la web porque desarrolló las tres tecnologías fundamentales en las que se basa la web: HTML, (el lenguaje de marcado o etiquetado que se emplea para crear para escribir los documentos o páginas web), URL, (el localizador de recursos uniforme, el sistema de localización o direccionamiento del web)y HTTP,  (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).