Una sangría francesa incluye un desplazamiento de todas las líneas de un párrafo excepto la primera. Las sangrías francesas son útiles cuando se quieren agregar gráficos al comienzo del párrafo. Añadiendo al listado de ejemplos que tenemos sobre CSS, en el artículo de hoy, veremos cómo hacer una sangría francesa en CSS.
Un ejemplo de párrafo con sangría francesa sería el siguiente:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
Podemos observar los desplazamientos de todas las líneas, menos de la priemra.
Mediante CSS podemos definir un estilo para poder tener párrafos con sangría francesa. Para ello tenemos que buscar las propiedades que cumplan las características de la sangría francesa. Estas propiedades buscan que el párrafo esté desplazado a la derecha, lo cual conseguimos mediante padding-left y que la primera línea esté adelantada hacía la izquierda, lo cual vamos a obtener utilizando text-indent.
El estilo CSS para poder aplicar nuestra sangría francesa nos quedará de la siguiente forma:
En este código vemos que asignamos la propiedades al elemento p y en concreto a la clase «francesa». Así que tendremos que utilizar esta clase y el elemento p dentro de nuestra página HTML. La página nos quedará de la siguiente forma:
<p class="francesa">En un lugar de la Mancha, de...</p>
De esta manera tan sencilla y manejando las propiedades padding-left y text-indent, podemos crear una sangría en CSS. Espero que lo utilicéis mucho y así podáis mejorar las sangrías dentro del contenido de vuestras webs.
Código Fuente
Descárgate el código fuente de Sangría francesa en CSS Y si te ha gustado nuestro código fuente puedes regalarnos una estrellaStar
Difícil es abrir en Internet una página en la que no encontremos un gráfico. Ya sean GIF, JPG o PNG. Atrás quedaron los años donde veíamos las páginas repletas de texto plano y con unos fondos grises que tiraban para atrás.
Y en todo este trayecto hemos pasado épocas donde la sobrecarga de imágenes inundaba nuestra pantalla, la moda de los gráficos 3D para los títulos y los gráficos Flash.
Ahora, la vuelta de tuerca, es diferente. Ya no se busca el hacer nuestra página más elegante, sino más útil (en cuanto a la información se refiere). Buscamos gráficos que nos representen información. Y es que muchas veces «más vale una imagen que mil palabras».
SVG o Scalable Vector Graphics. Nuestros gráficos vectoriales. Permiten definir gráficos basados en texto (aunque esta no es su única cualidad) y no solo eso, sino que ese texto (o información) lo podemos hacer participe del contenido de la página. Esto lo consigue mediante estructuras XML.
Y después de todo este rollo… a lo que vamos. ¿Qué hago para montarme mi primer gráfico SVG?
El primer paso es definir un documento XML, pero con extensión SVG. Su esqueleto general es el siguiente:
Dentro de la estructura podremos ir insertando gráficos individuales. Por ejemplo un circulo, y encima en rojo (máxima dificultad)…
<circle cx="600" cy="200" r="100" fill="red"/>
De este nos valdrá con saber que cx es la coordenada en el eje X, cy la coordenada en el eje Y y r el radio. Ahhh, se me olvidaba, fill, el color de relleno.
En tipografía, una sangría es la introducción de uno o varios caracteres en blanco delante de una línea. Se suele emplear en textos que están alineados a la izquierda. Este ejemplo vamos a ver cómo crear una sangría de primera línea con CSS. En el caso de la sangría de primera línea, los caracteres en blanco solo se introducen en la primera de un párrafo.
Un ejemplo de sangría de primera línea sería el siguiente:
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.
Si queremos utilizar la sangría de primera línea en nuestra página web lo podremos hacer mediante hojas de estilo CSS. En concreto necesitamos manejar una de las propiedades que manipulan texto en CSS que es la propiedad text-indent.
Esta propiedad establece una separación entre el borde y el inicio de la primera frase de un párrafo. El valor que le podemos dar a la propiedad puede ser un valor absoluto o porcentual. Así su sintaxis es la siguiente:
De esta manera nuestro código CSS quedaría de la siguiente forma:
p.primeralinea {
text-indent: 40px;
}
Hay que ver que la propiedad se la estamos aplicando a un párrafo que se representa mediante un elemento p, pero cuando este aplique la clase «primerlinea». Es decir, que funcionará cuando incluyamos un párrafo, dentro de nuestra página HTML, cuyo valor para el atributo class sea «primeralinea».
El párrafo sería de la siguiente forma:
<p class="primeralinea">En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda.</p>
Así ya tendremos configurada nuestra sangría de primera línea con CSS. ¿Utilizas este tipo de sangría en tus diseños de texto de la web? Compártelo en comentarios para que entre todos nos enriquezcamos con las experiencias.
Dentro de las propiedades de CSS que nos permiten manipular elementos de texto encontramos el pseudo-elemento first-line del lenguaje CSS. Con el pseudo-elemento first-line podemos modificar las propiedades de la primera línea de un párrafo. Entendemos como primera línea, donde el navegador corta el párrafo por coincidir con el final del navegador.
Las propiedades que podemos modificar en el pseudo-elemento first-line del lenguaje CSS son las siguientes:
propiedades font, para poder establecer una fuente, mayor o menor tamaño,…
propiedades color, para cambiar el color de la línea.
propiedades background, para poder tener un color o una imagen de fondo de la primera línea.
word-spacing, para controlar el espaciado entre palabras.
letter-spacing, para controlar el espaciado entre letras.
text-decoration, para añadir elementos como subrayados o similares.
vertical-align, para alinear verticalmente el texto.
text-transform, para transformar el contenido del texto y, por ejemplo, ponerlo en mayúsculas.
line-height, para cambiar el tamaño de la primera línea.
clear, para indicar como situar a la primer línea respecto al elemento anterior.
Así, por ejemplo podemos especificar el siguiente código para definir nuestra primera línea de un párrafo. El párrafo en HTML se gestiona mediante el elemento p. Es por ello que el pseudo-elemento first-line lo aplicamos a dicho elemento.
En este caso hemos conseguido que la primera línea sea en color azul y que su contenido esté en mayúsculas.
Ahora solo nos queda poner un párrafo mediante el elemento p en nuestra página HTML. Como el siguiente:
<p>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino.</p>
Así ya tendremos dados estilos a la primera línea de un párrafo con CSS.
Código Fuente
Descárgate el código fuente de Primera línea de un párrafo Y si te ha gustado nuestro código fuente puedes regalarnos una estrellaStar
Si queremos cambiar el color de las barras de scroll de nuestra página podemos utilizar propiedades CSS. Si bien tenemos que tener en cuenta que estas propiedades no están soportadas por el estándar CSS de la W3C.
body {
scrollbar-face-color:fuchsia;
scrollbar-highlight-color:yellow;
scrollbar-3dlight-color:orange;
scrollbar-darkshadow-color:darkblue;
scrollbar-shadow-color:gray;
scrollbar-arrow-color:yellow;
scrollbar-track-color:aqua;
}
Vemos que las propiedades las asignamos al elemento body del lenguaje HTML, para que de esta manera afecte a todos los elementos con scroll de la página.
Solo nos quedará añadir a nuestra página un elemento que tenga scroll. Para ello utilizamos un textarea.
<textarea rows="15">...
</textarea>
Hay que indicar, que no hemos encontrados un navegador que aplique esto al scroll de la propia página. Aunque se pueda quedar en anecdótico, siempre es interesante las cosas que se han hecho para dar estilo y en concreto este caso que nos permite cambiar el color de las barras de scroll.
Hace ya tiempo, cuando aprendí a construir formularios con HTML, me hacía mucha gracia que todos los formularios que veía por Internet tenían dos botones. El primero era el que realizaba el envío de la información, mientras que el segundo te borraba el contenido de todo el formulario.
Esta claro que no voy a cuestionar la utilidad de los dos botones, ya que útiles son. Pero quién no le ha dado al botón de borrar en vez de enviar, cuando realmente lo que quería era enviar y no borrar. Seguro que a todos nos ha pasado alguna vez y nos hemos visto en la tesitura de volver a introducir todos los datos.
En la especificación de XForms ¡han eliminado al componente “input type reset”¡….. Pero no del todo. La verdad es que ha dejado de ser un control y ha pasado a ser un “evento de interacción”….. ¿Cómo?
Intentare explicarlo… La idea es que los eventos de interacción sean los que correlacionen los eventos con el modelo de datos de XForms. Dentro de la categoría de eventos de interacción tenemos, además del «reset», «next» para cuando pasamos al siguiente control del formulario , «previous» cuando hacemos lo mismo, pero hacía atrás, «focus» para cuando queremos hacer foco en un determinado control,…..
Vale, pero yo quiero poner mi botón de toda la vida en el formulario,……
Lo primero que tenemos que hacer es construir un modelo de datos. Para este ejemplo tampoco nos vamos a inventar un mega-modelo. Hagamoslo sencillo:
Si os dais cuenta, los campos del modelo están vacíos. Y es que el evento de interacción reset no borra los campos, sino que lo que hace es volver a poner en el formulario el modelo inicial.
Vamos con el siguiente paso, construyamos el formulario. Para ello nos basamos en dos componentes sencillos: input y textarea. De ellos solo tienes que darte cuenta que para hacer referencia a un campo del modelo usan el atributo ref. El código nos quedaría algo así:
Y ahora llega lo más importante…. Nuestro botón de borrado… Para poner un botón tenemos que usar el componente trigger.
Dentro de este componente es donde pondremos nuestro evento de interacción. La etiqueta del elemento es reset y como atributos tendremos dos: el evento que lo activa que será DOMActivate . El evento DOMActivate viene a reflejar la acción por defecto sobre un control, en nuestro caso pulsar el botón. En el caso de que fuese una caja de texto, la acción por defecto sería pulsar «Intro».
El segundo atributo del reset es el modelo que tiene que resetear. Ya que podemos tener varios modelos en nuestra página…..
XForms, otra tecnología X*. Un amigo mío dice, en broma, que toda tecnología que evoluciona el W3C le pega la X. Ya lo hizo al evolucionar su HTML al XHTML, las Querys al XQuery y claro está los formularios (Form) a XForms. Vamos, que podríamos decir que estamos delante de una verdadera generación X.
¿Qué es XForms?
XForms como reza su página del W3C es “the next generation of web forms”…. la nueva generación de formularios web. Y es que los formularios HTML se nos habían quedado pequeños y había que acometer dos cosas sobre ellos:
Separar el modelo de datos del formulario y su diseño visual
Dotar de mayor potencia a los formularios: funciones de trabajo sobre ellos, nuevos componentes visuales,…
De las dos cosas mencionadas, la primera es la más importante. Separación de los datos de la presentación. Es por ello que se crea un conjunto de componentes visuales que pueden ser usados dentro de un documento XHTML o cualquier otro documento XML.
Por otro lado se define el concepto de instancia de datos. Esto es un modelo de datos que viene a reflejar la estructura de datos que se va a manejar. Estos datos son los que realmente se van a intercambiar.
Estas dos cosas: controles de formulario y la instancia de datos son ligados mediante un procesador XForms el cual define como se envía y recibe datos.
Mi primer formulario
Pongámonos manos a la obra y construyamos nuestro primer formulario basado en XForms. El movimiento se demuestra andando….Lo primero que tenemos que saber es que vamos a construir un documento XHTML.
Mi primer formulario XForms
...
Si os fijáis en el código. El namespace escogido en mi ejemplo para el XHTML> es h. Esto nos permitirá diferenciarlo de las etiquetas XForms.
Lo siguiente que tenemos que hacer es incluir el namespace de XForms. Este, está definido en http://www.w3.org/2002/xforms
En nuestro ejemplo vamos a poner un formulario de búsqueda. No nos vamos a complicar más la vida. Dentro de este formulario pondremos dos campos de entrada de texto y un botón que lance la búsqueda.
Lo más interesante de los XForms es que HA DESAPARECIDO LA ETIQUETA FORM.
Para añadir los campos de entrada de texto tenemos el elemento input:
Dentro de la etiqueta input podemos encontrar dos elementos
Label: Para indicar el nombre que se antepondrá al campo de entrada
Hint: Que es una etiqueta de texto emergente que nos servirá de aviso.
Para añadir el botón de búsqueda tendremos que trabajar con el elemento submit. Este elemento tiene asociado un atributo que es submission, el cual enlazará con una acción de envío.
Enlazando el formulario con el modelo de datos
Como hemos dicho en la introducción. XForms separa los datos de la presentación. El modelo de dato se define dentro de la etiqueta model. Y un modelo contendrá una instancia del mismo (definida por el elemento instance), la cual contendrá los datos.
Veamos como quedaría nuestro formulario con el nombre y apellido como modelo:
VictorCuervo
Si queremos hacer referencia a algún elemento del modelo desde los controles visuales lo haremos mediante el atributo ref. Así nuestros componentes visuales quedarían de la siguiente forma:
Dentro del modelo también tendremos la acción desencadenada por el componente gráfico submit. El elemento que tiene la acción es submission.
Este elemento tiene múltiples atributos, pero entre ellos destacamos tres:
action, que define la URI donde se enviarán los datos.
method, que indica que tipo de protocolo se va a utilizar para la serialización de datos: post, get,…
id, identificador que lo hace único y que será usado por el elemento submit para identificar la acción de búsqueda a usar.
Visualizar nuestro trabajo: plug-in para Mozilla
Solo nos quedará por guardar nuestro ejemplo como .xhtml y probarlo.
Para probar el XForms con Mozilla y FireFox hay que descargarse un plug-in https://addons.mozilla.org/firefox/824/ que nos servirá para nuestros ejemplos.
Este mes está siendo un poco complicado y llegamos tarde con las estadísticas de Octubre. Pero no quería dejar pasar la ocasión de mostrároslas. Estas son algunas de las estadísticas de Línea de Código para el mes de Octubre.
Junto con wForms vienen predefinidas las validaciones básicas: números, fechas, direcciones de email,… pero wForms también nos da la posibilidad de hacer validaciones personalizadas.
En nuestro ejemplo vamos a definir dos validaciones. La primera será la de un código postal. La validación comprobará que sea un dígito de 5 números. La segunda validación comprobará que el texto introducido sea M o F. Intentando representar el concepto de texto.
Para hacer las validaciones personalizadas con wForms utilizamos la clase validate-custom, la cual va seguida de una expresión regular.
Hay que recordar que la expresión regular va entre dos barras invertidas (/)
/expresión_regular/
No vamos a entrar en el detalle de como se conforman las expresiones regulares en JavaScript y las diferentes estructuras que se pueden conformar. Para nuestros ejemplos las expresiones regulares que utilizaremos serán las siguientes:
Código Postal /d{2}/
Sexo /m|f|M|F/
Es por ello que nuestras clases quedarán de la siguiente forma:
Este artículo es un complemento a Ejecutar cada X segundos en JavaScript. Mientras que en el primer artículo veíamos cómo utilizar el método Javascript.setInterval() para ejecutar una función cada X segundos de forma repetitiva, en este vemos como ejecutar cuando pasen X segundos en JavaScript una función. Para ello nos apoyaremos en la función Javascript.setTimeout().
La función .setInterval() nos permite ejecutar de forma recurrente una función cada x intervalos, mientras que la función .setTimeout() nos sirve para poder ejecutar una función, una única vez, transcurrido un tiempo,
La función .setTimeout() tiene la siguiente estructura:
setTimeout(funcion_a_ejecutar,milisegundos);
El funcionamiento es muy sencillo. Se ejecutará la «funcion_a_ejecutar» cuando pasen los milisegundos especificados como segundo parámetro. Esta función Javascript solo se ejecutará una vez. Y transcurrido ese tiempo no se volverá a ejecutar a no ser que la invoquemos nuevamente.
Lo primero que haremos será el definir una función muy sencilla. Que solo muestre un mensaje por pantalla. Será nuestro típico saludo, ¿se te ocurre función más sencilla?:
function saludo(){
alert("Han pasado 3 segundos");
}
Y ahora establecer el temporizador. Este le activaremos cuando se pulse un botón:
<button onclick="setTimeout('saludo()',3000);">Saludo a los 3 segundos</button>
Es muy importante que el método a ejecutar que especifiquemos en la función .setTimeout() lo pongamos entre comillas.
De esta forma habremos conseguido ejecutar cuando pasen X segundos en Javascript una función. Algo muy sencillo a establecer un intervalo. Esto se utiliza cuando necesitamos que la función se ejecute una única vez.
