Cereal Wiki: octubre 2012

miércoles, 17 de octubre de 2012

1:21 |

Publicado por carlitox |

|

Editar entrada

API'S Javascript

1.- API de vídeo.- nos va a permitir reproducir nuestros videos en cualquier página html5

a) .mp4 (H.264+AAC)

b) .ogg/ogv (Theora+Vorbis)

c) .webm (VP8+Vorbis)

<video>

Vídeo no soportado. Cambia de navegador /*por si tiene un navegador viejo*/

</video>

- uso de la etiqueta
- video + JS.- se puede controlar cualquier evento que la etiqueta video produzca, el tiempo en el que va, cuando termina, se puede hacer lo que queramos, por ejemplo cuando el video termine podemos hacer que salte a otra página.

video.addEventListener('canplay', function(e){
this.volume=0.4;
this.current Time=10;
this.play();
} ,false);
con esta linea de código hacemos que un vídeo se reproduzca cuando la página este cargada por completo en el navegador.

- video + CSS3.- a cualquier etiqueta de video le puede asociar cualquier regla css3.

#video-1{
border:1px solid white;
-moz-box-shadow: 0px 0px 4px #FFF;
-webkit-box-shadow:5px 44px 28px #333;
box-shadow: 0px 0px 4px #FFF;
-moz-transform: translate(0,10px);
-o-transform: translate(0,10px);
-webkit-tranform: translate(0,10px);
}

- video + canvas.-
- video + webgl
- video + svg

API Geolocalización.- datos que por defecto html5 no permite utilizar: latitud, longitud, altura, velocidad, accuracy(precisión), tiempo de refresco.

código de errores:
0 --> Desconocido(fallo físico)
1 --> Permiso denegado(el usuario no da permiso para que sea geolocalizado)
2 --> Error de geolocalización
3 --> Time out

API canvas.- siempre tiene que llevar un id y es recomendable darle una anchura y una altura. puede tener los mismos estilos que un div, pero de partida osea desde el principio el canvas esta vacio.

ejemplo en que se pintan dos rectangulos uno encima de otro y con transparencia:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />

<script type="application/javascript">
function draw(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');
ctx.fillStyle="rgb(200,0,0)";
ctx.fillRect(10,10,55,50);
ctx.fillStyle="rgba(0,0,20,0.5)";
ctx.fillRect(30,30,55,50);
};
</script>
</head>
<body onLoad="draw();">
<canvas id="canvas" width="150px" height="150px"></canvas>
</body>
</html>

- Rectangulos:

.fillRect(x,y,width,height); dibuja un rectangulo con relleno con que color que le hemos asignado anteriormente.(mirar en ejemplo de arriba)

.strokeRect(x,y,width,height); es lo mismo que el anterior solo que sin relleno.

.clearRect(x,y,width,height); con este código se limpia un área rectangular.

las ejes de las X e Y se miden desde la esquina superior izquierda de nuestro canvas.

- Caminos de Dibujo(drawing path's): sirve para situar el pincel en los puntos que querramos empezar a dibujar luego levantarlo y colocarlo en otro punto para hacer otro dibujo, se pueden hacer lineas rectas y curvadas.

.beginPath(); abre camino
.closePath(); cierra camino

.moveTo(x,y); la posicion inicial donde se situara el pincel.
.lineTo(x,y); la posicion final hasta donde se terminara de hacer la linea.
.fill(); rellena areas que encuentra cerradas.
.stroke(); lo que hace es imprimir el camino, osea despues de haber terminado plasmarlo todo.

.Arcos: arcos de tipo arc, arcos de tipo curva cuadratica y curva de desier.
- arc(x,y,radio,angulocomeinzo,angulofin,direccion)

.quardaticCurve(puntocontrol1,puntocontrol2,x,y); sirve para estirar mas o menos una curva.

.bezierCurveTo(puntocontrol1x,puntocontrol1y,puntocontrol2x,puntocontrol2y,x,y);

0 comentarios

lunes, 8 de octubre de 2012

1:32 |

Publicado por carlitox |

|

Editar entrada

CSS 3

1) Animaciones CSS

2) Web Fonts

3) Media Querys que dan lugar al diseño fluido ó responsivo
hacen referencia a un nuevo seudo selector CSS3 que es este "@media" este seudo selector sirve para ajustar el contenido de nuestra web en base a la resolución del dispositivo sobre el que se este ejecutando la aplicación web.
ejemplos: @media screen and (max-width:600px){
.estilo1{
background:#AABBCC;
}
}

<link rel="stylesheet" media="screen and (max-width:600px)" href="hoja600.css"/>

@media screen and (min-width:600px){
.estilo2{
background:#CCC;
}
}

@media screen and (min-width:600px) and (max-width:1000px){
.estilo3{
background:#00F;
}
}

@media screen and (max-device-width:480px){
.estilo4{
background:#9AD;
}
}

4) Nuevas reglas de diseño/Nuevos selectores:

reglas de borde.- reglas de como hacer los bordes en tipo block:

Border-radius.- permite redondear el borde que nosotros queramos expecificando el radio de la curvatura

-moz-border-radius: 5px;

-webkit-border-radius: 5px; son reglas de cada motor, para asegurarnos que las reconozca.

border-radius: 5px; cuando el estandar este cerrado se utilizara el ultimo.

border-radius: 10px(paro los bordes de arriba) 20px(para los bordes de abajo);

Border-image.- para utilizar alguna imagen prepara como bordes.

-moz-border-image:

-webkit-border-image:

border-image: url('imagen1.png') 3 3 3 3; ---> los 3 son anchura en cada borde, se puede poner a cada uno o solo un 3 para todos los bordes.

border-image-source: 'imagen1.png';

border-image-slice: 3 3 3 3;

border-image-width: 5px; anchura

border-image-height: 5px; altura

border-image-outset: 2px; hace referencia al area de la imagen que se estiende mas alla del borde definido, sirve para crear degradados en el borde.

box-shadow.- para dar sobras a una caja.

-moz-box-shadow:

-webkit-box-shadow:

box-shadow: 3px(desplazamiento horizontal de la sombra) -9px(desplazamiento vertical de la sombra valor negativo sombra abajo, valor positivo sombra arriba, 0 no habria desplazamiento vertical) 7px(es el valor de difuminado de la sombra mientras mas valor mas sombra tendremos)(el tamaño de la sombra) #000000(color de la sombra);

regla de texto multicolumna.- esta regla surgio para maquetar textos en libros electronicos.
column-width (anchura de columnas)
column-gap (el espacio en blanco entre columnas)
column-rule (para crear la linea divisoria entre columnas)
column-count (para definir cuantas columnas)
-esta regla no esta soportada por todos los navegadores, el internet explorer 9 no la soporta.

.cincocolumnas{
-moz-column-count:5;
-moz-column-gap:2m;
-moz-column-rule:1px solid #000;
-webkit-column-count:5;
-webkit-column-gap:2m;
-webkit-column-rule:1px solid #000;
}

http://www.w3c.org/TR/css3-multicol/

Fuentes tipográficas(@font-face).- tipos de fuentes que se pueden usar ttf y otf.
@font-face{
font-family: "..................";
src:url(dirección donde se encuentra el archivo);
font-weight: ....;
font-size: .....;
font-style: ....;
}
el @font-face tiene que coger la fuente de un servidor real, un apache, etc..
@font-face{
font-family: "Vivaldi";
font-style:normal;
font-weight:normal;
src:url(vivaldi.cot);
}

h2{
font-family:"Vivaldi";
}

Degradados.- se crea un degradado se lo puede usar como color, ya sea texto una caja o a cualquier cosa que se le pueda asignar un color.
lineal.-
linear-gradient:(black; orange); minimo se le pueden pasar 2 colores

div{
height:300px;
width:300px;
background:-moz-linear-gradient(black, white);
background:-webkit-linear-gradient(black, white);
background:-o-linear-gradient(black, white);
background:linear-gradient(black, white);
}

circular.-
div{
height:300px;
width:300px;
background:-moz-radial-gradient(black, white);
background:-webkit-radial-gradient(black, white);
background:-o-radial-gradient(black, white);
background:radial-gradient(black, white);

}

circular con repetición.-

repeating-radial-gradient(ellipse, #fc4, #abc 33%); primero la forma, luego los colores como minimo 2 y el porcentaje del total de la caja.

background:-moz-repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);
    background:-webkit-repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);
    background:-o-repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);
    background:repeating-radial-gradient(20% 80%, ellipse closest-side, red, blue, red 50px);

en lugar del closest se puede poner farthest.

ejercicio de maquetación, hacer la siguiente página web http://www.areafor.com/ejemplos/clinicaveterinaria

*Animaciones CSS3
Maneras para realizar animaciones:

-Animaciones en Canvas}Javascript
-Animaciones en svg}Javascript
-Animaciones en CSS3} adopta las bondades del flash, no necesita javascript solo código css (EDGE aplicación para crear flash) hay un EDGE orientado a programación y otro a animación. estan en beta por lo cual son gratuitas.

Reglas CSS3 que nos permitiran crear animaciones:

-animation-name: nombre de la animación

-animation-duration: duracion de la animacion, se lo dice en segundo o milisegundos, por defecto es cero.

-animation-iteration-count: indicamos cuantas veces queremos que nuestra animacion se repita. se lo puede indicar con valores enteros, o infinite.

-animation-direction: indicamos la direccion de la animacion, por defecto viene la direccion normal, se la puede hacer alternative para que vaya y venga, en clicos.

-animation-timing-function: hacer referencia a la curva temporal que utilizaremos para calcular los diferentes estados entre el inicio y el final de la animación, concepto de linea de tiempo, si queremos q al principio vaya mas rapido que al final, por defecto viene case, pero podemos darle linear, case-in, case-out, case-in-out, cubic-bezier.

-animation-fill-mode: hace referencia el estilo antes o despues de que se ejecute la animación, tiene 4 valores posibles que son: forwards(aplicaremos todas las propiedades en el último fotograma), backwards(aplicaremos todas las opciones en el primer fotograma), both(las aplicaremos en el inicio y en el final), none(no habrá ningún tipo de aplicación)

-animation-delay: indica el valor en segundos o milisegundos el retardo en comenzar la animación, por defecto siempre es cero.

-animation-play-state: tiene 2 valores que pueden ser play y pause

estas animaciones esta soportadas por cualquier navegador webkit y mozilla, no la soporta explorer.

0 comentarios

lunes, 1 de octubre de 2012

0:34 |

Publicado por carlitox |

|

Editar entrada

HTML5

Etiquetas básicas principales de html5:

es un lenguaje de programación con una carga semántica. para que google lo indexe mejor.

<!DOCTYPE HTML>

<html>

<head>

--------

</head>

<body>

</body>

</html>

Etiqueta header:

es una etiqueta de una sección, y se puede repetir cuantas veces sea necesario. un header puede representar a los que es una etiqueta de maquetación <div id="header"></div>

<!DOCTYPE HTML>
<html>
<head>
<title>prueba</title>
</head>
<body>
<header>
--------------
</header>
</body>
</html>

Etiqueta hgroup:
permite agrupar las etiquetas "h". en las anteriores versiones de html, los indexadores lo toman como h iguales. si queremos darle importancia a un h, lo sacamos fuera del hgroup.

<hgroup>
</hgroup>

Etiqueta nav:
dentro de esta etiqueta deberían estar los enlaces, viene a ser un menú. si hay una palabra en medio de un parrafo con un vinculo, dependiendo o no de la importancia que querramos darle, podemos meterla dentro de un nav, para que el navegador la indexe.

Etiqueta section:
define un área de contenido único en el sitio.

Etiqueta article:
define áreas que definen zonas de contenido independiente.

Etiqueta aside:
hace referencia a una zona de contenido tangencial-mente diferente, que no tiene absolutamente nada que ver con el contenido principal de nuestra web. un aside podría ser las barras laterales/menús

Etiqueta footer:
el pie de algo, ya sea página, sección o articulo.

todas las etiquetas mencionadas anteriormente vienen a ser como div.

ejemplo:

<!DOCTYPE HTML>
<html>
<head>
<title>Mi Blog</title>
</head>
<body>
<header>
<hgroup>
<h1>Blog de HTML5</h1>
<h3>Blog sobre como programar en html5</h3>
</hgroup>
</header>
<nav>
<ul>
<li>-----
<li>-----
</ul>
</nav>
<section>
<article>Esta es la....1..................</article>

<article>Est............2..........</article>

<article>Esta es la 3......................</article>
</section>
<aside>
Barra lateral, RSS
</aside>
<footer>
copyright......
</footer>

</body>
</html>

para que dreamweaver grafique las etiquetas html5 se puede crear un css con lo siguiente:

header, hgroup, nav, section, article, aside, footer {

display:block;

}

Etiqueta canvas:
representa un área dibujada, un lienzo en blanco en el que se puede dibujar lo que queramos, gráficos, imágenes animaciones, tipografías, cualquier contenido multimedia, un vídeo.

Adobe edge, es un programa en fase beta, para crear animaciones y flashes para la etiqueta canvas.

Etiqueta audio:
etiqueta para insertar archivos de audio, el estándar es mp3 y ogg.

<audio>
<source src="fichero.mp3"/> con estas etiquetas no se visualiza la barra de control.
</audio>

<audio controls>
<source src="fichero.mp3"/>
</audio>

Etiqueta video:
estandar que soporta html5:
- H.264 (.mp4/.m4u)
- Theora VP3 (.ogg(es un codec libre y gratuito, pero es viejo y malo), .ogv)
- VP8 (.webm) el mejor codec.
es recomendable poner los vídeos en estos 3 formatos y orden, para que puedan visualizarlos desde diferente navegadores y dispositos moviles.

<video controls>
<source src="video.mp4"/>
<source src="video.ogg"/>
<source src="video.webm"/>
</video>

FreemakeVideoConverter es un aplicación gratuita para convertir vídeos a los formatos mencionados anteriormente, se le da a la opción html5 y se convierte en los 3 formatos.

Etiqueta svg:

equivalente a la etiqueta img, solo que permite insertar imágenes no vectoriales, como vectoriales, y también animaciones vectoriales, al estilo de flash

Etiquetas de formulario <input *> (los nuevos inputs):

- <input type="search"> caja de busqueda.
- <input type="number"> caja tipo númerica.
- <input type="range"> nos pinta deslizamiento entre determinados valores.
- <input type="color"> nos muestra un elemento de selección de color.
- <input type="tel"> caja solo para introducir números telefonicos, en un smartphone se ve la diferencia de un tipo texto, ya que al darle, nos aparece el teclado para añadir un telefono.
- <input type="url"> caja de texto para introducir urls, pasa lo mismo que con el tel.
- <input type="email"> caja de texto para introducir direcciones de correo electronico, aparece un teclado de emails.
- <input type="date"> caja tipo fecha.
- <input type="month"> caja de tipo mes.
- <input type="week"> caja de selección de semanas.
- <input type="time"> caja fecha, que empieza del día en cuestión.
- <input type="datetime"> caja fecha mas hora absoluta.
- <input type="datetime-local"> caja de fecha absoluta, tanto del servidor como del cliente.

texto como placeholder:
es una caja de texto con un gris claro, con un texto informativo transparente.
<input placeholder="texto de ejemplo">

autofoco:
al entrar en la página es para que el cursor este dentro de esta caja.
<input autofocus>

compatibilidad con navegadores antiguos (principalmente IE):
- display: block; con este código hacemos que todos los navegadores, visualicen los códigos html5, osea las etiquetas de bloque.

- script de compatibilidad:
<!--[if lt IE 9]>

0 comentarios

informática, administración de sistemas, apuntes, programas

Horarios

Temas

Plataformas

Curso 2

Curso 1

Entretenimiento

Más

Archivo histórico

Sectarios

Etiquetas

CSS 3

Contra la ley Sinde

Top Resumenes

Web Coleguis

Publicidad