martes, febrero 16, 2010

Framework YUI creado por Yahoo!

Layouts con el framework YUI


El último componente CSS de YUI es grids.css, una hoja de estilos sencilla que permite crear más de 1.000 layouts diferentes. Diseñar layouts con YUI es muy sencillo y tiene la ventaja de que todos los diseños se ven exactamente igual en cualquier versión de cualquier navegador.

Primeros pasos

YUI recomienda utilizar un DOCTYPE que asegure que el navegador muestra sus contenidos en el modo standards en vez del modo quirks. De hecho, Yahoo! utiliza el siguiente DOCTYPE en todos los sitios diseñados con YUI:


"http://www.w3.org/TR/html4/strict.dtd">

No obstante, ten en cuenta que el DOCTYPE anterior corresponde a una página HTML y por tanto, no es válido si utilizas XHTML en tus páginas. Si se quiere emplear YUI en páginas XHTML puedes utilizar uno de los dos siguientes DOCTYPE:



"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Antes de crear layouts con el componente grids.css, es necesario enlazar su hoja de estilos:

 rel="stylesheet" type="text/css" href="css/grids-min.css">

La hoja de estilos también se puede enlazar directamente desde los servidores de Yahoo!:

 rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/grids/grids-min.css">

El componente grids.css depende de los valores iniciales establecidos por el componente fonts.css, por lo que también es necesario enlazar este último. Como las páginas diseñadas con YUI también utilizan el componente reset.css, es habitual utilizar la hoja de estilos global que incluye estos tres componentes individuales:

<link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css">

Para obtener el máximo rendimiento también es posible enlazar esta hoja de estilos completa directamente desde los servidores de Yahoo!:

 rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">

Página, plantilla y rejilla


YUI recomienda utilizar la siguiente estructura general en las páginas Webs:





</span></span>Página diseñada con YUI<span class="sc2"><span class="kw2">
rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc">

id="hd">



id="bd">




id="ft">





La página se divide en tres partes:

  • Cabecera (#hd): zona en la que se incluyen normalmente los elementos invariantes de la página tales como el logotipo, el buscador y el menú principal de navegación.
  • Cuerpo (#bd): zona en la que se incluyen todos los contenidos específicos de la página. Se trata de la zona más importante y la que suele tener una estructura más compleja.
  • Pie (#ft): zona en la que se incluyen otros elementos invariantes de la página que son de menor importancia, tales como el aviso de copyright, enlaces a las secciones de contacto, privacidad, términos y condiciones y otros elementos que dependen del tipo de página.

La división anterior es la más recomendada porque es la que YUI utiliza por defecto. Además, se trata de una división válida para la inmensa mayoría de sitios web y ayuda a estructurar los contenidos de la página de forma lógica. No obstante, dividir las páginas de esta forma no es obligatorio y YUI permite crear layouts sin utilizar esta estructura.

Los nombres utilizados como identificador de cada elemento (#hd de header o cabecera, #bd de body o cuerpo y #ft de footer o pie) también se pueden modificar, aunque los valores indicados anteriormente son los únicos que funcionan sin realizar ningún cambio. Además, como son valores muy cortos, permiten crear reglas CSS muy concisas.

Antes de diseñar layouts con YUI es necesario comprender las partes en las que YUI divide la estructura de una página:

Página, plantilla y rejilla en los layouts de YUI

Página, plantilla y rejilla en los layouts de YUI

YUI divide la estructura de una página en tres partes:

  • Página: establece la anchura total de la página y su comportamiento (anchura fija o variable). Utiliza los selectores #doc, #doc2, #doc3 y #doc4.
  • Plantilla: establece la división en columnas del cuerpo de la página. Utiliza los selectores .yui-b, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5 y .yui-t6.
  • Rejilla: establece las divisiones internas de cada columna. Utiliza los selectores .yui-u, .yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf.

Página

La primera parte de la estructura de la página es la propia página, concretamente su anchura y su comportamiento. YUI incluye por defecto cuatro tipos de páginas que corresponden a los diseños más utilizados hoy en día:


Selector Características de la página Recomendada para
#doc Centrada, anchura 750px Resolución de 800x600 o superior
#doc2 Centrada, anchura 950px Resolución de 1024x768 o superior
#doc3 Anchura 100% Cualquier resolución
#doc4 Centrada, anchura 974px Resolución de 1024x768 o superior
Nota

El diseño #doc3 en realidad no ocupa el 100% de la página, ya que incluye 10px de margen izquierdo y otros 10px de margen derecho. De esta forma se evita que los contenidos de la página puedan llegar a invadir el espacio ocupado por el propio navegador. No obstante, si quieres eliminar estos márgenes laterales tan sólo debes añadir la siguiente regla CSS en la hoja de estilos propia de la página: #doc3 { margin: auto; }

Para utilizar una u otra página, sólo es necesario cambiar el atributo id del elemento

que encierra todos los contenidos. El ejemplo mostrado anteriormente utiliza el selector #doc, correspondiente a una página de anchura fija de 750px:






</span></span>Página diseñada con YUI<span class="sc2"><span class="kw2">
rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc">
...




Si se quiere modificar la página anterior para que su anchura sea del 100%, sólo es necesario modificar ligeramente el selector del elemento

que encierra a todos los contenidos:





</span></span>Página diseñada con <span style="font-weight: bold;">YUI</span><span class="sc2"><span class="kw2">
<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc3">
...


Aunque los cuatro tipos de página incluídos en YUI corresponden a los diseños más utilizados, también es posible crear una anchura de página completamente personalizada. Como las anchuras de página en YUI se establecen mediante la unidad de medida em, el proceso requiere realizar alguna operación matemática.

Para obtener la anchura en em, divide la anchura deseada en píxeles por 13. Para el navegador Internet Explorer es preciso dividir la anchura en píxeles por 13.3333. Si por ejemplo se quiere establecer una anchura de página de 1300px, el cálculo que se debe realizar es el siguiente:

  • Navegador Internet Explorer: 1300 / 13.3333 = 97.50. Por tanto, la anchura de página es 97.50em.
  • Resto de navegadores: 1300 / 13 = 100. Por tanto, la anchura de página es 100em.

Una vez calculada la anchura en em, se utiliza la siguiente regla CSS para crear el tamaño de página propio:

#doc-propio {

text-align:left; /* obligatorio */
margin:auto; /* para centrar la página */
width: 100em; /* resto de navegadores */
*width: 97.50em; /* navegador Internet Explorer */
min-width: 1300px; /* opcional, pero recomendada */
}

La propiedad text-align: left es obligatoria para mostrar el texto alineado a la izquierda, ya que en la hoja de estilos grids.css el elemento establece la propiedad text-align: center;. La propiedad margin: auto sólo es necesaria si se quiere centrar la página respecto de la ventana del navegador.

La anchura de todos los navegadores menos Internet Explorer se establece directamente mediante la propiedad width. En el caso de Internet Explorer, su anchura se establece mediante un hack muy conocido que hace que sólo Internet Explorer interprete la propiedad *width. Esta propiedad *width siempre se debe incluir después de la propiedad width.

Por último, la propiedad min-width es opcional, pero se recomienda establecerla con el mismo valor de la anchura en píxeles. Su función es evitar que la estructura de la página se rompa cuando la ventana del navegador reduce su tamaño.


Plantilla

El siguiente nivel en el que divide YUI la estructura de una página es la plantilla, que está formada por las columnas de contenidos de la página. Normalmente, las páginas disponen de una zona central de contenidos y otra zona lateral con otros contenidos secundarios.

YUI permite crear estructuras de páginas con dos columnas de diferentes anchuras y en diferentes posiciones (izquierda o derecha). En primer lugar se definen las columnas de la página mediante lo que YUI llama bloques. Cada bloque se crea mediante un elemento

con la clase yui-b. En el siguiente ejemplo se supone que la página está formada por dos columnas, por lo que se crean dos bloques dentro del cuerpo de la página:





</span></span>Página diseñada con YUI<span class="sc2"><span class="kw2">
rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc">
id="hd">

id="bd">

class="yui-b">...

class="yui-b">...


id="ft">



Indicar que la página tiene dos bloques no es suficiente, ya que también es necesario indicar cuál de los dos bloques es el principal. Para ello, se encierra el bloque principal con otro elemento

cuyo id es yui-main:





</span></span>Página diseñada con YUI<span class="sc2"><span class="kw2">
rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc">
id="hd">

id="bd">

id="yui-main">
class="yui-b">



class="yui-b">



id="ft">



Nota

La forma en la que está diseñado YUI permite que el orden en el que se definen sus bloques en el código HTML sea independiente a su visualización. Algunos diseñadores prefieren colocar el lateral secundario lo antes posible dentro del código HTML, ya que suele incluir el menú de navegación y por razones de accesibilidad y de SEO es recomendable que aparezca lo antes posible. Con YUI es posible incluir el bloque secundario en primer lugar en el código HTML con la seguridad de que se visualizará correctamente en la posición establecida.


Después de crear los bloques de la página y después de indicar cuál es el bloque principal, el siguiente paso consiste en utilizar la plantilla adecuada para establecer las anchuras de cada bloque y su posición. YUI incluye por defecto seis tipos de plantillas, que corresponden a los diseños más comunes y están preparados para mostrar los formatos publicitarios más utilizados:

Selector Características de los bloques
.yui-t1 Lateral de 160px a la izquierda
.yui-t2 Lateral de 180px a la izquierda
.yui-t3 Lateral de 300px a la izquierda
.yui-t4 Lateral de 180px a la derecha
.yui-t5 Lateral de 240px a la derecha
.yui-t6 Lateral de 300px a la derecha

Nota

Existe una séptima plantilla especial que utiliza el selector .yui-t7 y que se puede emplear en las páginas que no están divididas en columnas o bloques.

Si la página ya ha definido sus bloques, utilizar una plantilla u otra es tan sencillo como modificar el valor de la clase del elemento

que encierra a todos los contenidos:





</span></span>Página diseñada con YUI<span class="sc2"><span class="kw2">
rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc" class="yui-t">
id="hd">

id="bd">

id="yui-main">
class="yui-b">



class="yui-b">



id="ft">



A continuación se modifica la página anterior para utilizar la plantilla que muestra el lateral a la derecha y con una anchura de 300px:





</span></span>Página diseñada con YUI<span class="sc2"><span class="kw2">
rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc" class="yui-t6">
id="hd">

id="bd">

id="yui-main">
class="yui-b">



class="yui-b">



id="ft">



Las plantillas ofrecidas por YUI son las más utilizadas en el diseño web, pero en muchas ocasiones las páginas presentan otras estructuras más complejas. Cuando la estructura está dividida en más columnas, no se utilizan las plantillas, sino que se define directamente una rejilla.


Rejilla

El tercer elemento que forma la estructura de las páginas en YUI es la rejilla, que permite realizar diseños mucho más complejos que los que se realizan úncamente con las plantillas. La estructura en rejilla se puede utilizar junto con las plantillas o de forma independiente.

Las rejillas permiten crear divisiones muy complejas y se definen mediante dos elementos:

  1. El contenedor de la rejilla establece el tipo de división.
  2. Las unidades son los elementos individuales en los que está dividida la rejilla.

La rejilla más utilizada y más sencilla es .yui.g, que divide un elemento en dos partes iguales. El código HTML necesario es el siguiente:

class="yui-g">
class="yui-u">

class="yui-u">

El elemento

crea una nueva división o rejilla. Como se trata de una división en dos partes iguales, en su interior se deben definir dos unidades mediante
. Además, YUI obliga a indicar explícitamente cuál de las dos unidades es la primera mediante la clase first. De esta forma, el código correcto del ejemplo anterior se muestra a continuación:

class="yui-g">
class="yui-u first">

class="yui-u">

La siguiente tabla muestra las seis rejillas incluidas por defecto en YUI y sus características:

Selector Tipo de división
.yui.g 2 unidades a partes iguales (1/2, 1/2)
.yui.gb 3 unidades a partes iguales (1/3, 1/3, 1/3)
.yui.gc 2 unidades (2/3, 1/3)
.yui.gd 2 unidades (1/3, 2/3)
.yui.ge 2 unidades (3/4, 1/4)
.yui.gf 2 unidades (1/4, 3/4)

Utilizando varias de las rejillas predefinidas es posible crear estructuras de página muy complejas. El siguiente ejemplo muestra el código de una página cuyo cuerpo está dividido en dos columnas en su parte superior y en tres columnas en su parte inferior:





</span></span>Página diseñada con YUI<span class="sc2"><span class="kw2">
rel="stylesheet" type="text/css" href="reset-fonts-grids.css">


id="doc" class="yui-t7">
id="hd">

id="bd">

id="yui-main">
class="yui-b">

class="yui-g">
class="yui-u first">

class="yui-u">




class="yui-gb">
class="yui-u first">

class="yui-u">

class="yui-u">




class="yui-b">


id="ft">



Combinando las rejillas básicas se pueden obtener otro tipo de rejillas muy utilizadas. La rejilla 1/4, 1/4, 1/4, 1/4 se puede obtener combinando dos rejillas 1/2, 1/2:

...

id="bd">

id="yui-main">
class="yui-b">

class="yui-g">
class="yui-u first">


class="yui-g">
class="yui-u first">

class="yui-u">





class="yui-u">


class="yui-g">
class="yui-u first">

class="yui-u">








class="yui-b">


...

...

Crear estructuras complejas con YUI es realmente sencillo aunque requiere de un período de aprendizaje. Por ese motivo, para los diseñadores que están empezando puede ser de utilidad la herramienta YUI: CSS Grid Builder que permite configurar la estructura de la página de forma gráfica.


fuente: http://librosweb.es/css_avanzado/


Frameworks o "Marco de trabajo" en webs

Los frameworks se utilizan en el ámbito de la programación de aplicaciones desde hace décadas. Recientemente han comenzado a utilizarse para programar y diseñar aplicaciones web, por lo que ya existen decenas de frameworks para CSS.

Genéricamente, un framework es un conjunto de herramientas, librerías, convenciones y buenas prácticas que pretenden encapsular las tareas repetitivas en módulos genéricos fácilmente reutilizables.

De la misma forma, un framework CSS es un conjunto de herramientas, hojas de estilos y buenas prácticas que permiten al diseñador web olvidarse de las tareas repetitivas para centrarse en los elementos únicos de cada diseño en los que puede aportar valor.

¿Qué aporta a un diseñador descubrir en cada diseño que debe neutralizar los estilos por defecto que aplican los navegadores? ¿Qué aporta un diseñador que se dedica continuamente a resolver los mismos problemas que se producen al crear layouts complejos? ¿Por qué el diseñador se dedica a tareas y problemas que han sido resueltos satisfactoriamente hace mucho tiempo?

Los frameworks CSS más completos incluyen utilidades para que el diseñador no tenga que trabajar en ningún aspecto genérico del diseño web. Por este motivo, es habitual que los mejores frameworks CSS incluyan herramientas para:

  • Neutralizar los estilos por defecto que aplican los navegadores. Se trata de la habitual hoja de estilos reset.css que todos los diseñadores profesionales utilizan.
  • Manejar correctamente el texto, de forma que todos los contenidos se vean exactamente igual en todos los navegadores y que sean adaptables para mejorar su accesibilidad y permitir su acceso en cualquier medio y/o dispositivo.
  • Crear cualquier estructura compleja o layout de forma sencilla, con la seguridad de que funciona correctamente en cualquier versión de cualquier navegador.

Actualmente existen decenas de frameworks CSS, tal y como se recoge en la página List of CSS frameworks de la Wikipedia.

miércoles, febrero 10, 2010

Avidemux: Editor de video

avidemux

Avidemux te permite editar videos y agregarle diferentes efectos que ya trae dentro del programa. También trae diferentes codecs para codificar el video con mejor calidad.

Avidemux es muy útil también para agregar subtítulos para cualquier video. Aquí te enseñaremos cómo hacerlo:

1. Abro el programa en Aplicaciones>Sonido y vídeo>Avidemux(GTK+) (GNOME) o escribiendo avidemux y pulsando Ejecutar en el cuadro que aparece al utilizar la combinación de teclas Atl+F2

2. Cargo la película arrastrando y soltando el archivo de la misma sobre el área de la ventana del programa. Si pregunta por el mapa vbr o el index hacer clic en

3. En la barra de menús hago clic en Vídeo>Filtros o pulso la combinación de teclas Ctrl+Alt+F

avidemux3

4. En el cuadro de diálogo que aparece hago clic en la pestañaSubtítulos

5. En el área de la derecha escojo con un doble clic para editar la opción más conveniente, generalmente será la primera Subtítulos, para añadir los subtítulos desde un archivo .srt o .sub

avidemux

6. En el cuadro de diálogo que aparece escojo la ruta hasta el archivo de subtítulos que deseo añadir al vídeo, el tipo de letra, la codificación el color y el tamaño de la tipografía

7. Marco también la opción Autodividir para que el programa inserte automáticamente los saltos de línea en las frases demasiado largas

8. Aceptar

9. En el botón Previsualizar compruebo que las elecciones echas son las buenas, en especial la de codificación para que aparezcan correctamente acentos y signos de puntuación. En caso de que algo no me convenza vuelvo al paso anterior para probar otras opciones

10. Cerrar

11. En la parte izquierda de la ventana de Avidemux, en la opciónVídeo, escojo un codec de vídeo para que recodifique

avidemux4

12. Pulso en el botón Guardar y escojo el nombre del vídeo con la extensión correspondiente (.avi)

avidemux5

Y pista.

avidemux2


sábado, febrero 06, 2010

Adobe Photoshop & Dreamweaver 8 Ubuntu 9.10 Karmic

Hoy vamos a hablar de como instalar Adobe Photoshop en Ubuntu, para quien le interese, de igual manera, se puede instalar Macromedia Dreamweaver. En mi caso, yo lo he probado con Photoshop CS2 y con Dreamweaver 8, y funcionan perfectamente.

A qué viene este tutorial?. Alomejor muchos piensas que estoy menospreciando aplicaciones nativas de Ubuntu, como puede ser Gimp o Quanta Plus entre otros, pero esa no es mi intención ni mucho menos, todos sabemos que Gimp es el sustituto perfecto para Photoshop, pero este tutorial va dedicado sobretodo a esa gente que tiene miedo a pasarse a este mundo, ya que está acostumbrado a utilizar herramientas que no tienen soporte para Linux como puede ser Photoshop, (a mi me pasó en su dia).

Pues bien, para poder instalar Photoshop en Ubuntu, primero de todo necesitamos instalar WINE, quien no sepa que es Wine, solo decir que es un software de código libre, lógicamente, para poder correr aplicaciones de Windows en nuestro querido Ubuntu.

Para ello:

  • Abrimos una consola
  • sudo apt-get install wine
  • Ingresamos nuestro password de superusuario
  • Y ya tenemos instalado Wine

Pasamos a configurar Wine, para ello, ejecutamos en una consola $ winecfg, y en versión a imitar ponemos Windows XP.

winecfg

Una vez instalado y configurado Wine, podemos pasar a instalar Photoshop:

- Bien teniendo el .exe y ejecutando en una terminal: $ wine /ruta_archivo/installer.exe

- Bien instalando una herramienta llamada Wine-Doors, la cual nos proporciona los ejecutables de Photoshop, Dreamweaver, así como otros (flash, juegos, windows media…), es decir, facilita la instalación de programas en Wine.

Para instalar Wine-Doors:

  • Accedemos a la web oficial de Wine-Doors, sección Download
  • Descargamos el .deb de la última versión (wine-doors_0.1.3_all.deb)
  • Una vez descargado lo instalamos con un simple doble click
  • Y ya tenemos instalado Wine-Doors

Para acceder a Wine Doors vamos a Aplicaciones/Wine/Wine-Doors o ejecutamos en la consola $ wine-doors, y ahí nos aparecerá el listado de programas disponibles para su instalación.

wine-doors

Buscamos el programa que queramos instalar, en nuestro caso photoshop.

Clicamos en Instalar, Aplicar, y automáticamente, comienza a descargarse el programa y a instalarse. (Ahora falta activarlo, pero ahí ya cada uno con su conciencia :P )

Una vez instalado ya podemos trabajar con el con total normalidad.

photoshop

Espero que os sea de ayuda para el más que aconsejable cambio de Windows a Ubuntu (en mi caso). Mi recomendación es ir migrando poco a poco, no sea que se te vaya a crear un trauma, :D .

Pd: Ahora poco a poco, toca quitarnos esta Photodependencia, ya que tenemos la gran opción de utilizar Gimp. Pero eso, poco a poco.

Un saludo a todos!!.


FUente: http://www.mundoware.es/2009/11/14/adobe-photoshop-en-ubuntu-karmic/

Publicado por Juanan