Listados y contenidos multicolumna con CSS3

html, php y css

Qué tiempos aquellos cuando para poner contenidos multicolumnas en una página web, nos peleábamos con las listas multicolumna. Mediante márgenes, paddings y tamaños de contenedores, conseguíamos mostrar en el navegador un contenido en diversas columnas Compartir…Twitter0LinkedinFacebook0Google+0DiggBufferTumblr0Print

» Read more

Encriptar email para poner en web

Cuando se ponen emails en una web, éstos deben estar de alguna manera escondidos para que los robots no puedan leerlos y añadirlos a sus listas de spam. Cuando maquetas una web te enseñan que para poner un email con enlace, debes hacerlo con las siguiente etiqueta: Compartir…Twitter0LinkedinFacebook0Google+0DiggBufferTumblr0Print

» Read more

CodeIgniter – Generar imagen con librería GD

Estamos delante de un caso muy común: debemos crear una imagen, formato jpg o png, dinámica y que contenga datos dinámicos. Imaginemos que debemos mostrar en formato JPG el carnet de uno de nuestros socios. Este carnet, debe contener un fondo con el diseño elegido, y varios campos con los datos de nuetro socio (nombre, dni, número licencia…). Compartir…Twitter0LinkedinFacebook0Google+0DiggBufferTumblr0Print

» Read more

Enlaces de redes sociales para compartir página

Hay cientos de plugins/librerías para utilizar en nuestra página web que nos permiten compartirla en las principales redes sociales. Para ello, normalmente cargamos la librería javascript, la hoja de estilos y ponemos algún tipo de código para que todo se ejecute. Si lo queremos mas personalizado y sencillo, podemos poner el enlace que permite compartir la página, y punto. Aquí tenéis los mas usados: 1 2 3 4 <a href="https://pinterest.com/pin/create/button/?url=[URL_PAGINA]&media=[IMAGEN_DESTACADA_PAGINA]" target="_blank">Compartir en Pinteres</a> <a href="https://www.facebook.com/sharer/sharer.php?u=[URL_PAGINA]" target="_blank">Compartir en Facebook</a> <a href="https://plus.google.com/share?url=[URL_PAGINA]" […]

» Read more

Medidas usuales de pantallas de ordenadores y móviles

Medidas pantallas de ordenador Pequeñas (portátiles y pantallas antiguas): 1024×600 Medianas: 1280×720 Grandes: 1400×900, 1600×1200 … Medidas pantallas teléfonos móviles iPhone 4 y 4S: 320 x 480 iPhone 5 y 5S: 320 x 568 iPhone 6: 375 x 667 iPhone 6+: 414 x 736 Galaxy S3, S4, S5: 360 x 640 Google Nexus 5: 1920×1080 Galaxy S: 480×800 Galaxy Note: 1920×1080 Medidas pantallas tabletas iPad 1&2: 1024×768 Galaxy Tab 2 y 3 (7.0 pulgadas): 600×1024 Galaxy Tab 2 y 3 […]

» Read more

CSS – Estilo print que quite enlaces

Cuando configuramos un estilo CSS print para una página, cuando se imprime ésta, resulta que muestra los enlaces. Debajo de las imágenes, enlaces, debajo de los textos enlazados, el enlace… Pero hay una manera sencilla para no mostrar enlaces cuando imprimimos la página: 1 2 3 4 5 @media print { a[href]:after { content: none !important; } img[src]:after { content: none !important; } }@media print { a[href]:after { content: none !important; } img[src]:after { content: none !important; } } Con […]

» Read more

Web Sniffer

Para quien no la conozca, os hago llegar una interesante herramienta online encargada de leer los entresijos de una petición web. Cuando en nuestro navegador insertamos una dirección web, entre servidor y navegador se comunican sin que nos demos cuenta. Uno de esos datos que se pasan entre ellos es el header donde especifican muchas variables que hacen mostrar la información de una manera u otra en el navegador. Por ejemplo, cuando activamos en nuestro servidor la compresión de datos […]

» Read more

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
1 2 3 8