Lectura Recomendada - Desarrollo de Videojuegos 2da Edición

La recomendación de hoy trata de un área que en lo personal me llama mucho la atención, el desarrollo de videojuegos, y es que a pesar de no contar con el tiempo para dedicarle a esta rama del desarrollo, es un sueño que no pienso abandonar.

Mi recomendado es el curso de Desarrollo de Video Juegos, que actualmente va en su segunda edición, y que es auspiciada por la Universidad Castilla La Mancha.

Lo que más me gusta de este curso, es que es material de calidad, no solo en cuanto a contenido, sino también en cuanto a maquetación y diseño de los libros; totalmente en español e incluye las fuentes de los ejemplos desarrollados y es totalmente gratuito.

El modelo de negocio está en impartir los cursos presenciales, los cuales se apoyan en los libros que ya he mencionado, creo firmemente que deberían existir más iniciativas de este tipo, donde el conocimiento se difunda de una forma libre, pero que al mismo tiempo permita a sus autores y auspiciantes percibir ingresos que les permitan continuar con sus valiosas labores como escritores y difusores de conocimiento.

El curso está compuesto por cuatro libros:

Volumen 1 - Arquitectura del Motor

Escrito por David Vallejo Fernández y Cleto Martin, trata los siguientes temas:

• Introducción y Herramientas
• C++ Básico
• Patrones de Diseño
• STL y Contenedores
• Gestión de Recursos
• Concurrencia

Volumen 2 - Programación Gráfica

Escrito por Carlos González Morcillo, Javier Albusac, Cesar Mora Castro y Sergio Fernández Duran, trata los siguientes temas:

• Fundamentos
• APIs e Interacción
• Materiales y Texturas
• Iluminación
• Animación
• Simulación Física

Volumen 3 - Técnicas Avanzadas

Escrito por David Villa, Sergio Pérez, Francisco Moya, Miguel Redondo, Jorge López, Félix Villanueva, Cesar Mora, Miguel García y José González trata los siguientes temas:

• Jugabilidad
• C++ Avanzado
• Optimización y Pruebas
• Representación Avanzada
• Plataformas Móviles

Volumen 3 - Desarrollo de Componentes

Escrito por Francisco Jurado, Javier Albusac, José Jesús Castro, David Vallejo, Luis Jiménez, Félix Villanueva, David Villa, Carlos González, Guillermo Simmross y David Frutos, cubre los siguientes temas:

• Inteligencia Artificial
• Networking
• Sonido y Vídeo
• Interfaces Avanzadas

Es sin duda un material de excelente calidad, que no debería faltar en nuestra biblioteca virtual, los afortunados que viven en España podrán tomar las clases presenciales, pero para los que no tenemos esta oportunidad, acá les dejo el enlace al sitio oficial.

Etiquetas de Technorati: Videojuegos,Tecnologia,Libros,Recomendaciones,Noticias,Novedades

Lectura Recomendada - Introducción a Node.js a través de Koans de Arturo Muñoz de la Torre

En esta ocasión mi recomendación esta recién salida del horno, y se trata de una obra de Arturo Muñoz de la Torre, en la se pretenden establecer unas líneas de aprendizaje de la plataforma Node a través de un recorrido interactivo por sus principales módulos, tanto propios como de terceras partes, con el que introducirse y asentar sus principios básicos de funcionamiento.

Es un libro bastante interesante, al menos en lo que a mi respecta, me atrae la idea de aprender a través de la practica, además que es una iniciativa libre, es decir, que se dispone de el material fuente, y es posible colaborar en el proyecto, ampliando al información, aportando recomendaciones de mejora y mucho mas.

Pueden encontrar mas información respecto de este maravilloso proyecto acá, si desean descargar el libro, o las fuentes.

Lectura Recomendada - CSS Avanzado de Javier Eguíluz Pérez

Siguiendo la línea de mi anterior recomendación, les dejo otro libro del mismo autor. En este se tratan aspectos avanzados de CSS, y es sin duda un buen punto de partida para aquellos que deseen adentrarse un poco mas en los aspectos mas notables de CSS.

Dejo claro que trata sobre la versión 2.1, y que es de fecha del 2009, aun así es un excelente material de estudio, es gratuito y completamente en español.

Pueden encontrar su versión imprimible acá, y la versión online acá.

Lectura Recomendada - Introducción a CSS de Javier Eguíluz Pérez

Hoy les traigo otra recomendación, como siempre gratuita, y es que me han preguntado por una guía de inicio para CSS, y al proceder la consulta de una persona que apenas se inicia en este mundillo, y como suele suceder, no están dispuestos a invertir dinero en libros, menos aun cuando no están en español.

Para su suerte, recordé que hace algún tiempo Javier Eguíluz Pérez publico un gran material al respecto, el cual coloco hoy como recomendación para aquellos que estén buscando material introductorio a CSS en español y gratuito.

Dejo claro que el material trata la versión 2 de CSS, y que la fecha de este es del 2009, pero mas allá de esto es una excelente fuente de información y tengo seguro que será de utilidad para mas de uno.

Pueden encontrar la versión imprimible acá, o la versión online acá.

Lectura Recomendada – Guía Completa de CSS 3 de Antonio Navajas

Resultado de estar siempre buscando fuentes de información (de preferencia libres), me he encontrado con este manual, de la autoría de Antonio Navajas, he de aclarar que no es precisamente una guía para novatos, pero es de bastante utilidad.

En esta completa guía, el autor nos muestra el uso de los nuevos selectores, los pseudo elementos, las pseudo clases y toda una serie de efectos estéticos que abarcan desde la tipografía a las transformaciones 3D.

La mejor parte, es que es material de libre distribución, así que nuestro bolsillo lo agradecerá, esta guía esta disponible para su descarga desde el sitio del autor, o desde acá.

Tips CSS3 – Colores RGBA

Una de las buenas nuevas en CSS3, es el soporte RGBA, el cual nos brinda la capacidad de usar transparencias. RGBA es similar a RGB, pero con la adición de un canal extra, conocido como canal Alfa el cual define la opacidad de un píxel en una imagen.

Esto quiere decir, que a un elemento que admita transparencia, a los tres canales de color básicos RGB que definen la cantidad de rojo, verde y azul respectivamente del píxel, se añade un cuarto canal, el alfa, que define el grado de opacidad de ese píxel.

En lo que a trabajar en la web refiere, los valores del canal alfa están comprendidos entre 0 y 1, donde 0 significa que el píxel no tiene ninguna opacidad, es decir es completamente transparente y 1 significa que el píxel carece de transparencia alguna, es decir, es completamente opaco.

De esta forma, suponiendo que el color se expresa utilizando una tupla RGBA, los valores { 255, 0, 0, 0.5 } implicaría un píxel de color rojo puro y con un 50% de opacidad.

Ahora veamos como hacer uso de este formato con CSS3, aplicando color al fondo de las secciones definidas.

<td>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(255, 0, 0, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(0, 0, 255, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(0, 255, 0, 1)  ;"></div>

</td>

<td>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.2);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.4);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.6);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 0.8);"></div>

    <div class="cuadrado" style="background: rgba(255, 125, 0, 1)  ;"></div>

</td>

Esto luce así:

También podemos aplicarlo a otros elementos, por ejemplo a un texto:

<div style="color: rgba(200, 0, 0, 0.3);">Texto con transparencia</div>

<div style="color: rgba(200, 0, 0, 0.7);">Texto con transparencia</div>

Esto nos permitirá ver el color de nuestro texto con transparencia, tal como vemos a continuación:

Ejemplo de texto con transparencias

Texto con transparencia

Texto con transparencia

Como podemos ver es muy fácil lograr efectos interesantes usando las nuevas funcionalidades incluidas en CSS3, y con un poco de practica e ingenio no queda mas limite que la imaginación.

Tips HTML5 – Control url

Este es un control de formulario, de tipo gráfico, es un subtipo del control input, el cual nos presenta un cuadro de texto, pero con la ventaja de que trae incluido un mecanismo de validación que verifica la validez de la url ingresada.

Es un control realmente útil, y muy fácil de usar.

<input type="url" name="userWebSite" size="50">

Con la adición de CSS podemos lograr efectos interesantes.

Tips HTML5 – Control number

El control number es un elemento de formulario, de tipo gráfico, es un subtipo del control input, el cual nos permite contar con un control que se asimila a un contador, el cual nos permite ingresar un numero comprendido dentro de un rango definido, bien sea de forma manual, o haciendo uso de un par de flechas que nos permiten aumentar o disminuir la cuenta.

Es muy fácil de usar y muy practico, por ejemplo en un formulario de pedidos para definir la cantidad de productos a comprar.

<input type="number" name="cantidad" min="1" max="50" value="1">

Para usar este control es necesario definir el tipo del input como number, y tiene los siguientes atributos:

• min = define el valor mínimo que puede ser seleccionado.
• max = define el valor máximo que puede ser seleccionado.
• step = define el paso, o valor del intervalo.
• value = indica el valor por defecto que tendrá el control.

Y se ve tal como se muestra en la imagen:

Tips HTML5 – Control color

Este es un control de formulario, de tipo gráfico que es en realidad un subtipo del control input, y nos permite desplegar en nuestra aplicación web un control similar al del calendario, pero que nos permite seleccionar colores en vez de fechas.

Esta claro que muchos notaran su gran utilidad, por ejemplo, si deseo que mi web goce de la capacidad de ser personalizable, entonces este control permitirá al usuario seleccionar el color de fondo, de las letras, etc.

Su uso es muy sencillo, tal como vemos a continuación:

<input type="color" name="backgroundColor">

Para usar este control, el tipo del input debe estar definido como color.

Al igual que algunos otros controles, a la fecha no esta soportado por todos los navegadores disponibles, así que les dejo la captura de pantalla de Opera.

Tips HTML5 – Control slider

Este es un control es formulario, es un control de tipo gráfico, es en realidad un subtipo del control input, y nos permite crear un slider, que no es mas que un control deslizante, similar a un control de volumen, el cual nos permite seleccionar un valor dentro de un rango definido.

Su uso es realmente sencillo y es de mucha utilidad.

<input type="range" id="puntaje" min="1" max="10"/>

Para usar este control, debemos definir el input de tipo range, y cuenta con los siguientes atributos:

• min = define el valor mínimo que puede ser seleccionado.
• max = define el valor máximo que puede ser seleccionado.
• step = define el paso, o valor del intervalo.
• value = indica el valor por defecto que tendrá el control.

Tristemente aun no esta soportado en Firefox que es mi navegador preferido, así que dejo una captura de como se ve en Opera.

Lectura recomendada – Fundamentos de JQuery de Rebecca Murphey en español

Para aquellos que quieran empezar con JQuery, hoy les traigo una lectura recomendada, su autora goza de gran reconocimiento en el área de desarrollo web, y no cabe duda que el material es de gran calidad, y sobre todo, completamente libre.

Originalmente fue publicado en ingles, y esta disponible acá, debido a la buena acogida que esta iniciativa tuvo, Leandro D'Onofrio se dio a la tarea de traducir el libro, el cual se encuentra disponible en www.librojquery.com, también lo pueden obtener junto con las fuentes de los ejemplos en la pagina de GitHub del proyecto, o acá directamente.

Tengan en cuenta que es un proyecto que aun esta activo y se esta actualizando con frecuencia, por lo tanto es recomendable darse una vuelta por su sitio con alguna frecuencia en busca de actualizaciones.

Tips HTML5 – Control Calendario

Una de las novedades incluidas en HTML5 a sido una amplia variedad de controles de tipo gráfico, en este momento vamos a ver como usar el nuevo control calendario incluido en HTML5.

Este es básicamente un subtipo derivado del control input, y su uso es realmente sencillo.

<input type="date" id="cumpleanos" name="cumpleanos"/>

Como se puede observar es muy fácil de usar, desafortunadamente a la fecha aun no esta soportado por todos los navegadores, así que para facilitar las cosas adjunto una imagen de como se muestra el control en Chrome.

Por otra parte, existen otros tipos de calendarios, los cuales nos permiten seleccionar la fecha y hora, semanas enteras y meses enteros, lo que en realidad me parece genial.

En el caso de fecha y hora cambiamos el tipo a datetime y listo:

<input type="datetime" id="citamedica" name="citamedica"/>

Este control luce así en Opera.



Si queremos seleccionar semanas completas solo cambiamos el tipo a week y listo.

<input type="week" id="vacaciones" name="vacaciones"/>

Este control luce así en Opera


Y por ultimo los meses, para este caso cambiamos el tipo por month y ya podremos seleccionar mese completos.

<input type="month" id="capacitacion" name="capacitacion"/>

Este control luce así en Opera

Como pueden ver son de gran utilidad y muy fáciles de usar, ahora con un poco de CSS de seguro que se logra una gran apariencia.

Tips CSS3 – Colores predeterminados

Como bien sabemos cada nueva versión de CSS trae consigo grandes mejoras, en este caso vamos a hablar acerca del soporte de colores, y es que en la nueva versión se soportan 147 colores de forma predeterminada, lo que sin duda alguna es de gran ayuda para todos.

A continuación dejo la tabla con dichos colores, tomada de la definición de la W3C. Si desean profundizar mas sobre el modulo de colores y las mejoras que incluye pueden revisar la especificación.

Named	Numeric	Color name	Hex rgb	Decimal
		aliceblue	#f0f8ff	240,248,255
		antiquewhite	#faebd7	250,235,215
		aqua	#00ffff	0,255,255
		aquamarine	#7fffd4	127,255,212
		azure	#f0ffff	240,255,255
		beige	#f5f5dc	245,245,220
		bisque	#ffe4c4	255,228,196
		black	#000000	0,0,0
		blanchedalmond	#ffebcd	255,235,205
		blue	#0000ff	0,0,255
		blueviolet	#8a2be2	138,43,226
		brown	#a52a2a	165,42,42
		burlywood	#deb887	222,184,135
		cadetblue	#5f9ea0	95,158,160
		chartreuse	#7fff00	127,255,0
		chocolate	#d2691e	210,105,30
		coral	#ff7f50	255,127,80
		cornflowerblue	#6495ed	100,149,237
		cornsilk	#fff8dc	255,248,220
		crimson	#dc143c	220,20,60
		cyan	#00ffff	0,255,255
		darkblue	#00008b	0,0,139
		darkcyan	#008b8b	0,139,139
		darkgoldenrod	#b8860b	184,134,11
		darkgray	#a9a9a9	169,169,169
		darkgreen	#006400	0,100,0
		darkgrey	#a9a9a9	169,169,169
		darkkhaki	#bdb76b	189,183,107
		darkmagenta	#8b008b	139,0,139
		darkolivegreen	#556b2f	85,107,47
		darkorange	#ff8c00	255,140,0
		darkorchid	#9932cc	153,50,204
		darkred	#8b0000	139,0,0
		darksalmon	#e9967a	233,150,122
		darkseagreen	#8fbc8f	143,188,143
		darkslateblue	#483d8b	72,61,139
		darkslategray	#2f4f4f	47,79,79
		darkslategrey	#2f4f4f	47,79,79
		darkturquoise	#00ced1	0,206,209
		darkviolet	#9400d3	148,0,211
		deeppink	#ff1493	255,20,147
		deepskyblue	#00bfff	0,191,255
		dimgray	#696969	105,105,105
		dimgrey	#696969	105,105,105
		dodgerblue	#1e90ff	30,144,255
		firebrick	#b22222	178,34,34
		floralwhite	#fffaf0	255,250,240
		forestgreen	#228b22	34,139,34
		fuchsia	#ff00ff	255,0,255
		gainsboro	#dcdcdc	220,220,220
		ghostwhite	#f8f8ff	248,248,255
		gold	#ffd700	255,215,0
		goldenrod	#daa520	218,165,32
		gray	#808080	128,128,128
		green	#008000	0,128,0
		greenyellow	#adff2f	173,255,47
		grey	#808080	128,128,128
		honeydew	#f0fff0	240,255,240
		hotpink	#ff69b4	255,105,180
		indianred	#cd5c5c	205,92,92
		indigo	#4b0082	75,0,130
		ivory	#fffff0	255,255,240
		khaki	#f0e68c	240,230,140
		lavender	#e6e6fa	230,230,250
		lavenderblush	#fff0f5	255,240,245
		lawngreen	#7cfc00	124,252,0
		lemonchiffon	#fffacd	255,250,205
		lightblue	#add8e6	173,216,230
		lightcoral	#f08080	240,128,128
		lightcyan	#e0ffff	224,255,255
		lightgoldenrodyellow	#fafad2	250,250,210
		lightgray	#d3d3d3	211,211,211
		lightgreen	#90ee90	144,238,144
		lightgrey	#d3d3d3	211,211,211
		lightpink	#ffb6c1	255,182,193
		lightsalmon	#ffa07a	255,160,122
		lightseagreen	#20b2aa	32,178,170
		lightskyblue	#87cefa	135,206,250
		lightslategray	#778899	119,136,153
		lightslategrey	#778899	119,136,153
		lightsteelblue	#b0c4de	176,196,222
		lightyellow	#ffffe0	255,255,224
		lime	#00ff00	0,255,0
		limegreen	#32cd32	50,205,50
		linen	#faf0e6	250,240,230
		magenta	#ff00ff	255,0,255
		maroon	#800000	128,0,0
		mediumaquamarine	#66cdaa	102,205,170
		mediumblue	#0000cd	0,0,205
		mediumorchid	#ba55d3	186,85,211
		mediumpurple	#9370db	147,112,219
		mediumseagreen	#3cb371	60,179,113
		mediumslateblue	#7b68ee	123,104,238
		mediumspringgreen	#00fa9a	0,250,154
		mediumturquoise	#48d1cc	72,209,204
		mediumvioletred	#c71585	199,21,133
		midnightblue	#191970	25,25,112
		mintcream	#f5fffa	245,255,250
		mistyrose	#ffe4e1	255,228,225
		moccasin	#ffe4b5	255,228,181
		navajowhite	#ffdead	255,222,173
		navy	#000080	0,0,128
		oldlace	#fdf5e6	253,245,230
		olive	#808000	128,128,0
		olivedrab	#6b8e23	107,142,35
		orange	#ffa500	255,165,0
		orangered	#ff4500	255,69,0
		orchid	#da70d6	218,112,214
		palegoldenrod	#eee8aa	238,232,170
		palegreen	#98fb98	152,251,152
		paleturquoise	#afeeee	175,238,238
		palevioletred	#db7093	219,112,147
		papayawhip	#ffefd5	255,239,213
		peachpuff	#ffdab9	255,218,185
		peru	#cd853f	205,133,63
		pink	#ffc0cb	255,192,203
		plum	#dda0dd	221,160,221
		powderblue	#b0e0e6	176,224,230
		purple	#800080	128,0,128
		red	#ff0000	255,0,0
		rosybrown	#bc8f8f	188,143,143
		royalblue	#4169e1	65,105,225
		saddlebrown	#8b4513	139,69,19
		salmon	#fa8072	250,128,114
		sandybrown	#f4a460	244,164,96
		seagreen	#2e8b57	46,139,87
		seashell	#fff5ee	255,245,238
		sienna	#a0522d	160,82,45
		silver	#c0c0c0	192,192,192
		skyblue	#87ceeb	135,206,235
		slateblue	#6a5acd	106,90,205
		slategray	#708090	112,128,144
		slategrey	#708090	112,128,144
		snow	#fffafa	255,250,250
		springgreen	#00ff7f	0,255,127
		steelblue	#4682b4	70,130,180
		tan	#d2b48c	210,180,140
		teal	#008080	0,128,128
		thistle	#d8bfd8	216,191,216
		tomato	#ff6347	255,99,71
		turquoise	#40e0d0	64,224,208
		violet	#ee82ee	238,130,238
		wheat	#f5deb3	245,222,179
		white	#ffffff	255,255,255
		whitesmoke	#f5f5f5	245,245,245
		yellow	#ffff00	255,255,0
		yellowgreen	#9acd32	154,205,50