Coursera es una empresa que, por parte de las mejores universidades en el mundo imparte cursos online Gratis para cualquiera que los quiera tomar. Tiene una vision en el futuro y espera educar online de miles a millones de estudiantes. Tienen la tecnologia y de mano de los mejores prefesores para educar a cientos o miles de estudiantes. LEER MÁS »
Bueno he de decir que apartir de ahora vamos a marcar un punto de no retorno, donde todo lo que sabemos lo vamos a aplicar con conciencia en el impacto que tendra en la vida diaria. y esque crear software no es solo hacer aplicaciones que sumen , resten, meter y sacar cosas de una BD, hacer un slide de imagenes. Sino la aplicacion que los usuarios le dan a estas.
Para obtener el valor de las flechas del teclado en si , el llamado keyCode bastara usar una funcion con un parametro llamado event que sera quien lleve los datos de la tecla presionada en cuestion, esto se activara con cualquier evento normal de javascript.
En el ejemplo que nos ocupa ahora usaremos el ejemplo onkeyup que se activa cuando la tecla deja de ser presionada.
Escrito por document.querySelector("#cajadetexto").onkeyup = function(event){
alert(event.keyCode);
}
Al presionar una tecla sobre la caja de texto con id=”cajadetexto” se nos lanzara una alerta con el valor del caracter de la tecla presionada.
Los valores de las 4 flechitas del teclado son :
<- : 37
arriba : 38
-> : 39
abajo : 40
Se pueden hacer verificaciones de las teclas presionadas sabiendo el codigo de cada tecla, con esto podriamos programar por ejemplo una accion determinada al presionar alguna tecla.
En una entrada anterior hablamos de lo que era Three.js , continuaremos nuestro viaje por la senda del desarrollo 3D esta vez desarrollando un cubo, lo haremos con el poder que nos presta Three.js la libreria esta aqui lista para agregar al proyecto.
Hay muchos conceptos y detalles 3D que aun vamos a ignorar en este articulo, los guardaremos para despues ya que tengamos un poco mas de practica en el desarrollo de objetos basicos con Three.js.
Bueno lo primero que haremos sera tomar nuestro contenedor y crear nuestra escena, en el articulo anterior ya hablamos de ellos, pero esperamos en un articulo futuro hablar de esto con mucho mas detalle.
container = document.getElementById( 'container' ); scene = new THREE.Scene();
Quiero dar una introduccion a este articulo que lei en html5rocks.com para que empezemos a crear nuestros desarrollos de Graficos en 3D Con la ayuda de la libreria Three.js.
Usaremos Three.js para crear desarrollos en 3D en nuestro navegador de la mano de Javascript. Con esto vamos a crear camaras, objetos luces , materiales y mas , y tendremos la opcion de renderizar , lo caul significa que podremos elegir entre HTML5 Canvas , WebGL o SVG.Para crear cosas asombrosas con Three.js vamos a necesitar gastar mucho tiempo en leer ejemplos y hacerles ingenieria inversa.
Naturalmente cuando pensamos en crear una pagina una pagina web y tenerla alojada en algun servidor o usar un servidor de paginas web siempre llega nuestra mente o en nuestras busquedas de gooogle el Apache Server o el IIS de Microsoft pero cuando uno se esta iniciando en el mundo de las paginas web Apache es suficiente.
Si hablamos de algun lenguaje de servidor con los amigos lo primero que saltara en la platica sera PHP , Acontinuacion hemos hecho una recopilacion de “Servidores” que aparte de que sirven las paginas web nos sirven como lenguaje en el lado del servidor dandonos opciones de elejir cual se apegue mas a nuestras necesidades de desarrolladores de aplicaciones y como siempre … todas libres.
Google AppEngine
El motor de aplicaciones de google es una excelente fuente para crear aplicaciones web para empezar a familiarizarse con este engine google dispone de una version descargable-instalable que para probar y crear aplicaciones que corran sobre la maquina en cuestion.
El motor de aplicaciones de google brinda alos desarrolladores toda la experiencia de escalabilidad de software y apis supercargadas con servicios como cola de tareas , XMPP y SQL en la nube. hay versiones del Google Appengine para Python, Go y Java.
Direccion : https://developers.google.com/appengine/
Las transformaciones en CSS3 son especiales para cuando queremos darle un toque a nuestras cajas [div,span, etc] o a nuestras imagenes, las transformaciones que trae CSS3 son scale, rotate,skew y translate … nosotros solo nos vamos a fijar en las primeras 2.
Transformaciones CSS3 Rotacion
Entrando al tema que nos toca las trasnformaciones , de nuevo nos vamos a enfocar en los navegadores Firefox y Chrome … prefijos … moz y webkit.
Los atributos de las transformaciones son :
-webkit-transform : transformacion
-moz-transform : transformacion
donde transformacion puede tomar los valores :
scale(escala) , rotate(angulo) que seran los insdispensables para esta entrada . si tenemos una imagen por ejemplo la de drupal : cuyo codigo es :
<img title="Drupal" src="http://pharalax.com/blog/wp-content/uploads/2012/06/Drupal-262x300.png" alt="" width="262" height="300" />
La caracteristica de transiciones y rotaciones en CSS3 sirve para hacer paso de efectos y modificaciones de elegancia a nuestro dise~os en nuestras paginas y cada vez mas estas caracteristicas estan tomando mas fuerza, normalmente los navegadores que soportan mas estas caracteristicas son firefox y google-chrome, las practicas que haremos aqui estaran para ambos navegadores.
Transiciones CSS3
Las trancisiones nos ayudan a hacer una ilusion de pausa en el transcurso de un evento en una pagina web mas claro el vivo efecto hover cuando nosotros aplicamos hover a un elemento y pos ejemplo hacemos que al pasar el mouse se cambie el color de fondo, esto pasa de manera INSTANTANEA , se ve bien pero pierde elegancia. Con una transicion podemos hacer que esto no sea instantaneo si no que haya un efecto mas …
A continuacion tenemos un menu de 5 opciones que no tienen ninguna accion especifica pero la usaremos como conejillo de indias. El codigo es :
<html>
<head>
<style>
nav ul {
list-style : none ;
}
nav ul li {
display : inline ;
margin-left : 20px ;
border : 2px black solid ;
background : #aaa ;
padding : 3px ;
}
nav ul li:hover {
background : #00ffee ;
}
</style>
</head>
<body>
<h2>Prueba de Transiciones 1</h2>
<p>Prueba sin Transicion ...</p>
<nav>
<ul>
<li>Inicio</li>
<li>Documentos</li>
<li>Descargas</li>
<li>Servicios</li>
<li>Acerca de ...</li>
</ul>
</nav>
</body>
</html>
Este ejemplo lo podras ver Aqui
Los filtros en CSS son excelente herramientas para poner efectos a las imagenes de una pagina web, Vamos a cubrir los efectos de CSS con algunos ejemplos.
Que es un filtro exactamente ? La forma mas facil de entender un filtro , es como un paso de post-proceso magico que hace cosas hermosas en el contenido de la pagina web.
Si no puedes ver los efectos que se aplican en las imagenes es por que solo funciona en google-chrome por ser esta caracteristica parte de CSS3.
Los filtro que podemos Usar
Son varios los tipos de filtros que podemos usar en nuestras paginas web y cada uno con funciones diferentes que le pueden dar un toque mas especial a nuestros dise~os.
+ grayscale(porcentaje)
+ sepia(porcentaje)
+ saturate(porcentaje)
+ hue-rotate(angulo)
+ invert(porcentaje)
+ optacity(porcentaje)
+ brightness(porcentaje)
+ contrast(porcentaje)
+ blur(radio)
Vamos a dejar claro que es un CSV pues bien es el acronimo en ingles de Comma Separated Values que traducido es Valores separados por coma , parece que ya se ha hablado en este blog de este tipo de archivos pero en c# o auto it … ahora nos toca analizarlo con Python.
Lo que vamos a hacer sera leer un conjunto de datos CSV de un archivo .csv con python y traducirlo a una tablita en html para que sea mejor leido por el usuario…
Los datos que tendremos en el archivo .csv seran :
Larry Page & sergey Brin, Google, www.google.com Bill gates , Microsoft , www.microsoft.com steve jobs ,Apple, www.apple.com carlos Slim,Telmex,www.telmex.com
Pero Pueden ser Cualquiera El Programa en Python que usaremos :
lines = open("empresarios.csv").readlines()
print "<table><tr><td>Fundadores</td><td>Mepresa</td><td>Dominio .com</td></tr>";
for line in lines:
l=line.split('\n')
campos = l[0].split(',')
print "<tr>"
for campo in campos:
print "<td>",campo,"</td>"
print "</tr>"
print "</table>"
La primera linea del script de python es la que nos abre el archivo extrae todas las lineas en la variable lines.
Posteriormente ejecutamos un ciclo for donde recorremos linea por linea el archivo , dentro de este cliclo for aplicamos Split(‘,’) para leer los cada campo dentro de la variable campos el cual crea la tabla y va escribiendo en pantalla el codigo HTML.
En la terminal hacemos una redireccion al archivo fundadores.html para que la tabla quede garbada en dicho archivo y finalmente vemos los resultados en el navegador …
He Aqui el Video : [Video] CSV Python
