Css
- Border length ejemplo
- Parejas de fuentes recomendadas para cabeceras y contenido
- de un color a otro en pasos color to color by steps
- dimensiones device pixel ratio y otras curiosidades. ejemplo
- 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
- 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; } - border-box
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
} - 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.
- placeholder imágenes para maquetar lorempixel, placehold.it [lorempixel.com/400/200/sports/1/] o [placehold.it/350x150]
- Interesante: Mostrar captions en imágenes [usando figure HTML5]
- Colección de pictogramas
- Transitions and old browsers fallbacks local {transición entre imágenes con poco código}
- Triángulos para los bocadillos
- Index parallax - background fixed
- Ejemplo de uso de rem como font-size
- Ejemplo de media-queries con min-width y max-device-width
- 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)
- Responsive navigation. O como modificar un menú en función del ancho de pantalla. Con animación {@keyframes}. Otra animación: heart
- 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>{...} - Browser selector con una línea de js (os y browser)
- Atribute selector CSS3 ejemplos
- Pictogramas o como usar una fuente con imágenes ...para botones, por ejemplo. + iconos usando Font Awesome {descargada v3.0.2}
- 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
- listado de transiciones/propiedades, etc. www.w3.org
- Remplazar texto por una imagen, por ejemplo para logos, cabeceras.
-
.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>
-
- Variedad de ejemplos CSS - cssdeck.com
- Surtido de botones CSS3
- Para que safari no "decore" los campos de formulario:
-webkit-appearance: none;
- Animando listas
- Selectores CSS por la W3C
- Relacionado con .less Aplicación para compilar Librerias otra libreria organizada por categorias "mixins"
- Sprites complejos
- Animate.css: Animaciones CSS3 para descargar
- Transiciones, animaciones y transformaciones Ejemplos interesantes
- Mega menu accesible, funciona con solo css Ver ejemplo, otro ejemplo con el de ewaterways
- Efectos hover con css3
- Introducción a hacks con pseudo-elementos
- :target Ejemplo: Mostrar ocultar con css
- Alinear / centrar sin float
- Introducción al diseño adaptable o responsive web design
- CSS3 PIE Progressive Internet Explorer - Bordes redondeados y otras propiedades CSS3 en IE
- Problemas con webfonts - listados de paquetes de fuentes compatibles al final -font stacks-
- css font stack
- Cargar imágenes en el documento y no como referencia con data-uri
- Unidades para usar en la web (explicando el por qué) viene de
- Recopilación de frameworks para CSS, otro inuit.css Descargar desde estravagancia.com inuit.css-v1.3-2.zip
- 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
- Establecer hojas de estilo en función de la versión de IE
- 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
- especificidad css (IMPORTANTE)
- selectores css3 ver para IE, disponemos de plugins ver, CSS3 pseudo-class selector emulation for Internet Explorer 5.5 - 8
- 30 selectores y compatibilidad con los navegadores
- página básica que se muestra igual en todos los navegadores ver psd con capturas descargar
- 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
- @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'); } - centrar capas contenidas en otra sin usar float ver
- opacidad ver
- 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 */
- haciendo que la etiqueta label se ponga dentro del input CSS ver
- diferenciando entre opacity y rgba ver
- generador de RGBa también para IE Ir Ver
- estilos en función de tamaños de texto e interlineado Vertical Rhytm
- otro de interlineado: baseline descargar ejemplo (psd, css, html)
- reflejo de imagen con css (se ve en Chrome y Safari) ver
- disposición de párrafos ver
- 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"
- ejemplos, código, navegadores en los que se ve, de todo sobre css
- otra parecida a la anterior
- un crack del CSS - Stu Nicholls
- ocultar el copyright de una imagen con css (ocultando parte de ella)
- tooltip (title de a) ver
- css reference de Microsoft
- less.js o como usar variables en los css - descargar compilador para windows No compila todas las clases que aparecen aquí
- 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 - grid 12 columnas (sin less) (con less.js)
- Generar y ver las propiedades CSS3 soportadas por los navegadores
- Tabla de usos de CSS3
- 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
- configuración de datepicker bootstrap
- snippets bootsnipp
- snippets bootstraptor templates
HTML 5
- Developers Magic Kit. Varios enlaces a cheats, e-book y otras cosas
- Diagrama de uso básico
- html5please Que se puede usar si requiere de "fallbacks", navegadores que soportan esas etiquetas...
- 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.
- 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.
- ie7.js (as well as ie8.js and ie9.js) uses Javascript to retro-fit some missing functionality to IE.
- Initializr [+sencillo]
- BoilerPlate [+completo]
- CSS3Pie - enlazado desde alguna otra parte de este documento - : )
- Local Storage (aunque no se veanlos datos en la tabla, en IE8, almacena los datos) y Session Storage
- Otra base al estilo de boilerplate: html5admin - descargar
- 1140px grid con HTML5
- Convertir swf a HTML5
- Demos de las características de HTML5
- 320andup es un añadido para html5boilerplate aunque se puede usar por separado
- Todo lo necesario para empezar HTML5reset
- html5 para IE sin javascript - Hay que hacer cambios en el servidor
- Validador html5
- html5 ver +info (con ejemplos y zona de pruebas)
- html5 para principiantes
- HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site
- Otra plantilla más sencilla que la de Boilerplate
- Snippets de boilerplate
- para dispositivos móviles
- Ejemplos: incluída una home de una web empresarial
- 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>).
Extraido de: Diferencias
jQuery
- Demos AJAX jQuery4u
- Plugin para poner un vídeo de youtube como fondo ejemplo
- Plugin para mostrar todas las imágenes de una galería de imágenes y que se ajusta al ancho de un contenedor
- Pinning Más info de como hacerlo bien, con ejemplos
- redimensionar on load y on resize. JS y jquery navegando por secciones - mal ejemplo parallax
- 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)
- Tabla adaptable al ancho de pantalla. Footable
- 14 útiles trucos, notas
- jQuery++ Ampliando jQuery con opciones que jQuery no deja
- Ampliando las posibilidades del selector
- 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
- 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)
- Sharrre Plugin para compartir en redes sociales
- Login Consideraciones para los formularios. Validación, efectos, notas...
Por ejemplo: plugin para asegurarnos de que se mantienen los datos - Para poner los prefijos de los diferentes motores de navegador
- Responsive design, plugin jquery que funciona en todos los navegadores ejemplo
- listado de 240 plugins ordenados por categorías
- Poner la imagen como fondo, pasando de ser img a span con su ancho y alto. Para poder aplicarle estilos css3
- Maquetar con plantillas de datos - Vista modelo-Model vista
- Efecto arrastrar para pasar a la siguiente, debería funcionar en Android
- 10 plugins Ajax - Entre ellos un carrito de la compra -
- Cambiador de estilos con cookies
- Botones con icono
- Distribuir el contenido en bloques/columnas que se adaptan al ancho de la pantalla. - centrado - Ejemplo con una galería de imágenes
- Responsive Images with PHP and jQuery
- Ajax para carro de la compra y pago con Paypal
- HTML5 Drag&Drop Uploader con PHP
- Mostrar más contenido según nos desplazamos
- Cambiar de imagen en función del tamaño del navegador
- Ensanchar el contenido
- Solución al Bug de IE7 y los z-index
- chat al estilo de gmail
- Enviar mensajes en tiempo real (open source)
- organizar el espacio de las columnas - dar el mismo alto a los divs
- FireQuery extensión para Firefox Otra extensión que muestra los cambios en el CSS y el DOM
- Interesante, para imágenes, poner título y caption sobre la imagen Con js deshabilitado, simplemente se ve la imagen
- Probar cambios en tiempo real sin necesidad de modificar el JS
- En función del scroll, ocurren cosas con mootools Diferentes técnicas de seguir al scroll
- jquery
- jQuery Fundamentals - tutorial Otro manual de desarrolloweb
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js
pruebas sobre plantilla (con todos los elementos) ver - efectos jquery con opción de seleccionar tema
- escribir y leer cookie Ver
- Alinear los campos de formulario Ver
- Enviar contenido en tiempo real a los visitantes de la web
- tooltip plugin - mopTip Otro plugin de tooltip con opción de 6 colores
- carga las imágenes según se hace scroll
- Asíncrono Javascript y XML. Cargando páginas en la actual con AJAX Ver
- 10 Snippets
- jQuery plugins para formularios
- Las más usadas con sintaxis motools & jquery
- Para probar con diferentes librerias
- Ordenar listas en columnas
- Adapatable view
Móvil
- Responsive... de todo
- Plantillas de email adaptables
- Plantillas adaptables con framework css y pluggins js
- Recursos para desarrolladores También tienen muestras de Interfaces
- Interesantes consejos para aplicar mediante CSS
- Responsive design - incluye sliders
- Consejos para acelerar la carga de las páginas
- Modificar el tamaño de las imágenes
- Depurar js en el movil
- Emulador de móviles de springbox otro de mobilexweb
- Información respecto a la creación de sitios para dispositivos móviles
- Ejemplos de webs y sus versiones móviles. Al final hay un listado de recursos e información
- Otra web para inspirarse
Recursos
- GlyphSearch is a tool for searching icons from Glyphicons, Font Awesome, and other popular icon font libraries.
- FontCDN is a tool for searching web fonts from Google Fonts.
- responsive email template
- Plantilla con H1 abajo
- Mapas de google con estilos
- Para crear sprites
- Estilos BBC
- Redirigir al navegador en función del idioma detectado
- themeforest - plantillas, frameworks, temas
- Estadísticas -de navegadores, dispositivos, socialmedia...
- Cuándo puedo usar...? para saber la compatibilidad de algunas etiquetas HTML, CSS, JS API, otros
- Sistema de Grid por porcentajes
- Herramienta online para crear grids adaptativos gridpak.com
- Editor de degradados CSS online - permite subir una imagen -
- Mostrar correctamente js comprimido, para que se pueda "entender" jsbeautifier
- Hacer que IE se vea como con Google Chrome
- 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...
- Colección de versiones de Internet Explorer para comprobar la compatibilidad
- Responsive design
- Paleta de colores desde una imagen
- Solicitar on-line una imagen con tamaño / compresión específicas
- Directivas de htacces a IIS
- 21 herramientas para diseño sensible Ejemplos de sitios con diseño sensible
- Diferentes ejemplos de usos de jquery
- Crear una página con yaml (framework de css) Plantillas
- Identifica sprites para mostrar las coordenadas
- Expresiones regulares
- Imágenes como contenedores (para maquetar), algo así como Lorem Ipsum, pero de imágenes.
- IE Tester
- Tipos de licencias de imágenes
- MiniAjax, entre otras, aparece la aplicación Mapa de calor
- Snippets
- + snippets y más recursos de código gratis recopilados en un post
- Htpasswd Generator
- Calculadora online, permite el uso de variables - 960 para grid less
- Reducir el peso de las imágenes online con smushit
- iconos
- Artículo en inglés sobre opciones para acelerar la carga de las páginas Mejorar el rendimiento del sitio web
- Herramienta para crear un menú con css3 (sin javascript) [de pago la versión comercial]
- css3 online [lo actualizan]
- librería jquery 1.4.2
- html-ipsum texto y HTML para maquetar otro con texto compuesto por palabras al azar
- tamaños de fuente pxtoem.com
- bookmarks relacionados con diseño web ver Actualizada 30-07-2010 -sin formato-
- plantillas para web de dos columnas por CSS ver
- ¿Qué fuente es la usada en esta imagen? myfonts.com
- 25 compresores online de CSS
- ...de diseño: fuentes, imágenes...
- "favoritos activos" para desarrolladores
- Colección de IE's - Otra web de navegadores y versiones
- Soluciones a 25 problemas de IE6
- Herramientas / plantillas / componentes para hacer bocetos
- Programas gratis para abrir cualquier tipo de archivo
- Validador Unicorn
WordPress
- WordPress Saber en que archivo estamos insertando un código
- snippets para WordPress +snippets
- E-commerce para wordpress Plantillas de pago para e-commerce en WordPress
Snippets
- Handy CSS snippets
- Básicos para una web
- Huge Collection of Code Snippets: HTAccess, PHP, WordPress, jQuery, HTML, CSS
- 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...
- Envío de campos de contraseña encriptados
- Clase para conectar con diferentes bases de datos y PHP
- Calcular la edad y la cantidad de días entre dos fechas PHP
- Página que adapta el alto al del navegador (ejemplo hecho con ewater)
- json ASP PHP desde SQL server archivo zip (desarrollo excursiones)
- crear formulario para encuesta con google docs
- quick course on effective website copywriting
- Recuperar la contraseña de un .ste de dreamweaver
- Ancho, alto y scroll de una ventana en diferentes navegadores (IE6 incluido)
- Enlazar a una posición en el tiempo en los vídeos de youtube
- Microformatos Extensión para dreamweaver
- notas al pie accesibles
- 10 fallos & soluciones al IExplorer
- .htaccess tools Generador de contraseñas (si el de la web anterior no funciona)
- php > xml > jquery Demo online
- Modificando la apariencia de input type="file" con una imagen y Js
- Listado de robots.txt
- Ver si la página se sirve comprimida (con gzip) // <?php if(!ob_start("ob_gzhandler")) ob_start(); ?>
- Using Language Identifiers (RFC 3066) lang="es-ca"
- 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() };
});
- ¿Aburrido? Asteroids en la web... : )
- 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
- Podemos usar un entorno local con mySQL, apache... Webmatrix de Microsoft
- A partir del diseño que nos den...
- Lo primero, resetear los márgenes, bordes, paddings... para establecer las mismas propiedades para todos los navegadores.
- A continuación establecemos una estructura en función del diseño.
- grid690
- grid system generator, tiene 4 opciones, la “1kb” (me parece que la usaré, o la “simple”)
- Escala y ritmo en la tipografía para establecer una harmonia en la presentación del texto.
- Escala y ritmo
- Rhythm calculator
- css con ritmo vertical Esta permite poner los tamaños de fuente que vamos a usar para que nos de su equivalente en ems
- Para el tamaño de la fuente, la más práctica: pxtoem
- Esta calculadora permite incluso poner siblings o children
- Seleccionamos algún tipo de fuente “distinta” - Otro: El directorio de fuentes de google. Cheat Sheet sobre fuentes seguras (incluye las de google)
- Podemos utilizar texto generado para maquetar y presentar la página.
