Ejemplo first-child – asignar un estilo a la primera columna de una tabla

Supongamos que tenemos la siguiente tabla: 1 2 3 4 5 6 <table id="milistado"> <tr><th>1 cabecera</th><th>2a cabecera</th></tr> <tr><td>1/1 cotendio</td><td>1/2 cotendio</td></tr> <tr><td>2/1 cotendio</td><td>2/2 cotendio</td></tr> <tr><td>3/1 cotendio</td><td>3/2 cotendio</td></tr> </table><table id="milistado"> <tr><th>1 cabecera</th><th>2a cabecera</th></tr> <tr><td>1/1 cotendio</td><td>1/2 cotendio</td></tr> <tr><td>2/1 cotendio</td><td>2/2 cotendio</td></tr> <tr><td>3/1 cotendio</td><td>3/2 cotendio</td></tr> </table> Y queremos asignar un estilo a la primera columna (1/1 contenido). Y solo a la primera columna. El estilo que utilizaríamos es *: 1 2 #milistado tr td:first-child { background: #F80; } #milistado tr td:last-child { background: #F50; }#milistado […]

» Read more

Mantener capa fija en la parte inferior del navegador

En casos como el mensaje de aviso de cookies, nos puede interesar mostrar una capa <div> que esté siempre fija en la parte inferior de la pantalla. En los navegadores nuevos es fácil de asignar el esilo a dicha capa: 1 2 3 4 // Ponemos en nuestra página la capa que contiene el mensaje <div class="container-cookie">Texto de la cookie</div> // Ahora en nuestra oja de estilos definimos la posición indicando que se quede fijo en la parte inferior del […]

» Read more

CSS – Evitar salto de linea después de etiquetas h1, h2, h3…

Veamos con un ejemplo cómo con unos estilos CSS podemos hacer que al final de las etiquetas h1, h2, h3… no se fuerce al salto de linea: 1 2 3 <div id="header"> <h1>Mi titulo</h1> El resto del titulo en la misma linea </div><div id="header"> <h1>Mi titulo</h1> El resto del titulo en la misma linea </div> Para que todo se muestre el la misma linea, deberemos utilizar los siguientes estilos: 1 #header h1 { display:inline; }#header h1 { display:inline; } Es […]

» Read more

Optimización página web – Paso 2 – Accesibilidad

Como mas accesible sea la web, el Sr. Google mas nos valora. Para seguir las normas de accesibilidad, hay que cumplir algunas normas que en el siguiente enlace se enumeran: http://www.w3.org/TR/WAI-WEBCONTENT/ En el documento se puede ver que hay tres prioridades. Nivel A, AA y AAA. Según las prioridades que se cumplan, se está en un nivel u otro. Para ver si vuestra web es accesible o no, podéis utilizar los siguientes validadores accesibilidad online: Validador TAW (WCAG2) http://www.tawdis.net/ WAVE […]

» Read more

Optimización página web – Paso 1 – Validación

Mientras creamos nuestra web, deberíamos seguir el formato HTML correcto a la hora de maquetarla. Seguir el formato estándar. Pero muchas veces nos olvidamos o no estamos puestos al día de las novedades del lenguaje. La validación de la web, que consiste en que esté desarrollada al 100% cumpliendo el estándar, es esencial para que los buscadores nos tengan en cuenta y nos puntúen bien para posicionarnos. Para ver si nuestra web cumple los estándares de HTML5 por ejemplo, W3C […]

» Read more

Mysql – Insert cogiendo datos con una sentencia select

Veamos cómo insertar registros en una tabla cogiendo los datos de otra. 1 2 INSERT INTO eliminatorias(id,eliminatoria,fecha,) SELECT null, ‘TEXTO ESTATICO’, fecha FROM fecha_historico WHERE fecha < "2015-05-12"INSERT INTO eliminatorias(id,eliminatoria,fecha,) SELECT null, ‘TEXTO ESTATICO’, fecha FROM fecha_historico WHERE fecha < "2015-05-12" De este modo, primero se hace el select, y el resultado se va insertando en la tabla eliminatorias. Es importante que los campos consultados en el select, coincidan con los el Insert. En caso contrario no funcionaria. Compartir…Twitter0LinkedinFacebook0Google+0DiggBufferTumblr0Print

» Read more

Mysql – Eliminar registros de una tabla que no existen en otra

Muchas veces, sobretodo en importaciones de bases de datos, nos puede interesar crear una nueva tabla a partir de dos tablas existentes, o eliminar datos que no nos interesan. Pongamos un ejemplo: TablaUsuarios id (identificador) nombre (nombre de los datos) TablaNewsletter id (identificador usuarios) email Pues ahora resulta, que se nos jira la cabeza, y nos enfadamos con todos los clientes que no se han apuntado a la newsletter. Los eliminamos. 1 DELETE FROM TablaUsuarios WHERE id NOT IN (SELECT […]

» Read more

Frameworks HTML5 Open Source para crear app/webs móviles

Listado de algunos Frameworks HTML5 Open Source por si os planteáis crear aplicaciones para móvil: Bootstrap Kendeo UI TopCoat Intel’s App Framework The M-Project (Bckbone.js) Lungo Fries Junior Enyo JS Moobile JS Wink (Dojo fundation) Foundation Groundwork CSS Cada uno de ellos con sus pros y contras. Investigad y buscar el que mas se adapta a vuestras necesidades. Yo empiezo un nuevo proyecto con Fundation… iré informando. Compartir…Twitter0LinkedinFacebook0Google+0DiggBufferTumblr0Print

» Read more

HTML5 – Números de teléfono

Muchas veces, al hacer una página ‘responsive’ ponemos en nuestro código un teléfono. HTML5, sobretodo en los navegadores de móviles, pueden hacer que este teléfono sea clicable para hacer la llamada directamente o añadir el teléfono a los contactos. Código HTML5 para hacer un teléfono clicable Al igual que cuando indicamos un email escribimos: 1 <a href="mailto:miemail@email.com">miemail@miemail.com</a><a href="mailto:miemail@email.com">miemail@miemail.com</a> Con el teléfono podemos marcarlo como: 1 <a href="tel:977650001">977650001</a><a href="tel:977650001">977650001</a> Atento a los puntos, comas y guiones. No los pongáis en el […]

» Read more

Guia de CSS soportados por navegadores y clientes email

Os dejo un enlace muy interesante para ver que propiedades CSS acepta cada uno de los navegadores o clientes de correo mas populares. https://www.campaignmonitor.com/css/ Según la table del enlace, el software Apple está muy por encima de los demás. La lista está actualizada de mayo del 2014. Compartir…Twitter0LinkedinFacebook0Google+0DiggBufferTumblr0Print

» Read more

Three.js – WW2Viewer añadiendo Spitfire MK I

Este fin de semana he añadido un nuevo vehículos de la Segunda Guerra Mundial a mi catálogo 3D online. WW2Viewer es un pequeño proyecto realizado con Three.js, librería Javascript para el tratamiento 3D en los navegadores. Esta nueva actualización, me ha servido para tratar con los modelos 3D de Collada. Hasta ahora solo había tratado la carga de modelos .obj Y he encontrado varias cosas que creo importante cuando tratas con modelos 3D. Lo explico para facilitar el proceso por […]

» Read more

Google y los fragmentos enriquecidos

Os dejo un par de enlaces para el que quiera iniciarse en los fragmentos enriquecidos de Google. Mediante esta técnica podemos facilitar la información al buscador de buscadores de forma que al mostrarlo en sus resultados de búsqueda, se muestre de forma clara y sencilla. Dicho de otro modo, imaginad que tenemos una tienda online y que en la ficha de cada producto podemos marcar la información concerniente (nombre producto, precio, stock…) para que Google lo lea y lo muestre […]

» Read more
1 2 3 4 5 8