Bienvenido(a) al blog de Estanislao Vizcarra, un espacio con tintes de tecnología, desarrollo Web, fútbol e información underground.
Después de 3 años de no actualizar Un ejemplo de Formulario con XHTML y CSS me di la tarea este fin de semana, de hacer una nueva versión del mismo.
El nuevo ejemplo puede descargarse en formato Zip y ser utilizado libremente.
Aclaro que no es el formulario definitivo, pero si el estilo que mas me gusta trabajar y bastante cómodo para realizar las modificaciones que nuestro proyecto necesite.
Sugerencias para mejorarlo son bienvenidas.
El día de hoy me he visto en la necesidad de utilizar la etiqueta <hr /> la cual tenia mucho sin aplicar; y de la cual no recordaba como darle estilo.
Esta necesidad surgió de buscar separar visualmente unos párrafos de información sin la necesidad de hacer un div o aplicar una clase al párrafo o utilizar una imagen como separador.
El codigo XHTML seria:
<p>Parrafo uno</p> <hr /> <p>Parrafo dos</p>
El codigo CSS seria:
hr {
margin: 0 20px 20px 20px;
background-color: #ccc;
color: #ccc;
height: 1px;
border: 0;
}
Me vi en la necesidad de utilizar background-color y color, para evitar problemas entre Firefox e IE.
Cada que me encuentro trabajando en un nuevo proyecto no puedo evitar consultar de vez en cuando mi viejo cuadernillo que hice con artículos de mini-d sobre XHTML, CSS y otros detalles.
Ese cuadernillo es como una pequeña guía de referencia que de vez en cuando me saca de algún apuro y el cual conservo con mucho recelo.
Pero bueno, no es de eso de lo que quería hablar, si no de una anotación que hice ahí, de un articulo que lei en mini-d y que tiene que ver con las comillas. El cual deseo compartir con ustedes.
Comillas: Se utilizan para indicar que las palabras que se encuentran en ellas son literales o reproducción exacta de algo dicho previamente. Pueden usarse para diferenciar el texto.
Este concepto se puede encontrar mas detallado en la Wikipedia.
Por lo regular cuando estamos desarrollando es muy sencillo agregar las comillas de forma automática junto con el texto. Pero lo cierto es que tenemos en XHTML una etiqueta especial para ello <q>
<q>Esto esta entre comillas</q>
“Esto esta entre comillas”
Unas comillas que me agradan mucho son las Comillas Españolas (« »), pues se escriben muy distintas a las acostumbradas.
Pues bien, una forma de cambiar nuestras comillas <q> a comillas españolas es a través de CSS. Con el siguiente código.
q { quotes:'\00AB''\00BB'; }
Y con ello podríamos tener nuestras comillas españolas presentes en nuestro sitio
.
Solo como ultimo detalle, este codigo no funciona en Internet Explorer (Gracias Microsoft).
¡Eso es amor a la camiseta!, unos polis aquí en Tijuana, en cumplimiento de su deber detuvieron a los ladrones de una camioneta a pedradas (llevan mas de una semana sin pistolas). Lo leo y no lo creo… ¡A pedradas!
Por otro lado quiero agradecer a Sosa la duda que me aclaro este fin de semana sobre el outline en CSS.
Esta duda surgió ya que alguien días atrás me preguntaba ¿como eliminar un recuadro de puntos que aparece en algunos enlaces que son remplazados por imágenes en CSS?.
En Firefox abarca desde el lado izquierdo de la pantalla hasta la posición del link.
Y bueno, Sosa me comento que el código para eliminar esto en CSS es:
a {
outline: none;
}
Esta regla permite eliminar dicho cuadro. Gracias Armando por el código, prometo leer tu blog mas seguido.
Por ultimo le di una actualización a mi currículum, nada nuevo solo algunos detallitos.
Hoy estuve buscando la manera de centrar un background en el centro de una página, después de un rato de búsqueda he aquí el resultado:
body {
background: transparent url(imagen.jpg) no-repeat center center;
background-attachment: fixed;
}
Gracias a Pablo por el fixed.
La semana anterior y parte de esta, me encuentro dando un curso a un cliente sobre XHTML y CSS, todo esto enfocado para que el cliente pueda al final realizar su sitio Web.
El temario lo hice para 5 horas, llevo 6 horas y media y aun faltan los dos ultimos incisos.
Aqui lo hago publico, principalmente me base en mis primeras experiencias con XHTML, CSS y los elementos que comunmente utilizo.
Espero puedan ayudarme a pulirlo y por que no, hagamos un Wiki online de como hacer un sitio Web, desde cero.
Los que tiene rato leyendo los contenidos y comentandolos, se habran dado cuenta que hice un cambio de apariencia (y tambien de estructura) en el formulario de comentarios.
Bueno he decidido subir el codigo XHTML y CSS para los interesados.
Hoy leyendo Proletarium, me entero de una ?til herramienta para todos los que utilizamos CSS (tambi?n para los que desean aprender).
Se trata de CSS Cheat Sheet, una tarjeta bastante ?til a la hora de estar desarrollando nuestros archivos CSS, pues podemos consultar los atributos y sintaxis de las etiquetas de CSS.
Yo en esos casos saco mis 2 engargolados de las Especificaciones CSS2 donde consulto todo lo relacionado a las etiquetas CSS.
Para los que no conozcan Zen Garden, es un sitio que consiste en aplicar a un documento HTML diferentes dise?os con CSS.
Ahora se viene el libro de Zen Garden titulado: Zen of CSS Design, en donde al parecer se recopilaran los ultimos 6 meses de trabajo.
Ya se encuentra disponible la pre-orden en Amazon.
Existe otra iniciativa similar a Zen Garden, llamada: Proyecto Camaleon el cual es en castellano.
Via: Mezzoblue.