Baúl de Recursos: 2012

sábado, 22 de septiembre de 2012

CSS: Líneas divisorias <hr />

La etiqueta <hr /> se usa para mostrar una línea divisoria en nuestras páginas.

Sin estilos

Por defecto la línea se muestra de esta manera:

<hr />

Anchura y Altura

width: modifica el ancho de la línea. Si no se define, la línea tendra el ancho máximo. El valor puede estar expresado en valor relativo (em, px, etc.) o en valor absoluto (cm, pt, etc.). También se puede usar un valor en porcentaje, calculado a partir del ancho del elemento padre.
height: modifica el alto de la línea. El valor puede estar expresado en valor relativo (em, px, etc.) o en valor absoluto (cm, pt, etc.).

Color

background-color: color de la línea.
border-color ó color: color del borde de la línea. En Firefox debe usarse color. En Safari y Chrome se usa background-color y se debe incluir la propiedad height.

En ambos casos los valores deben ser colores (ver Colores RGB).

Borde

border: define el borde de la línea. Cuando el valor es 0, se elimina el aspecto de la linea de estar hundida

Márgenes

margin-left: márgen del lado izquierdo. Por defecto es 0.
margin-right: márgen del lado derecho. Por defecto es 0.

Ejemplos

sábado, 8 de septiembre de 2012

CSS: Listas (<li>, <ol> y <ul>)

Es muy fácil cambiar el aspecto de nuestras listas numeradas y con viñetas haciendo uso de nuestro buen amigo CSS. A continuación doy varios ejemplos de esto.

Sin estilos

Las siguientes son dos listas que no tienen definido ningún tipo de estilo, tal como las muestran los navegadores por defecto. Las primeras son numeradas, usando <ol>, y las segundas son listas con viñetas, usando <ul>:

<ol>
  <li>Perro</li>
  <li>Gato</li>
  <li>Pato</li>
</ol>

Perro
Gato
Pato

<ul>
  <li>Rojo</li>
  <li>Verde</li>
  <li>Lila</li>
</ul>

Rojo
Verde
Lila

Tipo de Viñeta

Para cambiar el tipo de viñeta a mostrar (por defecto el círculo negro y los números decimales) se usa la propiedad list-style-type.
Sus valores posibles pueden ser de tres tipos: numéricos y alfabéticos (ambos para <ol>) ó gráficos (para <ul>):

valores numéricos	decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| armenian \| georgian
valores alfabéticos	lower-latin \| upper-latin \| lower-alpha \| lower-greek
valores gráficos	circle \| square \| disc

Si no se desea usar ninguna viñeta, se debe emplear el valor none.
Los siguientes son ejemplos usando cada uno de ellos.

`<ol style="list-style-type: decimal;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: decimal-leading-zero;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-roman;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: upper-roman;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: armenian;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: georgian;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-latin;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: upper-latin;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-alpha;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ol style="list-style-type: lower-greek;"> <li>Perro</li> <li>Gato</li> <li>Pato</li> </ol>`	Perro Gato Pato
`<ul style="list-style-type: disc;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>`	Rojo Verde Lila
`<ul style="list-style-type: square;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>`	Rojo Verde Lila
`<ul style="list-style-type: circle;"> <li>Rojo</li> <li>Verde</li> <li>Lila</li> </ul>`	Rojo Verde Lila

Imágen de la Viñeta

Si las opciones anteriores no son suficientes, también se puede utilizar una imágen propia para usarla como viñeta.
Para ello se usa la propiedad list-style-image que usa el valor url.

<ul style="list-style-image:

   url('http://3.bp.blogspot.com/s1600/rojo.gif');">
<li>Rojo</li>
<li>Lila</li>
</ul>

Rojo
Lila

Valor inicial

Para el caso de las listas numeradas, podemos definir el valor incial. Es decir, no necesariamente tienen que partir con 1 o A.
Para ello usamos simplemente value en la etiqueta <li>, al cual le asignamos el valor de inicio.

<ol>
  <li value="5">Perro</li>
  <li>Gato</li>
  <li value="15">Pato</li>
  <li>Rana</li> 
</ol>

Perro
Gato
Pato
Rana

miércoles, 5 de septiembre de 2012

Reseteo de CSS para que las páginas se vean iguales en todos los navegadores

Nos pasamos días diseñanado nuestras páginas con CSS, definiendo los colores más apropiados, los márgenes, el tamaño de las fuentes, etc., y cuando todo está listo, probamos el resultado en más de un navegador y nos encontramos con la desagradable sorpresa de que no se ve igual en todos ellos.

¿Por qué ocurre esto? Pues porque cada navegador, Firefox, Safari, Opera, Google Chrome, Internet Explorer, etc., tiene sus propios valores por defecto para las etiquetas CSS.

Pero existe una manera de poder resolver esto y es "reseteando" dichos valores, para luego agregar los nuestros. Sólo hay que tener muy en cuenta que el "reseteo" se debe realizar antes de ingresar nuestros propios valores, pues de lo contrario éstos serán ignorados. También se pueden incorporar en un archivo externo y llamarlo al comienzo de nuestra página.

Y resetear es tan fácil como darle valores iniciales a todas las propiedades CSS que deseamos utilizar.
A continuación les dejo uno de los tantos ejemplos que podemos encontrar en internet y que cubre la mayoría de las propiedades.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite, code, del, dfn, em, 
font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline
}
 
body {
    line-height: 1; 
    height:100%
}
 
:focus {
     outline: 0
}
 
table {
    border-spacing: 0;
   border-collapse: collapse
}
 
ol, ul {
    list-style: none
}
 
blockquote:before, blockquote:after, q:before, q:after {
    content: ""
}
blockquote, q {
    quotes: "" ""
}

input, textarea {
    margin: 0;
    padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Ojo que aún con lo anterior es posible que sigan existiendo algunas diferencias entre navegadores, especialmente con Internet Explorer, pero eso ya es hilar más fino y lo veremos en una siguiente entrada.

sábado, 1 de septiembre de 2012

CSS: Hojas de Estilo en Cascada

Para los que nos gusta que nuestras páginas web tengan un toque propio, en el que somos nostros los que definimos cada detalle de su aspecto, CSS se vuelve indispensable. Sobre todo si nos gusta ahorrar tiempo y no repetir nada que no sea necesario.

Muchos ya sabrán qué es y para qué sirve CSS pues ha estado entre nostros desde mediado de los años 90. Por eso no entraré en detalle, para ello hay bastante material en internet.

Simplemente diré que su nombre proviene de Cascading Style Sheets, que traducido sería Hojas de Estilo en Cascada.

El estilo que deseamos aplicar a nuestros documentos HTML/XHTML puede ser incluído dentro de éste o adjuntarse como un archivo separado. En el primer caso, podemos definir estilos generales al comienzo del documento, o particulares, dentro de la misma etiqueta HTML/XHTML. Cualquiera sea el caso, lo que hacemos es definir para las etiquetas HTML/XHTML ciertos parámetros que determinarán, por ejemplo, color, tamaño, ancho, alineación, etc.

También hay que tener en cuenta que existen algunas diferencias al usar CSS con HTML o con XHTML, aunque son mínimas.

Donde sí podemos encontrar diferencias significaticas es al visualizar nuestras páginas con diferentes navegadores (Firefox, Opera, Safari, Internet Explorer, etc.) y esto se debe a que cada navegador posee sus propios valores por defecto para las etiquetas CSS. El cómo solucionar este problemita, lo veremos en una entrada más adelante.

Para saber cómo usar CSS, les invito a ver la entrada Cómo incorporar CSS en nuestras páginas.

Por ahora les dejo algunas páginas donde podemos encontrar información muy detallada y actualizada sobre el tema:

Página oficial de W3C: http://www.w3.org/
Especificaciones de CSS2: http://www.w3.org/TR/2008/REC-CSS2-20080411/
CSS 2.1: http://www.w3.org/TR/CSS21/cover.html#minitoc

lunes, 6 de agosto de 2012

Captura de pantalla en OS X (Mac)

Capturar pantallas completas o parciales en un Mac es muy simple.
En todos los casos mencionados a continuación se creará un archivo con extensión png que se guardará en el Escritorio. Si tras la combinación de teclas presionamos la tecla Ctrl (control), la imagen se guardará en el portapapeles en lugar que en el Escritorio.

Captura de pantalla completa

Para capturar la pantalla completa de nuestro Mac, se debe usar la siguiente combinación de teclas:

Shift + Cmd + 3

Captura de un área seleccionada de la pantalla

Es posible capturar sólo un área específica de la pantalla, la cual puede incluir más de una ventana. En este caso el cursor cambiará a un signo + indicando las coordenadas, el cual podemos arrastrar hasta abarcar el área deseada. La combinación de teclas es:

Shift + Cmd + 4

Captura de una ventana

Si lo que se desea es capturar el contenido de una ventana completa, usar la combinación de teclas anteriores seguido de la barra espaciadora, de modo que el cursor se mostrará como una cámara fotográfica y sólo deberemos elegir la ventana deseada:

Shift + Cmd + 4 , barra espaciadora

sábado, 21 de abril de 2012

Colores RGB

Cuando deseamos definir un color, ya sea en CSS o en algún programa de dibujo, es casi seguro que usaremos una de estas formas:

RGB hexadecimal
RGB decimal
RGB porcentual
nombre clave

Los valores RGB se componen de tres partes, la primera corresponde al rojo, la siguiente al verde y la última al azúl (por eso el nombre RGB, del inglés Red-Green-Blue).

Para RGB hexadecimal se usan valores dentro del rango 00 - FF.
En el caso de RGB decimal son valores decimales dentro del rango 0 - 255.
Para RGB porcentual se utiliza un porcentaje dentro del rango 0% - 100%.

Por ejemplo, para el color rojo, los valores RGB serían los siguientes:

Hexadecimal: ff0000
Decimal: 255, 0, 0
Porcentual: 100%, 0%, 0%

La siguiente es un tabla donde se muestran algunos colores con sus correspondientes valores RGB hexadecimal y decimal.

#00ff00

rgb(0,255,0)

00ff66

rgb(0,255,102)

00ffcc

rgb(0,255,204)

00ccff

rgb(0,255,255)

0066ff

rgb(0,102,255)

0033ff

rgb(0,51,255)

0000ff

rgb(0,0,255)

Los siguientes son algunos colores que pueden ser definidos por sus nombres, en inglés:

Black	Gray	Silver	White	Red
Fuchsia	Purple	Maroon	Navy	Blue
Teal	Aqua	Olive	Green	Lime
Yellow	Orange	Salmon	Pink	Tan

La siguiente es una página externa donde podrás encontrar más colores con sus nombres y valores RGB: Nombre de colores.

lunes, 2 de abril de 2012

Postales digitales

Para un cumpleaños o una fecha importante, qué mejor que mandar una postal... claro que hoy en día lo mejor son las postales digitales, que pueden llegar justo en la fecha (incluso a la hora) que nosotros elijamos.

lunes, 19 de marzo de 2012

Herramientas gratuitas para combinar colores

No siempre es sencillo combinar colores o seleccionar más de tres que se vean bien juntos. Por eso he buscado sitios en internet donde pueda realizar esta tarea sin grandes contratiempos. Entre las que encontré, esta es la que más me ha gustado:

lunes, 5 de marzo de 2012

Fotos divertidas

Cuando mi hija mayor salió de 4to medio, les hice a ella y a sus compañeros un DVD de recuerdo. En él coloqué una foto caricaturizada de cada miembro del curso y para ello debí buscar en internet un sitio donde pudiera crear estas imágenes sin grandes problemas. Y en el camino me encontré con esta página que me sigue siendo una de mis favoritas.

Pho.to

http://funny.pho.to/es/

Cargando una imagen desde nuestro computador, podemos aplicar una gran variedad de efectos divertidos, artísticos, fantásticos. Hay más de 500 plantillas para elegir.
Gracias a los montajes de rostros podremos tener una fotos de nosotros esquiando o convertirnos en una celebridad. Podemos probar colocándonos diferentes sombreros. O qué tal convertirnos en un tigre o un conejo. Podemos aplicar efectos estilizados que incluyen elegantes marcos, o bordes que le darán a nuestra foto un toque especial. Hay mucho de donde elegir…

miércoles, 1 de febrero de 2012

Apple Education Event 2012 - iBooks 2 y libros Multi-Touch

En enero de 2012, en el Museo Guggenheim de Nueva York, Apple realizó un evento enfocado especialmente en la educación.

Phil Schiller, vicepresidente de márketing mundial de productos de Apple, habló sobre algunos problemas que se presentan en las aulas de clases norteamericana y las ventajas del uso de los iPad en ellas, aprovechando que estos dispositivos móviles son el artículo número 1 deseado por los adolescentes en Estados Unidos, con más de 20.000 aplicaciones disponibles, relacionadas con la educación.

Bajo el título de "Reinventando los libros de texto" anunció el lanzamiento de iBooks 2, una nueva experiencia en los libros de texto para iPad.

Roger Rosner, vicepresidente de aplicaciones de productividad en Apple, realizó una interesante demostración de los nuevos libros interactivos.
Con un video introductorio, dio paso a las características de estos libros, capaces de contener animaciones interactivas, diagramas, imágenes y objetos 3D que pueden ser rotados moviéndolos con los dedos. Galería de imágenes que pueden ser visualizadas a pantalla completa. Permiten destacar texto con diferentes colores, pudiendo agregar notas propias al margen de la hoja. Búsqueda de palabras. Glosario con definiciones que se presenta como ventanas emergentes al seleccionar el término. Preguntas de repaso con verificación de respuestas. Tarjetas de estudio con los textos destacados y otras con los términos del glosario. El contenido del libro se puede visualizar en forma horizontal o vertical. Y todo con una rápida y fluida navegación.

Todos estos libros estarán disponibles en iBookstore.

La pregunta siguiente es ¿y cómo se crean estos libros? Y la respuesta es: iBooks Author.

Roger Rosner demostró el uso de esta poderosa herramienta, que con el uso de plantillas permite crear en forma rápida y sencilla estos libros interactivos.

Cualquiera podrá crear su propios libros interactivos y publicarlos en iBooks Store.
Y iBooks Author es completamente gratis, disponible en App Store.

Los libros interactivos tendrán un valor máximo de $14,99.

Páginas

sábado, 22 de septiembre de 2012

Sin estilos

Anchura y Altura

Color

Borde

Márgenes

Ejemplos

sábado, 8 de septiembre de 2012

Sin estilos

Tipo de Viñeta

Imágen de la Viñeta

Valor inicial

miércoles, 5 de septiembre de 2012

sábado, 1 de septiembre de 2012

lunes, 6 de agosto de 2012

Captura de pantalla completa

Captura de un área seleccionada de la pantalla

Captura de una ventana

sábado, 21 de abril de 2012

lunes, 2 de abril de 2012

lunes, 19 de marzo de 2012

Adobe Kuler

ColorHunt

Color Picker por HTML Color Codes

Cohesive Colors

Cohesive Colors

ColRD

Coolors

lunes, 5 de marzo de 2012

Pho.to

miércoles, 1 de febrero de 2012