HOVER ME!

ORMEÑO ERNESTO WALTER

Contactos

Jaques 2414
Entre Einstein y Novel
Cuil: 20-17725373-2

Teléfono: 0111565030141

Experiencia laboral

POLICIA DE LA PROVINCIA DE BUENOS AIRES 1987 — 1999

Sargento Primero Leg. N° 128553

Desempeñe funciones como ayudante de guardia, encargado de tercio y correo del juzgado de la plata.

COMANDO PATRULLA PILAR 1999 — 2004

Sargento Primero Leg. N° 128553

Desempeñe funciones como chofer de patrulla.

COMISARIA DE PILAR CUARTA MANUEL ALBERTI 2004 — 2005

Sargento Primero Leg. N° 128553

Desempeñe funciones como chofer de patrulla.

COMISARIA DE PILAR CUARTA MANUEL ALBERTI 2005 — 2006

Sargento Primero Leg. N° 128553

Desempeñe funciones como oficial en servicio de calle. Pasado a disponibilidad y exonerado de cargo, retiro voluntario de la fuerza.

SUPERMERCADO "COCO" MANUEL ALBERTI, PILAR

SEGURIDAD

Desempeñe funciones como custodio.

ECONOTEL

SEGURIDAD

Desempeñe funciones como custodio de la recaudacion de cabinas telefonicas.

LAVADERO PARA BARRIO PRIVADO, MANUEL ALBERTI, COL. 12 de Octubre

SEGURIDAD

Desempeñe funciones como custodio de coches de alta gama

BARRIO "ALTOS DE DEL VISO"

SEGURIDAD

Desempeñe funciones como encargado del servicio de seguridad bajo las ordenes del administrador Roberto de Marchi.

CENTRO COMERCIAL MANUE ALBERTI 2005 — 2016

SEGURIDAD

Desempeño funciones como custodio de locales.

Educación

Escuela primaria

Completa

Escuela secundaria

Completa

Tiempo atrás vimos cómo personalizar los bloques entrecomillados aplicando estilos simples tales como un borde y un color de fondo.

Hoy usaremos las pseudoclases :after y :before para que los bloques entrecomillados (blockquotes) tengan comillas, al inicio y al final de la cita. Además usaremos un poco más de CSS para hacerlos más vistosos.

La pseudoclase :before nos ayudará a poner "algo" antes del bloque entrecomillado, mientras que :after lo pondrá después.
¿Y qué podrá? Aquí entra la propiedad content a echarnos la mano, podremos usar comillas o imágenes para darle estilo a nuestro bloque.

El código base para entender de lo que hablamos es este:

001 .post-body blockquote:before {
002 content: "\201C";
003 }
004 .post-body blockquote:after {
005 content: "\201D";
006 }

Ahí indicamos que antes del bloque usaremos la comilla de apertura \201C que traducido al cristiano es esta: “

Y al final del bloque usaremos la comilla de cierre \201D que es esta: ” También podemos usar open-quote y close-quote en su lugar.

001 .post-body blockquote:before {
002 content: open-quote;
003 }
004 .post-body blockquote:after {
005 content: close-quote;
006 }

O bien, una imagen, en la cual la primera sería la imagen de la comilla de apertura y la segunda sería la imagen de la comilla de cierre:

001 .post-body blockquote:before {
002 content: url(URL de la imagen);
003 }
004 .post-body blockquote:after {
005 content: url(URL de la imagen);
006 }

Teniendo la base podemos crear diferentes estilos, este sería uno muy sencillo:

001 .post-body blockquote {
002 background:#F7F8E0; /* Color de fondo */
003 padding:10px;
004 }
005 .post-body blockquote:before {
006 content: "\201C";
007 font-family: Georgia;
008 font-size:40px;
009 font-weight: bold;
010 line-height:0px;
011 vertical-align:middle;
012 }
013 .post-body blockquote:after {
014 content: "\201D";
015 font-family: Georgia;
016 font-size:40px;
017 font-weight: bold;
018 line-height:0px;
019 vertical-align:middle;
020 padding-top:10px;
021 }

A este le podemos aplicar un fondo gradiente y sombras:

001 .post-body blockquote {
002 padding:10px;
003 border-color: #999; /* Color del borde */
004 background: -webkit-linear-gradient(top, white, #E0E0E0); /* Gradientes */
005 background: -moz-linear-gradient(top, #fff, #E0E0E0);
006 background: -ms-linear-gradient(top, #fff, #E0E0E0);
007 background: -o-linear-gradient(top, #fff, #E0E0E0);
008 box-shadow: 0px 0px 15px #000000; /* Sombra */
009 }
010 .post-body blockquote:before {
011 content: "\201C";
012 font-family: Georgia;
013 font-size:40px;
014 font-weight: bold;
015 line-height:0px;
016 vertical-align:middle;
017 }
018 .post-body blockquote:after {
019 content: "\201D";
020 font-family: Georgia;
021 font-size:40px;
022 font-weight: bold;
023 line-height:0px;
024 vertical-align:middle;
025 padding-top:10px;
026 }

A este lo haremos más "divertido" poniéndole un color más vivo y girándolo un poco:

001 .post-body blockquote {
002 border-radius: 5px; /* Borde redondeado */
003 box-shadow: 5px 5px 2px #696969; /* Sombra */
004 -webkit-transform: rotate(-4deg); /* Rotación */
005 -moz-transform: rotate(-4deg);
006 -o-transform: rotate(-4deg);
007 background-color: #F4A460; /* Color de fondo */
008 padding: 10px;
009 color: #FFFFFF; /* Color del texto */
010 }
011 .post-body blockquote:before {
012 content: "\201C";
013 font-family: Georgia;
014 font-size:40px;
015 font-weight: bold;
016 line-height:0px;
017 vertical-align:middle;
018 }
019 .post-body blockquote:after {
020 content: "\201D";
021 font-family: Georgia;
022 font-size:40px;
023 font-weight: bold;
024 line-height:0px;
025 vertical-align:middle;
026 padding-top:10px;
027 }

Y a este le pondremos una imagen animada como comillas, además de un borde resplandeciente:

001 .post-body blockquote {
002 background:#CEECF5; /* Color de fondo */
003 padding:10px;
004 width:85%;
005 border-radius: 0px 30px; /* Bordes redondeados */
006 border: 2px solid #fff; /* Borde interior */
007 -moz-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
008 -webkit-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
009 -goog-ms-box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
010 box-shadow: 0 0 15px #D54CB5, inset 0 0 15px #D54CB5;
011 }
012 .post-body blockquote:before {
013 content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjRHuPiVZHV3cqr04_UTqoMbfhvJLLrrdY84ozhKjbBGelC4Rw7n8shT7LeX0_JzjUM-Bj3DSRmuxccs4bXA8szL_Oi21-XTmLhahr8W35tT7zfoAT7zjbJFRFrY7RYFBeDey-KgSosCc/s52/comilla1.gif);
014 font-size:40px;
015 font-weight: bold;
016 line-height:0px;
017 vertical-align:middle;
018 }
019 .post-body blockquote:after {
020 content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOXBuas5qQlyLOzt9dj0uVtMUU43wXspbVef530vhpfWY6cElGsZa3rPzacwnVVGigLEh4MfGmtf6E6yTG3Rawg8y_geDih1Vrb4bKppxm8Zg1H8uMqLyHRk_UcAZl6yBghyphenhyphenA8PnQwf7Q/s39/comilla2.gif);
021 font-size:40px;
022 font-weight: bold;
023 line-height:0px;
024 vertical-align:middle;
025 }

Cualquiera de los códigos anteriores los puedes poner en sustitución de los que ya tengas, o bien, sino los tienes definidos puedes ponerlos antes de ]]></b:skin>

Cualquiera de los ejemplos es completamente personalizable, en color verde están las anotaciones del área a la que corresponde cada estilo. En el caso de las comillas verás esto:

001 font-family: Georgia;
002 font-size:40px;
003 font-weight: bold;
004 line-height:0px;
005 vertical-align:middle;
006 padding-top:10px;

font-family es el tipo de fuente, font-size el tamaño de la comilla, font-weight lo pone en negrita con la declaración bold, line-height es el espacio entre líneas, vertical-align es para alinearlo verticalmente, y padding-top el espacio respecto a la línea de arriba. No funciona en Internet Explorer

La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo contenido se desplaza. Por defecto, ocupa todo el ancho de la pantalla, tiene una línea de altura y el texto se mueve lentamente de derecha a izquierda.

Esta es una marquesina por defecto.

Los atributos WIDHT y HEIGHT permiten controlar el ancho y el alto de la marquesina y pueden expresarse en pixeles o porcentualmente. El atributo ALIGN permite alinear el texto que rodea la marquesina, y puede tener los siguientes valores: top (arriba), middle (centrado) bottom (abajo). Los atributos HSPACE y VSPACE definen la separación horizontal y vertical del texto con los bordes de la marquesina:

<marquee width="50%" height="60" align="bottom">
... texto ...
</marquee>

... texto ...

El color de fondo puede establecerse con el atributo BGCOLOR o, utilizando el atributo STYLE, podemos establecer cualquier propiedad, de manera similar al resto de las etiquetas HTML:

Esto se ve con la fuente Impact

<marquee style="border: 2px solid green; background-color: #FF0; 
font-size: 16px; font-family: Impact; color: #F00;">
Esto se ve con la fuente Impact
</marquee>

Para controlar más efectivamente las marquesinas, existen una serie de atributos especiales:

DIRECTION se utiliza para modificar la dirección hacia la que se dirige el texto. Puede ser left (el valor por defecto), right, up o down:

<marquee direction="right">
 ... El texto se desplaza a la derecha ...
</marquee>

... El texto se desplaza a la derecha ...

<marquee direction="left">
 ... El texto se desplaza a la Izquierda ...
</marquee>

... El texto se desplaza a la izquierda ...

<marquee direction="up">
 ... El texto se desplaza hacia arriba ...
</marquee>

... El texto se desplaza hacia arriba ...

<marquee direction="down">
 ... El texto se desplaza hacia abajo ...
</marquee>

... El texto se desplaza hacia abajo ...

Con el atributo SCROLLDELAY se define el tiempo entre cada movimiento expresado en milisegundos:

<marquee scrolldelay="300">
Velocidad=300
</marquee>
<marquee scrolldelay="150">
Velocidad=150
</marquee>
<marquee scrolldelay="100">
Velocidad=100
</marquee>

Velocidad=300 Velocidad=150 Velocidad=100

LOOP indica el número de veces que aparecerá el texto y por defecto, es infinito.

Con SCROLLAMOUNT controlamos la cantidad de desplazamiento del texto en cada movimiento de avance. Cuanto mayor es el número, más rápido avanza:

<marquee scrollamount="50">
Velocidad=50
</marquee>
<marquee scrollamount="10">
Velocidad=10
</marquee>
<marquee scrollamount="5">
Velocidad=5
</marquee>

Velocidad=50 Velocidad=10 Velocidad=5

Por último, el atributo BEHAVIOR (comportamiento) sirve para definir de que manera se va a efectuar el desplazamiento y puede tener los siguientes valores:

scroll (valor por defecto), aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar
slide aparece por un lado, se desplaza y se detiene (sólo funciona en Internet Explorer).
alternate se desplaza alternativamente hacia un lado y el otro.

<marquee behavior="scroll">
behavior="scroll"
</marque>
<marquee behavior="slide">
behavior="slide"
</marque>
<marquee behavior="alternate">
behavior="alternate"
</marque>

behavior="scroll"

behavior="slide" behavior="alternate"
Las marquesinas no sólo pueden contener textos, también pueden contener otros elementos, por ejemplo, imágenes, vínculos o tablas:

<marquee direction="right">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-FmGoUYcAVfI/Ueba2fzb52I/AAAAAAAAJ2Q/
U3oP94-qno8/s1600/1002699_10151708689651812_1699006245_n.jpg" 
imageanchor="1" style="margin-left: 1em; margin-right: 1em;"
><img border="0" src="http://1.bp.blogspot.com/-FmGoUYcAVfI/Ueba2fzb52I/
AAAAAAAAJ2Q/U3oP94-qno8/s320/1002699_10151708689651812_1699006245_n.jpg" 
/></a></div>
</marquee>

<marquee>
<table border="1"><tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>7</td><td>8</td><td>9</td>
</tr>
<tbody><table>
</marquee>

1	2	3
4	5	6
7	8	9

¿Podemos controlar una marquesina mientras se ejecuta? Aquí hay un ejemplo simple, mediante dos pseudo-botones, logramos cambiarle la dirección:

<marquee direction="up" id="ejemplo">
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset; 
</marquee>

<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction=
'down';">
  Hacia abajo
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction=
'up';">
  Hacia arriba
</a>

border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

Hacia abajo Hacia arriba

Anteponiendo

ORMEÑO ERNESTO WALTER

Contactos

Experiencia laboral

POLICIA DE LA PROVINCIA DE BUENOS AIRES 1987 — 1999

COMANDO PATRULLA PILAR 1999 — 2004

COMISARIA DE PILAR CUARTA MANUEL ALBERTI 2004 — 2005

COMISARIA DE PILAR CUARTA MANUEL ALBERTI 2005 — 2006

SUPERMERCADO "COCO" MANUEL ALBERTI, PILAR

ECONOTEL

LAVADERO PARA BARRIO PRIVADO, MANUEL ALBERTI, COL. 12 de Octubre

BARRIO "ALTOS DE DEL VISO"

CENTRO COMERCIAL MANUE ALBERTI 2005 — 2016

Educación

Escuela primaria

Escuela secundaria