Dreamweaver CC 2017 esencial

Elementos de interfaz de jQuery UI

¡Prueba gratis durante 10 días

nuestros 1265 cursos !

Prueba gratis Mostrar modalidades de suscripción
jQuery es un framework que, entre otras cosas, ofrece una serie de elementos de interfaz avanzados, que darán a nuestras páginas un aspecto moderno y una usabilidad muy mejorada y que podemos usar sin necesidad de programación.

Transcripción

jQuery es probablemente el "framework" que ahora mismo más se utiliza dentro de la generación de contenidos web. Basicamente es una serie de funciones, de programación de JavaScript que sirven para hacer todo tipo de tareas de una manera muy cómoda. Dentro de lo que es JQuery, hay también un "framework" específico, vamos, una especie de ampliación sobre jQuery que es el jQuery UI, o sea, los elementos de interfaz de usuario de jQuery. Estos nos proveen de controles y de componentes interesantes para mejorar la interfaz de nuestros contenidos. Y Dreamweaver permite trabajar con ellos. Tenemos dentro de "Insertar" un apartado entero que es jQuery UI. Tenemos también jQuery mobile, pero esto es más bien pensado para el desarrollo móvil. Y dentro de este jQuery UI, vemos que tenemos diferentes posibilidades. Voy a empezar con el "Acordeón". Este acordeón va a servir para organizar contenidos dentro de una página. Para hacer que haya contenidos que se oculten y otros que se muestren, formando un efecto de, efectivamente, un acordeón. Vamos a ver cómo funciona. Lo que necesito es seleccionar es dónde quiero añadir ese acordeón, pulsar en "Acordeón" y seleccionar el botón "Insertar" en anidar. Me he metido dentro de la sección de ese acordeón. Y este acordeón, en concreto, en realidad no es más que un "div", pero que tiene una serie de clases asociadas y además se ha añadido cierta programación a la página para que funcione. Si tengo abierto el panel de "Propiedades", entonces aquí sí que lo que aparece es sorprendente. Tengo toda la información relacionada con cómo tiene que funcionar ese acordeón. Este acordeón que lo puedo ver cómo está funcionando dentro de la vista en vivo. Básicamente consiste en una serie de rótulos, que cuando hago clic sobre ellos me muestran el contenido que hay dentro. Este contenido es un "div" que tiene una etiqueta "p" con texto, pero yo aquí podría poner cualquier cosa. Para crear o eliminar paneles, lo puedo hacer desde el panel de "Propiedades". Aquí tengo el apartado "Paneles" y dentro de él, me muestra tres paneles, pero puedo añadir más. Puedo, por ejemplo, hacer clic en ese "+" y me añade un cuarto panel. Y, de hecho, veo aquí en tiempo real cómo me ha añadido ese panel. Puedo cambiar la organización, la colocación de todos estos paneles. Seleccionando ese panel cuatro y pulsando las flechas, consigo que se vaya a la parte de abajo. También puedo dominar qué panel es el que va a estar abierto en un momento. Por ejemplo, si quiero que sea el tercero, voy a poner aquí un "2", porque se mueve en base 0. Y aquí vemos cómo en realidad ahora me abre este panel tercero. Poniendo un "0", abrirá el primero. También puedo elegir cuándo se abren los paneles. Si es con un clic o con un "mouse-over". Con el clic es cuando yo haga clic en el cabecero, inmediatamente funcionarán. Cuando seleccione el "mouse-over", lo que ocurrirá es que se abrirán y cerrarán los paneles dependiendo de cuándo paso por encima de ellos. Por otro lado, también tengo opciones sobre cómo tiene que modificarse el alto de un contenedor en concreto. Si quiero que estén desactivados. Por otro lado, si quiero que sean colapsables, ésto significa que si no está marcado cuando yo hago clic en otro panel, me sustituye el que haya abierto por el nuevo, y cuando vuelvo a hacer clic en un panel en concreto, no me lo cierra. Sin embargo, si está puesto como colapsable, me lo cerraría. Para poder volver a seleccionar ese acordeón, tengo que irme al "DOM", buscar ese "div" y aquí lo vuelvo a tener. Si ahora lo pongo como colapsable, pues veremos que al hacer clic ahora, puedo conseguir tener todos estos elementos del acordeón colapsados o cerrados. También tengo control sobre las animaciones que se aplican. Puedo elegir diferentes tipos de animación para que la apertura de estos paneles la haga con un pequeño efecto. Y también puedo modificar el tiempo que tarda en abrirse. Por útlimo, tengo diferentes íconos de jQuery UI para esas flechas. Hasta aquí está muy bien, pero, claro, también lo lógico es pensar "sí, pero es que yo quiero poner mis propios contenidos". Bueno, pues puedo cambiarlos fácilmente, haciendo doble clic en cualquiera de estos elementos. Yo puedo poner, por ejemplo, aquí "Lesiones". Y aquí en los contenidos, pues en vez de escribir este "Contenido 1", puedo escribir otra cosa. También lo puedo hacer en el código. Y, de hecho, en el código se ve que el código que ha generado este acordeón es muy simple. En realidad, el truco está en todos los links que se han generado. Todo esto son scripts de JavaScript y estilos CSS que se han creado específicamente para dar forma a estos elementos de jQuery UI. Aquí podría escribir este "lorem", y con el tabulador, pues me va a poner todo el resto del texto. Puedo hacer cosas como añadir fotografías, por ejemplo, también. Selecciono esta etiqueta "p". Me voy a HTML Imagen, pido que la ponga antes. Selecciono la imagen que quiero añadir. Y luego sobre esta imagen, bueno, pues puedo aplicarle moficaciones. Por ejemplo, es un poco demasiado grande, voy a ponerle solo 350 "pixels". Voy a guardar este documento. Y en el momento que lo guarde, va a generar todos lo archivos relacionados de jQuery. Todo lo que necesita. Y ahora cuando intente irme a la vista previa, pues aquí puedo ver el resultado. Aquí lo vamos viendo. Esta barra que aparece aquí es configurable, igual que el que aparezca con ese color de texto y demás. Todos los elementos que componen este acordeón, en realidad, van a ser controlables desde el diseñador CSS. Tengo varios estilos aplicados, estilos CSS y luego "jquery.ui.core.min", etcétera. En ellos es donde tendré que hacer modificaciones, en realidad, en estos estilos añadidos. O también puedo añadir mis propios estilos sobre estilo CSS para hacer cambios en ellos. Si yo quiero ver exactamente cuál es el problema con, por ejemplo, este elemento, este pequeño degradado, puedo irme a calculado. Hago clic en "Calculado". Y, entonces aquí, me pone todas las propiedades que tiene asociadas. Y dentro de esas propiedades, aquí es donde puedo buscar, en concreto, este "background". Pues podría quitarlo. Y vemos que ya no aparece ese "background" y, por tanto, va a funcionar todo normalmente. Así que, podemos también, no solamente configurar los contenidos, sino muy fácilmente hacer modificaciones sobre los estilos CSS. Cuando guarde, voy a preferir, en este caso, guardar todo para que me guarde todos los archivos y todas las modificaciones que lleva asociadas. Porque como vemos, tenemos muchos archivos asociados dentro de este.

Dreamweaver CC 2017 esencial

Crea sitios web gracias al software de Adobe, Dreamweaver CC 2017. Con este repaso esencial a sus fundamentos podrás crear páginas responsive y mostrar tus contenidos a la última.

6:11 horas (78 Videos)
Actualmente no hay comentarios.
 

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.