Angular 2 avanzado: Gestión de archivos en PHP

Asignar hojas de estilo y detalles visuales

¡Prueba gratis durante 10 días

nuestros 1220 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección nos tomaremos una pausa de la programación de nuestra aplicación para asignarle hojas de estilos, reajustar componentes y darle los detalles finales a la capa visual de nuestro proyecto Angular 2.
07:10

Transcripción

Si bien es cierto el enfoque de este curso no se trata tanto de la apariencia de nuestra aplicación, vamos a ver algunos elementos que nos pueden ayudar para hacer más eficiente el proceso de desarrollo. Yo estoy trabajando acá en una aplicación, donde básicamente estoy trabajando elementos de texto y he incluido la librería de Font Awesome. Voy a agregar algunos elementos adicionales que me van a ayudar a poder desarrollar mejor mi aplicación. Acá, yo estoy dentro del "índex" de mi aplicación estoy dentro de la carpeta "src" y buscando el archivo "index.html" En este archivo, podemos incluir elementos, scripts y cualquier detalle adicional de nuestra aplicación. Yo acá voy a incluir una librería llamada Bootstrap que podemos encontrar en la dirección "getbootstrap.com". Y, para instalarla, simplemente entro acá a la sección donde dice "Getting started" y busco las opciones de descarga. Yo acá voy a instalar la versión de CDN, que es una versión que se encuentra hospedada en un servidor externo y, para hacer eso, simplemente voy a ir a mi código en "index.html", en la sección de "head". Vamos a incluir el código que se ofrece desde Bootstrap. También estoy instalando acá jQuery, que es un complemento obligatorio cuando estamos trabajando en Bootstrap. Estoy utilizando el mismo principio, simplemente he ido a "jquery.com". Y, en la sección de descarga, he utilizado el CDN que aparece acá dentro de las diferentes opciones. Entro acá, a "code.jquery.com". y estoy utilizando específicamente jQuery 3, la versión minificada, como aparece acá. Simplemente, he copiado este código que está acá y lo he puesto dentro de mi aplicación. Ahora sí, ya tengo todos los elementos básicos para poder trabajar con Bootstrap dentro de este documento. Una vez que ya lo tengo, también voy a modificar algunos elementos visuales. Voy a ir al componente donde estamos desplegando los archivos, en este caso, "lista de archivos.component.html". Y acá yo estoy desplegando todos los elementos desde un "div". Lo que voy a hacer es que voy a cambiarlo y voy a poner acá una lista. Lo voy a convertir a una lista utilizando la etiqueta "<ul" y a esta lista le voy a asignar una clase, propia de Bootstrap. Así que la vamos a poner acá "class" y vamos a decir que sea "list-unstyle". Esto lo que va a hacer es que va a eliminar todos los elementos clásicos de una lista para poderlo desplegar más sencillamente y también vamos a modificar este "<div" y lo vamos a convertir en "li", que se despliega por cada uno de los elementos que se encuentran en una carpeta. Y, si revisamos el resultado de nuestra aplicación, vamos a ver que ya se empieza a desplegar diferente los contenidos. Vemos que ya ha cambiado la tipografía, los espacios. Tenemos una lista, pero la lista no está incluyendo las clásicas viñetas, sino que ahora se ve simplemente un componente ordenado así que vamos a seguir trabajando nuestra aplicación. Yo voy a ir ahora a "lista de archivos", dentro del módulo "lista-de-archivos" y voy a modificar el CSS. Y voy a hacer que el CSS acá se muestre con un tamaño específico. Vamos a guardar para poder ver el resultado. Y acá nos va a mostrar un tamaño un poco más grande en los elementos de nuestra aplicación y también, otra cosa que voy a hacer, es que voy a utilizar las propiedades "even" y "odd", que es par o impar dentro de los selectores de CSS3 para poder hacer que cada uno de los elementos tenga diferentes fondos. Vamos a ver el resultado para que veas a que me refiero. Y vemos acá cómo dependiendo de que sea par o impar nos va a ir mostrando un fondo diferente. Esto va a hacer más fácil la lectura de los archivos que tenemos dentro de una carpeta. Y, ahora, vamos a modificar, por último, el componente en el que se encuentran cada uno de los ítems de los archivos. Vamos a modificar cada una de estas líneas en el componente que los controlan, en este caso ítem archivo. Vamos a entrar a la plantilla y vemos acá que estamos trabajando con un par. Este elemento lo vamos a modificar y lo vamos a convertir a una serie de etiquetas, por ejemplo, vamos a borrar este párrafo, vamos a dejar acá la información con el nombre del archivo. También, como estamos utilizando un filtro, voy a eliminar la información que se encuentra acá con una extensión, porque no es necesario, ya estamos desplegando un ícono para reconocerla. También voy a incluir acá una etiqueta "<span" y, en esta etiqueta, voy a desplegar el tamaño de mi documento y, por último, voy a agregar un nuevo "<span" que va a llamarse herramientas donde voy a guardar una barra de "herramientas" para modificar cada uno de los diferentes archivos que tenemos dentro de la aplicación. Y, en esta barra de herramientas, vamos a incluir dos funciones una de ellas va a ser la acción de borrar. En este caso, vemos que tenemos acá un ítem que se llama "borrar". Le he asignado a estas clases "item borrar" y he incluido acá un icono utilizando la nomenclatura de Font Awesome. Voy a copiar este mismo elemento y voy a pegarlo. Pero esta vez le voy a cambiar un par de detalles. Le vamos a poner acá "editar". Este me va a servir a mí para hacer la edición. Y también voy a incluirle otro icono distinto para poder desplegar las acciones de edición y, ahora sí, ya tenemos nuestra aplicación, desplegándose un poco más sencillamente. Ahora podemos leer más fácilmente y también tenemos acceso a una pequeña barra de herramientas. Finalmente, voy a agregar un par de estilos adicionales, dentro del módulo "item-archivo", simplemente para desplegar mejor las herramientas. Ahora sí, ya tenemos lista nuestra aplicación utilizando algunos elementos gráficos, que nos van a ayudar también para desplegar más fácilmente no solo la información, sino también para poder desarrollar más rápido los componentes que vamos insertando.

Angular 2 avanzado: Gestión de archivos en PHP

Aprende a crear vínculos entre PHP y Angular 2 mediante un ejemplo práctico en el que trabajarás del lado del servidor con PHP y la parte web con la tecnología Angular de Google.

3:20 horas (33 Videos)
Actualmente no hay comentarios.
 
Software:
Formadores:
Fecha de publicación:19/04/2017
Duración:3:20 horas (33 Videos)

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.