Este es el primer curso en una línea de especialización de Coursera que trata el desarrollo de aplicaciones Web. Este curso le dará los conocimienots básicos, la terminología y los conceptos fundamentales que son necesarios para construir aplicaciones web integradas modernas. Un desarrollador de aplicaciones web integradas está familiarizado con cada "capa" de las tecnologías de software que participan en una aplicación web, incluidas las tecnologías de modelado de datos y bases de datos, los componentes del entorno de servidor web y middleware, protocolos de red, la interfaz de usuario y diseño visual básicos, y los conceptos de interacción del usuario. En este curso vamos a aprender practicando. Vamos a empezar por el aprendizaje de los principales componentes de las arquitecturas de aplicaciones web, junto con los patrones de diseño fundamentales y filosofías que se utilizan para organizarlos. El alumno construirá y perfeccionará continuamente una aplicación web integrada totalmente funcional a medida que avanzamos a través de los módulos de este curso. En el camino el alumno levará a cabo prácticas ágiles de desarrollo de softwar, numerosas herramientas que los ingenieros de software deben sabe cómo utilizar, y un marco de desarrollo de aplicaciones web integradas modernas.
Video 2: Diseño
Loading...
From the course by University of New Mexico
Desarrollo de Aplicaciones Web: Conceptos Básicos
85 оценки
From the lesson
Módulo #5 - La interfaz de usuario
En nuestro último módulo vamos a discutir acerca de la interfaz de usuario. Veremos CSS y JavaScript, y cómo se utilizan para añadir estilo a la estructura y el diseño de documentos HTML. También vamos a aprender acerca de Ajax y cómo mejora la solicitudes de los usuarios.
Meet the Instructors
Greg HeilemanProfessor and Associate Provost
Electrical and Computer Engineering
Manel Martínez-RamónProfessor
Electrical and Computer Engineering
[SONIDO] En este video hablaremos de la estética
del diseño web y en particular cómo los contenidos deben ser organizados en la
página a fin de crear una experiencia visual placentera para el usuario final.
También mencionaremos algunos otros asuntos del diseño gráfico relacionados
con aplicaciones web modernas.
No obstante, antes de hacer esto, vamos a tomarnos un respiro.
Al trabajo este muy duro para llegar a este módulo final, así que se lo merece.
Póngase cómodo y disfrute
de lo que viene ahora.
[MÚSICA] [MÚSICA]
[MÚSICA] [MÚSICA]
[MÚSICA]
[MÚSICA] [MÚSICA]
[MÚSICA] [MÚSICA] Esta es una escena de la película El Bueno,
El Feo y El Malo de Sergio León, un director de cine
italiano y el creador de las películas de género espaguetti western.
Esta es su película más famosa y esta es la escena más famosa de esa película.
El cementerio de esa escena en realidad está en,
cerca de Burgos en España y el tiroteo es el más famoso de la historia del cine.
La banda sonora fué compuesta por Enio Morricone y es considerada por muchos como
la más grande y la más original banda sonora de la historia.
Si tiene la oportunidad vea la película pero antes de hacerlo vamos a hablar
acerca de cómo esto se relaciona con el diseño de aplicaciones web.
Además del hecho de que tanto la cinematografía como la banda sonora son
estéricamente agradables, algo por lo que también debemos esforzarnos en nuestros
diseños web, me gustaría que nos fijáramos en el título, El Bueno, El Feo y El Malo.
Y vamos a hablar de lo bueno, de lo malo y de lo feo en diseños web.
Me gustaría empezar con lo bueno.
Los principios asociados con una imagen visual agradable son en realidad
bastante antiguos.
Esta es una imagen del Hombre Bitruvio de Leonardo Da Vinci.
El dibujo se basa en la correlación de las proporciones humanas ideales con
la geometría.
Descrito por el antiguo arquitecto romano Bitruvio en su libro tercero de
arquitectura, el dibujo y el texto se denominan a veces,
el canon de las proporciones.
Esta imagen es un ejemplo de la mezcla del arte y de la ciencia en el renacimiento
y proporciona el ejemplo perfecto del gran interés de Da Vinci en las proporciones.
De este dibujo también se dice que ilustra la proporción áurea utilizada para lograr
el equilibrio y la belleza en muchas pinturas y esculturas del Renacimiento.
La proporción áurea por cierto, también aparece en la Mona Lisa y
fué empleada por Miguel Angel, Rembrandt, Dalí y otros.
No tenemos tiempo para entrar en estos principios en esta clase,
pero se pueden aprender fácilmente, les animo a investigar por su cuenta.
Vamos a echar un vistazo a un ejemplo de,
en una página web, este es un sitio llamado minimums
que adoptó un enfoque muy audaz en la manera que exhibe su contenido.
Tiene un diseño de sitio web basado en cuadrículas y tipografía grande
junto con imágenes de alta calidad y máxima resolución.
Su sitio sirve como muy buen ejemplo de cómo ejecutar correctamente una estructura
en cuadrícula manteniendo una buena jerarquía visual de diseño.
Como ejemplo de algo malo, les muestro aquí un sitio web que ha sido secuestrado.
Lo importante aquí es que si no se tiene cuidado en materia de seguridad,
incluso el mejor diseño se verá comprometido.
[AUDIO EN BLANCO] Ahora vamos a echar un vistazo a lo feo.
Aquí tenemos una captura de pantalla de la peor página del mundo.
Este sitio web es en realidad construida con fines educativos
y para apreciar todo su horror, hay que buscar en ella directamente.
Así que permítanme que les muestre una vista en directo y puede ver que hay
gráficos que parpadean, múltiples fuentes y colores que se utilizan en conjunto y
un esquema de color horrible.
De hecho como este sitio está destinado a ser educativo,
si va hasta el botón clic here, donde verá que incluso clic here está mal escrito,
irá a una lista de las cosas que están mal hechas en este sitio.
Hay algo así como 60 defectos de diseño en este sitio web.
Les animo a ir a the worldsworstwebsiteever.com y
lean esta lista, es instructiva y aprenderán de su lectura.
Vamos a hablar de diseño.
El diseño es cómo aparece su contenido en la pantalla y les voy a mostrar
algunos ejemplos.
Creo que Facebook tiene un diseño muy limpio y sencillo.
Si usted ve la forma en la que organizan su contenido, verá que es muy intuitiva,
es muy fácil de usar y verá que es muy fácil de identificarse y
crear una cuenta nueva.
Aquí tenemos un ejemplo que se llama Freshbooks,
es un sitio de contabilidad basada en la nube.
Esta versión en directo de la aplicación,
les voy a mostrar algo que es hoy bastante común, que es poner una gran cantidad de
contenido en una sola página, que se puede acceder con sólo desplazarse hacia abajo.
En las primeras páginas, en los primeros sitios de los sitios web,
hay una gran cantidad de enlaces en una página y se navegaba de una página a otra.
La tendencia actual es poner mucho en una sola página en la que puede desplazarse
hacia abajo y ver cada vez más contenido.
Otra cosa de la que me gustaría hablar con respecto al diseño es el diseño
responsivo, sensible.
El objetivo de un diseño sensible es proporcionar
una visualización óptima e interacción a través de una amplia gama de dispositivos,
desde ordenadores de escritorio, tradicionales hasta los teléfonos móviles.
Esto se hace mediante la adaptación de la disposición para facilitar la lectura y la
navegación con una cantidad mínima de cambio de tamaño y desplazamiento, con
independencia de la plataforma que se use para que pueda verse el mismo contenido.
El enfoque del diseño utiliza una cuadrícula
junto con imágenes flexibles y consultas de medios CSS3,
con el fin de construir este diseño fluido.
Permítanme mostrarle un ejemplo,
la página Freshbooks mostrada anteriormente es un diseño sensible.
a medida que se ajusta al tamaño,
verá que las imágenes se ajustan para que esta página se vea bien en un teléfono.
Verá que todas las imágenes se reajustan para caber en la plataforma.
Si se cambia otra vez la escala, verá que el diseño vuelve a cambiar,
por lo que este es un ejemplo de diseño sensible.
Debo mencionar que es muy importante proporcionar diseños sensibles debido
a que cada vez mas usuarios de aplica iones web están accediendo a través
de un móvil.
Además si se proporciona un diseño sensible como este, no siempre es
necesario que una empresa cree una aplicación activa para teléfonos móviles.
La aplicación web puede funcionar en lugar de una aplicación específica
para teléfonos móviles.
La aplicación web puede servir como su aplicación móvil.
Por lo que estamos viendo que cada vez más un diseño sensible es todo lo que una
empresa necesita para hacer frente a su mercado basado en telefonía móvil.
La siguiente cosa de la que me gustaría hablar con respecto al
diseño es la estructura.
Es una buena idea empezar sólo por una estructura aproximada de cómo desea que su
sitio se vea antes de utilizar un montón de tiempo en la construcción del sitio.
Es como un poner algo como esto que se puede mostrar al cliente y ahí el cliente
puede tener una visión rápida de sus ideas y de cómo se verá el sitio web.
Con esto obtendrá rápidamente una retroalimentación de lo que le gusta y lo
que no le gusta al cliente, si le muestra una estructura como esta.
Otra cosa común es establecer una estructura de navegación, de modo que el
cliente puede ver cómo las cosas van a fluir a través de nuestra página web.
Aquí hay una que hemos construido a partir de la página web
de la Universidad de Nuevo México donde se ve cómo se enlazan las cosas.
[AUDIO EN BLANCO]
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
