Archivos de la categoría ‘Entradas

C# y Visual Studio, venid infieles

Domingo, junio 16th, 2013

Aunque haya aparcado este blog, voy a proseguirlo.

Muchos programadores tienen un blog en aras de aprender cada vez un poquito más y creo que voy a seguir un poco ese ejemplo. Supongo que lo acabaré aparcando, como normalmente hago con todo, porque ya sabéis: “Un blog, una responsabilidad”, pero todavía soy joven, e inmaduro.

Después de todo esto, acabo de empezar con C#, sí amigos, C#, Microsoft, un vendido, una sucia rata, un… VISUAL STUDIO ES TAN BONITO…

póngame visual studio

No voy a proseguir por el camino de la polémica, pero bueno después de haberme criado en un entorno Windows, tras Windows 95, 98, 2000, XP, 7 y ahora 8, tengo un poquitín de Microsoft (en el corazón) (dentro) en mi infancia y  me voy a sentir cómodo con poco en un entorno de programación, bastante más suave que el señor Eclipse y Java.

¿Qué ocurre cuando te encuentras un lenguaje de programación parecido al tuyo, pero que sabes que NO es igual al tuyo?

Los primeros segundos lloras, mucho. Añoras lo antiguo, hasta que empiezas a poner un poco de código y juegas con el diseñador de Visual Studio:

Imagen

Jugar es Divertido, y extender clases en c# también. Si quieres que tu clase Perro extienda de otra clase Mamifero, es así de sencillo:

class Perro: Mamifero{}

Y ya está a freír monas.

Te lees algún tutorial interesante como este: http://mundogeek.net/archivos/2009/05/08/introduccion-a-c-para-programadores-java/

O te miras videos en la página de Microsoft, pues hay material a rabiar.

Validación de la web. Todos los links para validar

Jueves, enero 10th, 2013

http://validator.w3.org/check?uri=http%3A%2F%2Fabenitoc.webuda.com%2Findex.html

http://validator.w3.org/check?uri=http%3A%2F%2Fabenitoc.webuda.com%2Fcontact.html

http://validator.w3.org/check?uri=http%3A%2F%2Fabenitoc.webuda.com%2Fportfolio.html

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fabenitoc.webuda.com%2Fstyles.css&profile=css3&usermedium=all&warning=1&vextwarning=

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fabenitoc.webuda.com%2Fnopixel.css&profile=css3&usermedium=all&warning=1&vextwarning=

La guinda del pastel (CÓDIGO KONAMI)

Jueves, enero 10th, 2013

Aquí hago un homenaje personal y para finalizar, a una de las razones existenciales de esta página web, de una manera muy particular, y como ya muchas webs anteriormente han hecho http://konamicodesites.com. Me explico:

A alguien se le ocurrrió, en honor a esos antiguos juegos que tenías que introducir trucos (con el mando de arriba arriba, abajo a bajo, L ,R), el hecho de crear un un js  para poder meter esos trucos en las páginas web también.

Ahí nace, el Konami Code.

Imagen

 

En la página web, http://code.google.com/p/konami-js/, podemos encontrar este js para poder descargar, te permite crear objetos Konami en js, que al introducir la combinación descrita anteriormente, ocurran eventos en la web. Observando el archivo js, podemos ver como traduce las pulsaciones de las diferentes teclas por números: 

“38384040373973…” que sería, Arriba, arriba, abajo, abajo, Izquierda, Derecha, Izquierda, derecha, B, A, Enter.

Imagen

 

Pues en mi caso y aprovechando esta librería, he creado de manera muy sencilla un script, que además he puesto directamente en el html, pues su objetivo es que cualquiera que sepa del tema pueda reconocerlo ipsofacto, esta alertilla.

Imagen

 

Así si introducimos este código en nuestra web, ocurre (arriba, arriba, abaj…):

Imagen.

De esta manera, con este guiño al pasado y al espíritu de mi web. Acabo para la evaluación, esta página.

Modificación final y estructuración antes de la entrega

Jueves, enero 10th, 2013

Para asimilar algún cambio más realizado después de haber dejado la página lo suficientemente bien para estar contento con ella, rehice mi index html, para darle una nueva estructura. Me parecía muy repetitivo tener a un lado trabajos y luego un portfolio. Así que concentre toda la parte más puramente curricular en la primera página. Añadiendo de esta manera dos nuevos títulos:

Imagen

 

Algún cambio en el css, como modificar un div de separación llamado content en la propiedad height, que previcamente había utilizado para dejar un margen entre el final de las columnas y el footer pasó de: 166px => 10 px, para simplemente dejar un poco de espaciado.

En la foto anterior también se puede ver el nuevo iconito que hice con la técnica tan recurrida en esta página web.

La estructura final de la web, queda así mucho más nítida en ambos css, styles.css y nopixel.css, menos cargante y sobretodo cumpliendo el objetivo, algo muy sencillo que en apenas dos clicks, puedes tener toda la información que buscas.

El aspecto final de la página principal, esta vez mucho más vistosa, queda algo así:

Imagen

Todavía tengo más ideas en el tintero, que no voy a llevar a cabo hasta dentro de un tiempo, porque si bien uno de los objetivos de la asignatura es que la web sea continuista, es decir que este trabajo no se quede olvidado en ninguna parte, también esa es la finalidad de esta web, que no se quede estancada y que se vaya nutriendo cada vez más de ciertos elementos que gracias a la asignatura, seré capaz de hacer en un futuro.

Aun así, esto no es todo todavía queda un toque especial…

Portfolio

Jueves, enero 10th, 2013

Para comenzar a explicar esta parte, tuve que hacer algunos cambios fundamentales en el código de javascript. Antes para cambiar entre página y página, lo que hacía era cargar el contenido por medio de Jquery en uno de los divs de la página, pero al intentar insertar un plugin de jquery que funciona a modo de portfolio dinámico con un filtro por botones…(http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours)

Imagen

 

… era incapaz de integrarlo, ni usando livequery, ni modificando el css. No, de ninguna manera.

Así que tuve que modificar la estructura y duplicar digamos el marco de la página inicial en tres páginas diferentes para poder hacerlo funcionar. Es una pena porque esto ralentiza la velocidad dentro de la página web, ya que es muy visual, y la comprobación del css la hace varias veces. Por falta de tiempo no he podido optimizarlo, no se me ha ocurrido una solución lógica, pero también es cierto que si no fuera por el hecho de que es OBLIGATORIO el uso de un cambiador de estilo, no hubiera hecho esta comprobación y no utilizaría 2 css distintos.

En la réplica de las páginas web, añadí estas lineas al final del css para poder garantizar la correcta utilización del plugin.

Imagen

Finalmente y a modo de ejemplo vienen unas cuantas imágenes para que veas el funcionamiento, que iré cambiando y añadiendo a lo largo de mi carrera profesional, pero básicamente, todos las imágenes están en una lista con esta estructura:

<li class=”PALABRAS CLAVE PARA FILTRADO”>
<a href=”LINK QUE REDIRIGE AL PINCHAR” title=””><img src=”IMAGEN A MOSTRAR(RESOLUCION 164X120)” alt=””></a>
<p>
NOMBRE A MOSTRAR DE BAJO DE LA IMAGEN
</p>
</li>

 

El resultado final  viene siendo algo así, pero ojo, todavía con imágenes de prueba:

Imagen

Contacto

Martes, enero 8th, 2013

Para poder rellenar el área de contacto, y poder establecer una relación con la temática pixelada de toda la página en sí, he decidido utilizar la técnica que llevo explicando durante todo el desarrollo, pero basándome en el favico de las redes sociales o en el icono de un sobre como mail pixelado para enlazar con mi contacto:

Imagen

Como siempre todas las imágenes fueron modificadas con el photoshop o con el pixlr dependiendo del a complejidad del trabajo, en este caso como por ejemplo en Linkedin.

retoques favico

 

 

 

 

 

 

 

 

En este caso extraje el favicon y con una combinación de 4 colores lo perfilé para hacerlo lo más fiel posible a la temática pero sin dejar de lado la esencia de linkedin.

Por ejemplo en este otro caso:

mail icon

 

 

 

 

 

 

 

Con una imagen cualquiera de un sobre, la adapte a la temática pixel.

Finalmente, introduje las imágenes en el ftp, y en el html pude enlazar todos los iconos a mis diferentes perfiles.

Paleta de colores

Jueves, noviembre 15th, 2012

Como muchas herramientas en internet, que te permiten elegir gamas de colores, compartir gamas y verificar la coloridad de tu web, para que no quede de forma asonante entre los elementos de la misma.

En este caso experimentamos con la herramienta Kuler de Adobe, que al analizar mi web, nos da los siguientes resultados:ImagenImagen

Proyecto del Curso (II): Web estática

Lunes, noviembre 12th, 2012

Presento la entrega número 2 de la página web y para empezar voy a hablar de recursos utilizados. Por un lado he utilizado un modelo de plantilla de HTML+CSS para comenzar la web de Free Css Templates, para todas las consultas referentes a la semántica de HTML y CSS W3Schools, finalmente el validador de CSS 2.1 que utiliza el plugin de Firefox de WebDeveloper, las fuentes fueron extraídas de Pointless and productions, utilicé JQuery v1.8.2 y su API y además utilicé GIMP/Adobe Photoshop CS2 para todo el tema de gráficos que excepto el fondo de las nubes y el sprite de hierba (ambos obtenidos de imágenes de google, y el de las nubes es temporal).

Ahora analicemos los contenidos por partes:

-Imágenes: Todas las imágenes siguieron el tutorial descrito anteriormente para pixelar cualquier fotografía. Todas hechas a mano, diseñadas por mí, en la mayoría de los casos, partía del modelo de imagen que te daba la plantilla, cogía el tamaño en píxeles, y desde cero empezaba a diseñar con la herramienta de tratamiento de imagen. Solo varió un poco en el tratamiento de los bordes y los botones planos, que básicamente las diseñaba en pequeñito pixel a pixel y luego las escalaba. El fondo es básicamente una única imagen de 3×3 con un color en cada píxel con una propiedad de multiplicación, que hace que se extienda por todo el fondo.

ImagenImagenImagenImagen

-Estructura: Descargué uno de los tantos HTML+CSS que se adecuaban al estilo que yo más o menos quería utilizar, leí todo el código y fui adecuándolo a mi gusto. Podría ir propiedad a propiedad, pero no tiene sentido. Básicamente establecí 4 zonas de importancia: masthead, featured-area, main-content y footer; correspondientes respectivamente a esas zonas que intuitivamente puedes encontrar más diferenciadas. Si tuviera que resaltar algo importante que hice fue el hecho de que para mantener las imágenes con el CSS y no tener que meterlas en el HTML, para así poder variar de forma sencilla utilicé la propiedad text-indent:-9999px; haciendo que se mantuviera la imagen pero así quitando todo el texto.

-JavaScript, Cookies y CSS: Por un lado, utilicé el JQuery, para la modificación del CSS, primero carga un css que no muestra nada nostyle.css y después aplica las cookies con JQuery.Cookie, por defecto carga el estilo style.css y si tiene uno de los dos estados, aplica el css asignado a esa cookie. Este es el contenido de toda la parte de Jquery utilizada.

$(document).ready(function(){

if($.cookie(“estado”)==null){
$.cookie(“estado”, “foo”);
}
if($.cookie(“estado”)==”foo”){
$(“link.changing”).attr(“href”, ‘styles.css’);
}

if($.cookie(“estado”)==”sharp”){
$(“link.changing”).attr(“href”, ‘nopixel.css’);
}

$(“#changecss”).click(function(){
$(“link.changing”).attr(“href”, ($(“link.changing”).attr(“href”)==’styles.css’) ? “nopixel.css” : “styles.css”);

if ($(“link.changing”).attr(“href”)==’styles.css’){
$.cookie(“estado”,”foo”,{expires: 7});
}
else
{
$.cookie(“estado”,”sharp”,{expires: 7});
}
});

$(“li#contact”).click(function(){
$(‘#main-content’).load(‘contact.html #content-contact’);
});

$(“li#portfolio”).click(function(){
$(‘#main-content’).load(‘portfolio.html #content-portfolio’);
});

});

-Validación: Todos los CSS usados y la página web, valida mediante el WebDeveloper. Si quieren ser validados deben ir uno a uno en local, pues en online, solo valida un css de “Pega” que tengo para que me cogiera el cambio de css con JQuery de manera efectiva.

Creo que hasta aquí todo lo que puedo comentar de esta entrega.

PIXLR un editor de fotos online y gratuito!

Miércoles, octubre 17th, 2012

“Me explico, sí PIXLR es un editor comparable con el GIMP o el PHOTOSHOP, pero a nivel mucho más básico. Le faltan un montón de herramientas de filtros, niveles, y demás, pero para lo más básico, hacer collages, incluso alguna composición de fotos más compleja, y hacer retoque de imagen es muy útil”

Ahora bien, lo que he visto realmente útil, es que puedes meter directamente la URL de la imagen y el programa te la carga vía online directamente. Creo que es la gran ventaja, además no requiere registro, ni nada aunque supongo que te otorgará alguna ventaja.

En cuanto a mi proyecto, sencillo muy básico:

-Primero tomé la foto de la escuela de la página web (http://www.etsit.upm.es/typo3temp/pics/e8eda9d386.jpg). Utilizándola como capa de fondo. A partir de aquí compondremos el trabajo final. Podría haberle metido un filtro artístico, pero no venía conveniente complicar mucho este trabajo.

Imagen

-Posteriormente cogí una foto antigua con una amiga mía, y utilizando la herramienta lazo (punto a punto siguiendo nuestro contorno, no se podía utilizar la varita mágica). La copie en una nueva capa sobre el fondo anterior. Después borré las zonas que todavía quedaban de borde, y al final con la esponja y con un filtro de enfoque acabé la figura. El último paso era escalar la imagen y moverla, seleccionándola y aplicando la libre transformación.

Imagen

Imagen

-Ahora tocaba la figura famosa. Procuré encontrar una que fuera graciosa poner en el tejado, porque en este tipo de foto sólo podía situar objetos en primer plano, pegado al borde inferior. O en segundo plano muy pegado a la izquierda, a la entrada de la escuela, o finalmente arriba en el tejado (al menos eso veía más coherente). Encontré una figura que  se ajustara a lo que yo buscaba:

Imagen

 

Además procuré que fuera el fondo blanco, pues el hecho de utilizar el lazo poquito a poco e ir recontando, suele ser más pesado que utilizar la varita mágica. Esta herramiente te permite seleccionar las cosas que comparten el mismo color. Entonces seleccionas el fondo, inviertes la selección en herramientas, y finalmente copias y pegas la figura en tu proyecto.

Con el borrado borras algún desperfectillo y con la transformación libre (botón derecho, transformación libre), lo colocas donde prefieras, le cambias el tamaño, lo rotas, etc. Finalmente utilicé la herramienta de fuente y situé el texto en la parte superior de la foto.

 

Imagen

 

Este es el resultado.

Como intenté automatizar un proceso y acabé haciendo el “hardcore”

Miércoles, septiembre 26th, 2012

Voy a explicar esto de automatizar un proceso porque seguramente os suene a chino.

Cuando empecé a hacer la web portfolio, decidí desmarcarme el concepto de mi persona en el mundillo utilizando una temática pixelada de los primeros juegos de ordenador y consola :

El problema era sencillo, ¿cómo se puede hacer esto realidad?

Pues como la mayoría de la gente que quiere aprender a hacer algo con un ordenador: Preguntar a San Google, buscar aplicaciones alternativas para solventar tu problema, buscar tutoriales en foros, toquetear todos los filtros de photoshop hasta intentar encontrar una solución adecuada…

Y así ocurrió, a por las soluciones prefabricadas, hice uso de “http://www.cartoonize.net/“, pero el resultado me parecía demasiado poco estilo videojuego y más de viñeta de comic. Luego busqué en “http://www.befunky.com/” pero el resultado me parecía muy sucio, encontré otra página que te permitía pseudo vectorizar la imagen y darle un efecto tipo videojuego de los años 1996-2000 (Metal Gear 1 o Super Mario 64) como cuadriculado, pero mi efecto era de un videojuego más antiguo y menos capaz. Siento no recordar el programa, pero estaba cansado ya, pero seguro que buscas “pixelate photo” o “make a photo look like a videogame” por google y aparecerá pronto.

En otro campo de soluciones fui al” do it yourself in photoshop”, ya usando los tutoriales que previamente había guardado en la primera búsqueda. Y entre ellos: “http://forums.themavesite.com/index.php?topic=716.0“, “http://answers.yahoo.com/question/index?qid=20090202211708AAyh45y“, en general muchas soluciones, en las que en teoría todo ocurría por medio de filtros y cambio de paleta de colores, y bueno algo conseguí (solo enseño lo mejor):

 

Pero no me convencía en absoluto. Necesitaba otra solución. Estaba bien, y posiblemente me podía solucionar la vida en la pagina web final, pero insuficiente aún. Y como buen ingeniero en sus momentos de desesperación, sí amigos… decidí hacer el borrico. Os voy a explicar el proceso con cierto detalle:

Cogí mi foto inicial:

 

Primero corté la imagen y quité el fondo. Sencillo.

Entonces reduje la imagen a escala en un ancho a 100px. e hice zoom. Cogí los colores más notables de la imagen (entre 16 y 17 colores), me hice una paleta en uno de los lados de la imagen (en otra capa) y con el bendito lápiz a rellenar puntito a puntito. Sí, puntito a puntito, utilizando tres colores para cada zona del mismo color y con mucha calma y paciencia me rellené a mi mismo a base de píxeles. Y este fue el resultado final:

 

La clave para darle mayor apariencia fue que en las zonas de cambio de sombra, hice una especie de maya de píxeles de ambos colores de cambio, en forma de tablero de ajedrez. Y bueno, la verdad es que viendo el resultado sería interesante, poder automatizar lo que yo hice a mano, pero todavía no tengo la suficiente idea de programación gráfica, y transformar mi algoritmo a programa todavía es una utopía. Ahora toca hacer fotos en diferentes planos y trabajar en el pixelado, hacer marcos y esctructurar el contenido utilizando toda esta estética.

Subiré más imágenes cuando vaya trabajando en ellas. Un saludo!