ક 2011 - 2024
Enlaces locales Enlaces externos

Pruebas relacionadas con la maquetación web

Css

HTML5

jQuery /Mootools

Móvil

Recursos

WordPress

Snippets

-fotografía

Full Screen

Subir

Ejemplos

Css

  1. Ejemplo de uso de rem como font-size
  2. Ejemplo de media-queries con min-width y max-device-width
  3. 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)
  4. Responsive navigation. O como modificar un menú en función del ancho de pantalla. Con animación {@keyframes}. Otra animación: heart
  5. 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>{...}
    
  6. Browser selector con una línea de js (os y browser)
  7. Atribute selector CSS3 ejemplos
  8. pictogramas o como usar una fuente con imágenes ...para botones, por ejemplo. + iconos usando Font Awesome {descargada v3.0.2}
  9. CSS3 Secrets: 10 things you might not know about CSS3 -VIDEO nth+ sobre el min. 24
  10. listado de transiciones/propiedades, etc. www.w3.org
  11. 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>
  12. Variedad de ejemplos CSS - cssdeck.com
  13. Surtido de botones CSS3
  14. Para que safari no "decore" los campos de formulario:
    -webkit-appearance: none;
  15. Animando listas
  16. Selectores CSS por la W3C
  17. Relacionado con .less Aplicación para compilar Librerias otra libreria organizada por categorias "mixins"
  18. Sprites complejos
  19. Animate.css: Animaciones CSS3 para descargar
  20. Transiciones, animaciones y transformaciones Ejemplos interesantes
  21. Mega menu accesible, funciona con solo css Ver ejemplo, otro ejemplo con el de ewaterways
  22. Efectos hover con css3
  23. Introducción a hacks con pseudo-elementos
  24. :target Ejemplo: Mostrar ocultar con css
  25. Alinear / centrar sin float
  26. Introducción al diseño adaptable o responsive web design
  27. CSS3 PIE Progressive Internet Explorer - Bordes redondeados y otras propiedades CSS3 en IE
  28. Problemas con webfonts - listados de paquetes de fuentes compatibles al final -font stacks-
  29. css font stack
  30. Cargar imágenes en el documento y no como referencia con data-uri
  31. Unidades para usar en la web (explicando el por qué) viene de
  32. Recopilación de frameworks para CSS, otro inuit.css Descargar desde estravagancia.com inuit.css-v1.3-2.zip
  33. 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
  34. Establecer hojas de estilo en función de la versión de IE
  35. 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
  36. especificidad css (IMPORTANTE)
  37. selectores css3 ver para IE, disponemos de plugins ver, CSS3 pseudo-class selector emulation for Internet Explorer 5.5 - 8
  38. 30 selectores y compatibilidad con los navegadores
  39. página básica que se muestra igual en todos los navegadores ver psd con capturas descargar
  40. 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
  41. @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');
    }
    		
  42. centrar capas contenidas en otra sin usar float ver
  43. opacidad ver
  44. 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 */
    
  45. haciendo que la etiqueta label se ponga dentro del input CSS ver
  46. diferenciando entre opacity y rgba ver
  47. generador de RGBa también para IE Ir Ver
  48. estilos en función de tamaños de texto e interlineado Vertical Rhytm
  49. otro de interlineado: baseline descargar ejemplo (psd, css, html)
  50. reflejo de imagen con css (se ve en Chrome y Safari) ver
  51. disposición de párrafos ver
  52. caracteres ver Herramienta para buscar la correspondencia - entity lookup tool - otro sitio de referencia (completo) Otro con caracteres curiosos
  53. ejemplos, código, navegadores en los que se ve, de todo sobre css
  54. otra parecida a la anterior
  55. un crack del CSS - Stu Nicholls
  56. ocultar el copyright de una imagen con css (ocultando parte de ella)
  57. tooltip (title de a) ver
  58. css reference de Microsoft
  59. less.js o como usar variables en los css - descargar compilador para windows No compila todas las clases que aparecen aquí
  60. 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
  61. grid 12 columnas (sin less) (con less.js)
  62. Generar y ver las propiedades CSS3 soportadas por los navegadores
  63. Tabla de usos de CSS3
  64. 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;
    }
    

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. Tabla adaptable al ancho de pantalla. Footable
  2. 14 útiles trucos, notas
  3. jQuery++ Ampliando jQuery con opciones que jQuery no deja
  4. Ampliando las posibilidades del selector
  5. 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
  6. 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)
  7. Sharrre Plugin para compartir en redes sociales
  8. Login Consideraciones para los formularios. Validación, efectos, notas...
    Por ejemplo: plugin para asegurarnos de que se mantienen los datos
  9. Para poner los prefijos de los diferentes motores de navegador
  10. Responsive design, plugin jquery que funciona en todos los navegadores ejemplo
  11. listado de 240 plugins ordenados por categorías
  12. Poner la imagen como fondo, pasando de ser img a span con su ancho y alto. Para poder aplicarle estilos css3
  13. Maquetar con plantillas de datos - Vista modelo-Model vista
  14. Efecto arrastrar para pasar a la siguiente, debería funcionar en Android
  15. 10 plugins Ajax - Entre ellos un carrito de la compra -
  16. Cambiador de estilos con cookies
  17. Botones con icono
  18. Distribuir el contenido en bloques/columnas que se adaptan al ancho de la pantalla. - centrado - Ejemplo con una galería de imágenes
  19. Responsive Images with PHP and jQuery
  20. Ajax para carro de la compra y pago con Paypal
  21. HTML5 Drag&Drop Uploader con PHP
  22. Mostrar más contenido según nos desplazamos
  23. Cambiar de imagen en función del tamaño del navegador
  24. Ensanchar el contenido
  25. Solución al Bug de IE7 y los z-index
  26. chat al estilo de gmail
  27. Enviar mensajes en tiempo real (open source)
  28. organizar el espacio de las columnas - dar el mismo alto a los divs
  29. FireQuery extensión para Firefox Otra extensión que muestra los cambios en el CSS y el DOM
  30. Interesante, para imágenes, poner título y caption sobre la imagen Con js deshabilitado, simplemente se ve la imagen
  31. Probar cambios en tiempo real sin necesidad de modificar el JS
  32. En función del scroll, ocurren cosas con mootools Diferentes técnicas de seguir al scroll
  33. jquery
  34. jQuery Fundamentals - tutorial Otro manual de desarrolloweb
  35. <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js
    pruebas sobre plantilla (con todos los elementos) ver
  36. efectos jquery con opción de seleccionar tema
  37. escribir y leer cookie Ver
  38. Alinear los campos de formulario Ver
  39. Enviar contenido en tiempo real a los visitantes de la web
  40. tooltip plugin - mopTip Otro plugin de tooltip con opción de 6 colores
  41. carga las imágenes según se hace scroll
  42. Asíncrono Javascript y XML. Cargando páginas en la actual con AJAX Ver
  43. 10 Snippets
  44. jQuery plugins para formularios
  45. Las más usadas con sintaxis motools & jquery
  46. Para probar con diferentes librerias
  47. Ordenar listas en columnas
  48. 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. Para crear sprites
  2. Estilos BBC
  3. Redirigir al navegador en función del idioma detectado
  4. themeforest - plantillas, frameworks, temas
  5. Estadísticas -de navegadores, dispositivos, socialmedia...
  6. Cuándo puedo usar...? para saber la compatibilidad de algunas etiquetas HTML, CSS, JS API, otros
  7. Sistema de Grid por porcentajes
  8. Herramienta online para crear grids adaptativos gridpak.com
  9. Editor de degradados CSS online - permite subir una imagen -
  10. Mostrar correctamente js comprimido, para que se pueda "entender" jsbeautifier
  11. Hacer que IE se vea como con Google Chrome
  12. 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...
  13. Colección de versiones de Internet Explorer para comprobar la compatibilidad
  14. Responsive design
  15. Paleta de colores desde una imagen
  16. Solicitar on-line una imagen con tamaño / compresión específicas
  17. Directivas de htacces a IIS
  18. 21 herramientas para diseño sensible Ejemplos de sitios con diseño sensible
  19. Diferentes ejemplos de usos de jquery
  20. Crear una página con yaml (framework de css) Plantillas
  21. Identifica sprites para mostrar las coordenadas
  22. Expresiones regulares
  23. Imágenes como contenedores (para maquetar), algo así como Lorem Ipsum, pero de imágenes.
  24. IE Tester
  25. Tipos de licencias de imágenes
  26. MiniAjax, entre otras, aparece la aplicación Mapa de calor
  27. Snippets
  28. + snippets y más recursos de código gratis recopilados en un post
  29. Htpasswd Generator
  30. Calculadora online, permite el uso de variables - 960 para grid less
  31. Reducir el peso de las imágenes online con smushit
  32. iconos
  33. Artículo en inglés sobre opciones para acelerar la carga de las páginas Mejorar el rendimiento del sitio web
  34. Herramienta para crear un menú con css3 (sin javascript) [de pago la versión comercial]
  35. css3 online [lo actualizan]
  36. librería jquery 1.4.2
  37. html-ipsum texto y HTML para maquetar otro con texto compuesto por palabras al azar
  38. tamaños de fuente pxtoem.com
  39. bookmarks relacionados con diseño web ver Actualizada 30-07-2010 -sin formato-
  40. plantillas para web de dos columnas por CSS ver
  41. ¿Qué fuente es la usada en esta imagen? myfonts.com
  42. 25 compresores online de CSS
  43. ...de diseño: fuentes, imágenes...
  44. "favoritos activos" para desarrolladores
  45. Colección de IE's - Otra web de navegadores y versiones
  46. Soluciones a 25 problemas de IE6
  47. Herramientas / plantillas / componentes para hacer bocetos
  48. Programas gratis para abrir cualquier tipo de archivo
  49. 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. Básicos para una web
  2. Huge Collection of Code Snippets: HTAccess, PHP, WordPress, jQuery, HTML, CSS
  3. 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. crear formulario para encuesta con google docs
  2. quick course on effective website copywriting
  3. Recuperar la contraseña de un .ste de dreamweaver
  4. Ancho, alto y scroll de una ventana en diferentes navegadores (IE6 incluido)
  5. Enlazar a una posición en el tiempo en los vídeos de youtube
  6. Microformatos Extensión para dreamweaver
  7. notas al pie accesibles
  8. 10 fallos & soluciones al IExplorer
  9. .htaccess tools Generador de contraseñas (si el de la web anterior no funciona)
  10. php > xml > jquery Demo online
  11. Modificando la apariencia de input type="file" con una imagen y Js
  12. Listado de robots.txt
  13. Ver si la página se sirve comprimida (con gzip) // <?php if(!ob_start("ob_gzhandler")) ob_start(); ?>
  14. Using Language Identifiers (RFC 3066) lang="es-ca"
  15. 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...
  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
Isaac Albeniz, 37
Hoyo de manzanares, Madrid, 28240 España