CSS Frameworks II

Tags: ,

Bueno, continuare hablando un poco más acerca de los CSS Frameworks, hablaré en un principio sobre Global Reset y por último mostraré un par de Frameworks CSS ya desarrollados.

Como hablaba en el post anterior, el Global Reset es necesario para para que nuestro sitio web luzca de alguna manera parecida en varios navegadores, ya que por defecto los navegadores vienen con valores diferentes para la margin, el padding, el line-height, etc. El Global Reset se asegura que en un principio tengamos las mismas reglas de juego para empezar a diseñar.

Personalmente me gusta usar el CSS Reset Reloaded de Eric Meyer:


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,
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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

Sin embargo existen muchos otros:

[Leer mas]

CSS Frameworks I

Tags:

Sonará muy extraño esto de CSS frameworks, pero creo que es el nombre mas adecuado, según la definición de Wikipedia:

En el desarrollo de software, un framework es una estructura de soporte definida en la cual otro proyecto de software puede ser organizado y desarrollado. Típicamente, un framework puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros software para ayudar a desarrollar y unir los diferentes componentes de un proyecto.

Apenas me dí cuenta esta que también podiamos tener frameworks para CSS, es curioso porque yo ya venia utilizando esto de alguna manera en mi proyecto actual (el theme de este blog), lo que estaba haciendo era simplemente separar el style.css en 2 partes, una parte que contenia las reglas generales, el layout, las reglas tipográficas y las reglas para los forms, la otra parte contenia los colores e imagenes, con esto lo que esta haciendo era dejar el Style.css intacto y cada vez que quisiera tener un nuevo diseño basado en la misma estructura, simplemente creaba una nueva hoja de estilo en la que modificada un par de líneas de CSS y ya.

Rebujando en unas de las páginas con mas recusos que conozco, me encontré con un post que me dejo mal parado porque ya lo habian descubierto primero que yo :S, y pues me puse a ver y era algo lógico que debí haber hecho hacia muchisimo tiempo, cada vez que inicio un nuevo proyecto toca iniciar con una hoja de estilos en blanco (lo que no es muy alentador) y empezar a repetir muchas líneas que antes también me habia tocado digitar.

Al grano, no es necesario ser grandes expertos para crear nuestros propios CSS Frameworks, es tan simple como aplicar un poco de lo que yo hice y un poco más de habilidad, podemos en vez de tener 1 hoja de estilos con n-mil líneas de código, tener varias divididas así por ejemplo:

  • reset.css: Estoy segurisimo que muchos no saben que es necesario tener esto del reset, es fundamental para que nuestro sitio web luzca de alguna manera parecido en varios navegadores. Por defecto los navegadores vienen con valores diferentes para la margin, el padding, el line-height, etc, por esta razón es necesario un Reset Global.
  • general.css: Algunas normas generales.
  • layout.css o grid.css: Reglas para los layouts.
  • form.css: Para el estilo de nuestro formularios.
  • ie.css: Donde indicaria los cambios que son necesarios para este problematico “navegador”.

Este es un pequeño ejemplo de como podria crear su propio framewok, sin embargo puede ir mucho mas allá y crear muchas otras hojas de estilo, por ejemplo una print, una para dispositivos móviles, entre otras.
[Leer mas]

How to: Colorzilla en Mozilla Firefox con Gutsy

Tags: , ,

Bueno, no se si muchos habrán tenido este mismo problema, cuando instalamos Ubuntu la versión de Mozilla Firefox que viene instalada por defecto es por asi llamarme una versión especial, que viene adecuada para que el plugin de Shockwave y el sonido funcionen correctamente, el problema, es que esta versión tiene ciertas incompatibilidades con ciertos plugins como el Colorzilla, el DownThemAll, entre otros.

Acá les traigo una breve pero efectiva solución que se encuentra en la libreria libxpcom.

  1. Descargarse la versión oficial de Mozilla Firefox.
  2. Desempaquetamos el archivo y buscamos los siguiente archivos:
    • libxpcom.so
    • libxpcom_compat.so
    • libxpcom_core.so
  3. Vamos hasta la carpeta desempaquetada de MF
    [code]cd /path/to/firefox[/code]
  4. Copiamos como root los archivos, nuestro navegador crasheara, asi que tendremos que reiniciar
    [code]sudo cp libxpcom* /usr/lib/firefox[/code]
  5. Por ultimo simplemente instalamos Colorzilla desde la página oficial.
  6. Y listo, a disfrutar de este espectacular Add-On

Cabe anotar que el tutorial original lo saque de acá, al parecer después de hacer esto otros plugins empezaban a funcionar mal, con la versión 2.0.0.12 ya todo corre perfectamente.

Microsoft y el Software Gratuito

Tags: , , , , , , , ,

Microsoft anunció que proveerá de acceso libre a herramientas utilizadas para diseñar y desarrollar software a estudiantes secundarios y universitarios. Este lanzamiento posibilitará a los estudiantes utilizar las herramientas de desarrollo y diseño para crear aplicaciones de software, diseñar páginas web o crear nuevos juegos para la Xbox 360.

A través de la web Channel 8 los estudiantes de España, Bélgica, China, Finlandia, Francia, Alemania, Suecia, Suiza, el Reino Unido y los Estados Unidos tendrán a su disposición los siguientes productos:

  • Visual Studio 2005 Professional Edition
  • Visual Studio 2008 Professional Edition
  • Windows Server 2003 Standard Edition
  • SQL Server 2005 Developer Edition
  • Expression Studio
  • XNA Game Studio 2.0

Además, también están disponibles desde la misma web los productos gratuitos:

  • Visual C# 2005 Expresss Edition
  • Visual C++ 2005 Expresss Edition
  • Visual Basic 2005 Expresss Edition
  • Visual J# 2005 Expresss Edition
  • Visual Web 2005 Expresss Edition
  • SQL Server 2005 Express Edition
  • Virtual PC

Todo lo que sea gratis sirve, venga del que venga, desgraciadament, desgraciadamente no todos podemos disfrutar de estas descargas…

Más Info: Welcome to Microsoft DreamSpark

KToon, Herramienta Libre de Animación en 2D

KToon es una herramienta para desarrollo de animación en 2D, diseñada por animadores (Toonka Films ) para animadores, enfocada a la industría de la animación profesional. Este proyecto está cubierto por la Licencia GPL usando G++, OpenGL y QT como recursos de programación desde KDevelop como plataforma de desarrollo. Por ahora, KToon sólo está disponible para sistemas Unix, pero esperamos portarlo a otros sistemas operativos también.

Ktoon_2D
La meta principal de este sitio es proveer recursos (Pantallas, Lista de Correos, BugTracker, Wiki, etc) para la comunidad de KToon, con el fin de impulsar el desarrollo de esta herramienta con la ayuda de usuarios y programadores alrededor del mundo.
Requerimientos mínimos:

  • Cualquier Sistema Operativo Unix (Si es libre, mejor!)
  • QT 4.0 o superior
  • 256 MB en RAM
  • 800Mhz o superior (Velocidad de Procesador)
  • Espacio en Disco: Al menos 5 MB libres

[Leer mas]

Antes de irte

¿Ya te vas? Aqui encontraras cosas interesantes