uvedobles.com» CSS

Diferentes dispositivos diferentes resoluciones

dedavid — Fri, 22 Apr 2011 07:56:22 +0000

La diversidad de dispositivos para conectarse a la red y navegar por las páginas web es creciente, y con ello la disparidad de resoluciones, desde una pequeña pantalla vertical de un teléfono móvil inteligente, como el iPhone o cualquier dispositivo con Android hasta los mil formatos de monitores que van desde los ordenadores corporativos que aún cuentan con pantallas de 15 y 17″ y resoluciones de 800 píxeles de ancho hasta los grandes monitores de veintitantas pulgadas y resoluciones super horizontales de más de 1900 píxeles.

Es tal esta diversidad de formatos que si queremos aprovechar mínimamente la resolución disponible en cada pantalla o dispositivo la solución es diseñar para varios formatos, de lo contrario tus clientes te llamarán diciéndote, no se aprovecha el ancho de pantalla, no se ve bien con el móvil, aparecen barras y es innavegable, será tal el caos que te traemos una de las muchas soluciones existentes: La librería que combina javascript y CSS denominada Adapt

Esta librería te permite disponer de varias hojas de estilo y cargar dinámicamente la que mejor se adapta al dispositivo que visita la página web.

Dale un vistazo en: http://adapt.960.gs/

Páginas relacionadas con este artículo:

Capas deslizantes en CSS3

dedavid — Thu, 13 Jan 2011 23:14:35 +0000

Excelente desarrollo de un sistema de capas deslizantes en modo acordeón o slider, lo mejor es que no precisa de jQuery pues está desarrollado exclusivamente en HTML+CSS3

Puedes verlo funcionar en dos sabores, horizontal y vertical recuerda que para descargarte el código para jugar deberás estudiar el HTML con un ver código fuente y descargarte el CSS… alguien ha oído FireBug?:

http://www.venturelab.co.uk/demos/accordion/

Páginas relacionadas con este artículo:

Clase PHP para móviles

dedavid — Sun, 09 Jan 2011 15:01:46 +0000

CiMobile es una clase desarrollada en PHP que permite detectar dispositivos móviles y redireccionar a la versión de la web específica.

Aún no hemos podido comprobar la funcionalidad de esta clase pero por lo que parece indicar no es un sólo redireccionador de url atendiendo al dispositivo o browser sino que parece que puede modifica los enlaces al vuelo existentes en la página web para mantenerse en el formato apropiado del dispositivo.

http://code.google.com/p/cimobile/wiki/CiMobile

Páginas relacionadas con este artículo:

Botones en CSS3

dedavid — Sun, 09 Jan 2011 14:57:07 +0000

Sencilla colección de botones bajo CSS3 desde botones cuadrados a botones con esquinas redondeadas y estilo burbuja o bubble.

Puedes descargar la hoja de estilos CSS en el siguiente enlace.

http://horaciobella.com/zardi/

Páginas relacionadas con este artículo:

Uso de las webfonts de Google

dedavid — Thu, 16 Dec 2010 11:25:36 +0000

Hoy vamos a jugar un poquito con las fantanbulosas webfonts de Mr. Google

¿Qué que son las webfonts?

Eso se lo preguntas a Google. http://code.google.com/apis/webfonts/

¿Cómo funcionan?

Para usarlas debes incluir cada fuente tipografía webfont que quieras usar en la sección header del HTML con un:

Luego en la hoja de estilo de tu página la debes definir, recuerda también tirar de segundas opciones, tal como lo reflejamos aquí, aria o cualquier tipografía “serif” esto es más que nada porque hay navegadores viejos o paratos como el iPad on iOS 3.x a los que se le atragantan las Webfonts.

font-family: 'Orbitron', arial, serif;

¿Dónde previsualizarlas?

Supongo que como a mi, te interesa ver de forma rápida que fuentes hay por la red, que pinta hacen y tal para poderlas meter en tu página o blog, pues bien los chicos y chicas de Google te las muestran en la siguiente dirección:

http://code.google.com/webfonts

¿Dónde comparar las Google Fonts?

Como el visualizador de Google es quizá demasiado escueto te recomendamos otro que está algo mejor, no mucho, pero algo es algo dijo un geek cuando se encontró un byte en la sopa…

http://www.fontcomparer.com/

¿Donde estamos usando ya webfonts?

Nosotros hemos empezado a incorporarlas en un proyecto en el que estamos trabajando basado en ecOOmmerce.com nuestro software de tiendas virtuales.

Páginas relacionadas con este artículo:

CSS Reset

dedavid — Tue, 14 Dec 2010 08:37:22 +0000

Bueno hoy algo sencillito, un CSS reset de los de copipastear, es totalmente free y open source, yo por respeto al autor “Eric Meyer” dejo su referencia, pero si lo necesitais para un proyecto comercial lo podeis quitar sin tenerlo que refreir ni nada, a pedir de boca. Aquí va:

/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Páginas relacionadas con este artículo:

Plantillas de páginas web con HTML5

dedavid — Sun, 05 Dec 2010 22:52:09 +0000

Te traemos una plantilla bajo HTML5 lista para usar, tienes dos opciones una a 2 columnas, la típica con el tradicional menús superior y menú lateral y otra de tres columnas, algo más moderna y aprovechable en su distribución. Si bien fuera de blogs y a nivel de empresa siempre defenderé el formato de a 2, porque facilita la asimilación de contenidos.

La demo de la plantilla de 2 columnas:

http://www.webdezign.co.uk/blog/html5-examples/2col/

La descarga de la plantilla HTML5 a dos columnas:

http://www.webdezign.co.uk/blog/html5-examples/2col.zip

La demo de la plantilla de 3 columnas:

http://www.webdezign.co.uk/blog/html5-examples/3col/

La descarga de la plantilla HTML5 a 3 columnas:

http://www.webdezign.co.uk/blog/html5-examples/3col.zip

Páginas relacionadas con este artículo:

Recursos en HTML5 y CSS3

dedavid — Sun, 17 Oct 2010 18:18:17 +0000

Al rico recurso en HTML5 y CSS3:

HTML5 & CSS3 Resources for Designers
Updated: 2010-10-14 (new items highlighted below)
CSS3 Examples (including Media Queries)

http://thebox.maxvoltar.com/

http://hardboiledwebdesign.com

http://lostworldsfairs.com

http://www.informationarchitects.jp/

http://colly.com

http://hicksdesign.co.uk

http://jordandobson.com/better_rounded_border_demo/

http://www.designmadeingermany.de/magazin/5/

http://neography.com/experiment/circles/solarsystem/

http://neography.com/experiment/type1/

http://newadventuresconf.com/

http://maxvoltar.com/temp/nowplaying/

http://maxvoltar.com/sandbox/flipclock/

http://prandall.com/experimental/css3-backgrounds/

http://lab.simurai.com/css/umbrui/

http://trentwalton.com/css3/type/

HTML5 Examples (including Canvas)

http://www.chromeexperiments.com/

http://www.apple.com/html5/

http://www.apple.com/ipad/ready-for-ipad/

http://desandro.com/articles/close-with-canvas/

http://mezzoblue.github.com/PaintbrushJS/demo/

http://mugtug.com/sketchpad/

http://www.nihilogic.dk/labs/canvas2image/

http://www.rgraph.net/

http://videojs.com/

http://sublimevideo.net/

Tools, et al.

http://www.colorzilla.com/gradient-editor/

http://westciv.com/tools/

http://css3generator.com/

http://border-radius.com/

http://mothereffingtextshadow.com

http://modernizr.com/

http://selectivizr.com/

http://code.google.com/p/css3-mediaqueries-js/

http://code.google.com/p/ie7-js/

http://code.google.com/p/universal-ie6-css/

http://lessframework.com/

http://www.happyworm.com/jquery/jplayer/

http://macrabbit.com/cssedit/

http://html5reset.org/

http://html5boilerplate.com/

El aporte que HTML5 representa a los desarrolladores web

dedavid — Sun, 17 Oct 2010 10:57:35 +0000

Interesante artículo en mashable.com, en inglés, que nos habla sobre el aporte que representa desarrollar webs y aplicaciones web bajo HTML5:

http://mashable.com/2010/10/14/html5-developer-questions/

Páginas relacionadas con este artículo:

Representar teclas del teclado

dedavid — Wed, 06 Oct 2010 06:45:48 +0000

Hoy os traemos un CSS de un tal Michael Hüneburg que os permite displayar cómodamente combos de teclados, idóneas para manuales o instrucciones en formato HTML, típicas de “Presione CTRL + S para grabar…”

Este CSS convertirá esos textos en auténticas teclas de teclado estilo Apple Mac con teclado de aluminio, un CSS que ocupa na y menos y que por tanto podrás incorporar en tu propio CSS.

A continuación el código del CSS:

/**
 * KEYS.css
 *
 * A simple stylesheet for rendering beautiful keyboard-style elements.
 *
 * Author:  Michael Hüneburg
 * Website: http://michaelhue.com/keyscss
 * License: MIT License (see LICENSE.txt)
 */

/* Base style, essential for every key. */
kbd, .key {
	display: inline;
	display: inline-block;
	min-width: 1em;
	padding: .2em .3em;
	font: normal .85em/1 "Lucida Grande", Lucida, Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
	border: none;
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
kbd[title], .key[title] {
	cursor: help;
}

/* Dark style for display on light background. This is the default style. */
kbd, kbd.dark, .dark-keys kbd, .key, .key.dark, .dark-keys .key {
	background: rgb(80, 80, 80);
	background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
	color: rgb(250, 250, 250);
	text-shadow: -1px -1px 0 rgb(70, 70, 70);
	-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
}

/* Light style for display on dark background. */
kbd.light, .light-keys kbd, .key.light, .light-keys .key {
	background: rgb(250, 250, 250);
	background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
	color:  rgb(50, 50, 50);
	text-shadow: 0 0 2px rgb(255, 255, 255);
	-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
	box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
}

Te dejamos el enlace para la descarga: CSS teclas de teclado (70)

Páginas relacionadas con este artículo: