Archivo de la categoría: JavaScript

El método «arc» en un objeto canvas

EL método «arc» se utiliza para dibujar en pantalla arcos con determinados parmámetros. En nuestro ejemplo dibujaremos un círculo completo.
Los parámetros son: arc(posicionX,posicionY,radio,angulos,circunferencia)

//llamo al canvas en la variable c:
var c = document.getElementById("circulo");

var ctxt = c.getContext("2d");
//comienza a dibujar
ctxt.beginPath();
//llama a arc(posicionX,posicionY,radio,angulos)

context.arc(x,y,r,anguloInicio,anguloFin,sentidoHorario);
ctxt.arc(100,100,50,0,2*Math.PI);
//dibuja
ctxt.stroke();

See the Pen
eqzrWX
by Germán Wasem (@germ-n-wasem)
on CodePen.

 

¿Qué es Canvas de HTML5?

Personalmente  siempre fui un programador de ActionScript orientado a objetos,  hasta que llegó el día: Adobe anunció la muerte de flash . A todos los que aún programan en AS3, los aliento a migrar cuanto antes sus trabajos a este nuevo objeto que pasaré a explicar, el Canvas, de HTML5.

Mediante el uso de librerías, sprites y JavaScript se puede hacer un juego igual de complejo y entretenido que cualquier juego en flash. Las posibilidades de ahora son muy competentes, y más rápidas. Cualquier juego empleando canvas y javascript es muchísimo más liviano que su homólogo con flash. Además  no necesita  plugin, este maravilloso canvas está integrado en las etiquetas del lenguaje.

Básicamente con algunas imágenes, algo de javascript, css y una etiqueta canvas, podemos lograr si no un juego, al menos algo llamativo.

Insertando el canvas

Dentro del body del documento, el objeto se declara así:

<canvas id="testCanvas" width="500" height="500">
El texto contenido dentro de la etiqueta se muestra en los navegadores que no soporten esta función.</canvas>

Luego  insertar el contenido (en este caso dibujando en JavaScript)

 


var canvas = document.getElementById("testCanvas");
var contexto = canvas.getContext('2d');
/*con este código, indicamos que queremos dibujar un rectángulo en el x=0, y=50,ancho=10, alto=150*/
contexto.fillRect(50, 0, 10, 150);

See the Pen
Html5Test1
by Germán Wasem (@germ-n-wasem)
on CodePen.

Diseño responsivo de interfases: ¿Qué es y por qué es tan importante?

Se escucha hablar en el entorno de desarrollo acerca del diseño responsivo, pero muchas veces no se sabe exactamente de qué se habla cuando se toca el tema.

En sus inicios cerca del año 2002, con la aparición de CSS2/XHTML se comenzó a reformular la forma de hacer webs adaptativas a diferentes resoluciones de pantalla. En esos momentos no era tan común como ahora que los usuarios de telefonía emplearan teléfonos inteligentes para navegar, por lo que estos nuevos estándares estaban orientados sobre todo a navegadores web empleados en monitores simples de escritorio.

Luego, no muchos años después llegaron los smartphones a un alto porcentaje de usuarios. La W3C (institución encargada de definir los estándares para la web) repensó el sistema de maquetación y estructuracion  para los sitios web y actualizó sus tecnologías a una nueva versión orientada a la libertad de uso de porcentajes  y píxels en el diseño web, sumando librerías como fluxbox y w3.css.

Básicamente, el diseño responsivo aplicado tanto a la web como al desarrollo de software es organizar (mediante las nuevas herramientas) las diferentes secciones de la web para que sea adaptable a cualquier tipo de resolución, por lo que estaría perfectamente visible y legible en cualquier dispositivo que disoponga de navegador web.

Es redimensionar y colocar los elementos de la web de forma que se adapten al ancho de cada display permitiendo una correcta visualización. Se caracteriza porque los contenidos e imágenes son fluidos y se usa código media-queries (opciones de tamaño condicional en CSS3).

La importancia del diseño responsivo reside en la capacidad de adaptación y la posibilidad de hacer viral el contenido de la web dada su simpleza al compartirlo en la web.