Bootstrap 4.0
Se acerca la llegada de Bootstrap 4 a nuestros hogares web y es hora de ver algunos elementos a favor y contra de lo que ya conocíamos.
CSS
CSS 3 object-fit: cover y contain
Sin duda CSS3 nos va a permitir hacer cosas que hasta ahora eran bastante complejas de hacer, al menos si se querían hacer bien. Aunque todavía casi ningún navegador le da soporte (yo lo he probado con Opera 12a), me gusta mucho las funciones de object-fit que permiten, de forma sencilla, integrar imágenes o incluso vídeos dentro de un espacio determinado, o adaptarlo a unos tamaños a los que hasta ahora estábamos forzados. He hecho la prueba en Internet Explorer 9.0, Google Chrome 16.0, Mozilla Firefox 9.0 y Opera 12a y sólo en este último he conseguido que esto funcione… El objetivo es hacer lo siguiente (imagen basada en Opera 12a): Object Fit: Contain Básicamente es meter la imagen dentro de un espacio definido. En mi caso era … Leer más
Data URI mejor que CSS Sprites
Una de las cosas que más a bombo y platillo se nos ha intentado meter en la cabeza en los últimos tiempos es que era mejor usar los CSS Sprites que no un montón de imágenes. Y es cierto, es mejor lo primero que lo segundo… ¿pero es lo óptimo? No. En alguna ocasión he hablado ligeramente sobre las peticiones HTTP y lo que afectan en cuanto a la velocidad de carga de un sitio; una de esas cosas que comenté en su momento fue la de usar los Data URI. Y es que el uso de los CSS Sprites está muy bien si hablamos de navegadores como Internet Explorer 6 o 7, pero desde que tenemos los Internet Explorer 8, Firefox 3 u Opera 9 podemos ir … Leer más
Crear un efecto «desbloquear» de iPhone
Seguro que en alguna ocasión te gustaría hacer una versión de tu web para dispositivos móviles y añadir un toque iPhone. Es por esto que Chris Coyier ha creado un efecto «slide to unlock» en el que podemos apreciar, sobretodo en motores WebKit, el efecto a todo rendimiento. Entre otras cosas, hay ese efecto degradado y gracias a jQuery también la posibilidad de hacer ese efecto slide. El sistema aprovecha códigos CSS como el -webkit-animation: slidetounlock 5s infinite; y la función -webkit-keyframes slidetounlock. El ejemplo funciona en motores Webkit al 100% (Safari y Chrome), aunque se pueden analizar los códigos del CSS y JavaScript. Código CSS * { margin: 0; padding: 0; } html { background: black; } body { font: 14px Georgia, serif; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, … Leer más
Reproductor HTML 5 para vídeo
Estamos muy mal acostumbrados a que nuestros vídeos se alojen en FLV en sitios como Youtube o Vimeo. Hoy en día teniendo en cuenta que el ancho de banda está tirado de precio, no entiendo porqué no se tiende a la calidad y a alojar la propia información si que otros decidan. Con HTML 5 y su nuevo elemento <video> tenemos la posibilidad de incluir muchos formatos de vídeo con muchas opciones… y para hacerlo ya todo más sencillo, además de hacerlo compatible con versiones anteriores que no soportan los nuevos formatos, están apareciendo algunos sistemas que permiten estos reproductores de una forma «chula» y fácil. Algunos de los que he encontrado son estos: FlareVideo: Necesita de jQuery y el soporte es, a mi gusto, un poco reducido… … Leer más
CSS hacks para Internet Explorer 6 y 7
En muchas ocasiones nos encontramos que necesitamos aplicar algún tipo de estilo específico a Internet Explorer 6 o 7, que son los navegadores que menos funcionalidades CSS soportan pero que aún tienen una cantidad elevada de usuarios. En estos casos, y debido a algunos errores en el funcionamiento del navegador, tenemos la posibilidad de ejecutar un pequeño hack que no afecta al resto. El sistema es sencillo. Internet Explorer tiene un fallo y es que los atributos de los CSS permiten los símbolos «*» y «_» delante. Tomando de ejemplo este código a continuación, podemos ver algunos detalles: .fondo { background: Green; /* Todos los navegadores */ *background: Yellow; /* Sólo Explorer 6 y 7 */ _background: Red; /* Sólo Explorer 6 */ } ¿Qué significaría esto? Pues … Leer más
HTML 5: las pseudo-clases para mayor interactividad
Está claro que hoy en día el HTML no es nada sin los CSS, y hay algunos elementos que tienen algunas pseudo-clases que permiten algunas mejoras a la hora de interactuar con los estilos o diseños. Con la nueva versión, el HTML 5 tiene algunas clases que en las versiones anteriores no existían… aquí la lista de clases: : link: Son enlaces (o elementos) que no hayan sido visitados. : visited: Son enlaces (o elementos) que sí han sido visitados. : active: Son enlaces (o elementos) que están activados (por ejemplo, en el momento en el que hace clic en ellos). : enabled: Son elementos que están activos, como enlaces, botones, formularios… : disabled: Para los elementos contrarios al anterior, aquellos que en ese momento están desactivados. : … Leer más
CSSTidy: optimizar CSS es fácil
Una de las cosas por las que no solemos preocuparnos mucho es por los CSS. Solemos hacer un CSS más o menos bien formado, pero a partir de ahí nos limitamos a subirlo al servidor y poco más. Pero… si os digo que se puede ahorrar hasta un 25% en un CSS, ¿no sería interesante aplicarlo? La idea es que los CSS, al ser un elemento de los que se han de cargar antes que «se pinte» el HTML interesa que sea rápido en descargar. Además, es un elemento que suele estar en todas las páginas, y aunque el navegador suele cachearlo, vale la pena que ocupe poco… Una de las herramientas que podemos implementar directamente en nuestro servidor es el CSSTidy, que tiene unas opciones para PHP … Leer más
Open Standard Media (OSM) Player
Uno de los poyos que siempre me he encontrado a la hora de poner un reproductor de vídeo en la web es que en la mayoría de casos sólo aceptaba vídeos flash (.flv). La cosa es que con el HTML 5 y con jQuery se han montado un reproductor llamado Open Standard Media que tiene muy buena pinta, es código abierto y gratuito. Entre otras cosas, permite el uso de HTML 5, soporta los nuevos elementos audio y video del HTML 5 con los formatos estándar, para el resto de formatos monta un reproductor Flash, se le puede cambiar el diseño de una forma sencilla gracias al uso de ThemeRoller, permite la integraciónd e vídeos de Vimeo y Youtube (simplemente indicando la URL), tiene la opción de listados … Leer más
font dragr: prueba tus fuentes sólo arrastrándolas
Aunque hago un parón en cuanto a publicar de HTML 5, he encontrado esta herramienta, web o como queramos llamarlo que tiene su gracia, sobretodo si te dedicas a maquetar o eres diseñador. El sitio se llama font dragr y básicamente es una página en la que arrastrando un fichero de tipo de letra -truetype (ttf), opentype (otf), scalable vector graphics (svg) o Web Open Font Format (WOFF)- te actualizará los textos de la página con esa fuente. Además, el contenido original de la página es editable, por lo que puedes poner un texto de ejemplo y así ver cómo quedaría directamente en el navegador web. Otro detalle que ya avisan es que lo de arrastrar sólo funciona con in Firefox 3.6, que es, en estos momentos, el … Leer más
CSS Reset para HTML 5
Llevo varios días intentando encontrar un CSS Reset pero para HTML 5. Hasta ahora usaba el de Yahoo! YUI, pero incluso la versión 3 no da soporte a las nuevas etiquetas. Por eso me he decidido a revisar un poco los elementos que hay hasta ahora e intentar ofrecer una primera versión del CSS Reset para HTML 5. html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr,iframe,embed,object,legend{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup,a,small,q,time,samp,kbd,sup,sub,mark,col,colgroup,tbody,thead,tfoot,tr,td,th,label,input,button,textarea,select,optgroup,option,label,output{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;font-variant:normal;}i{font-style:italic;}b{font-weight:bold;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:»;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select{*font-size:100%;}header,article,section,aside,footer,nav,hgroup,address,figure,figcaption,video,audio,legend,datalist,optgroup,details,summary,command,menu{display:block;margin:0;padding:0;} Se puede descargar el CSS Reset para HTML 5. NOTA: Que conste que es una propuesta personal, basándome en la mayoría de los elementos que propone el HTML 5. ACTUALIZACIÓN: Me han pasado este de Rich Clark.
Para qué navegador he de programar
En muchas ocasiones escucho una grandiosa frase del estilo: es que eso que me dices no funciona en Internet Explorer 6. A parte de que Explorer 6 es un producto caducado, y no lo digo yo, lo dice la propia Microsoft con una página sobre el upgrade a Explorer 8 que me parece especialmente divertida por la imagen que ofrece (verdad que no beberías leche caducada hace 9 años?), creo que vale la pena hacer cosas para cumplir el Principio de Pareto, también conocido como la regla del 80-20. ¿Esto que significa? Pues que, como en muchas ocasiones, Yahoo! dispone de una pequeña gráfica que viene a explicar qué navegadores son los que hay que utilizar, y lo lanza una vez por quarter (cada 4 meses). En este … Leer más
Usa el tipo de letra que quieras en tu sitio
Estos días hablando con mi diseñadora favorita, Ana, hemos cruzado algunas cosas sobre la posibilidad de «incrustar tu fuente» en los sitios web. Ella últimamente hace diseños para algunos hoteles, y estos siempre quieren cosas especiales. Al final de hablar sobre ello, comenzamos a ver el tema del @font-face del CSS3. Pero, claro está, nos encontramos con el asunto de que no funciona en todos los navegadores. Así que me he puesto a investigar y he encontrado un código, un poco extraño, pero que parece ser la solución a la compatibilidad con todos los navegadores, incluido Internet Explorer. <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Font Face Demo</title> <style type=»text/css» media=»screen»> @font-face { font-family: ‘AaarghNormal’; src: url(‘Aaargh-webfont.eot’); src: local(‘☺’), url(‘Aaargh-webfont.woff’) format(‘woff’), url(‘Aaargh-webfont.ttf’) format(‘truetype’), url(‘Aaargh-webfont.svg#webfont’) format(‘svg’); font-weight: normal; font-style: normal; … Leer más
Cómo precargar elementos CSS, JS y similares
Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando. La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador. Para esto, que puede ser un poco complejo, podemos usar un código que he encontrado y que parece funcionar correctamente en todos los navegadores. window.onload = function () { var i = 0, max = 0, o … Leer más
Tanto va el webmaster a la fuente…
…que al final: Verdana. Seguramente si eres de los que habitualmente hace sitios web te planteas usar tipos de letra estándar para que todo el mundo lo vea correctamente, en Windows, Linux, Mac, etc… El otro día, por un proyecto que estoy desarrollando, tuve que ponerme a investigar y he sacado «estas familias»: Arial, Helvetica style=»font-family: Arial, Helvetica, sans-serif;» Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. … Leer más
HTML5 en Internet Explorer 8
Hace cosa de 2 años comencé a publicar alguna cosilla sobre HTML5. La verdad es que no era gran cosa, pero lo suficiente para hacernos una idea de que en SEO la cosa no iría nada mal. Y como hace ya 3 meses que puse este sitio web en HTML5 me he decidido ha hacer algún repaso poco a poco sobre los cambios. Antes de nada comentar que «los buscadores» parece que ya leen el HTML5 y le están dando ya peso a las cosas como se las tiene que dar. Al cabo de las 4 semanas, sin cambios aparentes (ya que fui publicando lo mismo sin tener ningún enlace fuerte ni nada parecido) el tráfico del blog aumentó un 30%. Eso sí, uno de los problemas más … Leer más
Eliminar el borde cuando haces clic
Seguro que en más de una ocasión te has encontrado que al hacer clic en algún enlace o similar aparece una especie de borde con línea discontinua y que, a veces, te desmonta incluso todo el sitio web… ¿Sabes que eso se puede arreglar de una forma muy sencilla? Pues sí, se hace con CSS y con el parámetro outline. La idea es que en el CSS añadas en 2 sitios esta propiedad: body { outline: none; } a { outline: none; } Tan sencillo y tan tonto como esto… en fin, a veces es cuestión de que alguien te de una chispa para que se encienda una mecha…
AntiSpam de correo vía CSS
Uno de los grandes problemas que en muchas ocasiones me encuentro es cómo poner una dirección de correo en una página web… Hace un tiempo que un amigo me mandó un sistema que utilizaba y que he estado buscando y he encontrado de dónde podría haber salido, y la verdad es que la idea es muy buena, ya que hoy en día todos venimos utilizando XHTML y CSS… incluso, sólo con CSS ya sería posible hacerlo. La idea es usar el sistema con un ID de estilo: parte CSS /* \40 se convierte en «@» */ #email:after { content: » <usuario\40dominio.ext>»; } parte HTML <div id=»email»>Contacto:</div> O usar el TAG <address>: CSS code /* \40 se convierte en «@» */ address:after { content: » <usuario\40dominio.ext>»; } parte HTML … Leer más