{"id":2668,"date":"2011-12-27T01:53:10","date_gmt":"2011-12-27T04:53:10","guid":{"rendered":"http:\/\/irisfernandez.com.ar\/betaweblog\/?p=2668"},"modified":"2011-12-27T01:53:10","modified_gmt":"2011-12-27T04:53:10","slug":"ano-nuevo-lenguaje-nuevo","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2011\/12\/27\/ano-nuevo-lenguaje-nuevo\/","title":{"rendered":"A\u00f1o nuevo, lenguaje nuevo"},"content":{"rendered":"

Me propongo para este pr\u00f3ximo a\u00f1o aprender a usar HTML5 y CSS3.
\nHoy hice mi primera animaci\u00f3n<\/a> utilizando este lenguaje y mis conocimientos del HTML y CSS en general, con lo cual no s\u00e9 si estoy utilizando correctamente todos los elementos o si estoy mezclando versiones (lo cual es muy probable).
\nCon todo mi entusiasmo logr\u00e9 hacer una humilde animaci\u00f3n de un amanecer, bas\u00e1ndome en estas explicaciones:<\/p>\n

-Crear una pelota movi\u00e9ndose horizontalmente usando HTML5: Animaci\u00f3n con HTML5 Canvas y Javascript<\/a>
\n-Utilizaci\u00f3n de capas en HTML: Capa sobre capa con z-index<\/a><\/p>\n

Mi c\u00f3digo es id\u00e9ntico al de la explicaci\u00f3n de la pelota movi\u00e9ndose horizontalmente, pero simplemente modifiqu\u00e9 la direcci\u00f3n del movimiento (vertical) y el color de la pelota, devenida sol \ud83d\ude42
\nAdem\u00e1s agregu\u00e9 una capa con un z-index 0, cuyo background es una imagen de pasto que dibuj\u00e9 con Gimp (que tiene un fondo transparente gracias a ser un archivo PNG).<\/p>\n

El ejemplo terminado por hoy: Amanecer<\/a><\/p>\n

Este es el c\u00f3digo html:
\n<!DOCTYPE html>
\n<head>
\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"amanecer.css\" \/>
\n<title>HTML5 Ejemplo 1<\/title>
\n<script type=\"text\/javascript\">
\nvar posX;
\nvar can;
\nvar contexto;
\nvar direccion;
\nwindow.onload = function() {
\ncan = document.getElementById(\"miCanvas\");
\ncontexto = can.getContext(\"2d\");
\nposY=15;
\ndireccion = 0;
\nsetInterval(\"dibujar()\",20);
\n}
\nfunction dibujar() {
\nif (direccion == 0)
\nposY++;
\nelse
\nposY--;
\nif (posY==350)
\ndireccion = 1;
\nif (posY==50)
\ndireccion = 0;
\ncan.width = can.width; \/\/ limpia el canvas
\ncontexto.strokeStyle = \"#FFFF00\";
\ncontexto.fillStyle = \"#FFFF00\";
\ncontexto.beginPath();
\ncontexto.arc(100,posY,50,0,Math.PI*2,true);
\ncontexto.closePath();
\ncontexto.stroke();
\ncontexto.fill();
\n}
\n<\/script>
\n<\/head>
\n<body>
\n<div id=\"pasto\"><\/div>
\n<canvas id=\"miCanvas\" height=\"200\" width=\"400\"
\nstyle=\"border: 1px solid #c3c3c3\">
\n<\/canvas>
\n<\/body>
\n<\/html>
\n<\/code><\/p>\n

Y aqu\u00ed el CSS:<\/p>\n


\nbody {
\nbackground:#66ccff;
\n}
\ndiv#pasto{
\nz-index:0;
\nposition: absolute;
\ntop:7em;
\nleft:0;
\nbackground:url(piso.png) repeat-x;
\nwidth:25em;
\nheight:20em;
\n}<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

Me propongo para este pr\u00f3ximo a\u00f1o aprender a usar HTML5 y CSS3. Hoy hice mi primera animaci\u00f3n utilizando este lenguaje y mis conocimientos del HTML y CSS en general, con lo cual no s\u00e9 si estoy utilizando correctamente todos los elementos o si estoy mezclando versiones (lo cual es muy probable). Con todo mi entusiasmo … Continuar leyendo “A\u00f1o nuevo, lenguaje nuevo”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2668","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/2668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=2668"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/2668\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=2668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=2668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=2668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}