12 mandamientos para paginas Web

Safe exploration- Una de las cosas mas precupantes de cuando se navega en internet, es qeu tan segura esta la informacion qeu introducimos, y mas todavia cuando se trata dar datos muy importantes, como numeros de tarjetay cosas para hacer transacciones. Tambien se necesita algo qeu permita regresar, para cambiar datos sin riesgos de datos qeu se hayan colado.

ejemplo tenemos a PayPal, una de las maneras mas populares ultimamente de transacciones. podemos ver que desde su estado cero, tiene el "https" y la barra de direcciones verde. mientras pones datos, es facil la manipulacion de informacion, y eso hace que sea preferida por muchos usuarios.

http://www.paypal.com/

contraejemplo: Este es el formulario para hacer un pago de suscripcion a un directorio de descargas. tiene el "https", pero la barra no es verde. Eso no es lo preocupante, si no qeu al introducir datos (en este caso, utilice datos falsos) se "trabo" al poner siguiente, y al regresarme, el formuario estaba en blanco. No se sabe si se colo informacion. No es conveniente para el usuario (especialmente porq me pusieron advertencia por poner datos falsos XD)

http://nowdownloadall.com/

Instant gratification- Cuando se entra a una pagina, lo primero que quieres es empezar a eplorar su contenido. A algunso els parece molesto qeu tengas que llenar opciones, o formularios antes

ejemplo: esta pagina tiene la opcionde idiomas, pero la cambias cuando quieras, no al entrar a la pagina.


http://www.house-md.pl/

contraejemplo: MTV no tiene la misma pagina en EU que en latinuoamerica, y te advierte de que no puedes ver el contenido aunqeu entres a la pagina de EU. Puede que no quieras ver un video, sino simplemente una noticia. Es un aviso qeu te debe dar si te metes ala seccion de media.


Satisfacing:hay veces qeu el usuario prefiere lo bueno en lugar de lo mejor por algun motivo, como facilidad ahorrar tiempo etc

ejemplo: YouTube y otras aplicaciones de vido tien HDV como opcion. es opcional, ya que es mas pesado

contraejemplo: Esta pagian tiene muchisimo contenidointeractivo, pero eso a veces te dificulta la navegacion en el sitio.

http://www.pokemon-movie.jp/



Changes in Mindstream: Todos camabiamos de opinion. Un caso comun es nuestro username, la mayoria delaspersonas han querido camiar alguna vez, en una pagina x. En muchas paginas, esa opcion no esta permitida, y lo peor es que note deja cambiar casi ningun dato qeu hayas proporcionado antes, no solo username

Ejemplo: En esta pagina, hay una seccion de encuestas. Si Cambias de opinion, puedes cambiar la opcion que elegiste cuando quieras

http://www.fanpop.com/spots/amber-volakis-cutthroat-bitch/picks/show/43632/should-amber-picked-team-instead-taub




Contraejemplo: Es un sitio para subir imagenes. No puedes cambiar tu nombre de usuario entre algunas otras cosas, de las imagenes solo puedesmodificar etiquetas, y una vez qeu la subes, el tamaño queda asi, si lo quieres cambiar, debes subir otra vez.

http://www.imageshack.us/




Preferred choices: Al hace busquedas por la red, a veces algunas paginas nos piden algun requisito para acceder o realizar otras tareas, y resulta que luego ni siquiera eslo que buscamos. Primero el usuario deberia comprobar si es lo que esta buscando, y llenar los requisitos despues

Ejemplo: Las "trial version" permiten al usuario vusar l producto, y si es lo que buscaban, lo consiguen. En este programa (art rage) puedes usar el programa a su mayoria, pero si lo compras, puedes usar mas herramientas.




Contraejemplo: En esta pagina, te hace suscribirte a algun "survey" y despues te perminten interactuar cone ella. Sucede casi siempre con este tipo de paginas.

Incremental construcion: Configuracion, depende de los gustos de cada quien, para que se acomode mejor.

Ejemplo: Esta pagina para subir tus "obras de arte" te deja acomodar todos tus gadgets a su antojo. Si tienes subscripción, te da acceso a aun mas gadgets

Contraejemplo: power point, siempre tiene las presentaciones "default" a veces los cuadros de texto ni nos sirven para acomodar las cosas como nosotros queremos,  y solo estorban.

Habituation: Estamos acostumrados a algunas cosas. Para las aplicaciones es igual. Si usamos un comando que estamos acostumbrados a usar, y no funciona como esperabamos, es molesto.

Ejemplo: Tegaki es una pagina donde puedes hacer cosas co mouse/tableta. Al trabajar, los comandos como ctrl+z (o command) y etc funcionan como en cuanlquier otro porgrama para realizar graficos.

www.unowen.net/tegaki

Contraejemplo: Puede ser ejemplo y su contra a la vez, ya que estoy acostumbrarda a manejra textos ocn abulaciones para ordenar las cosas. Pero en Web, tabulacion sirve para moverse entre formularios. Por ejempo, al escribir una entrada par blog tengo q usar espacios porque al poner tabulador solo me cambia el lugar donde escribo

Spatial Memory: A quien no le ha pasado que no tiene idea del nombre de los comandos, pero sabe donde estan y para que sirven. Si les cambian el icono, o los mueven al usuario le es molesto localizarlos.

Ejemplo: El windows media player ha pasado por varias versiones, pero sobre todo igue siendo lo mismo. Los comandos siguen en el mismo lugar, y sabes como interactuar con facilidad, aunque la actualicen

Contraejemplo: Word, entre otras aplicaciones de office, fue modificada en su version 2007. Me costo mucho trabajo encontrar los comandos que acostumbraba a usar, o de plano tenia que consultarlo en internet.

Prospective Memory- Hay una varidedad de aplicaciones que tienen como fucion ayudarnos a recordar. Desde cumplaños, actualizaciones, hasta cuando debemos hacer pagos.

Ejemplo: recientemente, En el escritorio de Windows puedes poner un gadget tipo "post it"
para hacer anotaciones. Permanece en el escritorio, es similar a una qeu usa mac. Te sirve para saber que es lo que debias hacer.

Contraejemplo: el celular tiene calendario, pero no puede recordar los cumpleaños todos los años, solo como un afecha de agenda de ese dia. Tienes que poner recordatorios para todos los años.

Streamlined repetition: Tenemos diferentes datos en diferentes sitios qeu vsitamos: usernaes, passwords, etc. En ocasiones nos sentimos mas comodos si son reocrdados, para no tenerlos qeu esta introduciendo cada vez qeu accedemos. Tambien hay paginas donde siempre estas dentro, como youtube, o te sacan si estas ausente por un tiempo.

Ejemplo: Explorer siempre pregunta si quieres qeu recuerde los datos, a veces es mastante util,pero no muy recomendable en paginas donde haya informacion que temes que te roben. Esta particularmente, no tiene nada importante, así que dejo que me recuerde usuario y contraseña

Contraejemplo: A veces pones tus datos en una pagina, pero no te deja dentro y cada vez que te metes debes ingresar datos otra vez. Esta pagino no solo eso, sino qeu encotrar el 'login' esta dificil

Keyboard only- El mouse es una herramienta muy efeiciente, pero a veces es mas comodo usar solo los "atajos" del teclado para trabajar. En internet, o en cunaquier programa que se este usando.

Ejemplo: photoshop y los demas de adobe tienen un "atajo" para sus herrmaientas, para que asi puedas comabien con el teclado.

Contraejemplo: Facebook es muy popular, pero tiene pocos atajos, y los que tiene son poco conocidos.

Other people advice- Necesitamso la opinion de las demas personas para creces, para tomar en cuanta eso eso y mejorar, o hacer una aplicacion qeu les sirva a los demas.

Ejemplo: este foro hay una seccion para dudas, aclaraciones quejas etc para su mejora continua

Contraejemplo:  Esta pagina tiene varias secciones, pero en ningun lado tiene una seccion para que el publico de su opinion, hay una serie de posts,  pero no son con fines de mejorar el sitio.

acerca de...

El lunes fue dia de examen .

A grandes rasgos no estuvo tan dificil, , yo me la esperaba peor ( o quien sabe, habra qeu ver los resultados ja ja ja)espero qeu no me haya ido tan mal. Eso, y el hecho de qeu no tenia Word, y tuve qeu hacerlo en InDesign, pero eso ya es otra cosa je je

Aunqeu no estuvo asi, dificil, a mi si se me complico muchisimo, porque no son la clase de conceptos que estoy acostumbrada a aprender. Creo que todavia no me quedan 100% claros, pero no es algo que pueda aprender "figurativamente"

La parte buena es que la forma de hacerlo es un a pregunta, y contestas lo que sabes acerca de eso, y no te limita tanto auna respuesta demasiado concreta, o unica.

Es importante aprender estos conceptos, poruqe son lo basico a lo qeu viene despues, asi qeu esta bien.

Patrones, modelos y arquitectos X)

En esta ocasion, el trabajo de extraclase conssitio en definiciones para los siguiuentes terminos: Modelo Arquitectura y Patron (pattern), mi equipo consta de Paulina, Raul y yo (claro) XD

Modelo: Esquema de una realidad determinada que contiene reglas y estructuras que le dan sentido a los acontecimientos, es pues un punto de referencia que se imita para lograr un resultado determinado; lo que no implica necesariamente que éste dependa del modelo aplicado.

El diseño de páginas web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida. No es simplemente una aplicación del diseño convencional, ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Una pagina puede tener un diseño unico, pero tambien existen plantillas que pueden estar aplicadas a varias paginas Web, haciendo que varias paginas Web esten estructuradas de las misma forma.
Aqui hay varios ejemplos de modelos de paginas Web

http://www.creandotusitio.com/modelos.htm

http://www.elmatecreativos.com/muestras_diseno_boletin_electronico_pagina_web.htm


Patrones: Los patrones de diseño sirven para solucionar problemas que surgen cuando se desarrolla algún tipo de software, sobre todo con relación a la interacción y las interfaces. Algunas de sus características son que debe haber sido efectivo resolviendo problemas similares, y que debe poder usarse para solucionar otros problemas parecidos.

En otras palabras, brindan una solución ya probada y documentada a problemas de desarrollo de software que están sujetos a contextos similares. Debemos tener presente los siguientes elementos de un patrón: su nombre, el problema (cuando aplicar un patrón), la solución (descripción abstracta del problema) y las consecuencias (costos y beneficios).

Los patrones se clasifican en:

Patrones Creacionales: Inicialización y configuración de objetos.

Un ejemplo de patron creacional es:

MVC ( Model View Controler ): Este patrón plantea la separación del problema en tres capas: la capa model, que representa la realidad; la capa controler , que conoce los métodos y atributos del modelo, recibe y realiza lo que el usuario quiere hacer; y la capa vista, que muestra un aspecto del modelo y es utilizada por la capa anterior para interaccionar con el usuario.

Patrones Estructurales: Separan la interfaz de la implementación. Se ocupan de cómo las clases y objetos se agrupan, para formar estructuras más grandes.

Patrones de Comportamiento: Más que describir objetos o clases, describen la comunicación entre ellos.


Arquitectura: Si esta enfocado únicamente al ámbito del desarrollo de un sitio web, indica la estructura orgánica, conceptual y técnica bajo la que se ha creado.

Basicamente son guías generales para programacion, para poder simplificarla.se les ha denominado Arquitectura de Software, por que, semejanza de los planos de un edificio o construcción, estas indican la estructura, funcionamiento e interacción entre las partes del software.

Ejemplos de arquitectura de software son:

El 3tier

La programación por capas (o 3 tier, por 3 capas) un estilo de programación en el que el objetivo primordial es la separación de la lógica de negocios de la lógica de diseño; un ejemplo básico de esto consiste en separar la capa de datos de la capa de presentación al usuario. En una arquitectura de tres niveles, los términos "capas" y "niveles" no significan lo mismo ni son similares.




Cliente-servidor

Esta arquitectura consiste básicamente en un cliente que realiza peticiones a otro programa (el servidor) que le da respuesta. Aunque esta idea se puede aplicar a programas que se ejecutan sobre una sola computadora es más ventajosa en un sistema operativo multiusuario distribuido a través de una red de computadoras.


http://redeseartepaz.org/blog/2009/07/03/diccionario/
http://www.latencia.com/glosario.html
http://msdn.microsoft.com/es-es/library/bb972240.aspx

En esta ocasion, toca analizar un par de paginas web, para determinar si su costruccion esta basada en un framework o un CMS. Aun no estoy 100% segura de que es cada una, pero aqui van.



1- Deviantart- (http://www.deviantart.com/) Es una pagina qeu se usa para subir creaciones de diversos artistas, desde novatos hasta expertos. Es un CMs, ya que comparte varias aspectos muy similares a los de un blog, incluso su funcion de "journal" bien podria servir de blog. La manera de organizar los datos, e interaccion entre usuarios tambien es tipo CMS.

2- Wicked the musical- (http://wickedthemusical.com/page.php) (seeh, no lo pude evitar XD) pagina oficial de un musical de broadway, contien e informacion sobre la misma, como show, boletos, resumen, etc. Es una pagina con contenido constante, solocambia la tabla de novedades, por o que creo que esta basado en un framework. solo tiene cosas intercativas respeco al musical.

3-Kristin Chenoweth (http://kristinchenoweth.com/) (Yay!) Pagina de una actriz/cantante. Basicamente son noticias relacionadas con ella, entre otras cosas. CMS. Se va actualizando (se supone) cada vez q hay algo nuevo. Se maneja estilo "blog" al poner las noticias.

4-Oscares ( http://oscar.go.com/) pagina dedicada a (me pregunto a que? ) nada mas y nada menos que a los codiciados premios de la academia. En mi opinion, Framework. Una gran cantidad de contenido intercativo, que se actualiza unas pocas veces pr año, pero son bastantes cosas para cada sub-seccion, y ni se diga de la principal. son puras cosas interactivas, desde el video, hasta la ruleta. Hacer eso en un CMS seria bastante complicado.

5. Barnes & Noble- (http://www.barnesandnoble.com/) Pagina de una tienda de libros estadounidense. Se debe actulizar en plazos cortos, CMS, aunque todo ese contenido me hace dudar ofertas, promociones, anuncios etc. La manera q interactua con el usuario, es importante, ya que su finalidad son ventas por internet.

examen...NOOO!! *musica macabra*

chan chan.....Llega la hora del primer examen de diseño de interfaz...ñaca ñaca

A mi parecer, hemos visto algunas cosas complicadonas, mas qeu todo por los terminos, asi que si no tuviera tanta terminologia seria fantastico. Lod igo porque todavia no somos expertos en el asunto, vamos empezando, tampoco digo que quiera un examen de lo mas facil (bueno, de hecho si quiero, pero creoque no se va a poder jeje) aunqeu si, hay conceptos basicos qeu son importantes

"arranquemos" por las maquinas, qeu fue el primer tema visto.

Se nosfue dada una clasificacion hecha por el mismisomo prof, dependiendo de varias cosas.
El nivel social tiene que ver con varios factores relacionados con estas maquinas, por ejemplo:

-a mas nivel social , menos notorios son los servivios recibidos
-A mas sofisticacion, mas nivel social

-Maquinas incubadoras- Las que generan un entorno es posible, seria muy dificil vivir sin ellas
agua, luz drenaje
-Mamaquinas. Como su nombre lo dice, funciones tipo "mama". Funciones domesticas
Lavadora, Estufa
-Ononomaquinas- aquellas que encontramos placenteras
Consola de videojuegos, grabadora
-Comunicacion 1 via- Solo hay uun emisor, el receptor no da retroalimentacion.
TV, radio
-Comunicacion 2 Vias-Comunicacion Emisor/receptor
Telefono

Tambien esta el nivel 0: El reloj

Interfaz

bueno, eso fue lo basico basico, ahora si, las interfaces. Una definicion sencilla y concreta, es: "Conexion fisica y funcional entre dos aparatos o sistemas" o para fines de la materia, tambien un usuario.

estan las de entrada, accion y salida. Las deentrada permiten al usuariomanipular en sistema, y las de salida que efectos tuvo esa manipulacion. Los botones cuentan como accion, pero tienen efectos distintos en todos los aparatos.

Se le considera estado "0(cero)" a aquilla pagina, sin modificaciones hechas por el usuario.

Hardware y software

En terminos sencillos:

Hardware-Lo tangible de un aparato
Software-Los programas dentro de un hardware. Evidentemente, intangibles.

o como dirian unos: "el hardware es lo que golpeas cuando no funciona el software"

Human-Machine user interface se refiere al hardware
Sotware user interface, al software

un software embebido, es aquel qeu no se puede cambiar. Hay varios tipos de software: como el de sistema o de aplicacion.

Tipos de aplicaciones

Algunos conceptos de internet:

Web servers-Hacen posible la recepcion de HTML

HTTP (HyperText Transfer Protocol)protocolo que se utiliza para acceder a las páginas web

TCP/IP- protocolo basico para conectarse a una red, que proporciona transmisión fiable de paquetes de datos sobre redes

Browser- Browser, explorador, navegador web). Aplicación que sirve para acceder a la WWW (todas las páginas web) y "navegar" por ella a través de los enlaces.

Frameworks etc

Siendo muy simple, un framework es un esquema (un esqueleto, un patrón) para el desarrollo y/o la implementación de una aplicación.

Un Sistema de gestión de contenidos (Content Management System, CMS) permite la creación y administración de contenidos principalmente en páginas web.
Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio. El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores.

Bitacora 2.0: Dia 1

creo q me retrase en esto del 2.0 je je (ademas que ya no me acrdaba como meterme a mi twitter XD). EL microblogging es lo qeu nos toca explicar a mi y ami equipo ( osease claudia y Eddy) parte del proyecto Web 2.0

No serviria de nada, si no se sabe que diantres en eso del Web 2.0.

El concepto salio de una conferencia de Tim O'Reilly, pera referirse a una segunda generación en la historia del desarrollo de tecnología Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, ( y microblogging tambien >: ( ) los wikis o las folcsonomías (folksonomy), que fomentan la colaboración y el intercambio de información entre los usuarios de una comunidad o red social. La Web 2.0 es también llamada web social por el enfoque colaborativo de esta herramienta.

ahora que ya esta eso, ahora si, pasemosa lo nuestro que es Microbloging ( AKA nanoblogging tambien)

y que /()$/()%/(% es microblogging??? La definicion asi tal cual de wikipedia dice:

"El microblogging, es un servicio que permite a sus usuarios enviar y publicar mensajes breves (alrededor de 140 caracteres), generalmente de sólo texto. Las opciones para el envío de los mensajes varían desde sitios web, a través de SMS, mensajería instantánea o aplicaciones ad hoc.
Estas actualizaciones se muestran en la página de perfil del usuario, y son también enviadas de forma inmediata a otros usuarios que han elegido la opción de recibirlas. El usuario origen puede restringir el envío de estos mensajes sólo a miembros de su círculo de amigos, o permitir su acceso a todos los usuarios, que es la opción por defecto.
Los principales servicios son Twitter, Identi.ca, Jaiku, Tumblr, Pownce, Khaces, Picotea.com y Xmensaje."

...

Bueno, en pocas palabras, el microblogging podria ser lo que su nombre indica, un blog "pequeño". No exactamente, pero bastante parecido. La asimilacios es porque mucha gente tiene a asociar el "twitter" con el "facebook" pero definitivamente, twitter no es una red social. Se podria relacionar mas como los mensajes instantaneos de messenger, pero nos meteremos mas a fondo en Twitter, que es parte del microblogging, probablemente el mas popular, pero no el unico .

Esto fue solo una pequeña introduccion a mi proyecto web 2.0, El microblogging C:

Bla bla bla...blog

¿Que es un blog?

Blog: Páginas web, generalmente personales, en donde se publican periódicamente noticias, artículos o comentarios de interes sobre diversos temas o la propia vida de su autor.

http://www.elprimerodelalista.es/glosario.html

...

Una descripcion demasiado resumida para la gran cantidad de usos qeu se le pueden dar un blog.

Un blog es un diario, un noticiero, un cuaderno, una bitacora, una revista, un libro...en fin, tiene multipels usos. Podemos encontrar desde quejas contra "el peje", hasta recetas de cocina, y lo peor (o mejor? XD) es que puede ser en el mismo blog. Es mas, puedes encontra blogs de personales ficticios, de libros TV etc.

Rosa o morado, arial o Times New roman, con 'artilugios' (Widgets) o con banners de flash, de manzana o de sandia, eso ya depende de los gustos de cada persona, aunqeu claro, si la intencion es hacer un blog serio, no entra mucho el usar letras muy estilizadas color naranja con un fondo amarillo pollo

El que un blog sea popular depende "de nosotros". Entre comillas, porque tambien necestamos un pequeño 'golpe de suerte' no ser uno entre un millon de blogs. En realidad son muchos mas, y el que escribamos en ellos es lo que puede hacer la diferencia en cuanto el numero de lectores/seguidores.

Los seguidores, son las personas que siguen un blog (obvio). Se pueden seguir cuantos blogs sean del interes de cada quien. Lo malo, es qeu no todos los blogs estan bajo el mismo "hosting" probablemente, elmas famoso sea blogspot, pero no es el unico, tambien existe wordpress, o Bitacoras.com

El uso de los blogs se ha extendo mundialmente, a una gran velocidad. ¿De donde surgieron los blogs?

La aparición del primer weblog fue en el año 1993 y fue creado por uno de los padres de internet, Tim Bernes Lee. Este consistía en un listado de webs y sus links correspondientes acompañados de un breve comentario. Esa fue la primer entrada. Definitivamente, no fue nada como lo que podemos ver ahora.

En 1996 Dave Winer, escribe un blog histórico para el maratón "24 Horas para la Democracia" cuyo objetivo era celebrar un encuentro online para apoyar el libre discurso en internet. En 1999 aparece Eatonweb Portal, el primer portal dedicado solamente a los blogs. En agosto del mismo año Pyra Labs, (despues adquirida por Google), lanza Blogger, uno de los servicios gratuitos más populares en la creación de blogs. A partir del año 2000, un numero considerable de personas comenzo a usar el 'blogging'.



¿Mas?

hay tantos ejemplos qeu pordria poner para ejemplificar lso tipos de blog, y sus usos, pero por lo mientras pondre uno de mis personales favoritos. Hace poco, salio una pelicula de Norah Ephron, titulada "Julie & Julia". Esta pelicula, esta basada en una (mas bien dos) historias reales. Julie Powell (interpretada por Amy Adams por cierto je je) es una empleada de gobierno, y comenzo a escribir un blog de recetas de cocina, basadas en el libro "mastering the art of french cooking" por Julia Child.

Para no hacer larga la historia, el blog de Julia titulado "The Julie & Julia proyect" adquirio una popularidad impresionante, y Julie con el. Todo fue a travez e su blog


¿no me creen que es real?aqui esta: http://blogs.salon.com/0001399/ o busquen con "tio google".





El blog actual de Julie sigue siendo bastente populachon ( claro, quien no obtiene publicidad con un libo y una pelicula XD ) Este es http://juliepowell.blogspot.com/
Su blog se titula "What could happen?" y la primera vez q lo vi, fue cuando me entro mas curiosidad lo de los blogs. Habia leido acerca de ella, y quise echarle un vistazo. ya se mepaso la mano con el ejemplo je je.


en un "nutshell" hay mucho por explotar en unblog, no solo es paraponerlo que te paso en eldia, puedes hacerlo de algo profecional, o si te sientes "cloud strife" por que no hacer su blog? (no espera, creo que ya existe)