Blog de programación
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…TwitterLinkedinFacebook0DiggBufferTumblr0Print
» Read more
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…TwitterLinkedinFacebook0DiggBufferTumblr0Print
» Read more
Si utilizáis el FrameWork CodeIgniter, generar ficheros CSV a partir de una consulta es relativamente sencillo. Os explicamos cómo. Compartir…TwitterLinkedinFacebook0DiggBufferTumblr0Print
» Read more
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…TwitterLinkedinFacebook0DiggBufferTumblr0Print
» Read more
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 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
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
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
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
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 moreVeamos 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 moreComo 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
