Posts etiquetados con ‘ html5 ’

En este POST hablaremos de una herramienta para trabajar con elementos Canvas en html5. Se trata de JCanvas, que es una extensión de JQuery.

El primer paso es lógicamente que te descargues la librería. Enlaces para su descarga jCanvas

¿Porque usarlo? Es la pregunta que responden el su sitio oficial. La respuesta es muy simple, mostrando estos ejemplos sin el uso de JCanvas.

ctx = $('#canvas')[0].getContext('2d');
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.arc(50, 50, 20, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();

y usándolo

$('#canvas').drawArc({
  fillStyle: '#333',
  x: 50, y: 50,
  radius: 20
})

Pasamos ahora a realizar algunos ejemplos de la misma página.

Arc

$("canvas.example").drawArc({
  fillStyle: "#000",
  x: 100,
  y: 100,
  radius: 50,
  start: 0,
  end: 360
})

$("canvas.test").drawArc({
  strokeStyle: "#000",
  x: 100,
  y: 100,
  radius: 50,
  start: 45,
  end: 135,
  ccw: true
})

Bézier

$("canvas.test").drawBezier({
  strokeStyle: "#000",
  x1: 50, y1: 50,
  cx1: 200, cy1: 50,
  cx2: 50, cy2: 150,
  x2: 200, y2: 150,
  cx3: 300, cy3: 150,
  cx4: 150, cy4: 1,
  x3: 350, y3: 50
})

Por ahora es todo lo que mostraré. El sitio oficial tiene varios ejemplos, ademas de permitirte interactuar con sus parámetros de cada función. trabajen con las diferentes figuras y verán lo fácil que es.

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Hoy es viernes y ya comienza el fin de semana, para ello preparamos estos enlaces para que los disfruten.

Sony Ericsson Xperia mini y mini Pro, para aquellos que están viendo novedades este enlace es mi sugerencia,  se trata de un articulo que habla de la actualización que tendrán estos teléfonos, con el sistema operativo Andoid. Más info | GSM Arena

Microjs, es una página que guarda directorios de Frameword de JavaScript. Su interfaz es muy llamativa y además te da varias opciones de lo que puedas estar buscando.

GuideGuide, Se trata de un plugin para Photoshop tanto para CS4 como para el CS5. Con este plugin el armado de guías para nuestros diseños serán más fáciles de realizar.

G5 Es una página de un framework de Html5, lo descargue y vi su funcionamiento. En si te la una pequeña base para que pongas lo que necesitarás en tu sitio con una cierta estructura de archivos, espero que les sea útil.

ReadWriteWeb, esta es una noticia que nos dice que se esta trabajando en un nuevo un estándar de web descentralizado. Vean la noticia es una buena idea de los Señores de la WC3. El artículo esta en ingles pero si gustan pueden ver este otro en español El consorcio W3C está desarrollando un estándar de web descentralizado.

Lost & Taken, se trata de una web de recursos, en donde encuentras texturas ordenadas en categorías, seguro que podrán hallar algo que venga bien con el diseño que estén preparando.

Ahora solo me queda recomendar este vídeo. Se trata de un trabajo realizado usando la técnica de Time-lapse. No daré detalles solo vean la página y disfruten del vídeo.

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Este es un Css Reset interesante para html5, aún nose si es tan útil como uno piensa, por que cabe recordar que (por mala suerte la mayoria de los usuarios de internet aún usan Internet Explorer 6, 7 u 8) el Navegador más usado por ahora sigue siendo Internet Explorer, el único que se salva es la versión 9 de este navegador, así que es algo complicado usar la mayoría de las etiquetas de html5. Pero bueno nunca esta de más ver que novedades existe entre los famosos resets de CSS.

/************************************************************************
html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark  html5doctor.com/html-5-reset-stylesheet/
************************************************************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

article, aside, figure, footer, header,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }

ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }
/* END RESET CSS */

/************************************************************************
miscellaneous fixes
************************************************************************/

/* IE7 image resizing fix */
.ie7 img { -ms-interpolation-mode: bicubic; }

/* font normalization across browsers */
body { font:13px sans-serif; *font-size:small; *font:x-small; line-height:1.22; }
table { font-size:inherit; font:100%; }
select, input, textarea { font:99% sans-serif; }

/* Webkit font smoothing */
html { -webkit-font-smoothing: antialiased; }

/* Formatting quoted text */
pre {
padding: 15px;
white-space: pre; /* CSS2 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

/* Clickable inputs */
label, input[type=button], input[type=submit], button { cursor: pointer; }

/* align checkboxes, radios, text inputs with their label */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Force scrollbar */
html { overflow-y: scroll; }

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

Este documento que ponemos a disposición de nuestra comunidad explica la aplicación de fuentes en nuestros sitios Web. Cada uno de los ejemplos son detallados y analizados. Les invitamos a que visiten el sitio y vean estos ejemplos.

Estos ejemplos son muy interesantes para tomarlos en cuenta.

Enlace: sixrevisions.com/css/css-typography-03

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Microsoft, pone a disposición del mundo entero su nuevo navegador. Este lanzamiento fue muy esperado ya que  Internet Explorer 9 es el primero que hace Microsoft con soporte para el estándar HTML5 y CSS3. Se tendrá grandes beneficios para los que creamos y diseñamos sitios WEB.

Internet Explorer

Descarga | Internet Explorer 9

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Como bien sabemos (y empezaremos por aqui) NO todos los navegadoras soportan esta propiedad de HTML5, y siendo reales la mayoria de nosotros diseñamos sitios AUN para IE6 (egh!), entonces visto desde ese plano esta tecnología aun esta lejos para muchos sitios ya que solo IE9 lo soporta (y eso que aun esta BETA), bueno! esto no nos impide a aprender estas nuevas etiquetas no?

Su uso es bastante sencillo:

<video src="miVideo.ogv"></video>

A diferencia del método tradicional que usamos con FLASH es sencillo no?, claro que para que quede bien necesitamos un par que cosas como:

<video src=mivideo.ogv width=640 height=480 controls poster=imagendevideo.jpg>
<a href=myvideo.ogv>Descargar este Video.</a>
</video>

Con este código mostramos una imagen para los navegadores que no soportan html5, como ven se usa una extensión .OGV, es una de las pocas extensiones que nos sirven para usar este atributo, a continuación les muestro las extensiones que son soportadas por los navegadores:

  • Theora (.ogv files) – Firefox 3.5+, Chrome 5.0+, Opera 10.5+
  • H.264 (.mp4 files) – Safari 3.0+, Chrome 5.0+, iPhone 3.0+, Android 2.0+
  • WebM (.webm files) – Internet Explorer 9, Firefox 4.0+, Chrome 6.0+, Opera 11.0+

Entonces, hasta ahí no esta tan complicado no?, lastimosamente no todos usan estos navegadores modernos, pero bueno, esto es temporal. Para conseguir estas extensiones existen varios softwares de conversión de video para obtener estos resultados, aqui les dejo uno: http://www.mirovideoconverter.com

Al final para usarlo tendremos este código para todos los navegadores que soportan html5:

<video width=640 height=480 controls poster=miImage.jpg id=videocontent>
<source src=mivideo.ogv type=video/ogg>
<source src=mivideo.mp4 type=video/mp4>
<source src=mivideo.webm type=video/webm>
<a href=mivideo.mp4>Descarga este Video.</a>
</video>

También podemos jugar un poco con las condicionales de php para recuperar el navegador y la versión del mismo para optar por html5 o Flash.

Via | Getting Started with HTML5 Video

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

CamanJS es una librería de manipulación de imágenes, que fue hecho usando HTML5 <canvas> tag.

Con una simple interfaz, filtros avanzados como Saturación, contraste, gamma, luminosidad o exposición pueden ser aplicados

El sistema tiene capas similares a los de Photoshop o GIMP, que crea muchas posibilidades.

Pueden ver su pagina de ejemplo, ahí nos nuestra la capacidad de los efectos aplicados. Puedo decir que es impresionante como los efectos son efectuados sin notar un retraso.

Esta es una librería para tomar en cuenta.

Requerimientos: Sin Requerimientos
Compatibilidad: Todos los Navegadores Modernos
Website: http://camanjs.com/
Demo: http://camanjs.com/examples
Download: http://github.com/meltingice/CamanJS

Fuente: webresourcesdepot.com/free-javascript-image-manipulation-library-camanjs/

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

HTML5 A technical specification for Web developers, es un sitio web donde muestran todo lo relacionado sobre esta evolución del HTML, el único inconveniente es que esta en Ingles pero el sitio web es muy intuitivo así que no deberíamos tener problemas para ver el uso especifico del HTML5

<!DOCTYPE HTML>
<HTML>
 <HEAD>
  <META CHARSET="UTF-8">
  <BASE HREF="http://www.example.com/">
  <TITLE>An application with a long head</TITLE>
  <LINK REL="STYLESHEET" HREF="default.css">
  <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
  <SCRIPT SRC="support.js"></SCRIPT>
  <META NAME="APPLICATION-NAME" CONTENT="Long headed application">
 </HEAD>
 <BODY>
 ...

Altamente recomendado.

Link | WHATWG HTML5

Jorge Alejandro Inturias C. ha escrito 127 entradas en este sitio.

Empece con esto del diseño como hobby, ahora lo hago como trabajo, manteniendo el mismo interés de siempre, ..."Uno vive de lo que aprende"...

En este POST mostraré nuevamente la increíble funcionalidad de HTML5. Esta tecnología ya esta en nuestras puertas y solo necesitamos algo de ingenio para lograr diseños espectaculares.

Les entregare el link de un blog donde nos muestran algunos ejemplos de experimentos. Ahora, solo les mostraré el primero de la lista. Hay otros pero dejo a ustedes su interés por probarlos.

El Primer experimento se llama Untangle, y es un juego donde debes llevar los grafos de manera que los arcos no se crucen y en el menor tiempo posible. Es un juego de ingenio. Les muestro uno de mis tiempos. es por lejos fácil de igualar.

Si visitan este blog verán una serie de experimentos sobre HTML5. Recuerden que lo que se tiene son experimentos. Y coincido con el blog que afirman que para el desarrollo de juegos, todavía Flash es la mejor solución.

Via: www.queness.com/…/9-incredible-html5-canvas-and-javascript-experiments

Hasta pronto.

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Hoy les mostraré una galería que destaca por su efecto de transición.

El plugin del que les hablo es un slide de http://jquery.malsup.com/cycle/

Como siempre la forma de usarlo no es nada raro. Se incluyen en las cabeceras de la página el core de JQuery y el plugin (en el orden mencionado). Por mi parte estoy haciendo uso de la libreria JQuiery: jquery-1.4.2.min.

Dentro del código html tenemos el siguiente código.

<section id="gallery">
  <div class="pics">
     <img src="images/repuestos_importadora_lopez.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez2.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez3.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez4.jpg" width="439" height="329" alt="importadora Lopez">
     <img src="images/repuestos_importadora_lopez5.jpg" width="439" height="329" alt="importadora Lopez">
  </div>
  <a href="#" id="prev"></a>
  <a href="#" id="next"></a>
</section>

De hecho, como ven la galería en si esta dentro del div, si se muestra una etiqueta html5, es debido a cuestiones de organización.

La parte que ejecta el efecto es el siguiente:

<script type="text/javascript">
  $(document).ready(function() {
    $('.pics').cycle({
      fx: 'toss',
      next:   '#next',
      prev:   '#prev'
    });

</script>

Como vereis se define el contenedor de las imagenes como parámetro; en este caso es la clase pics, y hace la llamada a la funcion cycle. No es dificil darse cuenta que los parametros son refereidos al efecto en si y a los botones de navegación.

Este plugin tene nas opciones solo es que vean la pagina principal del plugin.

Una última cosa mas, ustedes tienen la libertad de elegir la presentación con las reglas que apliquen a la clase pics. En todo caso les muestro como esta ahora la presentación del CSS

#gallery {
	float:left;
	width:532px;
	height:384px;
	}
	.pics {
		width:  439px;
		height: 329px;
		padding: 0;
		margin:  0;
		position:relative;
		margin:23px 0 0 36px;
		} 

	.pics img {
		display:block !important;
		position:absolute;
		width:  439px;
		height: 329px;
		top:  0;
		left: 0;
		border:5px solid #fff;
		border-radius:2px;
		-moz-border-radius:2px;
		-webkit-border-radius:2px;
		box-shadow:0 0 3px rgba(0, 0, 0, .2);
		-moz-box-shadow:0 0 3px rgba(0, 0, 0, .2);
		-webkit-box-shadow:0 0 3px rgba(0, 0, 0, .2);
		} 

	.pics img:nth-child(2) {
		-moz-transform: rotate(2.5deg);  /* FF3.5+ */
        -o-transform: rotate(2.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(2.5deg);  /* Saf3.1+, Chrome */
				}
	.pics img:nth-child(3) {
		-moz-transform: rotate(-2.5deg);  /* FF3.5+ */
        -o-transform: rotate(-2.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(-2.5deg);  /* Saf3.1+, Chrome */
				}
	.pics img:nth-child(4) {
		-moz-transform: rotate(3.5deg);  /* FF3.5+ */
        -o-transform: rotate(3.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(3.5deg);  /* Saf3.1+, Chrome */
				}
	.pics img:nth-child(5) {
		-moz-transform: rotate(-3.5deg);  /* FF3.5+ */
        -o-transform: rotate(-3.5deg);  /* Opera 10.5 */
		-webkit-transform: rotate(-3.5deg);  /* Saf3.1+, Chrome */
	}

	#prev {
		position:absolute;
		left:0;
		top:174px;
		z-index:1;
		background:url(../images/prev.png) no-repeat 0 0;
		width:83px;
		height:45px;
	}
	#next {
		position:absolute;
		left:435px;
		top:174px;
		z-index:1;
		background:url(../images/next.png) no-repeat 0 0;
		width:83px;
		height:45px;
	}

Bueno eso es todo, adios…

Mira el Ejemplo

Cesar Jaldin ha escrito 68 entradas en este sitio.

Muchas de las cosas que sé, es por experiencia. Por ahora me dedico al desarrollo de sistemas Web, tengo conocimientos de PHP y base de datos. Lo bueno, de mi es que aprendo nuevas cosas, las busco y las vivo.

Subir ↑↑