Muñequitos :D

Es época de exámenes, esto quiere decir que me encuentro especialmente imaginativo, siempre me pasa, cuando tengo que ponerme a estudiar se me ocurren montones de ideas de todo tipo y todas me parecen geniales... ayer mismo estando en la biblioteca me dió por dibujar y me salíeron estos personajes, así que en cuanto llegué cogí mi wacom y el illustrator y salió esto:

Ah! que no se me olvide mencionar que me echaron una mano tanto missha, que aportó sus ideas y el tipo para los nombres :), como Álvaro que me ayudó a elegir el nombre de cada uno y dió ideas también. Saludos a todos!!!

---

Logotipo

Hice un logotipo para unos amigos que van a montar una residencia de ancianos. De las ideas que se barajaron parece que esta va a ser la definitiva:




¿Qué os parece? anda, comentadme algo y a ver si lo mejoro con vuestra ayuda. :D

---

Vectorización a mi manera

La otra tarde me puse a vectorizar una imagen de un trompetista y después de un rato liado con eso y despues de haber visto algun tutorial de vectorización creo que conseguí algo aceptable... así que intentaré explicar brevemente cómo lo hice.

Bien, lo primero que necesitamos es la imagen que deseamos vectorizar, preferiblemente a buena resolución para trabajar comodamente con ella, podeis bajaros la que yo usé. También es recomendable que la foto tenga fondo blanco o que el objeto o persona a vectorizar tenga buen contraste con el fondo para poder extraerlo o recortarlo bien.
Una vez teneis vuestra foto abrimos el photoshop y en él abrimos la imagen. Si la foto es en blanco y negro pues perfecto, si no pues la podeis cambiar a escala de grises desde Imagen / Modo / Escala de grises . Ahora posterizais la imagen desde Imagen / Ajustes / Posterizar... y le dais unos 5 o 6 niveles, con esto la imagen se quedará en escala de grises pero sólo de 5 o 6 grises quedando separadas las zonas más claras y las más oscuras, aquí se aprecia esto:



Pero no os vayais a pensar que ya está vectorizada eh? aunque ya se parece algo al resultado final... de todas formas el vectorizarla no es solo para que coja este aspecto sino que también cuando tengamos el dibujo en vectores de esta foto podremos hacer muchas más cosas con él valiéndonos de las ventajas de los vectores.

El siguiente paso (y el más largo) es llevarnos esta imagen ya posterizada a Illustrator y en él empezar a vectorizar de verdad la imagen. Primero de todo colocamos la imagen y creamos una capa nueva, la capa de la imagen la bloqueamos. A partir de aqui voy a explicar como hice la cabeza del trompetista, lo demás es igual.

• En la capa que acabamos de crear (la de la imagen debe estar bloqueada para no moverla) comenzamos a "calcar" la silueta de la cabeza. Usad el lápiz a mano alzada (una tableta wacom ayuda :P) o si preferís la pluma pero será más tedioso. Lo debeis ir haciendo más o menos así:
  
  
  
  


• Una vez termineis la silueta entera, debeis quitarle el borde, si pusisteis borde, y darle como color de relleno el gris que penseis que es "la base" de la cara, para luego sobre esta base dibujar los detalles, sombras y luces con grises más claros y más oscuros.
  


• Elegid bien los grises que vais a usar, la imagen tiene 5 tonos de gris pero no hace falta usarlos todos, yo para la cara usé 4 pero con 3 hubiera bastado. En concreto elegí: un gris base, un gris muy claro para los brillos, uno oscuro para las sombras y un gris casi negro para el interior de algunas sombras como la zona de la barba, los ojos y las orejas.
  


• Vamos a empezar calcando los brillos de la cara, en gris claro. Para esto creamos una nueva capa y bloqueamos y ocultamos la capa del gris base. Ahora en esta nueva capa vamos calcando los brillos de la imagen con el lapiz igual que hicimos antes y le damos color de relleno gris claro, algo así:
  
  
  
  


• Hacemos lo mismo con las sombras y con las sombras más oscuras, cada una con su respectivo tono de gris. Y por ultimo poneis visibles todas las capa y ocutais la de la imagen os tiene qu haber quedado algo así:
  
  
  

Pues eso mismo lo debeis hacer ahora con el pelo, con la ropa, la tormpeta,... es bastante coñazo, lo sé. La verdad es que illustrator trae una herramienta de calco automático, pero yo prefiero hacerlo a mano porque con el calco acutomático no queda igual... Saludos!

---

Teleformación

Aunque se ha hecho esperar aquí esta ya el ppt de la conferencia sobre portales de teleformación que impartimos Jose y yo en Forman. Por cierto somos los webmasters de su web, se admiten criticas... constructivas ;P.
Aquí tenéis la parte mas teórica, después siguió una parte practica que fue sin duda las mas divertida. Analizamos la usabilidad y accesibilidad de distintos portales de teleformación, así como la tecnología con la que están implementados y la seguridad que ofrecen. Desde estas cuatro perspectivas esta abordado el problema de la teleformación.
Por cierto antes de que se me acuse de plagio citare algunas de mis fuentes:
rs-labs
areas.net
xpertia
...algunos otros

Espero que os guste Korsarios leed y propagad.

---

Coincidencias...

Navegando por ahí me tope con estas coincidencias de la vida:

http://surfstation.lu/16.html



http://www.letsmarta.tk/



Vaya casualidad, no? No seais mal pensados, que estas coincidencias ocurren .. yo tengo un billete de 5 euros igualito a uno que tiene alvaro...

16 de mayo - letsmarta:
"Awacate me incitó a esto... Describió cruelmente a mi anterior diseño de incómodo por el pop-up, y me picó para que hiciera una nuevo... Y al final lo has conseguido..."

Saludos!!

---

Algo de CSS

Bueno, ya he posteado un par de veces sobre las bondades de maquetar con css, pero ya es hora de predicar con el ejemplo. A eso vengo hoy :D. Voy a explicar un ejemplo de como hacer un layout sencillo y bastante común, que me planteó hace unos días Álvaro, espero que os sea de ayuda. Vamonos!

Algo de teoría primero:

Bien, el diseño en concreto lo voy a realizar en XHTML y css, persiguiendo la completa separación de contenido y presentación; esto es, el XHTml sólo contendrá contenido, no usaré en absoluto tablas y tampoco etiquetas como <font>, en resumen no defino nada referente a diseño (colores, tamaños, etc) ni a colocación (centrado, alineado...) dentro del documento xhtml. En cambio en el css sólo defino la presentación. ¿Para qué? pues los beneficios derivados de la separación de contenido o estructura y separación son variados, a modo de resumen:

• Facilidad de producción y modificación

El hecho de utilizar una única hoja de estilos para todo el sitio nos garantiza que cambiando algo en esa hoja se cambiará en todo el sitio, además una vez descargada esa hoja se queda en la caché y estos dos factores reducen considerablemente la cantidad de lineas de código necesario y por tanto inciden en la velocidad de descarga de nuestra página.


• Accesibildad

css nos permite hacer páginas más accesibles y a la vez aprovechar las capacidades de los últimos navegadores, ya que entre otras cosas nos permite definir diferentes hojas para diferentes dispositivos. Como ejemplo veremos ahora una misma página que con dos hojas diferentes la usamos para presentarla en pantalla y para impresora, y el resultado es totalmente diferente , siendo la misma página. Además al adaptarnos a los estandares y dejar de utilizar tablas para maquetar y otro tipo de triquiñuelas en html podemos asegurarnos de que nuestra página se verá bien desde cualquier dispositivo con cualquier navegador que cumpla los estandares del W3C.


• Comodidad en el desarrollo

css nos permite mayor comodidad que la maquetación con tablas, en cuanto uno se acostumbra. Además ofrece mayor control sobre la posición de los elementos.

Vamos ya al ejemplo, es un layout que consiste en una cabecera, una columna a la izquierda para el menu, otra columna mas ancha a la derecha para el contenido y por último un pie de página.

Empezaremos definiendo el código XHML a utilizar:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Layout cabecera - 2 columnas - pie</title>
<link href="layout.css" type="text/css" rel="stylesheet" />
<link href="print.css" type="text/css" rel="stylesheet" media="print" />
</head>
<body>
<div id="web">
<div id="cabecera">
Cabecera
</div>
<div id="colderecha">columna derecha</div>
<div id="colizquierda">columna izquierda</div>
</div>
<div id="pie">
Pie
</div>
</body>
</html>



De este código voy a destacar lo más remarcable:

• Defino dos hojas de estilo diferentes. La primera en la que no especifico el atributo media, con lo que el navegador entenderá que es para todo tipo de dispositivos, en la segunda especifico que es para impresoras, luego esta será la hoja usada para presentar el texto cuando este se quiera imprimir


• Creo primero una capa con identificador "web" que contendrá a todas las demás capas, que en este caso son la columna derecha y la izquierda


• La capa pie la ponemos fuera de la capa web porque IE da problemas (al menos IE 6) y al ponerla dentro a veces se sube la capa pie sobre la capa colizquierda. Otra solución es ponerle a la capa colizquerda un height:100% pero si le pones un color de fondo este se estirará hasta abajo y en nuestro diseño no queremos eso ahora

Este código por si sólo no hará nada espectacular, ahora vamos a darle "vida" con la hoja de estilos:


#web{
text-align: left;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
width: 80%;
font-size: 100%;
}
#cabecera{
border: 1px solid;
padding:0px;
margin-bottom: 3px;
}
#colderecha{
background-color: White;
float:right;
width:80%;
margin-bottom: 10px;
}
#colizquierda{
background-color: Green;
float:right;
width:20%;
}
#pie{
clear: both;
margin-top:10px;
background-color: #F7F7F7;
border:solid 1px black;
width:80%;
margin-left: auto;
margin-right: auto;
}


La primera capa, web, que contiene a las demás, la centro definiendo sus márgenes derecho e izquerdo en "auto", además le digo que ocupe sólo el 80% de la pantalla, se podría haber definido como 760px de ancho pero siempre es preferible usar unidades relativas por motivos de accesibilidad. Sobre la cabecera no comento nada pues no necesita que la posicionemos, solo definimos sus características de márgenes, colores, etc a nuestro gusto. Ahora viene lo mejor, las dos columnas centrales. La columna que contendrá la mayor parte del texto, columna derecha, será de ancho el 80% de la capa que la contiene, en este caso "web", y con el float:right hacemos que "se pegue" al borde derecho de la capa "web". La capa colizquierda, el menu, lo pegaremos también a la derecha, pero al estar antes colocada la capa colderecha pues se pegará a esta y no se pondrá por debajo ni por encima, su ancho lo definiremos al 20% sumando así entre ambas el 100% del ancho de la capa "web". Finalmente la capa pie, a esta capa tenemos de nuevo que centrarla con sus márgenes laterales en auto ya que la hemos colocado fuera de "web" y por el mismo motivo definimos también su ancho al 80% de la ventana del navegador, aunque aquí podemos dejarla al 100% y queda bonito también ;) El clear:both lo que hace es "limpiar" cualquier elemento que haya a su derecha o izquierda, esto es que impide que ninguna otra capa se situe a su derecha o a su izquierda, así conseguimos que no se suba (aunque en IE 6 no se sube aunque lo quitemos). Bueno espero que se haya entendido bien hasta aquí, aquí teneis el css y el html comentados en un zip para que podais probarlo en casa :D


Ahora la hoja de impresión, en principio es la misma hoja de estilo que la anterior,así que no la copiaré aquí (la teneis en el zip) sólo comentaré los cambios importantes. Lo que persigue esta hoja es que al darle a imprimir se imprima sólo el cotenido de la capa derecha, evitando la impresión de cabecera y menú y además que se imprima en texto negro sore fondo blanco y centrado y de paso le pondremos un borde verde de adorno :)

• Lo más destacado es como ocultar a la impresora las capas que no queremos que se impriman, hay que tener en cuenta que aunque sólo queremos imprimir la capa derecha, no podemos ocultar la capa web pues la derecha está anidada dentro de web. Para ocultar el resto sólo colocamos en sus estilos correspondientes la línea "display:none"


• Como no podemos ocultar la capa web pues redefinimos ahora su color de fondo como blanco.

Creo que esto es todo sobre la hoja de impresión, así que ya me despido que este post ha salido larguísimo y si alguien ha leido hasta aquí ya estará hartito de leerme. Saludos!!

---

Logo avi2

Aquí os pego el logo que hice para un plan de empresa que estoy haciendo en la facultad. En principio, la empresa "Avidos web factory S.L" es sólo ficticia, pero si todo sale tal vez la veamos andando algún día. Bueno a lo que iba, aquí os pongo el logo de la marca "Avi2". Muchas gracias a missha por echarme una mano y pasarme unas fuentes mu chulas ;)

Saludos, .--- --- ... .

---

Pobres usuarios...

Hoy es un día triste para todos los futuros usuarios del sitio que David y yo estamos desarrollando. Os pondré en situación, estamos desarrollando un sitio de un centro de formación, con una amplia y variada oferta de cursos, con el objetivo de servir para dar a conocer dichos cursos pues actualmente la información sobre los mismos no llega a casi nadie y se pierden alumnos. Ante esta situación, cuando comenzamos a definir las necesidades y objetivos del sitio vimos claro que el sitio debía principalmente enfocarse a los visitantes que vienen buscando información sobre cursos (¿como iba a ser de otra forma?) si bien también contemplamos que existen otros visitantes potenciales como prensa, inversores, competencia, etc, pero claramente estos no son nuestros usuarios más importantes (al final resulta que sí...). A partir de aquí nos pusimos manos a la obra y desarrollamos la AI del sitio con los futuros alumnos en mente. Creo que conseguimos nuestro objetivo, nuestra web, nada más entrar, sin distraer al usuario de su tarea, presenta al usuario los últimos cursos disponibles, los cursos destacados o más demandados y todos ellos clasificados por materia y con la posibilidad de acceder a detalles de los mismos asi como a otros cursos relacionados, (he de añadir aquí que me hubiera gustado desarrollar algún sistema tipo amazon de creación de conocimiento acerca de cada usuario, recordando las materias de su interés y sus últimos cursos visitados para así personalizar su experiencia en proximas visitas, pero el tiempo apremia...) y además una pequeña área de acceso rápido a preguntas frecuentes como requisitos de matriculación, descarga de solicitudes, etc. Para el resto de usuarios (los no considerados principales) dispusimos una sencilla barra de navegación superior desde la cual se podía acceder a información coorporativa, dossieres de prensa, etc. Hasta aquí todo iba viento en popa, practicábamos diseño centrado en el usuario, teniendo definidos al menos un par de escenarios y centrándonos en el más probable y eramos felices.
¿Qué pasó entonces? Pues pasaron los jefes, sus intereses, su amor por la verborrea corporativa y los logotipos, además nuestro sitio pertenece a una UTE en la que están presentes al menos dos empresas privadas y dos organismos públicos así que podeis imaginar la de párrafos halagadores que necesitaremos...
Finalmente la cosa ha quedado en que tendremos que hacer una especie de página de entrada (al menos conseguimos que no fuera una intro en flash) en la que se presente con un diseño muy vistoso (sobrecargado de imágenes, imágenes cambiantes y varios javascripts que ellos consideran la bomba...) y en forma de círculo los diversos logotipos de entidades colaboradoras en el consorcio y la información sobre las mismas y luego ya se entre a nuestro "portal". Así que lo dicho, nuestros usuarios han salido muy perjudicados y tendrán que pasar por esta página de entrada cada vez que quieran ver si salió ese curso que están esperando..., eso si, se podrá ver en los logs, cuando los analicemos, la gran rapidez que desarrollarán en pasar a la siguiente página, sin leer ni un párrafo de verborrea ni hacer ni caso a los logotipos. Saludos, .--- --- ... .

---

Cuando me aburro...illustrator

Saludos ;)

---

Kabeceras

Atentos amigos Korsarios, porque si os sentis artistas y quereis demostarlo ahora puedes demostrar a todos tu talento. y te preguntaras...¿COMO? pues muy facil crea-inventa-construye una cabecera para la seccion que desees de Korsarios, e incluso para la pagina principal y te la publicaremos en la web para que puedas alardear de Artista.

- Requisitos:
Solo 2, que el tamaño de la cabecera sea de 748x98 y que contenga la Kalavera de Korsarios.

- Ayuda:
Para ayudarte en tu tarea, te proporcionamos un eps con la Kalavera de Korsarios en formato vectorial.

- Envio:
Para que recibamos la cabecera envianolas a la direccion Alvaro@korsarios.net:
Enlace a Outlook: Alvaro@korsarios.net.
Enlace al KMail: Alvaro@korsarios.net.

Para las kabeceras ganadoras habrá premio!!
El premio: Una Kamiseta!! (notese en el dibujo que es jose el que la lleva puesta y de ahí que salga su mochila... ;))






Esperamos tu iniciativa, animate korsario y participa.

---

Mosaico korsario

Logo de korsarios hecho con cientos de imágenes...

Detalle de una parte del mosaico...





Tengo el Bmp que hice originalmente pero ocupa mas de 15 mb pero es una gozada ver las fotos con todo detalle... Saludos

---

Ya podeis enlazarnos con botón!!

Pues eso que hoy me aburría y he hecho un pequeño boton para los blogueros que esteis ansiosos de enlazarnos pues podias poner este botoncito y no un sosete link de texto. Espero que os guste y os parezca bonito :) Aquí lo teneis:

Saludos

---

Follow wallpaper

Os traigo esta vez un wallpaper (180 kb , paciencia) que realicé hace unos días, a ver qué tal os parece. Saludos

---

Rediseñando Korsarios

Bueno, ya casi esta listo el nuevo dise��e korsarios. Como novedades os adelanto que nos cambiamos a Movable Type como sistema de gestión del blog, que nos parece bastante más completo que Blogger.
En Cuanto al diseño del template pues me estoy encargando yo de él y lo estoy haciendo en xhtml y css y por eso estamos tardando un poco más en terminarlo, la idea es hacer un diseño fluido, sin tablas y que cumpla los estándares del w3c lo mejor posible y como sabeis los que os dedicais a esto pues no es nada fácil maquetar sólo con capas debido a las malas implementaciones del estandar CSS2 que hacen la mayoría �de los navegadores actuales.
En cuanto este listo prometo ofreceros una lista de recursos sobre CSS y estos temas más extensa, aunque con los enlaces que os dejo aquí teneis para rato los que esteis interesados. Saludos

---

NO WAR

Ahora que estoy de vacaciones me entretengo haciendo mis pinitos en photoshop, illustrator , etc... Hoy madrugué y me salió esto, espero vuestros comentarios korasarios

---