Historial de un navegante

by Angel

Archive for the ‘css’ Category

CSS Mini Reset

leave a comment »

Enlace recogido del twitter de anieto2k.

What is CSS Reset?

CSS Reset usually aims to reduce browser inconsistencies by evening up the CSS default settings in all browsers.

The most used CSS Rests are

Last week I spotted “CSS Reset – a simpler option” by Russ Weakley.

Russ made few smart observations: we don’t always need complete CSS reset because CSS Reset file can become very large and we often forget to set all the styles.

Also in my opinion we don’t always use all the CSS and HTML tags, when was the last time when you used “address” tag?

In many cases the complete CSS Reset makes perfect sense like in the case of some CSS Framework.

I used Eric Meyer Reset for my CSS Framework (Emastic and The Golden Grid).

In other my project complete CSS reset doesn’t make sense (MaloFormy1 line CSS Framework).

My point is different projects(sites) can be approached differently, and not always we need complete CSS reset.

I wanted to make Mini CSS Reset who will focus on the main CSS features like Divs , Tables and Forms who are also the most used CSS(HTML) elements.

And here is the result:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;
 vertical-align: top;
}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

You can compare:

You can use CSS Mini Reset when you actually don’t want to reset everything just the fundamental HTML elements.

Fork – Download CSS Mini Reset on github

Enlace | vcarrer

Anuncios

Written by Angel Flores

20 mayo 2010 at 22:42

Publicado en css, General

Tagged with ,

Adobe Air: 60 útiles aplicaciones para webmasters y diseñadores – Parte 2

with one comment

Leído en elwebmaster:

31. TiltShift Generator:

Si amas retocar tus fotografías, amarás esta aplicación. Te permite crear el famoso efecto Tilt Shift en tus imágenes con un solo clic.

Tomando capturas de pantalla

32. WebKut:

WebKut es una aplicación de escritorio simple y gratuita que permite obtener capturas de cualquier sitio web. Puedes capturar la pantalla completa o solo una parte.

33. Snippage:

Snippage te permite crear snippets de cualquier sitio web y ubicarlos en tu escritorio.

34. WebSnapshot:

Con WebSnapshot puedes obtener capturas de pantalla de tamaño thumbnail, navegador o pantalla completa de cualquier sitio. Las capturas se guardan automáticamente en la carpeta especificada.

35. PhotoTable:

PhotoTable es una herramienta única para capturar imágenes de la web, dónde simplemente puedes arrastrar una imagen de un sitio hacia el icono de PhotoTable y se guardará.

Herramientas de productividad

36. AgileAgenda:

AgileAgenda es una herramienta GTD que planea horarios para ti. Simplemente ingresa los factores básicos de tu proyecto y deja que la aplicación haga el esquema correspondiente.

37. Adobe Shortcut App for Creative Suite:

Esta herramienta permite crear y administrar atajos con facilidad. Es infaltable para un diseñador gráfico.

38. Live Presentations:

Live Presentations te permite crear y guardar presentaciones de forma local y exponerlas online.

39. Ora Time and Expense:

Ora Time es una herramienta simple para rastrear y generar esquemas de tiempo, facturas y reportes de expensas. También lo puedes utilizar para generar reportes personalizables y facturas para tus clientes.

40. Doomi:

Doomi es una de las herramientas más simples para crear tareas, programar recordatorios y lograr tus metas.

41. Mindomo:

Mindomo es una aplicación de mapeo mental para organizar tus ideas, administrar tareas y metas y hacer todo esto de forma visual.

42. FEAT:

Freelancer’s Estimation Assistance Tool te permite calcular los tiempos y estimativos para tu proyecto.

43. Klok:

Klok es una herramienta de rastreo de tiempo personal dónde todo lo que tienes que hacer es presionar un botón al comenzar a trabajar y presionar otro cuando terminas de trabajar. Otras propiedades incluyen arrastrar y soltar, exportaciones de Excel, archivo y vistas colapsadas.

44. Fireworks Auto Backup Utility:

Esta aplicación crea respaldos para todos los archivos PNG en los que se está trabajando con Fireworks, en caso de que falle.

45. Ephemeris:

Ephemeris es una aplicación para los fotógrafos que calculan el tiempo preciso de la salida y la puesta del sol para sacar la foto perfecta.

46. BroadChoice Workspace:

BroadChoice workspace es una herramienta de colaboración de equipo basada en AIR. Puedes mandar mensajes a tu equipo, compartir notas y tareas y crear espacios separados para diferentes proyectos.

47. ConceptShare Desktop Companion:

ConceptShare te permite cargar imágenes, administrar trabajos de espacio y obtener actualizaciones de estos.

Herramientas para compartir imágenes

48. zFlick:

Una aplicación simple pero genial para visualizar y guardar imágenes de Flickr en tu escritorio. Simplemente arrastra cualquier imagen de Flickr y suéltala en la carpeta que desees para guardarla.

49. FlickrFlipper:

FlickrFlipper es otra gran herramienta para buscar imágenes de Flickr. Incluso te permite buscar a través de usuarios específicos.

50. TinyUploads:

TinyUploads te permite redimensionar y cargar imágenes en sólo segundos. Puedes embeber directamente imágenes en tu blog o cualquier otra página web.

51. Flickr Desktop Search:

Flickr Desktop Search es una simple pero poderosa herramienta de búsqueda para Flickr.

52. Snoto:

Snoto te permite navegar a través de tus fotos recientes de Flickr, o las imágenes que cualquier otro usuario haya cargador. También las puedes visualizar como una diapositiva.

53. Destroy Flickr:

Destroy Flickr permite la administración de la cuenta Flickr de una forma completamente libre de problemas.

Aplicaciones multimedia

54. RichFLV:

RichFLV te permite jugar con y editar los archivos FLV con facilidad. También puedes utilizar la aplicación para convertir archivos FLV a SWF y convertir audio en MP3.

55. Fractal4D:

Fractal4D es una aplicación genial para dibujar remolinos que pueden ser salvados como simples archivos PNG o exportarlos como vectores para utilizar en Adobe Illustrator.

56. SWF Shot:

SWF Shot te permite generar capturas de pantalla de alta resolución a través de tu contenido SWF, PNG y JPG.

57. UVLayer:

UVLayer te da la posibilidad de organizar y jugar con tu media digital, incluyendo fotos, videos y juegos.

58. Adobe Media Player:

Un gran reproductor multimedia que te permite reproducir tus descargar o archivos multimedia escuchados sin inconvenientes. Altamente personalizable.

59. LightBoxer:

LightBoxer te brinda un showcase constantemente cambiante de imágenes de alta calidad como protector de pantalla.

60. Webcam To GIF:

Webcam To GIF te permite capturar algo con tu cámara web y convertirlo en un archivo GIF.

Existen una tonelada más de aplicaciones AIR ¿Ustedes cuál recomiendan?

Enlace | elwebmaster | Pro Blog Design

Written by Angel Flores

6 enero 2010 at 11:04

Cómo usar variables de PHP en tus estilos CSS

leave a comment »

Leído en elwebmaster:

Cuando se le pregunta a los diseñadores qué nuevas funcionalidades quisieran añadir a las futuras versiones de CSS, siempre surge la idea de "variables".

Al día de hoy esto no se considera una práctica ni buena ni mala, aunque muchos optan por usar variables de php en sus estilos css. El principal motivo es el grado de abstracción que nos permite trabajar de esta forma. ¿Estás dispuesto a conocer cómo implementar esta técnica?

Style.php

En lugar de utilizar la extensión de archivo .css, utiliza .php

Content-type

Al comienzo de tu nuevo archivo style.php setea el tipo de contenido de nuevo como CSS:

  1. header("Content-type: text/css; charset: UTF-8");
  2. ?>

Setea las variables

Ahora puedes setear variables para lo que quieras, por ejemplo:

  1. header("Content-type: text/css; charset: UTF-8");
  2. $colorMarca = "#990000";
  3. $colorLinks = "#555555";
  4. $urlBase = "http://cdn.blahblah.net";
  5. ?>

Usando las variables

Debajo del código PHP, puedes comenzar con el CSS común y corriente, sólo que ahora también puedes usar PHP para imprimir el contenido de esas variables.

  1. #header {
  2. background: url("/images/header-bg.png") no-repeat;
  3. }
  4. a {
  5. color: ;
  6. }
  7. ul#main-nav li a {
  8. color: ;
  9. }

Ir más allá/Otras ideas

  • Además de esto, podrías también comprimir el CSS con PHP.
  • En teoría, podrías tomar el user agent y tratar de cargar estilos específicos para cada navegador.
  • Obtener la fecha/hora y cambiar el diseño de tu sitio según las estaciones o los distintos momentos del día.
  • Genera un número random y utilízalo para setear una imagen de fondo al azar en tu cabecera.

¿No funciona?

Si no funciona puede que la solución sea dejar el nombre del archivo como style.css, y utilizar .htaccess para que sea analizado como PHP. Simplemente asegúrate de incluir este código en el archivo .htaccess (sólo para servidores Apache) en el mismo nivel del directorio en que se encuentra el archivo CSS. Luego, sólo utiliza PHP dentro, de la misma forma en que lo harían con cualquier otro archivo PHP.

  1. SetHandler php5-script

Enlaces | CSS-Tricks | elwebmaster

Written by Angel Flores

6 enero 2010 at 10:59

Publicado en css, diseño web

Tagged with , ,

Adobe Browserlab

leave a comment »

Una nueva aplicación Web hecha en Flex que nos permite ver nuestra web en los diferentes exploradores y sistemas operativos, herramienta de visualización y de comparación destinada tanto para diseñadores como para programadores, que nos puede ayudar a ver la reacción de cada una de nuestras web en cada explorador.

Exploradores que soporta:

  • Firefox 2.0 – Windows XP
  • Firefox 2.0 – OS X
  • Firefox 3.0 – Windows XP
  • Firefox 3.0 – OS X
  • Internet Explorer 6.0 – Windows XP
  • Internet Explorer 7.0 – Windows XP
  • Safari 3.0 – OS X

También incluye una extensión para Dreamweaver: BrowserLab MXP extensions

Enlace | Adobe Browserlab

Written by Angel Flores

10 diciembre 2009 at 12:19

Es compatible con CSS el navegador que usas

with one comment

Visita este enlace para saber si el navegador que usas normalmente es compatible con CSS.

http://www.css3.info/selectors-test/test.html

Enlace | CSS3

Written by Angel Flores

9 diciembre 2009 at 22:18

Publicado en css, navegadores

Tagged with , ,

Complemento FireFox: CSS Usage 0.2.1

with one comment

CSS Coverage es un complemento para Firebug que permite que puedas buscar en multiples páginas de tu sitio web para ver que reglas de CSS estás usando en el sitio web.

Este complemento necesita que tengas instalado Firebug.

¿Cómo funciona?
– Abre una página del sitio web que quieras comprobar y pulsa el botón “Scan” en la pestaña de “CSS Coverage” de Firebug.
– En el caso de que uses Ajax o DHTML, puedes abrir muchos divs/popups/ como quieras y pulsa el botón “Scan” de nuevo.

– Visitar otras páginas del sitio web y pulsa “Scan” de nuevo.

Cada vez que pulses “Scan”, los ficheros CSS son incluidos en la página actual.

Written by Angel Flores

5 diciembre 2009 at 11:17

IE9: Una vista al futuro de Internet Explorer

with one comment

He visto este post que me parece interesante en anieto2k sobre como se plantea el nuevo la nueva versión del Internet Explorer 9.

Desde microsoft, son conscientes de que el navegador necesita un cambio, y principalmente de imagen ya que entre los desarrolladores no podría tener peor fama.

Dean_PDC_2

Para hacer frente a las nuevas aplicaciones web, cargadas de Javascript, IE8 mejoró algo el tiempo de proceso frente a los resultados obtenidos por su versión anterior, como vemos en la imagen.

Por otro lado, el más importante, la adopción de estándares asoma un triste 32/100 en los resultados actuales de Acid3 con la versión de desarrollo, que aunque se trata de un resultado muy inferior a sus contrincantes (que hace ya tiempo lo pasaron al 100%), nos permite vislumbrar una pequeña mejoría que quiero coger con ilusión.

Dean_PDC_4

Como vemos en la imagen, border-radius pasará a formar parte de las nuevas funcionalidades disponibles en esta última versión que junto a los selectores CSS3 y el almacenamiento DOM hará que IE9 parezca hasta un navegador

 

Fuente | anieto2k

 

Written by Angel Flores

22 noviembre 2009 at 10:55