miércoles, 17 de octubre de 2012
1:21 | 
Publicado por
carlitox |
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>
<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'/>
<source src="video.ogv" type='video/ogv; codecs="theora,vorbis"'/>
<source src="video.webm" type='video/webm; codecs="vp8,vorbis"'/>
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" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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);
- 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" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<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);
lunes, 8 de octubre de 2012
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;
}
}
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);
}
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);
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
*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.
lunes, 1 de octubre de 2012
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>
<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]>
- <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]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
colocando este código se ejecuta correctamente, cualquier código javascrit de html5, en navegadores antiguos.
esto debería de colocarse entre las etiquetas del head.
libreria modernizr esto solo nos indica si el navegador es compatible o no con código html5, pero solo indica, no pone solución a la códificación: primero hay que descargar el documento o script en nuestro servidor para que funcione.
<head>
<script src="modernizr.min.js"/>
</head>
------------------
if (modernizr.canvas){
//podemos!!
}else{
//flash
}
de esta manera preguntamos que códigos html5, se pueden o no usar en algunos navegadores.
en html5 se pueden utilizar etiquetas que en xhtml no se usaban, como por ejemplo <b>, si usamos esta etiqueta le damos mas importancia y una carga semántica a la palabra o palabras que queramos resaltar, se puede usar el <strong> pero se le daría menos importancia.
APIS HTML5
- api canvas
- api geolocalización
- api aplicaciones offline: navegación sin conexión, html5 permite guardar-cachear las páginas que nosotros querramos guardar
- api base de datos(SQLite)
- api webworkers: permite lanzar varios procesos en paralelo
ejercicio de maquetación, hacer lo mismo que esta dirección url: http://www.areafor.com/ejemplos/moviles
<![endif]-->
colocando este código se ejecuta correctamente, cualquier código javascrit de html5, en navegadores antiguos.
esto debería de colocarse entre las etiquetas del head.
libreria modernizr esto solo nos indica si el navegador es compatible o no con código html5, pero solo indica, no pone solución a la códificación: primero hay que descargar el documento o script en nuestro servidor para que funcione.
<head>
<script src="modernizr.min.js"/>
</head>
------------------
if (modernizr.canvas){
//podemos!!
}else{
//flash
}
de esta manera preguntamos que códigos html5, se pueden o no usar en algunos navegadores.
en html5 se pueden utilizar etiquetas que en xhtml no se usaban, como por ejemplo <b>, si usamos esta etiqueta le damos mas importancia y una carga semántica a la palabra o palabras que queramos resaltar, se puede usar el <strong> pero se le daría menos importancia.
APIS HTML5
- api canvas
- api geolocalización
- api aplicaciones offline: navegación sin conexión, html5 permite guardar-cachear las páginas que nosotros querramos guardar
- api base de datos(SQLite)
- api webworkers: permite lanzar varios procesos en paralelo
ejercicio de maquetación, hacer lo mismo que esta dirección url: http://www.areafor.com/ejemplos/moviles
miércoles, 8 de febrero de 2012
SQL server
En SQL las consultas cambian un poco. Aquí ejemplos de SQL server.
go
use libreria
go
create table editorial
(
cif char(11),
nombre varchar(20),
direccion varchar(50),
pais varchar(20),
primary key (cif)
)
go
create table libro
(
ISBN varchar(13),
cif char(11),
titulo varchar(30),
num_paginas int,
tema varchar(20),
ano_publicacion date,
primary key (ISBN),
constraint fk_libedi foreign key (cif) references editorial(cif)
)
go
create table ejemplar
(
ISBN varchar(13),
num_ejemplar int,
fecha_compra date,
precio float,
primary key (ISBN, num_ejemplar),
constraint FK_isbn foreign key (ISBN) references libro(ISBN)
)
go
create table autor
(
pasaporte char(11),
nombre varchar(20),
apellidos varchar(50),
direccion varchar(50),
fecha_nacimiento date
primary key (pasaporte)
)
go
create table escribe
(
ISBN varchar(13),
pasaporte char(11),
fecha_escritura date,
primary key (ISBN, pasaporte),
constraint FK_isbne foreign key (ISBN) references libro(ISBN),
constraint FK_pass foreign key (pasaporte) references autor(pasaporte)
)
go
select * from dbo.autor
go
create procedure pr_altasautor(@ppasaporte char(11), @pnombre varchar(20), @papellidos varchar(50), @pdireccion varchar(50), @pfecha_nacimiento date)
as
begin
insert into dbo.autor values (@ppasaporte, @pnombre, @papellidos, @pdireccion, @pfecha_nacimiento);
end
go
create procedure pr_bajaslibro(@pISBN char(13))
as
begin
delete from dbo.libro where ISBN = @pISBN;
end
use libreria
go
Call pr_bajaslibro("IDF3234B")
go
go
create table cliente
(
id_cliente int primary key Identity, nomb_cliente varchar(20), renta_anual float, tipo_cliente varchar(20)
)
go
create table camion
(num_camion int primary key identity,
nomb_chofer varchar(20)
)
go
create table ciudad
(nom_ciudad varchar(20) primary key,
poblacion varchar(20)
)
go
create table ciudad_copia
(nom_ciudad_copia varchar(20) primary key,
poblacion_copia varchar(20)
)
go
create table embarque
(
num_embarque int primary key Identity,
id_cliente int,
num_camion int,
peso float,
destino varchar(20),
fecha_embarque date,
constraint fk_cli foreign key (id_cliente) references cliente(id_cliente),
constraint fk_cam foreign key (num_camion) references camion(num_camion),
constraint fk_ciu foreign key (destino) references ciudad(nom_ciudad)
)
go
go
Create View rentas_mayores_15
as
select e.destino
from dbo.embarque e inner join dbo.cliente c on e.id_cliente = c.id_cliente
where c.renta_anual > 15000000
#No esta bien, hay que corregir
use libreria
go
create trigger tr_copia_ciudad on dbo.ciudad
after insert
as
begin
insert into copia_ciudad values (inserted.nom_ciudad, inserted.poblacion);
end
Creando la base de datos
create database libreriago
use libreria
go
create table editorial
(
cif char(11),
nombre varchar(20),
direccion varchar(50),
pais varchar(20),
primary key (cif)
)
go
create table libro
(
ISBN varchar(13),
cif char(11),
titulo varchar(30),
num_paginas int,
tema varchar(20),
ano_publicacion date,
primary key (ISBN),
constraint fk_libedi foreign key (cif) references editorial(cif)
)
go
create table ejemplar
(
ISBN varchar(13),
num_ejemplar int,
fecha_compra date,
precio float,
primary key (ISBN, num_ejemplar),
constraint FK_isbn foreign key (ISBN) references libro(ISBN)
)
go
create table autor
(
pasaporte char(11),
nombre varchar(20),
apellidos varchar(50),
direccion varchar(50),
fecha_nacimiento date
primary key (pasaporte)
)
go
create table escribe
(
ISBN varchar(13),
pasaporte char(11),
fecha_escritura date,
primary key (ISBN, pasaporte),
constraint FK_isbne foreign key (ISBN) references libro(ISBN),
constraint FK_pass foreign key (pasaporte) references autor(pasaporte)
)
Lanzando consultas
use libreriago
select * from dbo.autor
Creando procedimientos almacenados
Si quisiésemos devolver información dentro de un parámetro deberíamos poner "output" después del tipo del parámetro. Si queremos que un parámetro sirva tanto para que entre información como para que salga en vez de "output" será "inout".Altas en autores
use libreriago
create procedure pr_altasautor(@ppasaporte char(11), @pnombre varchar(20), @papellidos varchar(50), @pdireccion varchar(50), @pfecha_nacimiento date)
as
begin
insert into dbo.autor values (@ppasaporte, @pnombre, @papellidos, @pdireccion, @pfecha_nacimiento);
end
Bajas en libros
use libreriago
create procedure pr_bajaslibro(@pISBN char(13))
as
begin
delete from dbo.libro where ISBN = @pISBN;
end
Como llamar a un procedimiento
Ejemplo de llamada a procedimientouse libreria
go
Call pr_bajaslibro("IDF3234B")
go
Añadimos nuevas tablas a la base de datos
use libreriago
create table cliente
(
id_cliente int primary key Identity, nomb_cliente varchar(20), renta_anual float, tipo_cliente varchar(20)
)
go
create table camion
(num_camion int primary key identity,
nomb_chofer varchar(20)
)
go
create table ciudad
(nom_ciudad varchar(20) primary key,
poblacion varchar(20)
)
go
create table ciudad_copia
(nom_ciudad_copia varchar(20) primary key,
poblacion_copia varchar(20)
)
go
create table embarque
(
num_embarque int primary key Identity,
id_cliente int,
num_camion int,
peso float,
destino varchar(20),
fecha_embarque date,
constraint fk_cli foreign key (id_cliente) references cliente(id_cliente),
constraint fk_cam foreign key (num_camion) references camion(num_camion),
constraint fk_ciu foreign key (destino) references ciudad(nom_ciudad)
)
go
Creando vistas
Ciudades que han recibido embarques de clientes con una renta anual mayor que 15 millones
use libreriago
Create View rentas_mayores_15
as
select e.destino
from dbo.embarque e inner join dbo.cliente c on e.id_cliente = c.id_cliente
where c.renta_anual > 15000000
Creando trigger
# En el trigger en MSSQL server ya no nos valdrán el "new" y el "old" como tal. Serán sustituidos por "inserted" y "deleted".#No esta bien, hay que corregir
use libreria
go
create trigger tr_copia_ciudad on dbo.ciudad
after insert
as
begin
insert into copia_ciudad values (inserted.nom_ciudad, inserted.poblacion);
end
Etiquetas:
Prestashop
Es un tipo de tienda online independiente de plataformas CMS, esta tienda en si es la plataforma.
Para administrarla tendremos que cargar la dirección de administración.
Para administrarla tendremos que cargar la dirección de administración.
martes, 7 de febrero de 2012
DHCP
El DHCP es un servicio de asignación automatica de IP y sirve para dar servicio a los equipos que tengan su tarjeta de red asignadas como automáticas.
apt-get install dhcp3-server
Nada más instalarlo falla en el arranque. No asustarse que es normal, ya que aún tenemos que configurarlo.
Es IMPRESCINDIBLE que el fichero que acabamos de crear lo tengas tanto en "/etc/dhcp3" como en "/etc/dhcp", lo copiamos. Sin realizar este paso el servicio no funcionará.
isc-dhcp-server start
isc-dhcp-server stop
Configuración
Este servicio tiene unas características concretas que tendremos que determinar.Identificador de Red y Máscara
Especificaremos el identificador de red y la máscara sobre la que vamos a asignar IPs a los que nos realicen peticiones.Rango de IPs
Especificaremos un rango de IPs para saber que IPs se repartirán entre las maquinas que nos pidan una IP. Siempre tenemos que dar un rango algo mayor que el que hemos estimado que vamos a necesitar para evitar imprevistos por excesos de petición. También debemos recordar que si tenemos máquinas dando servicio o la misma puerta de enlace deberemos excluir estas direcciones de IP del rango que vamos a repartir pués ya están en uso.Puerta de enlace
La IP de la puerta de enlace que recibirán los equipos que soliciten una IP al servicio DHCP.Servidores DNS
Los servidores DNS que recibirán los equipos que soliciten una IP al servicio DHCP.Ip de multidifusión
Es algo evidente en una configuración IP, pero aún así hay que añadirlo.Instalación
En este caso vamos a hacer las pruebas desde linux de manera que instalamos un servidor de DHCP en linux.apt-get install dhcp3-server
Nada más instalarlo falla en el arranque. No asustarse que es normal, ya que aún tenemos que configurarlo.
Configuración
Vamos a /etc/dhcp/dhcpd.conf y editamos el fichero.ddns-update-style none;
option domain-name-servers 172.20.0.2, 8.8.8.8; # Servidores DNS
default-lease-time 86400;
max-lease-time 604800;
authoritative;
subnet 172.20.0.0 netmask 255.255.0.0 { #Identificador de red y marcara de red
range 172.20.237.104 172.20.237.222; #Rango IP
option subnet-mask 255.255.0.0; #Máscara de subred
option broadcast-address 172.20.255.255; #Ip de multidifusión
option routers 172.20.9.92; #Dirección de la puerta de enlace
}
Es IMPRESCINDIBLE que el fichero que acabamos de crear lo tengas tanto en "/etc/dhcp3" como en "/etc/dhcp", lo copiamos. Sin realizar este paso el servicio no funcionará.
Puesta en funcionamiento
Para administrar su servicio al igual que en muchos otros sería desde "/etc/init.d/".isc-dhcp-server start
isc-dhcp-server stop
jueves, 2 de febrero de 2012
Sistemas RAID
Conjunto redundante de discos independientes.
RAID uno nos duplica la información que tengamos (Información lógica). Tantos discos duros o particiones como tengamos. Si uno de los dos falla el sistema siguen funcionando.
Es un sistema parecido al raid 0, solo que introducimos controles de paridad para asegurar que la información es correcta. Cada bloque tendría su control como vemos en la imagen. Más apropiado en sistemas multiusuario. Buen rendimiento general. No plantea una solución cuando una de las unidades lógicas falla.
0 + 1: Primero aplicariamos el raid 0, osea se separar la información sin replicar. Después se aplicaría el raid 1 es decir duplicar la información que ya hemos separado. Alto costo.
1 + 0: Primero aplicamos raid 1, es decir duplicamos la información. Una vez duplicada aplicamos el raid 0, es decir separamos la información en discos diferentes para acelerar la velocidad de accesso. Conocido como raid 10. La mejor opción para replicas de bases de datos. Alto costo.
¿Lo más correcto?
En ambos casos si perdemos una unidad de almacenamiento lógico podemos seguir funcionando. ¿Pero si perdemos dos? 1 + 0 sería estadisticamente la mejor opción.
RAID 0
RAID cero no es un sistema redundante (no se replica). Nos da más velocidad de accesso a la información (Lectura y escritura). Si uno de los discos falla nos quedamos colgados. Se necesita como mínimo dos discos.
RAID 1
RAID 5
Combinaciones
A menudo para tener las ventajas de varios sistemas podemos combinarlos. Por ejemplo 0+1 o 1+0.0 + 1: Primero aplicariamos el raid 0, osea se separar la información sin replicar. Después se aplicaría el raid 1 es decir duplicar la información que ya hemos separado. Alto costo.
1 + 0: Primero aplicamos raid 1, es decir duplicamos la información. Una vez duplicada aplicamos el raid 0, es decir separamos la información en discos diferentes para acelerar la velocidad de accesso. Conocido como raid 10. La mejor opción para replicas de bases de datos. Alto costo.
¿Lo más correcto?
En ambos casos si perdemos una unidad de almacenamiento lógico podemos seguir funcionando. ¿Pero si perdemos dos? 1 + 0 sería estadisticamente la mejor opción.
Suscribirse a:
Entradas (Atom)
Contra la ley Sinde
¿Estas en desacuerdo con la ley sinde? No permitas que coarten tu libertad.
Bájame
Bájame
