varios – Programador https://agcapa.es Just another WordPress site Thu, 28 Jun 2018 10:35:18 +0000 es hourly 1 https://wordpress.org/?v=5.7 130542897 Empezar a crear un proyecto con ReactJS https://agcapa.es/empezar-a-crear-un-proyecto-con-reactjs/ Thu, 28 Jun 2018 10:35:18 +0000 http://agcapa.es/?p=363 Continuamos nuestra serie de artículos sobre ReactJS, pero nos centramos ya en la parte más práctica de esta librería Javascript y lo hacemos  con un pequeño ejemplo en el que usaremos la herramienta Create React App, que nos permite obtener con un único comando el entorno de desarrollo ya listo para empezar a trabajar. Uno de los problemas que…

La entrada Empezar a crear un proyecto con ReactJS se publicó primero en Programador.

]]> Continuamos nuestra serie de artículos sobre ReactJS, pero nos centramos ya en la parte más práctica de esta librería Javascript y lo hacemos  con un pequeño ejemplo en el que usaremos la herramienta Create React App, que nos permite obtener con un único comando el entorno de desarrollo ya listo para empezar a trabajar.

Uno de los problemas que tenía ReactJS al principio era que en ocasiones había que pelearse un poco con las configuraciones, gestores de paquetes, de tareas, transpiladores, linters, builders etc. Facebook ha resuelto esta complicación con Create React App. Por línea de comandos, nos ahorra la necesidad de configurar todo un entorno de trabajo, por lo que nos permite ponernos directamente a desarrollar sobre esta librería y disfrutar de toda la sencillez y rendimiento de ReactJS.

Instalación

Este comando es CREATE REACT APP y se instala en tres pasos:

Primero instalamos Create React App con el siguiente comando de npm:

npm install -g create-react-app

Una vez lo hemos instalado nos metemos en la carpeta donde deseemos crear nuestro directorio de trabajo para el proyecto, y lanzamos el comando para comenzar la nueva aplicación:

create-react-app nueva-app-react

Mediante el anterior comando se cargan los archivos de un proyecto vacío y todas las dependencias de npm. Una vez terminado el proceso entraremos dentro de la carpeta de nuestra nueva app:

cd nueva-app-react

Ya dentro lanzaremos el comando que iniciará el servidor web y nos abrirá una página en nuestro navegador con un mensaje de bienvenida.

npm start

Con esto ya tendremos nuestro proyecto creado.

El propio terminal nos indicará la URL del servidor web donde está funcionando nuestra app. De manera predeterminada, será el http://localhost:3000/, aunque el puerto podría variar si el 3000 está ocupado.

Estructura del proyecto

Nuestra app React recién creada cuenta con varias carpetas:

  • node_modules: dependencias npm del proyecto
  • public: la raíz de nuestro servidor donde se podrá encontrar el index.html, el archivo principal y el favicon.ico, el icono de la aplicación.
  • src: aquí es donde trabajaremos nuestro proyecto, donde vamos a colocar los archivos de nuestros componentes React.

Además encontrarás estos archivos sueltos, como el readme, el package.json, etc.

Hola Mundo en React

Casi todo nuestro trabajo del día a día lo realizaremos en la carpeta “src”. Para comenzar y no despistarnos en nuestro primer “Hola Mundo”, podríamos obviargran parte del código de nuestro archivo src/App.js y quedarnos con esto:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Estamos comenzando con ReactJS</h1>
        <h2>Comenzar con Create React App se hace muy sencillo</h2>
      </div>
    );
  }
}
export default App;

En la primera línea import React, se está importando la librería React y la clase Component. Esta clase la usamos para extenderla y crear nuestra propio componente App.

Las clases que usamos para implementar componentes React solo necesitan un método render para poder funcionar. En nuestro caso el componente que estamos creando, llamado App (como el nombre de la clase), solamente tiene ese método render().

Como puedes observar, render devuelve un contenido que es el HTML necesario para pintar el componente en la página. El único detalle es que render debe devolver un único elemento HTML (en nuestro caso un <div>), sobre el que se anidarán cualquier número de elementos para crear la estructura del DOM necesaria para el componente.

Observa también que estamos usando clases de ECMAScript 6 para la creación de componentes. Actualmente es la manera recomendada, aunque no es la única. No necesitaremos preocuparnos porque ese Javascript no sea compatible con todos los navegadores, ya que Create React App configura el transpilador para hacerlo compatible con ECMAScript 5.

Guardando el archivo observamos como el navegador refresca la página automáticamente.

Con esto ya hemos creado nuestro primer componente y tenemos un acercamiento inicial a React, y muy sencillo gracias a Create React App.

La entrada Empezar a crear un proyecto con ReactJS se publicó primero en Programador.

]]> 363 Como hacer un Acordeón con HTML, CSS y Javascript (Jquery) https://agcapa.es/acordeon-html-css-javascript-jquery/ Thu, 20 Oct 2016 06:44:17 +0000 http://agcapa.es/?p=337 En previos artículos, casi siempre hemos utilizado librerías de terceros para implementar diversos elementos de nuestra web. Esta vez lo implementaremos nosotros desde cero. Se trata de un elemento muy usual en las web, donde al pulsar en un determinado sitio, barra, botón, etc, se expande más información relacionada que previamente estaba oculta, lo que…

La entrada Como hacer un Acordeón con HTML, CSS y Javascript (Jquery) se publicó primero en Programador.

]]> En previos artículos, casi siempre hemos utilizado librerías de terceros para implementar diversos elementos de nuestra web. Esta vez lo implementaremos nosotros desde cero.

Se trata de un elemento muy usual en las web, donde al pulsar en un determinado sitio, barra, botón, etc, se expande más información relacionada que previamente estaba oculta, lo que se conoce como estilo acordeón. Muy parecido a lo que hace la librería Jquery UI y sus accordions https://jqueryui.com/accordion/

Para implementar este interesante elemento utilizaremos la librería de javascript Jquery, html y css.

Este sería el resultado final:

Es muy sencillo de implementar. Sólo debemos saber lo básico de html, css, y un poco de las animaciones de jquery.

Como hacer un Acordeón con HTML, CSS y Javascript (Jquery)

Codigo HTML:

Codigo CSS:

Como vemos en el código HTML, tenemos dos contenedores <div> con clase accordion-container,  que contendrán toda la información de ese ítem, característica, sección, etc. En concreto tenemos un elemento <a> que representa el título, y es la barra horizontal con el nombre del jugador, y otro elemento div con clase accordion-content que en principio está oculta y que contiene una imagen del jugador y texto.

En este ejemplo se trata de un listado con dos jugadores, que al hacer click en cada uno de ellos se expande información relacionada. Si nos fijamos, también se cambia el icono de la derecha de la barra con “+” y “-“según este cerrado o abierto, esto lo logramos con código css.

Por último, queda lo más importante, implementar mediante jquery la acción de hacer click en la barra de título y como consecuencia se visualice u oculte la información según se encuentre visible o no el contenedor de información .accordion-content”

Codigo Jquery:

En primer lugar guardamos en la variable “contenido” el objeto div que contiene la información, en este caso de uno de los jugadores, según donde hayamos pulsado, a través de la función next(), que coge el primer elemento hermano con clase .accordion-content

Seguidamente comprobamos si está oculto o no, y dependiendo del caso mostramos u ocultamos a través de dos funciones de jquery, con el objetivo de que el cambio no se produzca de forma brusca, sino animada.

slideDown() => Muestra el contenido de forma animada (slide).

slideUp() => Esconde el contenido de forma animada (slide).

Así de fácil es implementar nuestra propio estilo acordeón sin tener que recurrir a librerías externas como Jquery UI.

La entrada Como hacer un Acordeón con HTML, CSS y Javascript (Jquery) se publicó primero en Programador.

]]> 337 Uso de Ajax muy sencillo con jQuery https://agcapa.es/uso-de-ajax-muy-sencillo-con-jquery/ Fri, 14 Aug 2015 10:40:42 +0000 http://agcapa.es/?p=305 Es muy fácil desarrollar Ajax en jQuery. En este artículo veremos el ejemplo más sencillo de Ajax con el framework Javascript jQuery. Ha llegado el momento de hacer una primera aproximación a Ajax, en la serie de artículos que estamos publicando   para mostrar el uso de este framework (léase el Manual de jQuery).Una de las…

La entrada Uso de Ajax muy sencillo con jQuery se publicó primero en Programador.

]]> Es muy fácil desarrollar Ajax en jQuery. En este artículo veremos el ejemplo más sencillo de Ajax con el framework Javascript jQuery.
Ha llegado el momento de hacer una primera aproximación a Ajax, en la serie de artículos que estamos publicando   para mostrar el uso de este framework (léase el Manual de jQuery).Una de las ventajas de los frameworks Javascript es que nos permiten desarrollar scripts que hacen uso de Ajax de una manera muy fácil y encima, sin tener que complicarnos la vida con la compatibilidad entre distintos navegadores. Sin duda, cualquier persona que sepa un poco de Javascript, podría en poco tiempo empezar a utilizar Ajax con alguno de estos frameworks. Nosotros vamos a demostrar cómo es de sencillo en jQuery.La primera impresión que he tenido sobre el uso de Ajax en jQuery es realmente grata, por la facilidad con la que se puede realizar un primer ejemplo. Se trata de un ejemplo extremadamente sencillo, pero sirve para abrirnos las puertas a muchas aplicaciones interesantes. Habíamos visto en otros frameworks Javascript ejemplos similares, como en el artículo Ajax con Mootools, pero tenemos que quitarnos el sombrero ante la extremada sencillez con la que se puede hacer un ejemplo similar en jQuery. Sea suficiente decir que en este ejemplo de Ajax utilizaremos tan sólo 4 líneas de código, de las cuales sólo 1 es para ejecutar la propia llamada al servidor por Ajax.

Traer un contenido con Ajax al pulsar un enlace

En este sencillo ejemplo haremos llamada a Ajax, para traer un contenido, cuando se pulse un enlace. Esto lo hemos puesto en marcha en el servidor de DesarrolloWeb.com y lo puedes ver en una página aparte.Aquí podemos ver el enlace, al que ponemos un identificador (atributo id) para seleccionarlo desde jQuery.

<a href=»#» id=»enlaceajax»>Haz clic!</a>

Si hemos leído hasta aquí el Manual de jQuery podremos saber cómo asignar un evento a un enlace. No obstante, recordemos cómo asignar una función para cuando se haga clic en el enlace:

$(document).ready(function(){
$(«#enlaceajax»).click(function(evento){
//elimino el comportamiento por defecto del enlace
evento.preventDefault();
//Aquí pondría el código de la llamada a Ajax
});
})

Ya se trata sólo de poner en marcha Ajax dentro de la función del evento «click» sobre el enlace. Pero antes voy a necesitar una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada Ajax. Le pondremos id=»destino» para poder referirnos a ella desde jQuery:

Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única línea de código será suficiente:

$(«#destino»).load(«contenido-ajax.html»);

Con esta simple sentencia estamos realizando una llamada a Ajax con jQuery. Es una simple invocación al método load() de un elemento de la página, en concreto el que habíamos puesto con id=»destino». Al método load() le pasamos como parámetro la ruta de la página que queremos cargar dentro del elemento.

El archivo que cargamos con load() en este ejemplo es «contenido-ajax.html» y simplemente le hemos colocado un texto cualquiera. Lo hemos guardado en el mismo directorio que la página web donde está el script jQuery.

Nota: para que este ejemplo funcione debe colocarse en un servidor web, puesto que la llamada por Ajax se hace por http y el archivo que se carga entonces tiene que recibirse por un servidor web, que lo mande con ese protocolo al navegador. Si pones los archivos en tu disco duro y los ejecutas tal cual, no te funcionará. Puedes utilizar cualquier espacio de hosting que tengas o bien un servidor web que puedas tener instalado en tu ordenador.

Así de simple! Podemos ver el código completo de este ejemplo: <html>
<head>
<title>Ajax Simple</title>
<script src=»jquery-1.3.2.min.js» type=»text/javascript»></script>
<script>
$(document).ready(function(){
$(«#enlaceajax»).click(function(evento){
evento.preventDefault();
$(«#destino»).load(«contenido-ajax.html»);
});
})
</script>
</head>
<body>

<a href=»#» id=»enlaceajax»>Haz clic!</a>
<br>
<div id=»destino»></div>

</body>
</html>

Podemos ver el ejemplo en marcha en una página aparte.

Cabría comentar que jQuery tiene muchos otros métodos de realizar conexiones por Ajax, que pueden servir para muchos otros casos de trabajo que podemos encontrarnos. Nosotros hemos escogido el más sencillo para dar una primera demostración de las posibilidades.

Pasar parámetros y ejecutar acciones después de la llamada a Ajax

El método load() que hemos visto en el ejemplo anterior tiene otros dos parámetros opcionales que podemos utilizar si fuera necesario:Parámetros a pasar a la página: la página que carguemos con Ajax puede recibir parámetros por la URL, que se especifican con la típica notación de propiedades y valores de jQuery.

{nombre: «Pepe», edad: 45}

Por ejemplo, con ese código estaríamos enviando a la página los datos nombre y edad, con los valores «pepe» y 45. Esos datos viajarían en la URL, por el método «POST».

Nota: Desde jQuery 1.3 también se pueden enviar los parámetros a la página a cargar con Ajax por medio de una variable de tipo string, en lugar de una notación de objetos como hemos comentado. Cuando se use un string para especificar los parámetros a enviar en el request http, éstos viajan por el método GET. Cuando se utiliza una notación de objetos como la que hemos visto, los datos viajan por el método POST.

Función callback: como otros métodos de jQuery, podemos especificar opcionalmente una función a ser ejecutada cuando se termine de ejecutar el método. En este caso, cuando se termine la llamada Ajax, se pueden hacer acciones, como borrar un mensaje típico de «cargando…».

Nota: En un artículo anterior ya comentamos el habitual uso de funciones callback en jQuery.

Ahora veamos un código donde hacemos uso de estos dos parámetros: $(document).ready(function(){
$(«#enlaceajax»).click(function(evento){
evento.preventDefault();
$(«#destino»).load(«recibe-parametros.php», {nombre: «Pepe», edad: 45}, function(){
alert(«recibidos los datos por ajax»);
});
});
})

En este caso estamos cargando con load() una página PHP llamada «recibe-parametros.php». Estamos pasando los parámetros «nombre» y «edad» a una página, que podremos recoger por GET. Además, hemos colocado una función callback en la que simplemente hacemos un alert(), que se ejecutará cuando la llamada a Ajax haya terminado.

Este sería el código fuente de «recibe-parametros.php»:

Recibido el siguiente dato:
<br>
Nombre: <?php echo $_POST[«nombre»];?>
<br>
Edad: <?php echo $_POST[«edad»];?>

Podemos ver este ejemplo en una página aparte.

Con esto hemos podido comprobar lo sencillo que es realizar con jQuery una carga de contenidos que se reciben por Ajax. Como decía, existen muchas otras maneras de hacer conexiones Ajax con jQuery, como el ejemplo del artículo siguiente que nos enseña a mostrar un mensaje de carga miestrás esperamos la respuesta Ajax del servidor. Además, para complementar esta información, también podéis ver el vídeo de Ajax con jQuery.

La entrada Uso de Ajax muy sencillo con jQuery se publicó primero en Programador.

]]> 305 Guía de Referencia CSS 2.1 https://agcapa.es/guia-de-referencia-css-2-1/ Tue, 11 Mar 2014 09:20:28 +0000 http://agcapa.es/?p=222 Guía de Referencia CSS 2.1 Estás en: Oficina Española » Documentos y Guías » Guías de Referencia » CSS Ayuda a la impresión Contenidos Selectores Notación Tipos de medios Sintaxis Unidades Modelo de cajas Márgenes Relleno Bordes Modelo de formato visual Detalles del modelo de formato visual Efectos visuales Contenido generado, numeración automática y listas…

La entrada Guía de Referencia CSS 2.1 se publicó primero en Programador.

]]> Guía de Referencia
CSS 2.1

Ayuda a la impresión

Contenidos

Selectores

Listado de selectores
Patrón Aplicado a: Ejemplo
* Cualquier elemento N/D
e Elemento <e> <e>
e f Cualquier <f> que esté incluido en
<e>		 <e>...<d>...<f/>...</d>...</e>
e > f Cualquier <f> que es hijo de
<e>		 <e>...<f>...</f>...</e>
e:first-child <e> cuando es el primer hijo de su elemento
padre		 <f><e></e>...</f>
e + f <f> si está precedido inmediatamente por un
<e>		 ...</e> <f>...<f>
e[miAtr] <e> si posee el atributo
"miAtr"		 <e miAtr="xxx".../>
e[miAtr="v"] <e> si posee el atributo "miAtr" y
este tiene el valor "v"		 <e miAtr="v".../>
e[miAtr~="v"] <e> si su atributo "miAtr" es una
lista de valores separados por espacios y uno es "v"		 <e miAtr="x y z v".../>
e[lang|="es"] <e> si su atributo "lang" es una
lista de valores separados por guiones y comienza con
"es"		 <e lang="es-ES" .../>
e.miClase <e> cuya clase es "miClase" <e class="miClase".../>
e#miId <e> cuyo identificador es miId <e id="miId".../>
a:link Enlaces no visitados N/D
a:visited Enlaces visitados N/D
e:active <e> cuando es activado (tiempo entre que se
pulsa un botón sobre él y se suelta)		 N/D
e:hover <e> cuando se posiciona el cursor sobre él pero
no se activa		 N/D
e:focus <e> cuando tiene el foco posicionado en él N/D
e:lang(c) <e> si está marcado con el idioma
c		 N/D
e:first-line Primera línea de <e> N/D
e:first-letter Primera letra de <e> N/D
e:before Aplica contenido antes de <e> N/D
e:after Aplica contenido después del elemento <e> N/D
e , f Aplica el mismo contenido a los elementos <e> y <f> N/D

Notación

Notación
Patrón Descripción
a b a seguido de b
( a b ) a y b agrupados
[ a | b ] a o b
[ a || b ] a o b o ambos
a? a es opcional
a* 0 o varios a
a+ 1 o varios a
a {n, m} a como mínimo n veces y como máximo m

Tipos de Medios

Tipos de medios o dispositivos soportados
Nombre Medio
all Todos los dispositivos
braille Dispositivos táctiles braille
embossed Impresoras braille
handheld Dispositivos de mano (pantallas pequeñas, ancho de banda reducido,
etc.)
print Para documentos paginados y mostrados en vista de impresión
projection Dispositivos de proyección de presentaciones
screen Pantallas a color de equipos informáticos
speech Para sintetizadores de voz. Similar a «aural»
tty Dispositivos de visualización con capacidades limitadas
tv Televisores

Sintaxis

  @import "hoja.css" tipo-medio;

  /* Comentarios */

  @media tipo-medio {
    selector { 
      propiedad: valor-es;
    }
  }

Unidades

Longitudes relativas
Unidad Descripción
px Píxeles (relativo al dispositivo)
em Tamaño de la fuente actual
ex Alto del caracter ‘x’
Longitudes absolutas
Unidad Descripción
in Pulgadas (1pulgada = 2.54 cm)
cm Centímetros
mm Milímetros
pt Puntos (1pt = 1/72pulgadas)
pc Picas (1pica = 12 puntos)
Porcentaje
Unidad Descripción
% Porcentaje
0 No requiere unidad
Representación de los colores
Unidad Descripción
#RRGGBB Color RGB
(6 Valores hexadecimales)
#RGB Notación simplificada (#RGB = #RRGGBB)
rgb(R,G,B) Color RGB (3 valores de 0 a 255)
rgb(R%,G%,B%) Color RGB (3 valores porcentuales)

Modelo de Cajas

Modelo de cajas

Márgenes

Propiedades de márgenes
Propiedad Descripción Valores
margin-topmargin-rightmargin-bottom

margin-left

 Tamaño del margen superior, derecho, inferior e izquierdo [ <longitud> | <porcentaje> | auto ]
margin Ancho para varios márgenes individuales [ <longitud> | <porcentaje> | auto ]{1,4}

Relleno

Propiedades de relleno
Propiedad Descripción Valores
padding-toppadding-rightpadding-bottom

padding-left

 Ancho del relleno superior, derecho, inferior e izquierdo [ <longitud> | <porcentaje> ]
padding Tamaños para varios rellenos individuales [ <longitud> | <porcentaje> ] {1,4}

Bordes

Propiedades de los bordes
Propiedad Descripción Valores
border-top-widthborder-right-widthborder-bottom-width

border-left-width

 Anchura del borde superior, derecho, inferior o izquierdo [ thin |
medium | thick | <longitud> ]
border-width Anchos de varios bordes individuales [ thin | medium | thick |
<longitud> ] {1,4}
border-top-colorborder-right-colorborder-bottom-color

border-left-color

 Color del borde superior, derecho, inferior o
izquierdo		 [ <color> | transparent ]
border-color Colores de varios bordes individuales [ <color> |
transparent ] {1,4}
border-top-styleborder-right-styleborder-bottom-style

border-left-style

 Estilo del borde superior, derecho, inferior o izquierdo [ none |
hidden | dotted | dashed |
solid | double | groove |
ridge | inset | outset ]
border-style Estilos de varios bordes individuales [ none | hidden |
dotted | dashed | solid |
double | groove | ridge |
inset | outset ] {1,4}
border-topborder-rightborder-bottom

border-left

 Ancho, estilo y el color para el borde superior, derecho, inferior
o izquierdo		 [ <border-top-width> || <border-top-style> || <border-top-color> ]
border Ancho, el estilo y el color para los 4 bordes [ <border-top-width> || <border-top-style> || <border-top-color> ]

Modelo de formato visual

Propiedades de formato visual
Propiedad Descripción Valores
display Comportamiento del contenedor [ inline |
block | list-item | run-in |
inline-block | table |
inline-table | table-row-group |
table-header-group | table-footer-group |
table-row | table-column-group |
table-column | table-cell |
table-caption | none ]
position Esquema de posicionamiento [ static |
relative | absolute | fixed
]
toprightbottom

left

 Desplazamiento de la caja (respecto al límite superior, derecho, inferior o izquierdo del contenedor) [ <longitud> | <porcentaje> |
auto ]
float Posicionamiento flotante [ left | right |
none ]
clear Control de cajas adyacentes a los float [ none |
left | right | both ]
z-index Solapamiento de niveles de capas [ auto |
<entero_con_signo> ]
direction Sentido direccional de la escritura [ ltr |
rtl ]
unicode-bidi Sentido direccional de la escritura [ normal |
embed | bidi-override ]

Detalles del modelo de formato visual

Propiedades de los detalles formato visual
Propiedad Descripción Valores
width Ancho [ <longitud> | <porcentaje> |
auto ]
min-width Ancho mínimo [ <longitud> | <porcentaje> ]
max-width Ancho máximo [ <longitud> | <porcentaje> |
none ]
height Alto [ <longitud> | <porcentaje> |
auto ]
min-height Alto mínimo [ <longitud> | <porcentaje> ]
max-height Alto máximo [ <longitud> | <porcentaje> |
none ]
line-height Altura entre las bases del texto [ normal |
<número> | <longitud>
| <porcentaje> ]
vertical-align Alineación vertical del texto [ baseline |
sub | super | top |
text-top | middle | bottom |
text-bottom | <porcentaje> | <longitud> ]

Efectos visuales

Propiedades para efectos visuales
Propiedad Descripción Valores
overflow Comportamiento del contenido si se desborda en la caja [ visible |
hidden | scroll | auto ]
clip Especifica la región visible del elemento [ rect (<longitud>, <longitud>, <longitud>, <longitud>) |
auto ]
visibility Visibilidad de las cajas [ visible | hidden |
collapse ]

Contenido generado, numeración automática y
listas

Propiedades para contenido generado, numeración automática y
listas
Propiedad Descripción Valores
content Agregador de contenido para :after y
:before		 [ normal |
none | [ <texto> | <uri> | <contador>
| attr(X) | open-quote |
close-quote | no-open-quote |
no-close-quote]+ ]
quotes Especifica las marcas para indicar las citas [ [ <texto> <texto> ]+ |
none ]
counter-reset Inicializa un contador [ [ <identificador> <entero>? ]+ |
none ]
counter-increment Incrementa un contador [ [ <identificador> <entero>? ]+ |
none ]
list-style-type Estilo aplicable a los marcadores visuales de las listas [ disc |
circle | square | decimal |
decimal-leading-zero | lower-roman |
upper-roman | lower-greek |
lower-latin | upper-latin |
armenian | georgian |
lower-alpha | upper-alpha |
none ]
list-style-image Imagen aplicable a los elementos de las listas [ url("http://…") |
none ]
list-style-position Posición dentro de la lista de los elementos marcadores de las
listas		 [ inside |
outside ]
list-style Permite establecer el estilo de la lista, la imagen y/o la
posición		 [ <list-style-type> || <list-style-position> || <list-style-image> ]

Colores y Fondo

Propiedades para gestión de colores y fondo
Propiedad Descripción Valores
color Color del primer plano <color>
background-color Color de fondo [ <color> |
transparent ]
background-image Imagen de fondo [ url(…) |
none ]
background-repeat Repetición de la imagen de fondo [ repeat |
repeat-x | repeat-y |
no-repeat ]
background-attachment Desplazamiento de la imagen de fondo [ scroll |
fixed ]
background-position Posición de la imagen de fondo [ [ <porcentaje> |
<longitud> |
left | center | right ] [
<porcentaje> | <longitud> | top |
center | bottom]? ] | [ [ left
| center | right ] || [ top |
center | bottom ] ]
background Propiedades individuales relacionadas con el fondo [ <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ]

Medios paginados

Propiedades para medios paginados
Propiedad Descripción Valores
page-break-before Gestionar saltos de página antes del elemento [ auto |
always | avoid | left |
right ]
page-break-after Gestionar saltos de página posterior al elemento [ auto |
always | avoid | left |
right ]
page-break-inside Evita los saltos de línea en el interior del elemento [ avoid |
auto ]
orphans Mínimo número de líneas de un párrafo que deben ser dejadas
como mínimo al final de una página		 <entero>
widows Mínimo número de líneas de un párrafo que deben ser dejadas
como mínimo al principio de una página		 <entero>

Fuentes

Propiedades para gestión de fuentes tipográficas
Propiedad Descripción Valores
font-family Familias de fuentes [ [ <nombre-familia> |
<familia-genérica> ] [, <nombre-familia> |
<familia-genérica> ]* ]
font-style Estilo de la fuente [ normal |
italic | oblique ]
font-variant Convierte las minúsculas a mayúsculas pero mantienen un tamaño
inferior a las mayúsculas		 [ normal |
small-caps ]
font-weight Intensidad de la fuente [ normal |
bold | bolder | lighter |
100 | 200 | 300 |
400 | 500 |
600 | 700 | 800 |
900 ]
font-size Tamaño de la fuente [ [ xx-small | x-small |
small | medium |
large | x-large | xx-large] |
[larger | smaller] | <longitud> | <porcentaje> ]
font Atajo para establecer el resto de propiedades sobre las fuentes a
la vez		 [ [ [ <font-style>
|| <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption |
icon | menu | message-box |
small-caption | status-bar ]

Texto

Propiedades para el texto
Propiedad Descripción Valores
text-indent Desplazamiento de la primera línea del texto [ <longitud> | <porcentaje> ]
text-align Alineamiento del texto [ left |
right | center | justify ]
text-decoration Efectos de subrayado, tachado, parpadeo [ none |
[ underline || overline ||
line-through || blink ] ]
letter-spacing Espacio entre caracteres [ normal | <longitud> ]
word-spacing Espacio entre palabras [ normal | <longitud> ]
text-transform Transformaciones del texto a mayúsculas/minúsculas [ capitalize | uppercase
| lowercase | none ]
white-space Comportamiento de los espacios dentro de los elementos [ normal |
pre | nowrap | pre-wrap |
pre-line ]

Tablas

Propiedades para el texto
Propiedad Descripción Valores
caption-side Posición del título de respecto la tabla [ top |
bottom ]
table-layout Control del algoritmo usado para el formato de las celdas, filas y
columnas		 [ auto |
fixed ]
border-collapse Selección del modelo de los bordes [ collapse |
separate ]
border-spacing Espaciado entre los bordes de celdas adyacentes <longitud>
<longitud>?
empty-cells Visibilidad de los bordes de celdas sin contenido [ show |
hide ]

Interfaz de usuario

Propiedades para el interfaz con el usuario
Propiedad Descripción Valores
cursor Especifica el cursor [ [http://.../cursor.ico,]*
[ auto | crosshair |
default | pointer | move |
e-resize | ne-resize |
nw-resize | n-resize |
se-resize | sw-resize |
s-resize | w-resize | text |
wait | help | progress ] ]
outline-width Ancho de la línea exterior <border-width>
outline-style Estilo de la línea exterior <border-style>
outline-color Color de la línea exterior [ <color> |
invert ]
outline Propiedades individuales de la línea exterior. [ <outline-color> || <outline-style> || <outline-width> ]
speak-header (Aural) Indica si las cabeceras de la tabla se leen antes de cada
celda		 [ once |
always ]

Ayuda a la impresión

Para la impresión ajustada de la guía en un formato DIN A4 se recomienda el uso de un navegador que soporte las hojas de estilo CSS 2.
En las opciones de impresión puede habilitarse el fondo para que aparezcan los colores. Además, para conseguir una correcta estructura del documento en 4 páginas,
deberían establecerse unos márgenes laterales (izquierdo y derecho) con el valor 0.

final de la página

Fundación CTIC ¡XHTML válido 1.1!

Webmaster · Última modificación:01/01/1970 01:00AM

Copyright © 1994-2014 W3C® (MIT, ERCIM,
Keio, Beihang), Todos los derechos reservados.
Son aplicables las reglas de responsabilidad,
marcas registradas,
utilización de documentos y licencias de software.
Las interacciones con este sitio están de acuerdo con nuestra declaración de privacidad de
usuarios
y miembros.

 

La entrada Guía de Referencia CSS 2.1 se publicó primero en Programador.

]]> 222 Como convertir una Plantilla Joomla 1.5 a una de Joomla 2.5 https://agcapa.es/como-convertir-una-plantilla-joomla-1-5-a-una-de-joomla-2-5/ Wed, 18 Dec 2013 13:14:49 +0000 http://agcapa.es/?p=212 En este tutorial, vamos a mostrar cómo convertir una plantilla de Joomla 1.5 a Joomla 2.5. Tomaremos por defecto la plantilla de Joomla 1.5 «rhuk_milkyway» como un ejemplo y lo convertiremos en una plantilla compatible conJoomla 2.5. Hay 5 pasos a seguir. Hacer una copia de todos los archivos de la plantilla de Joomla 1.5…

La entrada Como convertir una Plantilla Joomla 1.5 a una de Joomla 2.5 se publicó primero en Programador.

]]> En este tutorial, vamos a mostrar cómo convertir una plantilla de Joomla 1.5 a Joomla 2.5. Tomaremos por defecto la plantilla de Joomla 1.5 «rhuk_milkyway» como un ejemplo y lo convertiremos en una plantilla compatible conJoomla 2.5.

Hay 5 pasos a seguir.

  1. Hacer una copia de todos los archivos de la plantilla de Joomla 1.5
  2. Editar archivos de la estructura
  3. Editar el archivo «templateDetails.xml»
  4. Editar el archivo «index.php»
  5. Instalar y poner a prueba las conversiones de la plantilla de Joomla 2.5.

Paso 1. Hacer una copia de todos los archivos de la plantilla de Joomla 1.5

La primera cosa a hacer es copiar la carpeta del tema general de la versión 1.5 a la versión 2.5.

  1. Ir a la carpeta templates en el sitio web de Joomla 2.5
  2. Cree una carpeta llamada «rhuk_milkyway25»
  3. Copie todos los archivos de la carpeta «rhuk_milkyway» en la carpeta de plantilla de Joomla 1.5 a carpeta creada en el punto 2.

Paso 2. Editar archivos de la estructura

Ahora, es necesario modificar la estructura de carpetas para que sea compatible con Joomla 2.5.

  1. Eliminar archivos «params.ini»En la versión 1.5 de este archivo se utiliza para almacenar los valores de los parámetros de plantilla. Pero en la versión 2,5, todos los parámetros de plantilla se almacenan en la base de datos. Así que no hay necesidad para el archivo «params.ini».
  2. Copia el archivo «error.php» por defecto de la plantilla «atomic» Joomla 2.5.Joomla 2.5 introduce nuevo archivo «error.php» para contener el diseño de las páginas de error. Este archivo es simple y que puede volver a utilizar el archivo del tema por defecto «atomic».
  3. Crear un fichero nuevo «template_preview.png»Joomla 2.5 introduce nuevo archivo «template_preview.png» para presentar una imagen grande de previsualización del tema. Haz una captura de pantalla 640×480 de su tema y el nombre de «template_preview.png».

Paso 3. Editar el archivo «templateDetails.xml»

Ahora, tiene que editar el archivo «templateDetails.xml» para que sea compatible con la versión 2.5.

  1. Cambiar el nombre de etiqueta <install> a <extension>

Valor anterior El nuevo valor
<install version=»1.5″ … <extension version=»2.5″ …
</install> </extension>
  1. Cambio de nombre de la plantilla en la etiqueta de <name>

  1. Vuelva a colocar las etiquetas <filename> multiple como <folder>

Esto es muy característica interesante de Joomla 2.5 . Ahora no es necesario declarar todos los archivos en alguna carpeta, sólo tienes que declarar la carpeta.

  1. Eliminar la declaración para el archivo «params.ini»

  1. Agregar la declaración de los nuevos archivos creados en el paso 2

Añadir las 2 siguientes etiquetas:

  1. <filename>error.php</filename>
  2. <filename>template_preview.png</filename>

  1. Cambiar el nombre de las etiquetas en la sección de <params>

Valor anterior El nuevo valor
<params> <config>
<fields name=»params»>
<fieldset name=»advanced»>
<Param … <field …
</Param> </field>
</Params> </fieldset>
</fields>
</config>

Paso 4. Editar el archivo «index.php»

Después de editar el archivo «templateDetails.xml», es necesario seguir editando el archivo «index.php».

  1. Agregue el código PHP para cargar la biblioteca MootoolAñadir cadena de código «JHTML :: _ (‘behavior.framework’, true);» a la ubicación como se ve en la captura de pantalla abajo.

  1. Vuelva a colocar el nombre de plantilla de texto «rhuk_milkyway» con código php

Joomla 2.5 le permite obtener el nombre del tema directamente desde el archivo «templateDetails.xml», así que no hay necesidad de declarar el nombre del tema como texto sin formato.

Valor Antiguo El nuevo valor
rhuk_milkyway <?php echo $this-> template?>

Paso 5. Instalar y probar la conversión de la plantilla de Joomla 2.5

Ahora, la plantilla esta en la carpeta correspondiente, pero no verás el tema nuevo en el Administrador de plantilla, porque no está instalado todavía. Haz los pasos siguientes:

  1. Ir al administrador de> Extensiones> Administrador de extensiones> Discover.

  1. Haz clic en el botón «Discover» en la barra de herramientas.

Seleccione la opción «rhuk_milkyway25» en la lista y haga clic en el botón «Instalar»

  1. Ahora, la plantilla de Joomla 2.5 está instalada y puedes ir a «Administrador de plantillas» para establecerlo como predeterminado.

Listo, ya tienes tu plantilla de 1.5 como una de 2.5.

La entrada Como convertir una Plantilla Joomla 1.5 a una de Joomla 2.5 se publicó primero en Programador.

]]> 212 Estilo en CSS para chrone y safari https://agcapa.es/estilo-en-css-para-chrone-y-safari/ Wed, 14 Sep 2011 15:11:55 +0000 https://disternet.agcapa.com/?p=81 @media screen and (-webkit-min-device-pixel-ratio:0) { div.moduletable_menu ul {padding:0px} }

La entrada Estilo en CSS para chrone y safari se publicó primero en Programador.

]]> @media screen and (-webkit-min-device-pixel-ratio:0) {
div.moduletable_menu ul {padding:0px}
}

La entrada Estilo en CSS para chrone y safari se publicó primero en Programador.

]]> 81 resetear una bios en un dell https://agcapa.es/resetear-una-bios-en-un-dell/ Thu, 10 Mar 2011 12:27:10 +0000 https://disternet.agcapa.com/?p=46 I had never heard of this trick so I thought I’d pass it along as I just got it from Dell. This may be OEM, so it may apply to other hardware. Enter BIOS Turn on num, caps and scroll lock Press ALT-E to erase the nvram Press ALT-F to load factory defaults Press ALT-B…

La entrada resetear una bios en un dell se publicó primero en Programador.

]]> I had never heard of this trick so I thought I’d pass it along as I just got it from Dell. This may be OEM, so it may apply to other hardware.

Enter BIOS
Turn on num, caps and scroll lock
Press ALT-E to erase the nvram
Press ALT-F to load factory defaults
Press ALT-B to reboot.

I did this through a KVMoIP so I wasn’t sure it was working until the ALT-B when the box did reset.

La entrada resetear una bios en un dell se publicó primero en Programador.

]]> 46