SISTEMAS UNDAC

Cross-document messaging: enviando y recibiendo mensajes

window.postMessage( Mensaje, Origen );

Enviar un mensaje

...

   
   Enviar mensaje

   

...

Atributos del evento message

• evento.data: contiene la información del mensaje enviado por el emisor.
• evento.origin: devuelve una cadena de texto conteniendo el origen del emisor. Ej. http://emisor.com
• evento.lastEventId: una cadena con el identificador único del actual evento de message.
• evento.source: es una referencia al objeto window de quien envía el mensaje.
• evento.ports: un array conteniendo un objeto de MessagePort enviado junto al mensaje.

Recibir un mensaje

…
  
    

Aún no he recibido nada. :(
    
  
…

...
  
    
    

Esperando contestación...
    
    Enviar mensaje

    
  
...

…
  
    

Aún no he recibido nada. :(
    
  
...

Ver ejemplo funcionando en el navegador

MessageChannel y MessagePort

Componentes de MessageChannel

• puerto.postMessage( mensaje ): envía mensajes a través del puerto en cuestión.
• puerto.start(): comienza el envío de mensajes a través del puerto.
• puerto.stop(): detiene el envío de mensajes a través del puerto.

Ejemplo

…





…

…

 
  

  

 ...

…




  
  Enviar



...

Ver el ejemplo funcionando en el navegador.

Conclusión

Referencias

http://dev.w3.org/html5/postmsg/
https://developer.mozilla.org/en/DOM/window.postMessage
http://dev.opera.com/articles/view/window-postmessage-messagechannel/

Apéndice

127.0.0.1 emisor.com
127.0.0.1 receptor.com
127.0.0.1 red-social.com

server {
  listen   80;

  # Tres dominios distintos apuntando a la misma carpeta.
  server_name  emisor.com alias receptor.com red-social.com; 
  location / {
    root   /home/jonasanx/public_html;
    autoindex  on; 
  }
}

¿Qué es python?

¿De dónde proviene el nombre de Python?

Descargar Python

• Module docs: módulo de documentos
• Python(command line): consola o línea de comandos python
• Python manuals: cuando tengas una duda puedes consultar este manual (esta en ingles)
• Uninstall python:desinstalador 

¿Por qué python?

• la sintaxis es bastante clara y sencilla de hecho tiene un gran parecido con el lenguaje natural! lo cual te ayuda a comprender mejor el código y hacer potentes aplicaciones de manera rápida.
• puedes ahorrarte muchas líneas de código que normalmente harías con php, c++ o java!!
• es multiparadigma lo cual quiere decir que el desarrollador puede usar más de un método de programación, ej: Orientación a Objetos, Programación Funcional o Programación imperativa.
• es el lenguaje de programación con más apoyo y aceptación en el mundo! 
• no necesita compilación, sólo basta con tener un editor de texto como el notepad, guardarlo con extensión .py y listo, en mac ya viene instalado y en Windows como acabas de ver su instalación es bastante sencilla. 
• YO lo digo!!  

Nuestra primera aplicación en Python

print "area de un triangulo"

base = float(raw_input("medida de la base: "))
altura = float(raw_input("medida de altura: "))
lados = float(raw_input(“medida de los lados: ”))

area = base * altura / 2.0
perímetro = lados* 2 + base
if lados < altura:
print “la medida de los lados debe ser mayor a la altura”
else:
print "al area es: " , area , "el perímetro es: ", perímetro

Print

Variables

Float()

Raw_input()

If, else

Operadores

¿Qué significa esto para los desarrolladores en Flash y Actionscript 3?

Para el uso normal de Flash, no significa mucho

Para los creadores de banners: Hora de no usar Flash

Para quienes usan Flash de manera invisible como "canal"

¿Para donde va Flash en los desktops?

Crear una Base de Datos en sql Server

create database tutorial
go
use tutorial
go

create table CategoriaProductos
(
CodigoCategoriaProductos int not null identity(1,1),
DescripcionCategoriaProductos varchar(50) not null,
EstadoCategoriaProductos int

constraint clavecategoria primary key (CodigoCategoriaProductos)

)
go

create table Productos
(
CodigoProductos int not null identity(1,1),
CodigoCategoriaProductos int ,
DescripcionProductos varchar(50) not null,
PrecioProductos decimal(9,2),
SotckProductos int,
EstadoCProductos int

constraint claveproductos primary key (CodigoProductos),
constraint claveforaneaproductos foreign key (CodigoCategoriaProductos)
references CategoriaProductos(CodigoCategoriaProductos)
)
go

insert into CategoriaProductos values(‘Bebidas’,1)
insert into CategoriaProductos values(‘Lacteos’,1)
insert into CategoriaProductos values(‘Cereales’,1)

select * from CategoriaProductos
go

insert into Productos values(1, ‘Inka Kola 2 Lts’,3.5, 200,1)
insert into Productos values(1, ‘Pepsi 1 Lt.’,3, 100,1)
insert into Productos values(2, ‘Leche Pura Vida’,2.5, 400,1)
insert into Productos values(2, ‘Leche Anchor’,2, 200,1)
insert into Productos values(2, ‘Leche Gloria deslactozada’,3, 100,1)
insert into Productos values(3, ‘Arroz Paisana 1 Kg.’,3.5, 50,1)
insert into Productos values(3, ‘Arroz Costeño 1Kg.’,3, 50,1)
insert into Productos values(3, ‘Cereales Angel 1Kg.’,4, 50,1)

create procedure sp_gen_s_productos
@RegistrosAMostrar int,
@RegistrosAEmpezar int
as

SELECT TOP (@RegistrosAMostrar)* FROM
(
select p.CodigoProductos as codigo, p.DescripcionProductos as descripcion,cp.DescripcionCategoriaProductos as categoria,
p.PrecioProductos as precio,p.SotckProductos as stock,
ROW_NUMBER() OVER (ORDER BY p.CodigoProductos ) AS num

from Productos p
inner join CategoriaProductos cp on p.CodigoCategoriaProductos=cp.CodigoCategoriaProductos

)
AS a
WHERE num > @RegistrosAEmpezar

exec sp_gen_s_productos 3,0

Crear un proyecto jsp

body {
background-color:#F2F2F2;
font-family: verdana,arial;
font-size: 14px;
}

a{
color:#DF7401;
text-decoration: none;
}
a:hover{
color:#FFFF00;
}

#bienvenida
{
background-color: #F5F6CE;
border: 1px solid #FFBF00;
border-radius:5px;
color:#FF8000;
margin: 0px auto;
padding:10px 0 0 0;
text-align: center;

}

#menu{
background: #00BFFF;
border:1px solid #01A9DB;
border-radius: 5px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
height: 50px;
margin:0 auto;
width:50%;
-webkit-border-radius: 5px;
-webkit-border-bottom-right-radius: 100px;
-webkit-border-bottom-left-radius: 100px;
-moz-border-radius: 5px;
-moz-border-radius-bottomright: 100px;
-moz-border-radius-bottomleft: 100px;

}

li{
color:#fff;
cursor:pointer;
font-size:15px;
float:left;
list-style: none;
margin-left: 40px;

}
li:hover {
color:#F4FA58;
font-weight: bold;

}
#contenedor{
background-color:#fff;
border:1px solid #BDBDBD;
margin: 20px auto;
min-height: 300px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 70%;

text-align: center;

}
.paginadoractivo{
padding:5px 10px 5px 10px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#F5DAA0;
color:#000000;
border:0.5px solid #000000;
cursor:pointer;
}
.paginador{
padding:5px 10px 5px 10px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
background-color: #E7F7FF;
color:#000000;
border:0.5px solid #333333;
cursor:pointer;

}
.paginador:hover{
padding:5px 10px 5px 10px;
font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
background-color:#73ADD6;
color: white ;
border:0.5px solid #333333;
cursor:pointer;
}
.tablita
{
font-size: 12px;
width:90%;
text-align: left;
margin:0 auto;
border: 1px solid #E6E6E6;
border-collapse: collapse;
font-family: “Trebuchet MS”, Arial, sans-serif;
color: #ffffff;
}
.tablita caption
{
font-size: 16px;
font-weight: normal;
padding: 5px;
/* background: #73ADD6 url(‘../images/fon_perfil.gif’) repeat-x;*/
border-right: 1px dotted #06C ;
background: #084B8A;
color: #FFFFFF;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.tablita th
{
font-size: 13px;
font-weight: normal;
padding: 5px;
/* background: #73ADD6 url(‘../images/fon_perfil.gif’) repeat-x;*/
border-right: 1px dotted #06C ;
background: #084B8A;
color: #FFFFFF;
}
.tablita td
{
padding: 4px;
color: #086A87;

}
.tablita tfoot tr td
{
font-size: 12px;
color: #ffffff;
}
.tablita tbody tr:hover td
{
/* background: #FCFDFE; */
color:saddlebrown;
background: #E0F8F7;
}

<%@page contentType=”text/html” pageEncoding=”UTF-8″%>














Bienvenidos a este tutorial JSP- MSSQL SERVER 2008 – JQUERY -CSS




Inicio
Listado
Registro






Aqui se mostrara el listado de productos

function listaproductos(pagina){
var rnd = Math.random()*11;

$.post(“lib/listado.jsp”,{
rnd:rnd,
pagina:pagina
},function(data){
$(“#contenedor”).html(data);
});
}

<%–

Document : listado
Created on : 31/03/2012, 02:28:29 PM
Author : Jose Garcia
–%>

<%@ page import=”java.util.Vector, jdbc.*” %>
<%@page contentType=”text/html” pageEncoding=”UTF-8″%>
<%

out.println(“

”);

out.println(“”);
out.println(“”);
out.println(“”);
out.println(“”);
out.println(“”);
out.println(“”);
out.println(“”);
out.println(“”);

out.println(“”);
out.println(“”);
int RegistrosAMostrar=4;
int PaginasIntervalo=3;
int RegistrosAEmpezar=0;
int PagAct = 1;
String pag = request.getParameter(“pagina”);
if (pag==null || pag==”"){
RegistrosAEmpezar=0;
PagAct=1;
}else{
RegistrosAEmpezar=(Integer.valueOf(pag).intValue()-1)* RegistrosAMostrar;
PagAct=Integer.valueOf(pag).intValue();
}
%>
<%
Vector productos = Sql.consulta(“exec [sp_gen_s_productos] @RegistrosAMostrar=’”+RegistrosAMostrar+”‘,@RegistrosAEmpezar=’”+RegistrosAEmpezar+”‘”);//nos permite ejecutar un sp con parametros para la paginacion
for (int fils = 1; fils < productos.size(); ++fils) { //recorre el vector productos con los resultados del metodo Sql.consulta
String[] unaFila = (String[]) productos.get(fils);
%>


<%

} %>
<%
String NroRegistros = Sql.getCampo(“select count(*) from Productos p “
+ ” inner join CategoriaProductos cp on p.CodigoCategoriaProductos=cp.CodigoCategoriaProductos”);// obtengo la cantidad de registros actuales
int PagAnt=PagAct-1;
int PagSig=PagAct+1;

double PagUlt=Integer.valueOf(NroRegistros).intValue()/RegistrosAMostrar; //calculo cuantas paginas tendra mi paginacion
int Res=Integer.valueOf(NroRegistros).intValue()%RegistrosAMostrar;
if(Res>0){
PagUlt=Math.floor(PagUlt)+1;
}

out.println(“”);
out.println(“
LISTADO DE PRODUCTOS

Codigo
Producto
Categoria
Precio
Stock




<%=unaFila[0]%>
<%=unaFila[1]%>
<%=unaFila[2]%>
<%=unaFila[3]%>
<%=unaFila[4]%>



”);
//principio del paginador
out.println(“

”);

if(PagAct>(PaginasIntervalo+1)) {
out.println(“<< Primero”);
out.println(“ ”);
}
for ( int i = (PagAct-PaginasIntervalo) ; i <= (PagAct-1) ; i ++) {
if(i>=1) {
out.println(“”+i+””);
out.println(“ ”);
}
}
out.println(“”+PagAct+””);
out.println(“ ”);
for ( int i = (PagAct+1) ; i <= (PagAct+PaginasIntervalo) ; i ++) {
if(i<=PagUlt) {
out.println(“”+i+””);
out.println(“ ”);
}
}
if(PagAct<(PagUlt-PaginasIntervalo)) {
out.println(“Ultimo >>”);
}
out.println(“
”);
//fin del paginador
%>