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.
martes, 31 de enero de 2012
Servicio VPN (Red Privada Virtual)
Como podemos ver en el siguiente esquema podríamos conectarnos a un servicio interno de una red local como si estuviésemos en ella. El servidor VPN nos da una presencia virtual en la red permitiéndonos funcionar como si estuviésemos en ella físicamente permitiéndonos interactuar con los equipos de la red, con sus servicios internos o saliendo a Internet desde ella.
Una vez estemos conectados a una VPN será como si no estuviésemos en nuestra red local real. Nuestra máquina pensaría que solo esta en la red a la que se a conectado de manera virtual.
Pruebas con VPN
Podemos descargar OpenVPN para Debiany experimentar. Lo descargamos y lo instalamos (http://openvpn.net/).En este caso haremos las pruebas con una máquina virtual de Debian. Los datos de accesso a esta serán:
usuario: root
contraseña: openvpnas
Abriendo la configuración
Al arrancar la máquina de Debian nos salta directamente la configuración de OpenVPN ya que estaba programada la configuración para los arranques.
Para abrir la configuración de forma manual: /usr/local/openvpn-as/bin/ovpn-init
Si escribimos "DELETE" en la primera pregunta de la config borraremos la configuración existente y podremos comenzar a introducir la nuestra.
Terminos y Condiciones
Si vamos a configurar, nos preguntará si estamos de acuerdo con los terminos de uso. Contestamos "yes" y seguimos adelante.Tipo de servidor
Nos pregunta si este será nuestro servidor primario. En este caso sí, de manera que contestaremos "yes".Interfaz para acceder al menú administrador
(1) : All interfaces(2) : Eth0 172.20.203.95
Ahora tendremos que espeficicar a que interfaces de red permitiremos acceder a nuestro panel de administrador. En este caso tendremos que elegir entre todas las interfaces o una interfaz concreta(IP + Mascará). En este caso escogeremos todas las interfaces. Si no cumpliese el criterio elegido el servidor rechazaría esa conexión.
Puerto de administrador web
Podemos utilizar el que queramos para el servicio de administrador web. Por defecto nos propone el "943".Puerto del servicio VPN (TCP)
Tendremos que asignar un puerto para el servicio de VPN. Nos propone por defecto el "443".Enrutar el trafico del cliente a través de internet
Con esta opción permitimos a los clientes que se conectan a través de nosotros podemos permitirles además salida a internet.Subnets
Subredes podrán acceder al cliente. Por defecto "yes".Usuario administrador
Me pregunta si quiero dejar el usuario administrador por defecto. Por defecto "openvpn".Licencias VPN
Es software libre. La licencia gratuita nos permite tener dos usuarios simultaneos (al mismo tiempo). La licencia de pago nos permite tener tantos usuarios concurrentes (conectados simultaneamente) como soporte la máquina.Pulsaremos ENTER si no disponemos de licencias.
Ventana de configuración
Una vez finaliza la configuración inicial nos saltará una ventana de configuración y nos pedirá una configuración de red. La IP del servidor.El nos da la IP que nos a sido asignada por DHCP (aunque sea una chapuza) se a establecido como IP de la conexión con el servidor.
Esta ventana nos da accessos a configuraciones o lugares que nos puedan ser utiles.
Login en la máquina, configuración IP etc. Es decir, podríamos quitar la IP dinamica y asignar una estatica.
Ojo que en esta ventana nos a propuesto un puerto de administración (Configuración) diferente al que le hemos asignado.
Accediendo a la configuración WEB
En mi caso accederé a través de la siguiente URL "https://172.20.203.113:943/admin/" a la web de Administración. Los clientes podrán acceder a nosotros a través del siguiente enlace "https://172.20.203.113:943/".Lo primero que vemos en la pantalla de administración es la ventana de login.
En nuestro caso el usuario es "openvpn" (usuario nativo del sistema linux). Antes de acceder desde la web cambiaremos la pass de este usuario en el sistema (passwd openvpn). Le asignaremos una contraseña.
Usuario: openvpn
Contraseña: openvpn
(En casos reales no usariamos una contraseña de este tipo bajo ningun concepto).
Dentro del panel de administración
Current users
Esta sería la lista de usuarios conectados.User Permisions
Aquí tendremos los usuarios creados con sus permisos asociados.Rellenaremos la casilla para crear un usuario, por ejemplo "manolo". Pero ojo, por que este usuario tiene que existir en nuestro sistema linux. De manera que crearemos a "manolo" de contraseña "manolo" también, para las pruebas.
Admin Definimos si el usuario será administrador.
Allow-Autologin Para poder conectarme automáticamente sin validación por medio de una aplicación.
Deny Access Sirve para mantener el usuario deshabilitado temporalmente.
... Pulsando sobre SHOW disponemos de más opciones ...
Select IP Address Si selecciamos IP dinamica la IP se asignará por medio del DHCP de nuestra red. En caso de ser estatica tendremos que asignarle insitu una IP para cada vez que el se conecte. Recuerda que si tiene una IP estatica habrá que dejarla libre en la red, ojo con los DHCP.
Ejemplo:
172.20.203.213/16
No obstante para pruebas lo dejaremos dinámico.
Access Control
Podríamos especificar restricciones de conexion: Use NAT (conexión dentro de la red), Use Routing (Conexion dentro de la red y a través de internet).
También podríamos darles direcciones.
Consiguiendo el cliente para la conexión
Ahora, vamos a conectarnos a través del servicio que hemos configurado via web.https://172.20.203.113:943/
Escogemos login que nos permitirá ver los clientes disponibles que tenemos para el VPN. Bajamos una versión para windows.
Si hemos marcado "autologin" durante la gestión del usuario, el cliente siempre se conectará sin pedirnos datos de acceso (solo nos lo pedirá la primera vez). Pero para que esto se mantenga deberemos compartir nuestras publicas. El servidor le mandaría su publica al cliente y el cliente mandaría su publica al servidor. Con esto conseguiríamos una conexión segura sin necesidad de autentificación, con ello se hace posible el "auto-login".
De lo contrario, si no hemos marcado "auto-login", nos los pedirá cada vez que queramos conectarnos.
Instalación del cliente
Una vez descargada la aplicación la instalaremos siguiendo el asistente.Abriendo el cliente para la conexión
Una vez instalado solo deberemos abrir el cliente desde aquellos lugares donde nos hubiese dejado un accesso directo a la aplicación e introducir los datos en la pantalla de este.jueves, 19 de enero de 2012
Seguridad en redes Wifi
Tipos de encriptación Wifi
WPA - No se pueden desencriptar, solo podemos atacarlas mediante fuerza bruta.WPE - Se pueden desencriptar cuando tenemos un número determinado de paquetes.
WPA2 - No se pueden desencriptar, solo podemos atacarlas mediante fuerza bruta.
Distribuciones y aplicaciones
Beini
Es un live que nos sirve expresamente para descifrar estas redes. Podemos robar paquetes para el desencriptado a golpe de click. Este live nos facilita una interfaz gráfica, internamente no deja de ser un aircrack.WifiWay
Es otro live que nos facilita un asistente de aircrack. Posee una aplicación llamada minidwep con la que realizamos la captura.Aircrack
Este junto a unos comandos relacionados de linux te permitirán capturar y desencriptar una clave.Cain y Abel
martes, 17 de enero de 2012
Microsoft Exchange Server
Antes de empezar decidimos los usuarios que vamos a tener para evitar problemas con las pruebas:
azurgaytan
rodriguez
pikabea
leanos
angeles
gomez
aguirre
Admin del sistema: "Sistemas.22"
La primera diferencia entre un servicio de correo normal y este, es que este solo acepta a MS Outlook como cliente de correo. Esto sucede porque sus servicios de SMTP y POP3/IMAP son diferentes. Permite trabajo en grupo, una especie de Google calendar compartido.
Contraseña escogido para el administrador de pruebas: Sistemas.22 (Es una máquina virtual no os frotéis las manos)
Instalación Exchange
El instalador es un extractor de ficheros. Lo más cómodo sería llevarlo a un directorio vacío.Actualizamos el sistema a tope. Instalamos el active directory. Instalamos el exchange server.
...
Seleccionamos el modo de instalación típica y marcamos la opción de instalación automática para todo lo necesario.
En nombre de organización KIMUE(Nº de maquina), por ejemplo: kimue13.
A la pregunta sobre si poseemos algún cliente outlook contestamos que sí (El de la máquina real).
The client access server role will be internet-facing: Esta opción nos serviría para funcionar en internet y darle nuestro nombre de dominio.
...
Una vez rellenadas las opciones se ejecuta una revisión de configuración para ver si todo esta OK y comienza con la configuración.
Por defecto puede darnos error en el IIS pués por defecto tratará de poner en marcha un webmail.
...
Controlador de Dominio
Una vez hecho esto: Ejecutamos dcpromo (En ejecutar), con esto nos convertimos en dominio.La primera pregunta será si queremos pertenecer a un dominio ya existente (Existing forest). Util en caso de migraciones para ser convertido en primario.
No obstante crearemos un nuevo dominio en un nuevo bosque.
Nos pide un dominio. Para ello como somos varios haciendo las pruebas pondremos server13.kimue.org. Si de lo contrario estubiesemos solos podríamos usar directamente kimue.org.
Nos pide domain functional server, escogemos la version de nuestro servidor (Windows 2k8 R1).
Una vez hecho esto, nos hará referencia a un DNS y necesitaremos instalarlo.
DNS server
Nos salta una ventana para la instalación del servidor DNS. Continuamos con su instalación. Nos puede saltar un mensaje de aviso, lo aceptamos.Continuando con la configuración del dominio (Active Directory, necesario para Exchange)
Nos preguntará tambien por los directorios que queremos usar para el sistema, podemos dejarlo por defecto.Nos pedirá un password para el administrador del Active directory: Usaré "sistemas.22".
Una vez finalizada la instalación
Tenemos Exchange (Servicio de correo) y Active Directory (Usuarios y grupos del dominio) necesariamente.Consola Exchange: Exchange management console.
Dentro Escigerenis Bew Mailbox/User Mailbox definiendo también el dominio creado para estos.
En recipient COnfiguracion, click derecho, New Mailbox.
Crearemos nuevos mailbox, nuevos usuarios, seleccionaremos el grupo de usuarios y el resto de las opciones por defecto.
Probando el servicio
https://172.20.203.113/owa <= Esta ruta (IP de la maquina) nos lleva a una ventana de inicio de sesion web para el servicio de correo.
Mensaje de vacaciones (webmail)
Opciones: Establecer opciones automáticas: Seleccionar el rango de tiempo durante el que se devolverá el mensaje.Acuse de recibo (webmail)
A la hora de escribir un nuevo mail disponemos de un menu de opciones en el que podemos escoger diferentes opciones de seguimiento: Confirmación de entrega y de lectura.Opciones de configuración (webmail)
Podemos crear nuevas bandejas de entrada para clasificar el correo.Podemos bloquer correo no deseado.
Podemos configurar una firma para nuestros mails.
Listas de distribución (Servidor)
Además del nodo recipient tenemos en nodo "Distribution Group". Deberíamos de crearlos aqui como "New Distributión group". Después desde propiedades nos quedaría añadirle usuarios en la pestaña "Miembros".Listas de distribución (Cliente)
Si nos movemos a la sección de contactos, podemos añadir tanto contactos individuales como grupos.Podemos crear grupos con los usuarios que nosotros deseemos.
Eventos, tareas, calendario: Crear y compartir (web)
En el mismo boton que nos permite crear un nuevo mail, tambien nos permite crear convocatorias de reunion.Sino, podemos ir a la sección calendario y crear citas o reuniones.
Una cita es una anotación para tu agenda y con fecha inicio y fecha fin.
Una reunion incluye usuarios a los que quiero invitar con fecha inicio y fecha fin.
Hay una sección de tareas en la que podemos anotar fechas concretas (sin duracion) y podemos incluir información concreta del trabajo.
Conclusiones finales
¿Que necesario para tener operativo un servidor exchange?
1- Configurar tu maquina como controlador de dominio (Configuración bosques).
2- Instalar y tener operativo el servicio DNS (Si nos configuramos a nosotros mismos como servicio de DNS se podria solucionar un problema de resolucion de nombres de nuestro servidor exchange hacia nosotros mismos).
3- Instalar y tener operativo el servicio Active directory.
4- Una vez hemos realizado los tres puntos anteriores: Instalar Exchange y crear en el MailBoxes y grupos de distribucion.
domingo, 15 de enero de 2012
Proyecto Joomla
Hacer una web con Joomla sobre un Ayuntamiento:
-Plantilla de 3 Columnas (Retocarla y añadirle alguna imagen del sitio, por ejemplo en el encabezado una foto sobre el lugar).
-Crear 3 articulos para la pagina principal.
-Crear 3 Categorias (en una sección podemos introducir varias sub-categorías (Categorías hijas)).
-Creamos dos subcategorias para cada categoría (Más categorias al fin y al cabo).
-Creamos un articulo mínimo por sub-categoría.
-Plantilla de 3 Columnas (Retocarla y añadirle alguna imagen del sitio, por ejemplo en el encabezado una foto sobre el lugar).
-Crear 3 articulos para la pagina principal.
-Crear 3 Categorias (en una sección podemos introducir varias sub-categorías (Categorías hijas)).
-Creamos dos subcategorias para cada categoría (Más categorias al fin y al cabo).
-Creamos un articulo mínimo por sub-categoría.
domingo, 8 de enero de 2012
Joomla
Es una plataforma CMS. Tiene dos partes importantes:
En el panel de administración tenemos una opción llamada menú desde el cual podemos crear un menú nuevo.
Una vez creado queda pendiente de publicación.
Frontend
Es la zona del visitante. Generalmente "/joomla".
Backend
Es la zona del administrador. Generalmente "/joomla/administrator".
Poniendo joomla en castellano
Deberemos acudir a alguna de las webs de joomla que nos ofrezca el idiomas para joomla y descargaremos el Español, tanto para el "Site" como para el "administrator" (Frontend y Backend). Una vez descargados en el panel de adminsitración, iremos al gestor de extensiones para subir e instalar los comprimidos que hemos descargado con los idiomas. Una vez subidos solo tendremos que entrar a la seleccion de idiomas desde el menu de extensiones y seleccionar el Español por defecto tanto para el sitio como para el administrador.Un menú con diferentes enlaces a artículos
Creando un menú
Una vez creado queda pendiente de publicación.
Creando un articulo
En el gestor de artículos podremos crear artículos nuevos.Gestión de módulos
Para que el menú sea visible tendremos que ir al gestor de módulos y darle un modulo al menú asignándole una posición.Añadiendo articulos a un menú
Una vez tenemos los articulos y el menú operativos, podemos "Añadir elementos" en el menú especificando que deseamos añadir un articulo simple y dandole un nombre. Una vez hechos estos pasos el articulo saldrá en el menú.
Una tienda online
Podemos descargar una versión de virtuemark y subirlo a nuestro joomla. Una vez subido, deberíamos de entrar en la configuración y en tienda configurar lo siguiente: Metodos de envio y Metodos de pago. Tener en cuenta que deberiamos de meter articulos.
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
