blender. Proyeccion ortografica y en perspectiva

En la vista 3d tenemos los objetos tridimensionales, pero nuestra humilde pantalla tenemos un plano.
Los objetos 3d se proyectan en el plano, pero hay varias formas de "ver" esta proyeccion.

Proyección en prespectiva:
Una es como si tuvieramos un plano entre la realidad y nuestros ojos y de todo punto de la realidad trazaramos una recta a nuestro ojo y dibujaramos el punto en el plano.

Los objetos mas lejanos se verían mas pequeños, que es lo que en realidad pasa.

Proyección ortogonal:
Ponemos un plano entre nuestros ojos y la realidad, y de todo punto de la realidad trazamos una recta perpendicular (ortogonal) al plano, y dibujamos el punto.
En este tipo de proyeccion, los objetos mas lejanos y mas cercanos tienen el mismo tamaño.
En este tipo de proyección es quizas mas facil de trabajar. Aunque se pierde un poco la realidad

En blender.
Podemos probar estas proyecciones con el num-5 o lo que es lo mismo con el menu view pulsando en Ortographic (ortogonal) o Prespectiva.

Un buen ejemplo sería crear dos objetos mas o menos lejos uno de otro, y ver las proyecciones ortogonal y prespectiva..

Blender. Modelado sencillo

Repasemos lo que sabemos(de aqui):

Cuando iniciamos Blender nos aparece un cubo, una lampara y una cámara.
Darle a la rueda del raton para zoom.
Pulsar rueda del raton y mover el raton para ir cambiando la vista 3-d
Pulsar chif-rueda del raton y mover el raton para trasladar la vista.
Num-7, Num-1, Num-3 para ponernos en vistas frontales y de lado.
Cambiar de sitio el cursor 3D pulsando el boton izquierdo del raton.
Tecla Tab para cambiar de modo objeto a modo edición.
Crear objeto con barra-espaciadora add-mesh-???
Boton derecho para seleccionar objeto.
Tecla Supr para borrar el objeto selecionado (control-x tambien).
Mover y cambiar objetos con R(otar) G(rab)(trasladar) S(cale)(escalar).
Mover y cambiar objetos dibujando una recta, una uve y un circulo.

La esfera con flechas
Hasta ahora no hemos hablado de esa esfera con flechas que estaba en medio del cubo y nos aparece en cualquier objeto que creamos. Esta esfera es para una leccion posterior, se llama Control de Transformación 3D ("3D Transform Widget") para ocultarlo, haz click sobre el botón con forma de mano en la cabecera de la ventana de botones.
(ver la mano en la imagen de mas abajo)
Partes de un objeto.
Un objeto en blender, el mas sencillo es un cubo, esta formado por vertices, caras y lados.
Podemos seleccionar uno o varios de estos y aplicarles los mecanismos sencillos que hemos visto con los objetos : traslado,rotacion y escalado.


Modo de vista de objetos
Podemos ver los objetos de diferentes formas, mirar el iconillo de la cabecera(el menu) de la ventana vista 3d. Como no se mucho de esto, no digo mas.

Seleccionar parte de un objeto.
En modo edicion.
Hay que elegir entre vertices, aristas y caras, podemos hacerlo con control-tab o con los iconillos de la cabecera dedicados a esto.
Si por ejemplo elejimos vertices, podemos escojer un vertice con el boton derecho del raton.
La parte escojida se pone de color amarillo, y la no escojida suele ser rosa.
la tecla-A nos permite selecionar todos (vertices o caras o aristas) o ninguno.
Si selecionamos algo, se deselecciona lo que teniamos seleccionados, pero si seleccionamos manteniendo la tecla control, se mantienen las selecciones que teniamos.

Transformar parte de un objeto.
Una vez seleccionado algo, podemos manipularlo de la misma forma que manipulabamos los objetos:
Mover y cambiar objetos con R(otar) G(rab)(trasladar) S(cale)(escalar).
Mover y cambiar objetos dibujando una recta, una uve y un circulo.

Epilogo
No es muy dificil, para un principiante como yo, pero no se obtienen grandes resultados. Pero para jugar esta muy bien y habituarnos a la forma de trabajo de blender para en un futuro hacer cosas mas interesantes.

Empezando con Blender.

Pues nada, lo he instalado en el ubuntu y estoy mirando a ver que soy capaz de hacer.
Estoy siguiendo este tutorial: http://es.wikibooks.org/wiki/Blender_3D:_novato_a_profesional


Me he hecho un lío, pero poco a poco voy entendiendo algo.

Blender 2.43.

Empezando viendo un poquillo la interfaz:
Cuando arranco blender, aparece una ventana con varias partes.
3 subventanas con una linea de menu cada una.
La linea o barra de menu la llama header y si le damos con el boton derecho del raton a una parte de la barra de menu vacia, pregunta si el header lo queremos arriba, abajo o no queremos header.
Observamos tambien que la subentana de arriba esta ocultada de modo que solamente vemos el header.
A la izquierda del header, hay un combo donde se puede decidir que quermos que haya en la subventana. Si lo pinchamos con el boton izquierdo del ratón, veremos todas las posibilidades.
Observamos que la ventana de arriba esta en modo informacion, la ventana principal esta en modo de 3D view, y la ventana de abajo esta en buttons window.

Se pueden eliminar y crear estas subventanas moviendo el raton al borde de una de las subventanas (izquierda, derecha,arriba o abajo) y cuando sale una doble flecha justo en el borde de la subventana, pulsamos el boton derecho del raton y nos sale el menu :

• split: crear una ventana
• join: eliminar una ventana (o juntar dos).
• no header: eliminar el header de la ventana.
• header:poner header a la ventana

Podemos jugar con todo esto, sin guardar preferencias, si se nos queda la pantalla hecha unos zorros siempre podemos cerrar blender y volver a abrirlo.
La vista 3D o el 3D view.
La ventana principal de blender es el 3D View. Vamos a empezar a ver que es esto y como podemos movernos un poco.
En la vista 3D vemos varias cosas :

• Una rejilla
• Un cubo
• Dentro del cubo una esfera con flechas(vemos una verde y una roja)
  
• Una fuente de luz
• Una camara de fotos
• Un cursor 3D que esta dentro del cubo
• Unos ejes de coordenadas.

Moviendo el entorno 3D:

Pulsamos el boton central del raton y dejandolo pulsado movemos el raton. Así podemos ver lo que realmente tenemos. Observar tambien los ejes coordenados como se mueven y podemos ver el cubo perfectamente.

Rueda del raton: es el zoom para acercarnos y alejarnos.
control+boton central raton: tambien zoom
shift+boton central del raton+mover el raton(o rueda): Para trasladarnos.

Podemos jugar un poco, es divertido......

Con estas teclas nos podemos posicionar en un plano determinado.
num-7(teclado numerico):plano x,y
num-1(teclado numerico):plano z,x
num-3(teclado numerico):plano y,z

El puntero 3d.
El puntero 3d, es un circulo rojo y blanco que parece que estamos apuntando con un rifle. con el boton izquierdo del raton, lo ponemos donde queramos..... o donde podamos.... porque es jodio el desgraciado.

Con las combinaciones de raton y teclas que hemos visto antes, un buen ejercicio, es colocar el puntero dentro de la cámara.

Veo tambien que si queremos ponerlo dentro del cubo tenemos dificultades, porque si lo centramos mucho, lo que se seleciona es el cubo.

Una forma de colocar el puntero es
num-7: estamos en el plano x-y, la coordenada z no varia
num-1: estamos en el plano x-z, la coordenada y no varia
num-3: estamos en el plano y-z, la coordenada x no varia.

Un ejercicio, es meter el cursor en la camara de fotos. Darle bien al boton central del raton para comprobar que efectivamente esta dentro.


Creando y borrando objetos.

Hay dos modos fundamentales en blender:
Modo objetos
Modo edicion.
Para pasar de un modo a otro, podemos usar la tecla tab y ver como en la linea de menu o header de la ventana 3d o la ventana de arriba de informacion nos pone el modo objetos o edicion.

Para añadir o borrar objetos, nos pondremos en modo objetos.

Añadir objetos:

En modo objetos, ponemos el cursor 3d donde nos de la gana y pulsamos la barra espaciadora y añadimos algo de mesh (malla). Y vemos como se crea en donde hemos tenemos el cursor 3d. (cuidado que se pondra en modo edicion). Para verlo mejor, ya sabeis, pulsar boton central y mover el cursor para ver lo bonito que es.

Seleccionar objetos:

En modo objetos, señalamos el objeto con el cursor y luego boton derecho y veremos como cambia de aspecto el objeto y en medio se pone esa especie de bola con flechas de colores, aveces se pone el modo edicion.

Borrar objetos:
Se seleciona y se pulsa la tecla supr.

Mover y modificacion elemental de objetos:

Una vez selecionado el objeto:

• tecla G para trasladar la imagen
• tecla S para escalar la imagen
• tecla R para rotar la imagen.Tecla R otra vez para otra forma de rotacion.

Pulsando boton iz del raton se termina la modificación.
Pulsando boton derecho del raton se anual la modificación.
Otro metodo:
Una vez selecionado el objeto:

• Dibujar una recta en cualquier sitio pulsando boton iz del raton pulsado, entra el modo trasladar.
• Dibujar una 'uve' en cualquier sitio con el boton iz del raton pulsado, entra el modo escalar.
• Dibujar un circulo en cualquier sitio con el boton iz del raton pulsado, entra el modo rotacion.

Control-Z es la tecla de desacer lo ultimo que se ha hecho
epilogo:
Jugar a crear objetos, borrarlos, moverlos, cambiar la vision..... y podremos seguir adelante con cierta soltura.
Recuerdo las teclas que habiamos aprendido.
Mover rueda raton: zoom
Boton central del raton apretado y mover raton: mover vista 3d
chif+boton central del raton pretado+mover raton: trasladar vista

Continuara.......

css ul horizontal

Para hacer un ul horizontal, bastaría con display:inline en los (li).
No me acuerdo cual era la historia para crear menus horizontales con ul, pero me encuentro con trabas, como la historia que en los (li) no me deja cambiar el color de fondo ???????
En explorer 6 si pongo un recuadro en el ultimo (li) no me lo hace bien....

En cristallab tenemos un poco de filosofia de ul para hacer menus horizontales y verticales.

el ejemplo de cristallab usa el float left para los (li), lo que no consigo por nada del mundo es poner color background al ul y al li, estoy hasta las pelotas. Voy a empezar de cero con un ul-li para ver que demonios pasa:

ver esto

css parrafos

Cuando escribimos párrafos, el margen no se pone a cero por defecto.
Si queremos cambiar la distancia entre parrafos tendremos que cambiar el margen.

margin:0 en los parrafos me ha funcionado en firefox y explorer 6.No deja distancia entre parrafos.

png y gifs en explorer

He intentado métodos para que el explorer me deje ver los png. Algunos javascrips no me han funcionado.

El pngvehavior parece que funciona bien, se trata de lo siguiente:

un archivo blanco.gif, un pngbehabior.htc, en este ultimo hay un codigo java-script que se carga en el css de la imagen:

img {
behavior: url("pngbehavior.htc");
}

Lo he probado y me ha funcionado, el unico problema esta en que

Lo he probado y me ha funcionado. EL unico problema es que en blogger no puedo incluirlo y !cuidado!. si lo incluyes en otro lado, tienes que modificar el pngbehabior.htc para que apunte al blank.gif.


Otro problema es que no lo he probado con los blackground.(no se si funcionara).

Se me ha olvidado comentar que no funciona en explorer si no pones: el width y el eight:



---------------------------------
ahora me entero, que si indexo el color y pongo optimizar para web y lo salvo como gif o png me funciona correctamente en el explorer. (vaya por dios)
tanto como png como gif.
Pero claro creo que solo indexa un numero limitado de colores, para algunas cosas no vale, degradados cro que no los hace bien.

netbios

Debido a la necesidad de poner unos ordenadores con doble red, me veo en la necesidad de ver como demonios funciona lo del netbios.

Pareceser que en sus origenes funcionaba sin tcp/ip, haciendo difusiones o usando netbeui para encontrar los nombres de las máquinas (nombres netbios).

Ahora con xp funciona NETBT que es netbios sobre tcp/ip (en la pestaña wins se habla de eso). Mientras que el servidor DNS nos lleva nombres de maquinas -> ip, el WINS nos lleva nombres-netbios--> ip.

El lmhost que esta en /windows/system32/drivers/etc nos sirve para dar nombres locales.

Duda: ¿Si yo en una máquina en el lmhosts le digo que fulanito es 192.168.1.23 y luego resulta que esta máquina se llama de otra forma ¿que pasa pues??.

En linux no hay problema (creo) con las IP.
¿Y que pasa con los grupos de trabajo y dominios y otras zarangajas.?

Hack css para internet explorer

En varios sitios he visto formas de hacer que esas diferencias entre navegadores no hagan que el css muestre distintos resultados en distintos navegadores.
de aqui he sacado lo siguiente que puede ser util:

body {
background: #fff !important; /* Firefox y los demás */
*background: #000 !important;  /* Sólo IE7 */
*background: #ccc; /* Sólo IE6 */
}

Se basa en explorer 6 y 7 trata como correctos las lineas que empiezan con asteriscos.
El explorer 6 no acepta el "important" y el explorer 7 si.

--------------------------------------------
Para centrar un div se suele emplear junto con width:70%; (el tanto que queramos) margin-left:auto;margin-right:auto;

En explorer no nos olvidemos (al menos en el body es asi, en otros no se) poner text-align:center;
si no hacemos esto en el body, lo tenemos claro . REPITO QUE NO LO HE PROBADO CON OTROS 'div'

css bordes redondeados

En esta dirección he encontrado un generador de bordes redondeados y voy a probarlos y a ver que pasa.

Corner radius in pixels: 30px
Background color: #ffffff
Box color: #cccccc

El primero es el simple :

tenemos como css:

/* CSS Document */
.roundedcornr_box_293533 {
   background: #cccccc;
}
.roundedcornr_top_293533 div {
   background: url(roundedcornr_293533_tl.png) no-repeat top left;
}
.roundedcornr_top_293533 {
   background: url(roundedcornr_293533_tr.png) no-repeat top right;
}
.roundedcornr_bottom_293533 div {
   background: url(roundedcornr_293533_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_293533 {
   background: url(roundedcornr_293533_br.png) no-repeat bottom right;
}

.roundedcornr_top_293533 div, .roundedcornr_top_293533,
.roundedcornr_bottom_293533 div, .roundedcornr_bottom_293533 {
   width: 100%;
   height: 30px;
   font-size: 1px;
}
.roundedcornr_content_293533 { margin: 0 30px; }

como html:

<div class="roundedcornr_box_293533">
   <div class="roundedcornr_top_293533"><div></div></div>
      <div class="roundedcornr_content_293533">
         Lorem ipsum dolor sit amet, consectetur
      adipisicing elit, sed do eiusmod tempor incididunt
      ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat. Duis aute
      irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur
      sint occaecat cupidatat non proident, sunt in culpa
      qui officia deserunt mollit anim id est laborum.
   </div>
   <div class="roundedcornr_bottom_293533"><div></div></div>
</div>

Las imagenes son:
* http://www.roundedcornr.com/roundedcornr_293533_tl.png
* http://www.roundedcornr.com/roundedcornr_293533_tr.png
* http://www.roundedcornr.com/roundedcornr_293533_bl.png
* http://www.roundedcornr.com/roundedcornr_293533_br.png

Vamos a ver como queda:

Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.

COMENTARIOS:

La linea font-size: 1px; es para mi super misteriosa ????
En explorer 6 se ve mal, se ve un rectangulo a la izquierda y no se ven los bordes de la dcha.
Lo corrigo poniendo width:90% en .roundedcornr_box_293533. Supongo que será cosa de esa maldita historia del maldito explorer 6 con los box.

fecha y hora con javascript

Por ahi (si lo veo lo pongo) he encontrado un codigo para fecha en javascript.
Como no tengo ni idea de javascript, lo pongo aqui y ya esta.

Lo he probado en bloguer y funciona.

<script language="JavaScript">
<!--
monthNames = new Array(12);
monthNames[0] = "Enero";
monthNames[1] = "Febrero";
monthNames[2] = "Marzo";
monthNames[3] = "Abril";
monthNames[4] = "Mayo";
monthNames[5] = "Junio";
monthNames[6] = "Julio";
monthNames[7] = "Agosto";
monthNames[8] = "Septiembre";
monthNames[9] = "Octubre";
monthNames[10] = "Noviembre";
monthNames[11] = "Diciembre";

dayNames = new Array(7);
dayNames[0] = "Domingo";
dayNames[1] = "Lunes";
dayNames[2] = "Martes";
dayNames[3] = "Miércoles";
dayNames[4] = "Jueves";
dayNames[5] = "Viernes";
dayNames[6] = "Sábado";
var now = new Date();
var year = now.getYear();

if (year < 2000) year = year + 1900;

document.write( dayNames[now.getDay()] + " " + now.getDate() + " de " + monthNames[now.getMonth()] + " " +" de " + year);

-->
</script>

Entendiendo plantillas Blogger (borrador)

ENTENDIENDO LAS PLANTILLAS BLOGGER.

Esto es un borrador del intento de aprender como funciona esta historia de las plantillas de blogger.

PRELIMINARES.
En la parametrización de un blog, tenemos una serie de parámetros para configurar nuestro 'blog', pero el 'alma' del blog está sobretodo en la pestaña plantilla.

-Elementos de la página
Aqui podemos añadir lo que llaman 'elementos' a una especie de estructura básica de la página del blog: Cabecera,Nabvar,pie,columna derecha, columna izquierda, Entradas del blog....

Secciones Son las partes de la estructura de la página, cabecera, pie,cuerpo,columnas,navbar....

Elementos,widgets,artilugios: Son cosas que podemos añadir y quitar de las secciones. Estos elementos son por ejemplo: entradas al blog, imágenes, conjuntos de links, listas,adsense.......

Estos elementos son editables y tienen parámetros que podemos cambiar.

Esta herramienta, no es la mejor del mundo, pero sirve de mucha ayuda a los diseñadores y usuarios del blog.
Nota: Algunos elementos no nos permiten quitarlos como por ejemplo: el navbar, la cabecera y las entradas al blog. Y las secciones parece que no se pueden ni añadir ni quitar.


-Edición de HTML.
Con esta utilidad, podemos cambiar el contenido de fichero xml donde se guarda una información que blogger leerá para crear el contenido.
En este fichero, se combinan etiquetas html con etiquetas 'blogger' para crear el contenido de la página.

Hechando un vistazo a este fichero, vemos que es básicamente un html puro, con alguna cosa 'extraña'.
Vamos a ver un momento el body extraido de una plantilla.(No pinchar el cuadrito de expandir artilugios(widgets))

<body>
 <div id='outer-wrapper'>

   <b:section class='header' id='header' maxwidgets='1'>
     <b:widget id='Header1' locked='true' title='aprendo-css (cabecera)' type='Header'/>
   </b:section>
  
  <div id='crosscol-wrapper' style='text-align:center'>
     <b:section class='crosscol' id='crosscol' showaddelement='no'/>
   </div>

   <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
     <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
    </b:section>
   </div>
   
  <div id='sidebar-wrapper'>
     <b:section class='sidebar' id='sidebar' preferred='yes'>
     <b:widget id='Label1' locked='false' title='Capitulos' type='Label'/>
     </b:section>
   </div>
  
  <div id='footer-wrapper'>
     <b:section class='footer' id='footer'/>
   </div>
  
</div>
</body>

Vemos una fuerte relación entre lo que vemos en "Elementos de la página" y lo que vemos aquí. Sin embargo, tiene por lo menos para mí muchos misterios que intentaré resolver.

Vamos a presuponer por sencillez, (luego miraremos como quitarnos las limitaciones que esto supone), que cada sección de la plantilla es una parte de "Elementos de la página" donde podemos añadir widgets(artilugios).

Si pinchamos Expandir Artilugios, en la plantilla, nos aparece mas mezcla de codigo html y código blogger.Vamos a intentar desentrañar los misterios.
---------------------------------------------------------------------------------------------
GENERALIDADES DE LA PLANTILLA.

Por plantilla, entenderemos el código xml que nos aparece en la opción Edición del HTML con la opción de expandir artilugios activada.

Esta plantilla, la lee bloguer para generar el html que nos permite ver el 'blog', y por lo tanto modificando esta plantilla podemos cambiar el aspecto de nuestro blog.

Nos vamos a dedicar casi exclusivamente al 'codigo blogger' del 'body' que aparece en la plantilla que es el que nos permite acceder a los datos del contenido del blog, luego, rodeandolo de html y los css, podemos confeccionar el aspecto que queremos que tenga el blog.
-------------------------------------------------------------
BODY y SECCIONES :
La información sobre las secciones y el código 'blogger' en general, se obtiene del link mas información en la herramienta 'edicion de html' de blogger.

Hasta ahora sabemos que el body de la plantilla, se compone de codigo html y secciones mezcladas:
body
.........................................
...........codigo html.............
........................................
...........secciones blogger.....
........................................
/body

El código html debería ser tan solo div y span.
Las secciones blogger son las que vamos a estudiar ahora.
----------------------------------------------------------------
SECCIONES

Ejempos:




ATRIBUTOS:


Un código consta de los siguientes atributos:

• id - (obligatorio) un nombre exclusivo, que consta únicamente de letras y números.
  
• class - (opcional) Este atributo tiene que ver con la herramienta 'elementos de página', los nombres que se deben de poner para que se asocien al formato de página son : "navbar", "header", "main", "sidebar" y "footer." Si cambias las plantillas más adelante, estos nombres ayudarán a Blogger a determinar la mejor forma de transferir el contenido(Herramienta de elementos de pagina). Sin embargo, se pueden utilizar otros nombres .
• maxwidgets - (opcional) el número máximo de artilugios que se pueden permitir en esta sección. Si no se especifica límite, significa que no existe.
• showaddelement - (opcional) puede ser "yes" o "no", donde "yes" es la opción predeterminada. Determina si la pestaña(herramienta) "Elementos de página" mostrará el vínculo "Añadir un elemento de página" en esta sección.
• growth - (opcional) puede ser "horizontal" o "vertical", donde "vertical" es la opción predeterminada. Establece si los artilugios(widgets) de esta sección se ordenan uno al lado de otro o uno encima del otro.

Una sección, solamente puede incluir widgets(artilugios), nada de html ni otra cosa.
Al generar el html, blogger creara un div id='identidad' con la identidad que hemos dado a la sección.
------------------------------------------------------------------

WIDGETS(ARTILUGIOS).
La finalidad de los widgets, es básicamente darnos información de los datos de nuestro blog.
Cada widget, nos prooveera con la información para la que fue diseñado. Estos datos los veremos mas tarde.

Ejemplos:

<b:widget id="header" type="'HeaderView'" locked="yes">
</b:widget>

<b:widget id="myList" type="'ListView'" locked="no" title="My Favorite Things">
</b:widget>

Atributos:

Un artilugio consta de los siguientes atributos:

• id - (obligatorio) consta únicamente de letras y números, y cada uno de los ID de la plantilla deben ser exclusivos.En la herramienta 'elementos de página), El ID de un artilugio sólo se puede modificar eliminando el artilugio en cuestión y creando uno nuevo.
• type - (obligatorio) indica el tipo de artilugio, el cual debe ser uno de los tipos válidos de la lista que se especifica más abajo.
• locked - (opcional) puede ser "yes" o "no", donde "no" es la opción predeterminada. Un artilugio con este atributo no se puede mover ni suprimir de la pestaña "Elementos de página".
• title - (opcional) el título que se muestra del artilugio. Si no se especifica ninguno, se empleará un título predeterminado, como "List1".
• pageType - (opcional) puede ser "all", "archive", "main" o "item", donde "all" es la opción predeterminada. El artilugio se mostrará únicamente en las páginas del blog que se hayan establecido para ello. (Todos los artilugios se muestran en la pestaña "Elementos de página", independientemente de su atributo pageType). Esto, ya veremos lo que quiere decir.
  

Los tipos de artilugio que puedes especificar son:

• BlogArchive
• Blog
• Feed
• Header
• HTML
• SingleImage
• LinkList
• List
• Logo
• BlogProfile
• Navbar
• VideoBar
• NewsBar

Al generar el html, blogger creara un div id='identidad' con la identidad que hemos dado a la sección.

El formato de una sección es pues muy sencillo:

b:section......

b:widget...
/b:widget
...........
b:widget
/b:widget
/b:section

Contenido de la etiqueta b:widget :
......
--------------------------------------------------------------------------------
INCLUDABLES

Inclusiones

El contenido de un artilugio se encuentra en las secciones "includable" (es decir, con posibilidad de inclusión), que presentan el siguiente formato:

Ejemplo:

<b:includable id='main' var='thiswidget'>
[inserta aquí el contenido]
</b:includable>

Los atributos son los siguientes:

• id: (obligatorio) un número de identificación compuesto de letras y números.
• var: (opcional) un número de identificación compuesto de letras y números que sirve para hacer referencia a la información en esta sección (ya veremos que quiere decir esto).
  

Es obligatorio que un includable de un widget tenga id='main',

¿Que hace blogger con los includables?.

Simplemente inserta en el html el contenido de widget que tenga la id='main'.

¿Que pasa con los includables de un widget que tenga id!='main'?

Simplemente, en el includable con id='main' deberá haber una linea que haga referencia a este includable de esta manera:

<b:include name='[aquí la id del includable]' />
¿Que contenido tiene un includable?
Un includable puede contener html y los codigos blogger que vemos a continuación.

-----
------------------------------------------------------------------------------
INCLUDES.

Los atributos del código b:include son los siguientes:

• name: (obligatorio) un número de identificación compuesto de letras y números. Debe coincidir con el ID de un código b:includable que exista en el mismo artilugio.
• data: (opcional) una expresión o fragmento de información que permite pasar a la sección "includable", y que se convertirá en el valor del atributo var de dicha sección.(ya veremos que quiere decir esto)
  

-------------------------------------
DATOS

La lista de datos de los widgets está aqui

Se haccede a ellos con este formato:
b:data.name
b:data.name1.name2
si name1 es un conjunto de datos, se accede a ellos con el "."


-----------------------------------------
mi primer codigo ensayado

  <!--aquiiiiii mi codigo-->
  <p>Mira las etiquetaaaaaaas</p>
  <b:loop values="'data:post.labels'" var="'eti'">
   <p> <data:eti.name></data:eti.name></p>
  </b:loop> 
 <p>Fin de las etiqueeeeeeeetas</p>

Gimp Objetos transparentes

por j.m.Parra

HACIENDO OBJETOS TRANSPARENTES
CON GIMP
Usando gimp 2.2 en castellano.




Traducción del excelente tutorial: Ron Scott's tutorial - Transparent Objects


Con este tutorial he aprendido a hacer que objetos como esta letra, parezcan transparentes, y proyectando una sombra lo cual le da un efecto 3D.

Es un poco complicado, pero el efecto es bastante bueno.

---

Paso primero.
Crear una imagen nueva con color de fondo negro.
Por ejemplo:

• Abrir el Gimp
  
• Conseguir que el fondo sea negro (Archivo->Dialogos->Colores)
• Imagen nueva(Archivo->Nuevo), del tamaño que querais.
• En opciones avanzadas: Rellenar con: color de fondo.

Tenemos pues una imagen con fondo negro y si abrimos el dialogo de capas, veremos que tenemos una capa sin transparencia.

---

Paso Segundo.
Crear una nueva capa transparente que llamaremos base.
En esta capa dibujaremos un rectángulo cuadrado de color 'gris medio'. Por ejemplo siguiendo estos pasos:

• Capa->Capa nueva.
• Pinchar color de fondo y selecionar un gris.
• Escojer herramienta de selección rectangular.
• Selecionar un cuadrado que ocupe casi toda la imagen.
• Editar->Rellenar con color de fondo.

Es en esta base donde quedará proyectada la sombra del objeto transparente.

---

Paso tercero.
Crear una nueva capa transparente que llamaremos dibujo.
En esta capa dibujaremos en color blanco la forma que vamos a hacer transparente.
Yo voy a dibujar unas elipses con la herramienta de selecionar regiones elípticas.. Para observar mejor el resultado, deberíamos dibujar cosas con aristas...... La primera prueba que yo hice, fué con una letra.
Esta capa al final no queda visible.

---

Paso cuarto.

• En el diálogo de capas con el boton derecho en la capa dibujo, Alfa a selección.
• Crear una nueva capa transparente y llamarla: sombra.
• Cambiar el color de fondo por un 'marron oscuro'.
• Editar->Rellenar con color de fondo.
• Quitar la seleccion: Seleccionar->Ninguno

---

Paso cinco

• Hacer la capa sombra invisible pulsando en el ojo de la capa sombra en el dialogo de capas.
• Poner activa la capa dibujo asegurandose que es visible (que se vea el ojo).
• Filtros->Desenfoque Gaussiano[blur]
• Escoger en los parámetros: Método rle y 5px de radio(los dos) y aplicar.
• Vemos como se desenfoca el dibujo

---

Paso seis

• Hacer invisible la capa dibujo.
• Hacer visible y activa la capa sombra.
• Filtros->mapa->Mapa de relieve(bumb map) con dibujo como mapa de relive y profundidad 4px, el resto los parametros por defecto.

A mi me queda una cosa como esta:

---

Paso siete.
Continuamos en la capa sombra

• Selecionamos el objeto con la opción capa->Transparencia->alfa a selección.
• Encojemos la selección con Seleccionar->Encojer 3px.
• Difuminamos un poco la selección con Seleccionar->Difuminar 2 px.
• Hemos dividido el 'dibujo' de la capa en la parte transparente y el borde.
• La parte que tenemos seleccionada, es la que vamos a volver transparente de este modo:
• Capas->Color->Curvas y elejimo canal alfa y la recta que hay dibujada, la cambiamos tal y como el ejemplo de la figura, y le damos a aceptar.
• Nos queda algo como la imagen siguiente.
  

En esta capa de sombra, hemos separado un borde, y una transparencia central, veamos ahora que hacemos con todo esto.

---

Paso Ocho.
Crearemos la capa transparencia, y dejaremos el contorno en la capa sombra como base para hacer la sombra..

• Posicionados como en el fin del Paso Siete en la capa de sombra.
• Duplicar la capa capa->duplicar capa.
• Llamar a la nueva capa transparencia. Ventana(dialogo de capas)-> boton derecho a la capa->editar atributos de la capa.
• Hacer invisible la capa transparencia y hacer visible y seleccionar la capa sombra.
• Editar->limpiar, y nos queda solo el contorno.
• Seleccionar->Ninguno y quitamos la seleccion.

Este contorno lo usaremos para hacer la sombra.

---

Paso Nueve.
En este paso, la capa transparente ya parecerá lo que tiene que ser.

• Ocultamos la capa de sombra y nos vamos a la capa transparencia que la hacemos visible y activa.
• Capa->Colores->Invertir

Y ¡oh maravilla!, tenemos la imagen transparente con los bordes iluminados y todo.

---

Paso Diez.
Hagamos la sombra.

• Hacemos invisible la capa transparencia y hacemos activa y visible la capa de sombra.
• La emborronamos con 10 o 12 px. filtros->desenfoque->desenfoque gausiano y yo pongo 12 px.
• Trasladamos la capa 12 px: capa->Transformar->desplazamiento 12px,12px y aceptar.
• Hacemos la capa transparecia visible y vemos el resultado.

Los datos de emborronamiento y traslado, se pueden cambiar a gusto del autor.

---

Paso once.

Arreglar la sombra. Se necesitan unos ajustes.

Tenemos visibles todas las capas menos la capa dibujo.

• Hacemos activa la capa sombra.
• En el dialogo de capas, buscar el modo que mas nos guste. El de multiplicar puede que sea el mejor.
• En la opacidad, un 80% puede que sea adecuado.
• Ajustarlo segun gusto

La figura ha quedado de un color azulado. En el siguente paso, veremos el tema del color.

---

Paso doce.

Ahora podemos usar la función Tonalidad(Hue) - Saturación
para ajustar el color del objeto.

• Activar la capa transparencia
• capas->colores->colorizar.

Hay tres deslizadores en el cuadro de diálogo que aparece :
Tonalidad, Saturación y Luminosidad.
Lo mas facil es una incolora placa de vidrio o plastico, en tal caso hay que poner la
saturación en -100.

Experimentando con los tres ajustes, Tonalidad, Saturación y Luminosidad (y también el control de Opacidad en la parte superior de la ventana de diálogo de capas),
Tendremos disponibles una amplia gama de colores y aspectos.
Añadiendo algo en el fondo, se puede aumentar la ilusión de objeto transparente
en tres dimensiones.
El ejemplo que he hecho saturación 0, luminosidad 18 y opacidad 70.

Espero haber sido de utilidad.

Saludos J.M.Parra

---