Para este ejemplo vamos a crear una nueva p\u00e1gina en blanco en nuestra aplicaci\u00f3n Demo y la llamaremos Carrusel – Est\u00e1tico<\/p>\n
Creamos una nueva Regi\u00f3n, que la llamaremos Carrusel y en la secci\u00f3n de Apariencia seleccionamos en Plantilla que sea \u201cCarousel Container\u201d.<\/p>\n
Hacemos clic en Opciones de Plantilla:<\/p>\n
- \n
- \n
- \n
- Animation: Fade<\/strong><\/li>\n
- Timer: 5 Seconds<\/strong><\/li>\n
- Header: Hidden<\/strong><\/li>\n
- Style: Remove Borders<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Aceptamos los cambios<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/img1.jpg?resize=750%2C292&ssl=1\")
<\/p>\nEn este momento la regi\u00f3n no tiene ning\u00fan contenido, ahora es momento de agregar el contenido y lo hacemos mediante la creaci\u00f3n de subregiones. Cada subregi\u00f3n ser\u00e1 una Slide de nuestro Carrusel.<\/p>\n
Vamos a crear tres subregiones a las cuales la vamos a llamar:<\/p>\n
- \n
- \n
- \n
- Regi\u00f3n A<\/li>\n
- Regi\u00f3n B<\/li>\n
- Regi\u00f3n C<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Cada subregi\u00f3n ser\u00e1 de contenido est\u00e1tico y la plantilla seleccionamos que sea \u201cBlank with Attributes\u201d<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/img2.jpg?resize=750%2C292&ssl=1\")
<\/p>\nPodemos ver en la ficha del Dise\u00f1ador de Cuadr\u00edcula que se ha creado la regi\u00f3n contenedora que es el Carrusel con 3 Slides que corresponden a las 3 subregiones A, B y C.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/img3.jpg?resize=750%2C316&ssl=1\")
<\/p>\nEn cada subregi\u00f3n vamos a colocar un contenido HTML.<\/p>\n
Seleccionamos la Subregi\u00f3n A<\/strong> y en el panel de propiedades en la Secci\u00f3n Origen colocamos el siguiente contenido HTML:<\/p>\n
<h1>ORACLE APPLICATION EXPRESS 5.0<\/h1>\n<h3>Develop<\/h3>\n<p>Use our modern, intuitive, and powerful browser-based IDE to quickly build and run applications, enabling easy iterative development.<\/p><\/pre>\n
Seleccionamos la Subregi\u00f3n B<\/strong> y en el panel de propiedades en la Secci\u00f3n Origen colocamos el siguiente contenido HTML:<\/p>\n
<h1>ORACLE APPLICATION EXPRESS 5.0<\/h1>\n<h3>Customize<\/h3>\n<p>Powerful and intuitive design tools enable easy and extensive customization of your application's UI.<\/p><\/pre>\n
Seleccionamos la Subregi\u00f3n C<\/strong> y en el panel de propiedades en la Secci\u00f3n Origen colocamos el siguiente contenido HTML:<\/p>\n
<h1>ORACLE APPLICATION EXPRESS 5.0<\/h1>\n<h3>Deliver<\/h3>\n<p>Deployment couldn't be simpler. It is as easy as providing your users the URL to your application.<\/p><\/pre>\n
El contenido de cada subregión se basa en un título usando las etiquetas HTML <h1><\/h1>, de un subtítulo, y usando las etiquetas HTML <h3><\/h3> y un texto usando las etiquetas de párrafo <p><\/p>.<\/p>\n
Si ejecutamos la p\u00e1gina podremos ver que al no darle estilos el contenedor se ve muy simple a la vista y los textos no se encuadran adecuadamente al contenedor.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/img4.jpg?resize=750%2C215&ssl=1\")
<\/p>\nEn el caso que quisi\u00e9ramos tener diferentes reglas CSS para cada subregi\u00f3n (slides), podemos crear diferentes identificadores est\u00e1ticos, uno para cada subregi\u00f3n.<\/p>\n
Seleccionamos la Subregi\u00f3n A y desde el panel de la derecha de propiedades, en la Secci\u00f3n \u201cAvanzada\u201d, ingresamos en Identificador Est\u00e1tico: miclasecssA. <\/strong>Hacemos lo mismo para la subregi\u00f3n B e ingresamos el nombre miclasecssB <\/strong>y en la subregi\u00f3n C ingresamos miclasecssC<\/strong>.<\/p>\n
Para que nuestras slides se vean m\u00e1s atractivas vamos a colocar los textos alineados al centro y tambi\u00e9n vamos a indicar el color de fondo de cada slide usando una regla CSS que trae el Tema Universal 42 para usarse en este caso.<\/p>\n
Crear Reglas CSS<\/strong><\/p>\n
Volvemos al Dise\u00f1ador de P\u00e1ginas y seleccionamos el t\u00edtulo de la p\u00e1gina.<\/p>\n
Desde el panel de la derecha de propiedades ingresamos a la secci\u00f3n CSS en L\u00ednea<\/strong> y colocamos las siguientes reglas CSS:<\/p>\n
#miclasecssA\nh1 {font-size: 2.5em;text-align:center;}\nh3 {font-size: 1.5em;text-align:center;}\np {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px;}\n\n#miclasecssB\nh1 {font-size: 2.5em;text-align:center;}\nh3 {font-size: 1.5em;text-align:center;}\np {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px;}\n\n#miclasecssC\nh1 {font-size: 2.5em;text-align:center;}\nh3 {font-size: 1.5em;text-align:center;}\np {font-size: 1.2em;text-align:center; padding:5px 50px 5px 50px;}<\/pre>\nHe colocado las mismas CSS para cada subregi\u00f3n pero est\u00e1 de m\u00e1s decir que podemos usar diferentes reglas CSS para nuestras subregiones.<\/p>\n
En las CSS estamos indicando que el t\u00edtulo sea de un tama\u00f1o de alrededor de 42px y el texto est\u00e9 alineado al centro. De igual modo para el subt\u00edtulo estamos indicando que tenga un tama\u00f1o de alrededor de 24px y el texto est\u00e9 alineado al centro. Y finalmente para el texto del p\u00e1rrafo estamos indicando que tenga un tama\u00f1o de alrededor de 19px, que el texto est\u00e9 alineado al centro y agregamos un padding de 5px en la parte superior, 50px a la derecha, 5px abajo y 50px a la izquierda.<\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/img5.jpg?resize=750%2C315&ssl=1\")
<\/p>\nPara cambiar el color de fondo de nuestras Slides o Subregiones podemos hacer uso de las clases que ya est\u00e1n integradas en el Tema Universal 42.<\/p>\n
Lamentablemente no hay mucha documentaci\u00f3n sobre las CSS que usa el Tema 42 por eso cuando no sabemos qu\u00e9 clase es usada para alg\u00fan elemento podemos usar el Inspector Web y buscar la clase seg\u00fan el elemento seleccionado.<\/p>\n
Para agilizar el proceso he buscado las clases que vamos a necesitar para cambiar el color que se encuentran disponibles.<\/p>\n
Reglas CSS del Tema Universal 42<\/strong><\/p>\n
FG Class BG Class Contrast Text Class RGB<\/strong><\/p>\n
u-ColorFG–1 u-ColorBG–1 u-Color-1-FG–txt rgb(255, 45, 85)<\/p>\n
La clase u-Color<\/strong> permite definir el esquema del color, hay definidas en el Tema Universal 42 una cantidad de 30 colores diferentes, el cual se definen del 1 al 30.<\/p>\n
La forma en que usamos estas clases es colocando dichas clases en cada una de las subregiones, en la secci\u00f3n \u201cApariencia\u201d en \u201cClases CSS\u201d:<\/p>\n
Para Regi\u00f3n A:<\/p>\n
dm-ColorBlock u-Color-1-BG--bg u-Color-1-FG--txt h200<\/pre>\n
Para Regi\u00f3n B:<\/p>\n
dm-ColorBlock u-Color-2-BG--bg u-Color-2-FG--txt h200<\/pre>\n
Para Regi\u00f3n C:<\/p>\n
dm-ColorBlock u-Color-3-BG--bg u-Color-3-FG--txt h200<\/pre>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/img6.jpg?resize=750%2C314&ssl=1\")
<\/p>\nPodemos observar que estamos colocando el fondo de la Slide A con el esquema de color 1, la Slide B con el esquema de color 2 y la Slide C con el esquema de color 3, y un alto para cada una de las subregiones de 200px usando la clase h200.<\/p>\n
A continuaci\u00f3n he creado una tabla de referencia para que puedas identificar los colores que corresponden a cada uno de los esquemas, con su RGB y Hex # correspondiente.<\/p>\n
Esquemas de Colores <\/strong><\/p>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/colores.png?resize=503%2C772&ssl=1\")
<\/p>\n
- Timer: 5 Seconds<\/strong><\/li>\n
- Animation: Fade<\/strong><\/li>\n
![\"\"](\"https:\/\/i0.wp.com\/kiusi.com\/wp-content\/uploads\/2016\/06\/img7.jpg?resize=750%2C363&ssl=1\")
<\/p>\n