Diseño de páginas WEB

Diseño de páginas Web

4 aspectos a considerar:

1) resolución de monitores:

•  600 x 800px, 1024 x 768, 1280 x 960 (es importante conocer el tamaño de las pantallas y el navegador para que la página quede bien).

2) Navegadores

3) velocidad de conexión (módem y banda ancha) 

4) Uso de Plug Ins

Aspectos de imágen y de comunicación visual:

• tipografía: La lectura en la pantalla no es igual que en una impresión. En el monitor se cansa mucho la vista entonces hay que poner el máximo de información con el mínimo de fatiga.                                                a)Es importante trabajar con tipografía sin patines                                                                          b) hay tipografías especiales para la web com Georgia o Verdana.               

• Color e imagen en la web:                                                               

a) GIF: es recomendable para imágenes con un área de color homogénea y sin texturas complejas. 

b) JPG: comprime mucho la imágen (hasta 100 veces más pequeña)     utilizado en gráficos con textura, es el más comunmente utilizado. (formato de visualización, no para imprimir)

c) PNG: especialmente para desempeño en la WEB, mismas cualidades y sistema de compresión del formato GIF.

(aún está en mejoramiento, sigue siendo incompatible con varios navegadores)

• Sonido:

* No se debe usar cualquier formato. Hay 4 opciones:

a) MIDI: derivación de música sintetizada, se traslada digitalmente, pesa poco convirtiéndolo en una buena opción. Sin embargo no es 100% compatible.

b) AIFF: diseñados para Mac (no compatible con PC) pesa bastante

c) WAV: provee una gran cantidad en los archivos,compatible sólo con Windows. 

d) MP3: revolución en cuanto a calidad y comprensión de los archivos, compatible con todos los sistemas operativos.

• Formas de composición:

a) composición Radial: manera en que se acomodan los elementos en la pantalla alrededor de un punto central. Elementos van de menor a mayor 

b) composición axial: el equilibrio visual está presente, caracterizado por le uso e uno o varios ejes de composición que equilibran el diseño.

c) composición simétrica: se logra variando elementos y posiciones de manera que se equilibren los pesos. Todo es un msj, no hay un centro

d) composición espiral: elementos del diseño dan vueltas respecto a la axialidad de un eje.

11 mandamientos del diseño WEB:

 

LINK video:

11 mandamientos del diseño web

• Navegabilidad: (cómo acomodas los botones para la comprensión del usuario)

• diagramación lineal: una serie de pasos para llegar al destino.
• diagramación dinámica (tipo telaraña, puedes explorar cómo quieras)

• Las composiciones tienen que ser "armónicos" están diseñados en sección aurea.

como este ejemplo de Twitter.

Las páginas están divididas en "canales" lo equivalente a las secciones de una revista. 

• siempre debe de haber un "HOME" (donde está toda la información) puede o no haber una página de bienvenida, ya sea una animación o música.
• ¿quiénes somos y qué hacemos?
• el producto
• diferentes variables de nuestros productos.

comentarios videos tecnológicos

Productivity Future Vision (2011)



Es difícil pensar que esta visión futurista tiene 2 años y por lo menos un 20% de las cosas que idealizan ya están a nuestro alcance o están a unos pocos meses de salir al mercado. 
El futuro nos esta alcanzando muy rápido y cada idealización o proyecto  por más descabellado que suena con los materiales y patrocinadores correctos puede ser real.





GOOGLE GLASSES PROJECT

Podría parecer un poco exagerado que un par de anteojos se tengan tantas funciones, pero realmente es algo muy parecido a las funciones que ofrecen ya múltiples smartphones. Es más bien una combinación de manos libres y una computadora extra pequeña. 
Y siendo realistas es cuestión de tiempo para que google ocupe la 1ra plana de los periódicos con la noticia de los nuevos google glasses (claro que falta mucho más que eso para que el público promedio podamos adquirirlos jej pequeño detalle)

.

@ (arroba) antes del email

 LOS MIL USOS DEL ARROBA 

A pesar de lo cotidiano que pueda resultar para nosotros en la actualidad usar el símbolo @ e incluso podría llevarnos a pensar que su uso es equivalente al tiempo de vida del correo electrónico, pero si pensáramos así estaríamos en un error. A continuación una breve historia en la que conoceremos el obscuro pasado de este pequeño símbolo. 

ORÍGENES:

Este símbolo se remonta a la antigüedad y sus principales usos no tienen nada que ver con tecnología.

Primero que nada es importante saber que es una palabra de origen árabe ("ar-roub", que significa cuatro).

Una leyenda cuenta que el orígen de este signo se lo debemos a los copistas de la Edad Media que lo usaban como unión entre las letras a y d formando la palabra "ad" significa Hasta o Hacia.

otro uso que se asemeja más a su uso actual es el que tenían en las cartas oficiales redactadas en latín que usaban para anteponerla al nombre del destinatario.

Incluso existe una carta veneciana que data de 1536 en el que ya aparece dicho signo.-------→

DIFERENTES USOS, MISMO SIGNO: 

Anteriormente también fue utilizada por griegos y romanos como unidad de medida. (equivalía a un cuarto de ánfora) 

Pero como todo en la vida este uso paso de moda y ya sólo se utilizaba en América del norte para definir el registro de los precios en una factura (10 gramos @ 3 dólares) y gracias a esto no desapareció en las primeras máquinas de escribir. 

Más tarde arroba se convirtió en una unidad de medida y peso que ya no sólo era utilizada en América, si no también en Europa (principalmente España) por sus continuos intercambios comerciales. 

Muchos, pero muchísimos años después cuando nació el internet y posteriormente el correo electrónico se le dio un giro de 180 grados al uso del "@" y comenzó a ser utilizado para dividir el nombre del destinatario y el del servidor de correo.

Sin embargo en la batalla entre compañías y el creciente mercado no todos quisieron adaptarse a esta nueva modalidad de separar el correo electrónico y fue así que empresas como "Digital" comenzaron a utilizar 4 puntos (::) en lugar del @ con un propósito básicamente igual.

y en el caso de otros rebeldes como IBM optaron por algo más sencillo y comenzaron a utilizar "AT" pero no tardaron mucho en darse cuenta de que por practicidad era más conveniente utilizar el famoso @. 

EL "@" SIGNO  ÚNICO E IRREEMPLAZABLE: 

No fue casualidad que su inventor Ray Tomlinson lo escogiera ya que al no tener ningun otro uso y estar presente en todos los teclados le daba un sello único y evitaba confusiones. 

Y finalmete para evitar confusiones entre usuarios, empresas y servidores en los 80´s optaron por generalizar este nombre para todos los correos electrónicos y desde ese día todos usamos el famoso formato: usuario + @ + máquina. 

Ya es común incluso verlo en palabras que no quieren especificar el género del destinatario, por ejemplo: 

Señor@, niñ@s.

referencias: Otero J. Historia de la arroba @. Odontología Ejercicio Profesional 2003;4(9):        http://www.odontomarketing.com (10.09.2003)

El lenguaje de Internet

EL LENGUAJE DE INTERNET

Todos aquellos que hayan tenido acceso a una pagina de internet han tenido que escribir forzosamente y sin importar el lugar 3 peculiares letras en la barra de direcciones: www. (actualmente es menos común, ya que la barra lo completa automáticamente pero sigue presente en absolutamente TODAS las páginas de internet ¿de dónde viene todo eso? y ¿por qué www?

www es la abreviación de "World Wide Web" que si lo tradujeramos sería algo como la gigantesca telaraña mundial (suena mejor en inglés) y a pesar de que la tenemos muy

relacionada con internet no debemos confundirnos ya que distan muchísimo de ser la misma cosa.

Para comenzar www fue desarrollado en 1989 (20 años después que la 1era conexión) y el gobierno de USA no estuvo relacionado para nada, este maravilloso desarrollo (y básicamente nuestra adicción a facebook y semejantes se lo debemos a 2 hombres muy brillantes llamados Tim Berners Lee y Robert Cailliau. Curiosamente el funcionamiento para abrir estas páginas con www es muy parecido a la labor de un "mensajero" por así decirlo y es el siguiente: 

1) el "mensajero" intoduce una página en la barra de direcciones, esta traduce el nombre del servidor que anotamos   (es como el código postal del sistema de correos) con este pueden contactar al servidor web que están buscando

2) el siguiente paso es mandar una solicitud al servidor solicitado para que nos "acepte" y despliegue el contenido ya sea texto o gráficos. 

3) al ser "aceptados" por el servidor el navegador lleva a cabo un proceso llamado "renderización" (como en la edición de vídeos) y traduce el código HTML, el CSS y otros que se presenten.

4) finalmente se incorpora todo junto y voila! tenemos acceso a una pantalla que despliega la información solicitada y la labor del "mensajero" es completada.

¿Qué es internet?

La mejor manera de poder comprender qué es internet y cómo funciona es imaginando una telaraña
cuyo centro o araña creadora fue el Departamento de Defensa de USA en 1969.

El principal objetivo de esta araña no era cazar la primera mosca que se quedara pegada ni que todos los bichos del pantano tuvieran acceso a ella (como ocurre en la actualidad, cualquiera con conocimientos básicos puede tener acceso a la infinita red de conocimientos que ofrece internet)
el propósito inicial de esta araña era encontrar un medio alternativo para comunicarse (recordemos que la araña estaba en plena guerra del pantano) lo que sucedió es que esta brillante idea 3 años más tarde llevó a 3 universidades de distintos pantanos a que sus arañas hicieran nuevas telarañas para conectarse entre todas, la primera vez que esto sucedió fue entre 2 universidades de California y una de Utah lograron conectarse (crearon una enoooorme telaraña de miles de km de distancia) y a esta memorable conexión se le denominó Arpanet.


Esta "telaraña" funciona gracias a  un conjunto de protocolos  que son conocidos como TCP/IP (en inglés significa transmission control protocol)
y estos son como traductores que ayudan a que se codifique la información correctamente.

Todo en internet tiene su propio lenguaje como HTML,Java Flash etc.. entre más compatible sea es más posible que cualquier computadora pueda leerlo.
pero no todos los "traductores" funcionan en todas las páginas a continuación presentamos un pequeño glosario que explica los códigos más básicos de esta interesante y compleja red.

Glosario para entender un poco mejor los códigos que maneja internet:

HTML: este es el acrónimo de Hypertext Markup Language (acrónimo es usar las primeras letras de una palabra para formar otra) pero en inglés los acrónimos no coinciden con la traducción al español.

CSS:  también son conocidas como "hojas de estilo en cascada" y en pocas palabras sirve para personalizar la página web, osea darle una "identidad visual" y así diferenciar si se trata de un catálogo, de una página de consulta etc..

Flash: se refiere a 2 cosas: 1 puede ser cuando el servidor te niega un servicio y te avisa llenando toda tu pantalla con texto.  o también se refiere a  una animación que se mueve al momento de abrir la página (la desarrollo una compañía llamada Macromedia) pero no se mueve en todas las computadoras si no tiene instalado un plug-in.

XHTML:  (extensible hypertext markup language)  es la versión nueva del antes HTML(este era Hi5), funciona como el nuevo lenguaje (ahora usamos Facebook osea xhtml)

XML: otra vez nos encontramos con un acrónimo para referirnos a extensible Markup Language, que si lo traducimos significa Lenguaje de mercado extensible y es utilizado para almacenar datos en forma legible

FTP: (protocolo de transferencia de archivos) es una especie de mensajero entre los protocolos TCP y su tarea es transferir archivos entre los nodos de red.

GIF: al leer esto lo más importante es que seguro tendrá el fondo blanco o no lo tendrá, osea que es excelente para el intercambio de gráficos y fotomontajes.

Hosting: como su nombre lo dice el hosting es como un hotel para la información, asegura a los archivos que pertenecen a otras compañías para que no anden "danzando" libremente en internet. (entre más sofisticada sea la compañía mejor hosting tendrá y más seguros estarán los datos)

Dominio: estos son como los "niknames" que se les da a una secuencia complicada  para identificar direcciones de computadoras conectadas a Internet, así son más sencillas de recordar y reconocer.  Por ejemplo, no es lo mismo llamarse 3848484999...333 que www.google.com

Navegador: este nombre se le da a un programa que se dedica a solicitar archivos a un servidor y darles el formato adecuado para ser vistos por el usuario y en caso de ser hipervinculos los lanza en un listado para que con un solo click se despliegue la información solicitada. (funciona con imágenes y texto).

Buscador: su nombre lo delata ya que su labor consiste en buscar las direcciones de internet que le solicitemos ( el mejor ejemplo es Google)

Intranet: es como un club de redes super exclusivo al que no pueden acceder los usuarios que no pertenezcan al club.

Java Script: es un lenguaje de programación que sirve para facilitar la interacción del usuario con su entorno cuando los programas de Java son
introducidos en las páginas WEB y ejecutados posteriormente, hace cosas como cambiar el aspecto de una página y que haya una interacción con el click del ratón.

JPEG: (Joint Photographic Experts Group) este nombre se le da a a las imágenes de mapa de bits que contienen mas de 16 millones de colores. Esta terminación nos indica que la imagen es compleja.

Motor de búsqueda: es una herramienta cuya misión consiste en buscar información existente en internet 
y está conformada por un interface, un robot y una base de datos.

Y otros datos que vale la pena saber

• Mosaic: fue uno de los primeros navegadores desarrollado por National Center for Supercomputing Aplications. Fue el primero en incorporar una interfaz común para varias plataformas distintas y por eso se le recuerda como un adelanto histórico en la historia de la tecnología.

• Netscape: en su momento fue el navegador que libró la "guerra de los navegadores" con microsoft, extremadamente popular en su momento. Desarrollado por Netscape Co. De esa guerra derivó la creación de Internet Explorer.

¿Quién fue Tim Berners-Lee? 

lo más importante de este hombre es que  fue un científico de la computación británico,  y es conocido por ser el padre de la Web. 
El fue el que realizó la primera conexión usando el protocolo HTTP en 1989.
es el fundador del Consorcio de la World Wide Web
Él y sus creativos son los responsables del famoso Lenguaje HTML

¿quién fue Marc Andressen?

lo más importante de su vida y por lo que es recordado es por que fue el cofundador de Netscape Communications Corporation y coautor de Mosaic.


Referencias: 

 Diccionario de internet (1999). Editorial Complutense Madrid España
http://www.w3.org/People/Berners-Lee/ consultado 6 Agosto 5:55 pm
http://www.biography.com/people/marc-andreessen-9542208  consultado 6 agosto 6:00 



Redactador por Fernanda J. Herrera