Css

  1. Border length ejemplo
  2. Parejas de fuentes recomendadas para cabeceras y contenido
  3. de un color a otro en pasos color to color by steps
  4. dimensiones device pixel ratio y otras curiosidades. ejemplo
  5. Uso de dimensiones de pantalla como unidades: vh & vw. Por ejemplo 100vh es el alto de la pantalla ejemplo. Problema con el tema del ancho... 20vw + 60vw +20vw
  6. Awesome technique from Joshua Hibbert to increase the clickable area on links. This is especially useful when it comes to mobile navigation, where clicking links can be tricky.
    a {
    				position: relative;
    				padding: .5em;
    				margin: -.5em;
    			}
  7. border-box
    *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
  8. codrops Algunos enlaces inferiores pertenecen a este sitio. Tiene muchos ejemplos con la opción de ver la demo y descargar el código de ejemplo.
  9. placeholder imágenes para maquetar lorempixel, placehold.it [lorempixel.com/400/200/sports/1/] o [placehold.it/350x150]
  10. Interesante: Mostrar captions en imágenes [usando figure HTML5]
  11. Colección de pictogramas
  12. Transitions and old browsers fallbacks local {transición entre imágenes con poco código}
  13. Triángulos para los bocadillos
  14. Index parallax - background fixed
  15. Ejemplo de uso de rem como font-size
  16. Ejemplo de media-queries con min-width y max-device-width
  17. Ocultar el texto de la etiqueta H1 y usar una imagen como fondo. Lo típico del logo. Versión antigua en esta página (al parecer hay problemas de rendimiento)
  18. Responsive navigation. O como modificar un menú en función del ancho de pantalla. Con animación {@keyframes}. Otra animación: heart
  19. Para aplicar un estilo a una columna de una tabla:
    <table border="0" cellspacing="0" cellpadding="0">
        <colgroup>
            <col /><col /><col class="best" /><col />
        </colgroup>
    <thead>{...}
    
  20. Browser selector con una línea de js (os y browser)
  21. Atribute selector CSS3 ejemplos
  22. Pictogramas o como usar una fuente con imágenes ...para botones, por ejemplo. + iconos usando Font Awesome {descargada v3.0.2}
  23. CSS3 Secrets: 10 things you might not know about CSS3 -VIDEO nth+ sobre el min. 24 Ejemplo para diferente distribución de bloques en función de la resolución Una página en la que queda claro nth
  24. listado de transiciones/propiedades, etc. www.w3.org
  25. Remplazar texto por una imagen, por ejemplo para logos, cabeceras.
    1. .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
      .ir{font: 0/0 a;
          text-shadow: none;
          color: transparent;}
      h1 {
      background: url(img/logo.png) no-repeat center;
      height: 280px;
      width: 280px;
      margin-left:auto;
      margin-right:auto;
      }
      <a href="/"><h1 class="ir">texto que no se muestra</h1></a>
  26. Variedad de ejemplos CSS - cssdeck.com
  27. Surtido de botones CSS3
  28. Para que safari no "decore" los campos de formulario:
    -webkit-appearance: none;
  29. Animando listas
  30. Selectores CSS por la W3C
  31. Relacionado con .less Aplicación para compilar Librerias otra libreria organizada por categorias "mixins"
  32. Sprites complejos
  33. Animate.css: Animaciones CSS3 para descargar
  34. Transiciones, animaciones y transformaciones Ejemplos interesantes
  35. Mega menu accesible, funciona con solo css Ver ejemplo, otro ejemplo con el de ewaterways
  36. Efectos hover con css3
  37. Introducción a hacks con pseudo-elementos
  38. :target Ejemplo: Mostrar ocultar con css
  39. Alinear / centrar sin float
  40. Introducción al diseño adaptable o responsive web design
  41. CSS3 PIE Progressive Internet Explorer - Bordes redondeados y otras propiedades CSS3 en IE
  42. Problemas con webfonts - listados de paquetes de fuentes compatibles al final -font stacks-
  43. css font stack
  44. Cargar imágenes en el documento y no como referencia con data-uri
  45. Unidades para usar en la web (explicando el por qué) viene de
  46. Recopilación de frameworks para CSS, otro inuit.css Descargar desde estravagancia.com inuit.css-v1.3-2.zip
  47. Establecer hojas de estilo en función del ancho con media queries de CSS3 IE8 y anteriores no lo interpretan (hay soluciones js en la misma página) - demo
  48. Establecer hojas de estilo en función de la versión de IE
  49. Esta página usa la hoja de estilos softreset.css Existe también versión reducida, minireset.css y la madre de todas reset.css -- también para móviles
  50. especificidad css (IMPORTANTE)
  51. selectores css3 ver para IE, disponemos de plugins ver, CSS3 pseudo-class selector emulation for Internet Explorer 5.5 - 8
  52. 30 selectores y compatibilidad con los navegadores
  53. página básica que se muestra igual en todos los navegadores ver psd con capturas descargar
  54. font-face ver font-previewer de google comparador de fuentes (permite seleccionar las de google) Implementar webfonts con @font-face. Entre otras cosas, incluye una opción por js para que no se muestre el texto hasta que no esté cargada la página. Fuentes comunes en Mac & Windows
  55. @font-face solucion IE9
    @font-face {
    	font-family: 'MyFontFamily';
    	src: url('myfont-webfont.eot#') format('eot'), 
    	     url('myfont-webfont.woff') format('woff'), 
    	     url('myfont-webfont.ttf')  format('truetype'),
    	     url('myfont-webfont.svg#svgFontName') format('svg');
    }
    		
  56. centrar capas contenidas en otra sin usar float ver
  57. opacidad ver
  58. imagen como fondo ocupando el 100% del ancho de la pantalla ver + info (con degradado CSS3)
    background: #f1f3db url(/images/tablas/bgCelda170.gif) no-repeat left bottom;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3db), to(#d8dac2)); /* Safari */
    background: -moz-linear-gradient(top, #f1f3db, #d8dac2); /* Firefox */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f3db', EndColorStr='#d8dac2'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f1f3db', EndColorStr='#d8dac2')";/* IE8 */
    
  59. haciendo que la etiqueta label se ponga dentro del input CSS ver
  60. diferenciando entre opacity y rgba ver
  61. generador de RGBa también para IE Ir Ver
  62. estilos en función de tamaños de texto e interlineado Vertical Rhytm
  63. otro de interlineado: baseline descargar ejemplo (psd, css, html)
  64. reflejo de imagen con css (se ve en Chrome y Safari) ver
  65. disposición de párrafos ver
  66. caracteres ver Herramienta para buscar la correspondencia - entity lookup tool - otro sitio de referencia (completo) Otro con caracteres curiosos, y una herramienta más dónde "el de referencia"
  67. ejemplos, código, navegadores en los que se ve, de todo sobre css
  68. otra parecida a la anterior
  69. un crack del CSS - Stu Nicholls
  70. ocultar el copyright de una imagen con css (ocultando parte de ella)
  71. tooltip (title de a) ver
  72. css reference de Microsoft
  73. less.js o como usar variables en los css - descargar compilador para windows No compila todas las clases que aparecen aquí
  74. grid para less.js The LESS CSS Grid is a modified version of the 1Kb Grid created and distributed by http://designshack.co.uk/
    Para plantear la estructura, podemos usar la calculadora online
  75. grid 12 columnas (sin less) (con less.js)
  76. Generar y ver las propiedades CSS3 soportadas por los navegadores
  77. Tabla de usos de CSS3
  78. Transiciones con CSS
    a {
    	-moz-transition-property: background-color, color;
    	-moz-transition-duration: 0.5s;
    	-moz-transition-timing-function: ease-out;
    	-webkit-transition-property: background-color, color;
    	-webkit-transition-duration: 0.5s;
    	-o-transition-property: background-color, color;
    	-o-transition-duration: 0.5s;
    	background-color:#949494;
    }
    a:hover {
    	-moz-transition-property: background-color, color;
    	-moz-transition-duration: 0.5s;
    	-moz-transition-timing-function: ease-out;
    	-webkit-transition-property: background-color, color;
    	-webkit-transition-duration: 0.5s;
    	-o-transition-property: background-color, color;
    	-o-transition-duration: 0.5s;
    	background-color:#ffcc00;
    }
    

Bootstrap

  1. configuración de datepicker bootstrap
  2. snippets bootsnipp
  3. snippets bootstraptor templates

HTML 5

  1. Developers Magic Kit. Varios enlaces a cheats, e-book y otras cosas
  2. Diagrama de uso básico
  3. html5please Que se puede usar si requiere de "fallbacks", navegadores que soportan esas etiquetas...
  4. Extraido de: Diferencias

    1. html5shiv allows you to use the new HTML5 tags in versions of IE that don't understand them. Without it, IE will choke on these tags, so you need this if you intend to use the tags. Don't expect it to make the tags actually do anything in IE though! It just stop the browser complaining about them.
    2. modernizr sets a bunch of classes in your HTML, depending on the available features, which you can use to change your layout according to what the browser supports. It also allows you to use the new HTML5 tags in IE, like html5shiv.
    3. ie7.js (as well as ie8.js and ie9.js) uses Javascript to retro-fit some missing functionality to IE.
    4. Initializr [+sencillo]
    5. BoilerPlate [+completo]
    6. CSS3Pie - enlazado desde alguna otra parte de este documento - : )
  5. Local Storage (aunque no se veanlos datos en la tabla, en IE8, almacena los datos) y Session Storage
  6. Otra base al estilo de boilerplate: html5admin - descargar
  7. 1140px grid con HTML5
  8. Convertir swf a HTML5
  9. Demos de las características de HTML5
  10. 320andup es un añadido para html5boilerplate aunque se puede usar por separado
  11. Todo lo necesario para empezar HTML5reset
  12. html5 para IE sin javascript - Hay que hacer cambios en el servidor
  13. Validador html5
  14. html5 ver +info (con ejemplos y zona de pruebas)
  15. html5 para principiantes
  16. HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site
  17. Otra plantilla más sencilla que la de Boilerplate
  18. Snippets de boilerplate
  19. para dispositivos móviles
  20. Ejemplos: incluída una home de una web empresarial
  21. Para que IE y Firefox 2 entiendan las etiquetas HTML5 (<article>, <aside>, <audio>, <bb>, <canvas>, <datagrid>, <datalist>, <details>, <dialog>, <eventsource>, <figure>, <footer>, <header>, <hgroup>, <mark>, <menu>, <meter>, <nav>, <output>, progress>, <section>, <time>, y <video>).

jQuery

  1. Demos AJAX jQuery4u
  2. Plugin para poner un vídeo de youtube como fondo ejemplo
  3. Plugin para mostrar todas las imágenes de una galería de imágenes y que se ajusta al ancho de un contenedor
  4. Pinning Más info de como hacerlo bien, con ejemplos
  5. redimensionar on load y on resize. JS y jquery navegando por secciones - mal ejemplo parallax
  6. Ejemplo usando require.js permite cargar varios js de forma más eficiente que llamanda a cada uno de ellos (reduce la transferencia de datos)
  7. Tabla adaptable al ancho de pantalla. Footable
  8. 14 útiles trucos, notas
  9. jQuery++ Ampliando jQuery con opciones que jQuery no deja
  10. Ampliando las posibilidades del selector
  11. timeline Interesante plugin que nos muestra una serie de datos como línea de tiempo, donde podemos incorporar imágenes, vídeos, etc. desde (entre otras opciones) una plantilla de documento de google
  12. Convertir menu en select Al final aparece opción para hacerlo de forma no intrusiva. opción con jQuery .prepend() (tb. enlazado desde el anterior)
  13. Sharrre Plugin para compartir en redes sociales
  14. Login Consideraciones para los formularios. Validación, efectos, notas...
    Por ejemplo: plugin para asegurarnos de que se mantienen los datos
  15. Para poner los prefijos de los diferentes motores de navegador
  16. Responsive design, plugin jquery que funciona en todos los navegadores ejemplo
  17. listado de 240 plugins ordenados por categorías
  18. Poner la imagen como fondo, pasando de ser img a span con su ancho y alto. Para poder aplicarle estilos css3
  19. Maquetar con plantillas de datos - Vista modelo-Model vista
  20. Efecto arrastrar para pasar a la siguiente, debería funcionar en Android
  21. 10 plugins Ajax - Entre ellos un carrito de la compra -
  22. Cambiador de estilos con cookies
  23. Botones con icono
  24. Distribuir el contenido en bloques/columnas que se adaptan al ancho de la pantalla. - centrado - Ejemplo con una galería de imágenes
  25. Responsive Images with PHP and jQuery
  26. Ajax para carro de la compra y pago con Paypal
  27. HTML5 Drag&Drop Uploader con PHP
  28. Mostrar más contenido según nos desplazamos
  29. Cambiar de imagen en función del tamaño del navegador
  30. Ensanchar el contenido
  31. Solución al Bug de IE7 y los z-index
  32. chat al estilo de gmail
  33. Enviar mensajes en tiempo real (open source)
  34. organizar el espacio de las columnas - dar el mismo alto a los divs
  35. FireQuery extensión para Firefox Otra extensión que muestra los cambios en el CSS y el DOM
  36. Interesante, para imágenes, poner título y caption sobre la imagen Con js deshabilitado, simplemente se ve la imagen
  37. Probar cambios en tiempo real sin necesidad de modificar el JS
  38. En función del scroll, ocurren cosas con mootools Diferentes técnicas de seguir al scroll
  39. jquery
  40. jQuery Fundamentals - tutorial Otro manual de desarrolloweb
  41. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js
    pruebas sobre plantilla (con todos los elementos) ver
  42. efectos jquery con opción de seleccionar tema
  43. escribir y leer cookie Ver
  44. Alinear los campos de formulario Ver
  45. Enviar contenido en tiempo real a los visitantes de la web
  46. tooltip plugin - mopTip Otro plugin de tooltip con opción de 6 colores
  47. carga las imágenes según se hace scroll
  48. Asíncrono Javascript y XML. Cargando páginas en la actual con AJAX Ver
  49. 10 Snippets
  50. jQuery plugins para formularios
  51. Las más usadas con sintaxis motools & jquery
  52. Para probar con diferentes librerias
  53. Ordenar listas en columnas
  54. Adapatable view

Móvil

  1. Responsive... de todo
  2. Plantillas de email adaptables
  3. Plantillas adaptables con framework css y pluggins js
  4. Recursos para desarrolladores También tienen muestras de Interfaces
  5. Interesantes consejos para aplicar mediante CSS
  6. Responsive design - incluye sliders
  7. Consejos para acelerar la carga de las páginas
  8. Modificar el tamaño de las imágenes
  9. Depurar js en el movil
  10. Emulador de móviles de springbox otro de mobilexweb
  11. Información respecto a la creación de sitios para dispositivos móviles
  12. Ejemplos de webs y sus versiones móviles. Al final hay un listado de recursos e información
  13. Otra web para inspirarse

Recursos

  1. GlyphSearch is a tool for searching icons from Glyphicons, Font Awesome, and other popular icon font libraries.
  2. FontCDN is a tool for searching web fonts from Google Fonts.
  3. responsive email template
  4. Plantilla con H1 abajo
  5. Mapas de google con estilos
  6. Para crear sprites
  7. Estilos BBC
  8. Redirigir al navegador en función del idioma detectado
  9. themeforest - plantillas, frameworks, temas
  10. Estadísticas -de navegadores, dispositivos, socialmedia...
  11. Cuándo puedo usar...? para saber la compatibilidad de algunas etiquetas HTML, CSS, JS API, otros
  12. Sistema de Grid por porcentajes
  13. Herramienta online para crear grids adaptativos gridpak.com
  14. Editor de degradados CSS online - permite subir una imagen -
  15. Mostrar correctamente js comprimido, para que se pueda "entender" jsbeautifier
  16. Hacer que IE se vea como con Google Chrome
  17. Imágenes para maquetar http://lorempixel.com/ancho/alto/ otro, con imágenes de gatos, otro con imágenes grises con dimensiones y otro en el que incluso podemos poner texto, cambiar el color...
  18. Colección de versiones de Internet Explorer para comprobar la compatibilidad
  19. Responsive design
  20. Paleta de colores desde una imagen
  21. Solicitar on-line una imagen con tamaño / compresión específicas
  22. Directivas de htacces a IIS
  23. 21 herramientas para diseño sensible Ejemplos de sitios con diseño sensible
  24. Diferentes ejemplos de usos de jquery
  25. Crear una página con yaml (framework de css) Plantillas
  26. Identifica sprites para mostrar las coordenadas
  27. Expresiones regulares
  28. Imágenes como contenedores (para maquetar), algo así como Lorem Ipsum, pero de imágenes.
  29. IE Tester
  30. Tipos de licencias de imágenes
  31. MiniAjax, entre otras, aparece la aplicación Mapa de calor
  32. Snippets
  33. + snippets y más recursos de código gratis recopilados en un post
  34. Htpasswd Generator
  35. Calculadora online, permite el uso de variables - 960 para grid less
  36. Reducir el peso de las imágenes online con smushit
  37. iconos
  38. Artículo en inglés sobre opciones para acelerar la carga de las páginas Mejorar el rendimiento del sitio web
  39. Herramienta para crear un menú con css3 (sin javascript) [de pago la versión comercial]
  40. css3 online [lo actualizan]
  41. librería jquery 1.4.2
  42. html-ipsum texto y HTML para maquetar otro con texto compuesto por palabras al azar
  43. tamaños de fuente pxtoem.com
  44. bookmarks relacionados con diseño web ver Actualizada 30-07-2010 -sin formato-
  45. plantillas para web de dos columnas por CSS ver
  46. ¿Qué fuente es la usada en esta imagen? myfonts.com
  47. 25 compresores online de CSS
  48. ...de diseño: fuentes, imágenes...
  49. "favoritos activos" para desarrolladores
  50. Colección de IE's - Otra web de navegadores y versiones
  51. Soluciones a 25 problemas de IE6
  52. Herramientas / plantillas / componentes para hacer bocetos
  53. Programas gratis para abrir cualquier tipo de archivo
  54. Validador Unicorn

WordPress

  1. WordPress Saber en que archivo estamos insertando un código
  2. snippets para WordPress +snippets
  3. E-commerce para wordpress Plantillas de pago para e-commerce en WordPress

Snippets

  1. Handy CSS snippets
  2. Básicos para una web
  3. Huge Collection of Code Snippets: HTAccess, PHP, WordPress, jQuery, HTML, CSS
  4. Snippets JS y jQuery 2 3 4

Fotografía

Obtener datos de nuestra cámara a partir de las imágenes

Ampliar las características de una cámara con CHDK

Otras cosas...

  1. Envío de campos de contraseña encriptados
  2. Clase para conectar con diferentes bases de datos y PHP
  3. Calcular la edad y la cantidad de días entre dos fechas PHP
  4. Página que adapta el alto al del navegador (ejemplo hecho con ewater)
  5. json ASP PHP desde SQL server archivo zip (desarrollo excursiones)
  6. crear formulario para encuesta con google docs
  7. quick course on effective website copywriting
  8. Recuperar la contraseña de un .ste de dreamweaver
  9. Ancho, alto y scroll de una ventana en diferentes navegadores (IE6 incluido)
  10. Enlazar a una posición en el tiempo en los vídeos de youtube
  11. Microformatos Extensión para dreamweaver
  12. notas al pie accesibles
  13. 10 fallos & soluciones al IExplorer
  14. .htaccess tools Generador de contraseñas (si el de la web anterior no funciona)
  15. php > xml > jquery Demo online
  16. Modificando la apariencia de input type="file" con una imagen y Js
  17. Listado de robots.txt
  18. Ver si la página se sirve comprimida (con gzip) // <?php if(!ob_start("ob_gzhandler")) ob_start(); ?>
  19. Using Language Identifiers (RFC 3066) lang="es-ca"
  20. para quitar las líneas de puntos en los enlaces con css:
    a:active { outline: none; } o simplemente a {outline: none}
    

NOTA: It is worth remembering that even if you do have a valid doctype, placing anything above it in the source code - even a comment - will cause Internet Explorer 6 to drop into quirks mode. If IE6 is in quirks mode, you will see that your CSS is rendered similarly to IE5.5, meaning in the same "quirky" fashion as that old browser. This doctype bug happens only in Internet Explorer 6.

Poniendo condicionales bloquea descargas.... +info

 

Logical vs Physical URLs

A logical URL identifies a resource.

For example, this is a logical URL: http://www.xfront.com/juicer

A physical URL identifies a particular content (MIME) type.

For example, this is a physical URL: http://www.xfront.com/juicer.html

There are multiple reasons for favoring logical URLs over physical URLs. Now we see another reason: by using logical URLs your Web site can be used as a tag space!

 

scripts jquery

cambiar imagen

<script type="text/javascript">
<!--
$(function() {
	$("img.boton")
		.mouseover(function() { 
			var src = $(this).attr("src").match(/[^\.]+/) + "Hover.jpg";
			$(this).attr("src", src);
		})
		.mouseout(function() {
			var src = $(this).attr("src").replace("Hover", "");
			$(this).attr("src", src);
		});
});
//-->
</script>


comprimir PHP

<?php
	if(!ob_start("ob_gzhandler")) ob_start();
?>

subir

$('p.subir a').click(function(){
	$('html, body').animate({scrollTop:0}, 'slow');
	return false;
});




Poner imagen favicon.ico delante del enlace externo
otra alternativa más reciente -detalle: se llama a través de google-
http://www.google.com/s2/u/0/favicons?domain=


jQuery('article p a[href^="http://"]').filter(function(){

	 return this.hostname && this.hostname !== location.hostname && this.hostname !== "www.dominio.tv" && this.hostname !== "www.dominio.com"

}).each(function() {

    var link = jQuery(this);

	jQuery(link).css("text-decoration","none");

    var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico';

    var faviconIMG = jQuery('')['prependTo'](link);

    var extImg = new Image();

    extImg.src = faviconURL;

    if (extImg.complete)

      faviconIMG.attr('src', faviconURL) ;

    else

      extImg.onload = function() { faviconIMG.attr('src', faviconURL); faviconIMG.toggle() };

});




  1. ¿Aburrido? Asteroids en la web... : )
  2. Cuando hay muchos js... y tenemos que llevarlos al final, da problemas con HTML5 y css3 solución con headjs, un solo js en la cabecera de 2Kb

Crear una web que se vea más o menos igual en todos los navegadores

  1. Podemos usar un entorno local con mySQL, apache... Webmatrix de Microsoft
  2. A partir del diseño que nos den...
  3. Lo primero, resetear los márgenes, bordes, paddings... para establecer las mismas propiedades para todos los navegadores.
  4. A continuación establecemos una estructura en función del diseño.
  5. Escala y ritmo en la tipografía para establecer una harmonia en la presentación del texto.
  6. Para el tamaño de la fuente, la más práctica: pxtoem
  7. Esta calculadora permite incluso poner siblings o children
  8. Seleccionamos algún tipo de fuente “distinta” - Otro: El directorio de fuentes de google. Cheat Sheet sobre fuentes seguras (incluye las de google)
  9. Podemos utilizar texto generado para maquetar y presentar la página.

Pie FIJO, + info
cosas sobre diseño web; pruebas de... estravagancia 2024.

photo of alberto alberto
estravagancia.com
Tenerife, España