Thursday, April 22, 2010

Creación de una aplicación desde cero la parte 3

Navegación completa de la serie
Parte 1 - Planificación de la aplicación: Idea y diseño básicos
Parte 2 - Planificación de la aplicación: la arquitectura de base de datos y enfoque de desarrollo
Parte 3 - Diseño de la aplicación: Mapa de flujo de trabajo de diseño y Photoshop
Parte 4 - Diseño de la aplicación: HTML y CSS
Parte 5 - El desarrollo de la aplicación: Interacción de usuario
Parte 6 - El desarrollo de la aplicación: La interactividad Agregar AJAX
Parte 7 - Desarrollo de la aplicación: Interacción Lista
Parte 8 - Conclusión
Y finalmente ... la aplicación! Listas de color
El desarrollo de un flujo de trabajo
Tenemos un gran comienzo en nuestra aplicación va la lista en este momento. La "gran idea" está en su lugar, sabemos cómo queremos que las listas que se muestran e interactuó con, y tenemos una estructura de servicios de fondo en el lugar para tratar con los usuarios y todos los datos que va junto con estas listas.
Era una buena idea empezar con la "carne" de la aplicación, pero hay un poco más que entra en una solicitud completa. Debido a que tenemos los usuarios, eso significa que necesitamos un formulario de inscripción y un registro en el área para el retorno de los usuarios. Dado que los usuarios pueden ser olvidadizo, necesitamos un Perdidos 'La función de contraseña. Dado que los usuarios deberían ser tan preocupado por la seguridad que nosotros, los usuarios deben ser capaces de cambiar sus contraseñas, cambiar su entrada, y borrar sus cuentas. Nuestra aplicación de una página que acaba convertido en una aplicación de la página cuatro o cinco, así que vamos a tener que pensar en algunas de flujo de trabajo.
Habrá dos estados diferentes de la página principal: conectado y desconectado. Si bien la sesión, la gente necesita una manera de acceder al programa y para registrarse, y este será esencialmente las "ventas" la página es demasiado, explicando la aplicación. Identificados, la página de inicio será la lista del usuario en sí. Identificados los usuarios también tendrán que hacer algunas cosas accesorias relacionadas con su cuenta, como el cambio de su correo electrónico, cambiar su contraseña y borrado de su cuenta, así como una manera de cerrar la sesión. Estas opciones son probablemente los mejores accesorios que se presentan en una página de la cuenta. Así que ahora estamos viendo por lo menos dos nuevas páginas: Configuración de la cuenta y el registro. Aquí está algo de flujo:
Flujo de trabajo básico aplicación
No es gente bonita, pero eso es lo que está dibujando. Es rápido y es sólo para ayudarle a pensar y planificar las cosas que necesitas.
Darle vida Photoshop
Nuestros desarrolladores están delante de nosotros, pensando en los datos que necesitan y cómo esta aplicación va a funcionar realmente. Así que será mejor que empezar el diseño de hecho aquí.
Página de inicio (conectados)
Esta es la carne de nuestra aplicación así que vamos a empezar aquí. La lista es, evidentemente, lo más importante, así que vamos a mantener la cabecera de la pequeña y mantener la lista de frente y al centro. elementos de la lista son grandes bloques de colores con botones para las acciones asociadas cercanas. A continuación la lista de un cuadro para introducir nuevos elementos de lista.
La página de inicio que aparece cuando se conectó
Página de inicio (desconectado)
Cuando la sesión, la página va a actuar más como un "ventas" página. No es que tenemos previsto cobrar por él, pero sólo para explicar y la gente se interese en el uso de la misma. No hay mucho que decir acerca de una aplicación de lista, así que vamos a mantenerlo simple.
Cuando la sesión, vamos a animar a los visitantes para registrarse
Pequeñas Bits
Hemos estado diseñando el tiempo suficiente para saber que puede ser que también hacen los botones de a poco en un archivo separado y mantenerlos juntos como una duende (Un sprite es varias imágenes combinadas en una sola para ahorrar peticiones HTTP, en nuestro caso, también los estados de rollover). Así que vamos a hacer eso y juntar de un favicon, mientras estamos en ello.
Todos los elemento de la lista aquí
Favicon
Registro
Nuestra intención con el registro va a ser extremadamente simple. Vamos a pedir por correo electrónico de un usuario y eso es todo. Se les enviará un correo electrónico con un enlace en él para completar el registro. El vínculo que se "active" su cuenta y pueden elegir la contraseña en ese momento. Por lo tanto, nuestra página de registro pueden ser bastante maldito simple.
El formulario de inscripción
Tan pequeño como es esto, esta página de registro prepara el terreno para otras formas. Tenemos una etiqueta / par de entrada aquí que puede ser utilizado para cualquier par entrada / en cualquiera de las formas de nuestro sitio.
Cuenta
Vamos a utilizar el diseño misma forma que la página de registro aquí. No es hacer trampa o ser perezoso, es un buen diseño a través de la coherencia!
Cuenta controles
Botones
Observe el cambio en los botones. Ahora son grandes, de color naranja y redondeado. Mucho más con apariencia de botón ¿no te parece? Una vez más la coherencia, vamos a hacer esta predeterminada para todos los botones en el sitio.
Sitio botones, buscando con apariencia de botón
Impulsar avances en el
El desarrollador tiene ahora mucho que vaya a empezar a dar contenido a las interacciones del usuario para el sitio. Y tenemos muchas cosas que van a empezar a recibir el código HTML y CSS para todo esto listo, y en última instancia a AJAX este cachorro y hacerlo funcionar.
Autor de las series
Jason Lengstorf es un desarrollador de software con sede en Missoula, MT. Él es el autor de PHP para principiantes absolutos y regular los blogs sobre la programación. Cuando no está pegado a su teclado, que está de pie probable en línea para el café, la cerveza su propia cerveza, o soñando con ser un mythbuster.
Chris Coyier es un diseñador que actualmente vive en Chicago, IL. Es co-autor de Excavando en WordPress, Así como blogger y conferencista en todo el diseño de las cosas. Lejos de la computadora, es probable que se encuentre gritar a los entrenadores de fútbol en la tele o recoger un banjo.

0 comentarios:

Post a Comment

blogs

GoDaddy

http://todopara-instalar-negocioweb.com/

Feature 1

HOSTING Y DOMINIOS

Visit GoDaddy.com Domain Registration at GoDaddy.com Hosting Plans at GoDaddy.com Web Sites at GoDaddy.com Security at GoDaddy.com
What is a domain name?
A domain name is a Web address, such as godaddy.com, that is linked to an IP address (which represents a physical point on the Internet). When someone types a domain name into a Web browser, the requested Web page displays.

A domain name consists of a top-level and a second-level domain. A top-level domain (TLD) is the part of the domain name located to the right of the dot (godaddy.com). The most common top-level domains are .COM, .NET, and .ORG. Some other popular top-level domains are .BIZ, .INFO, .NAME and .WS. These TLDs have certain guidelines but are, for the most part, available to any registrant, anywhere in the world.

The part of the domain name located to the left of the dot — "godaddy," in this case — is called the second-level domain (SLD) name. The second-level domain name is the "readable" part of the address and refers to the organization or entity behind the Internet address. Second-level domain names must be registered with an Internet Corporation for Assigned Names and Numbers (ICANN)-accredited registrar.
Copyright © 1999 - 2007 GoDaddy.com, Inc. All rights reserved.

yahoo

sitios recomendados

facebook

Descarga Diario 80 templates web, iconos, logotipos etc

Posicionamiento de nuestro blog o web

1MD Showreel 2010 from 1MD on Vimeo.

 

Word Press construye tu imperio de blogs

Conviertete en un Expertos en WordPress

Tema De Word Press

Gana Dinero Contestando encuestas

Te presentare algunas de las empresas que te haran ganar dinero contestando encuestas Dinero Encuestas Online. Encuestas Por Dinero, Nuevo Sitio Actualizado Para Personas Que Desean Contestar Encuestas Y Ganar Dinero, Encuestas En Español Que Paga Más Encuestas Remuneradas. Página Rediseñada. Gane Dinero Respondiendo Encuestas Por Internet. Nuevo Sitio De Encuestas En Español.

1&1

Gana Dinero por solo ver o subir videos

Descubre la manera de generar ingresos con los videos

Site Info

Quiero ofrecerte las mejores estrategias y tecnicas para que instale un negocio en linea

Gana dinero vendiendo productos con derecho de reventa

Aqui te muestro algunos productos que tu puedes vender en tu sitio web ademas de que tu tendras el 100% de las ganancias http://todopara-instalar-negocioweb.com/

Comparte este blog

Share |

Followers


crear blog

Otras Formas de generar ingresos

Aqui te muestro otras maneras de generar ingresos Conviertete en un Expertos en WordPress
Ingresos Para Tu Hogar Copyright © 2009 Blogger Template Designed by Bie Blogger Template