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 4: Applicación Blog: Iteración #5
Loading...
Del curso dictado por University of New Mexico
Desarrollo de Aplicaciones Web: Conceptos Básicos
96 calificaciones
De la lección
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.
Conoce a los instructores
Greg HeilemanProfessor and Associate Provost
Electrical and Computer Engineering
Manel Martínez-RamónProfessor
Electrical and Computer Engineering
[MÚSICA] En este vídeo voy a hablar de la quinta
y última iteración de la aplicación de blog que va a ser una parte de este curso.
Sin embargo no se sorprenda si ve que la aplicación de blog vuelve a aparecer en un
curso posterior.
Le voy a mostrar aquí cómo añadir un poco de Ajax a la aplicación blog.
A medida que lleguemos Ajax, también me gustaría refactorizar la aplicación.
Vamos a echar un vistazo a nuestra aplicación de blog, yendo a app,
luego views y luego vamos a ir a show html.erb.
Y esto es lo que actualmente ocurre si intentamos mostrar uno de sus post,
muestra el título, luego
el cuerpo del post y luego habrá unos enlaces en la parte inferior de la página.
Me gustaría refactorizar esto, les mostraré cómo.
Me gustaría refactorizar el archivo de post show.html.erb de la siguiente forma,
lo primero que quiero hacer en la parte superior es
tener el código para mostrar un post particular.
Debajo de esto quisiera mostrar todos los comentarios que se asocian con este post,
y debajo de esto vamos a tener un formulario
para añadir nuevos comentarios para este post en particular.
Y luego vamos a poner los mismos enlaces en la parte inferior,
la edición y enlaces de vuelta.
Hay lugares en que voy a tener que cambiar algunas cosas son estos dos,
tenemos el código para mostrar un post pero no tenemos el código
aquí para visualizar el formulario para crear una nueva entrada.
Como parte de esta refactorización voy a crear algo en Rails llamado parcial.
Y un parcial es un fragmento de código vista.
Lo primero que voy a hacer es el parcial para los posts,
así que voy a mostrar un post para ello voy a crear un div,
y este es un método de ayuda para la creación de un div.
Voy a entregarlo al post y vamos a imprimir el título de la entrada,
y esto está en Ruby incrustado como h2
según el encabezado y este método de aquí h lo que hace es que se escapa de HTML,
así que si usted tiene cosas extrañas en el título, va a ser capaz de escapar de
ellas y producir HTML adecuado para permitir que se muestren en el navegador.
La siguiente línea muestra el cuerpo del post, así que de nuevo primero
escapamos de HTML inseguro, simple_format producirá un formato HTML simple.
Guardamos todo esto en views post en el fichero _post.html.erb.
Es muy importante que los parciales tengan un guión bajo como primer carácter en su
nombre de archivo.
El objetivo conjunto de los parciales es refactorizar el código
para crear estos fragmentos que puedan ser utilizados una y otra vez.
Voy a enseñarle cómo,
volviendo a nuestro show.html.erb puedo quitar todo esto código, este era el
código para mostrar el título y el cuerpo y luego simplemente llamamos al parcial.
Así es como se hace, simplemente render post.
Y post sabe que debe buscar post.html.erb con el guión bajo antes
en el subdirectorio post.
Ahora vamos a crear un parcial para añadir comentarios y a continuación los post.
Así que voy al directorio views comentarios
y creo un archivo llamado _comment.html.erb y vamos a poner esto.
Vamos a crear un div para nuestros comentarios y aquí se trata
un poco de formato HTML.
Lo primero dice que se trata de un párrafo que
es lo que significa que pongo strong por lo que queremos que sea enfatizado,
sea el estilo enfatizado y luego vamos a poner posted.
Y vamos a utilizar este método de ayuda time_ago_in_words que nos dirá cuánto
tiempo hace que fue creado este documento en particular y en palabras.
Ahora note que no estoy utilizando el símbolo de @,
esto se ve que aquí, estoy tratando con una larga lista de comentarios por lo que
este div va a tener que funcionar para cada uno de estos comentarios.
Vamos a utilizar este parcial ahora en nuestro método show.
Así que lo colocaremos aquí,
lo que voy a hacer es que voy a crear un div para todos los comentarios, voy a dar
una identificación de div a todos esos comentarios y aquí está el parcial.
[AUDIO EN BLANCO] Voy a llamar este parcial en cada uno de
los comentarios individuales, por lo que aquí va post.comments y luego utilizaré
reverse porque quiero mostrar todos los comentarios en orden cronológico inverso.
El comentario más reciente debería aparecer en la parte superior y el más
antiguo en la parte inferior.
Vamos a seguir adelante y vamos a guardar esto,
ponemos en marcha al servidor y vemos si todo sigue funcionando.
Iniciamos el servidor y si voy a localhost:3000
vemos que aparece la aplicación Rails.
Vamos a ver si todavía puedo ver mis posts y aquí están,
y si echo un vistazo a un post determinado veremos que todo está funcionando, aquí
está el título de post, el cuerpo y luego las observaciones o los comentarios en
orden cronológico inverso y por último los enlaces en la parte inferior de la página.
Aquí está el código por el formulario, así que vamos a utilizar el método form_for.
Solo copiamos esto, vamos a explicarlo más tarde cuando tengamos una oportunidad para
hablar en HTML.
Voy a pasar un post y lo vamos a crear un nuevo comentario,
esto va a ser la base para el formulario.
Este remote true es como vamos a llamar a JavaScript.
Hay una etiqueta llamada New Comment que parece [INAUDIBLE] y esto es el control.
Este es el área del texto donde vamos a entrar nuestro texto para el comentario.
Luego hay un botón enviar que aparecerá en la parte inferior,
vamos a guardar esto y poner en marcha al servidor a ver si esto funciona ahora.
Simplemente pulso actualizar para ver qué pasa, y veremos que se genera un error,
hay un problema que dice que no hay ninguna ruta para post_comments_path.
Le voy a mostrar la razón de esto y cómo solucionarlo.
Para mostrar cuál es el problema,
vaya a la red de su aplicación Rails y escriba rake routes y verá que hay un
montón de rutas que están disponibles pero ninguna para post seguido de comments.
Para arreglar esto, tenemos que ir al subdirectorio config
y seleccionemos routes.rb y esto es lo que hay ahora.
Lo que tenemos que hacer es añadir lo que se llama un subrecurso,
que se describe con más detalle aquí abajo,
dice que si usted va a crear sus recursos, debe hacerlo de esta manera.
Y esto es lo que vamos a tener que hacer ahora debido a que un comentario es
un recurso para un post.
Nos gustaría crear un conjunto de rutas que sean post seguidos de comentarios.
Y así es como se hacen, se abre la instrucción do
y luego se anida este recurso comments dentro de esta declaración do.
Volvamos a nuestra consola de sistema operativo a ver si tenemos una nueva ruta.
De nuevo escriban rake routes y debería haber un montón
de rutas nuevas asociadas con el subrecurso para comentarios.
Y aquí están, vamos a recuperar esta página web
y vemos si podemos conseguir [INAUDIBLE] correctamente.
Tengo que reiniciar el servidor porque cada vez que cambio de ruta
eso hay que hacerlo.
Vamos a cargar esta página y ver si las cosas se han arreglado.
[AUDIO EN BLANCO] Y por supuesto todo funciona,
eso está mucho mejor, por lo tanto ahora tenemos nuestro propio post,
tenemos los comentarios debajo de él y en la parte inferior tenemos un formulario.
Hay algo más que necesitamos hacer,
sin embargo con el fin de que este formulario funcione adecuadamente,
recuerde que le dije que este remote true produce una llamada a JavaScript.
El formato llamar al método create comments controller
así que tenemos que decirle a comments controller que sea compatible con
JavaScript y así es como se hace esto.
Hay que ir a comments controller, desplácese hacia abajo hasta que encuentre
el método de create y necesitará escribir una nueva línea llamada format.js,
este llamar a un fichero llamado js.erb existe, así es que crea views comments
y lo que necesita es un nuevo archivo llamado create.js.erb.
Y aquí está, aquí están los comandos del jQuery que he colocado en él.
La primera línea que era una nueva variable y lo que hace es representar el
contenido y luego se utiliza el método j,
para escapar de todo aquello que sea peligroso para JavaScript.
Luego me estoy escondiendo esto, esto es un método jQuery
oculto y luego voy por un nuevo comentario en el div comment que hemos creado y luego
lo voy a hacer aparecer poco a poco con fadeIn slow.
Así que el comentario que debajo del id comment va a aparecer lentamente de lo
que da un aspecto agradable el usuario puede ver el nuevo comentario entrando.
Y lo último necesario es reestablecer el formulario para que el
usuario pueda introducir otro comentario.
Vamos a echar un vistazo a cómo se ve en el navegador,
ahora vamos a entrar un nuevo comentario y vamos a ver qué pasa.
Me gustaría y luego vea que en la parte superior aparece.
Miren que bien. Acabamos de añadir JavaScript a nuestra
aplicación de blog.
Esto está muy bien.
[AUDIO EN BLANCO]
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2019 Coursera Inc. Todos los derechos reservados.
