Manos a la obra con Java y Eclipse

Eclipse

¿Qué necesitamos para trabajar con Android?

Plugin ADT para eclipse

Crear un dispositivo virtual

• Name: escribimos el nombre
  
• Target: elegimos la versión que vamos a usar ej: 2.1
  
• SD card: elegimos la cantidad de espacio que ocupa, podemos poner 1GIB
  
• Hardware: si damos click en new podemos añadirle soporte para funcionamientos como: acelerometrer, soporte para touch-screen, e.t.c
  

Crear un "Hola mundo" en Android

• SRC: Aquí se encuentra podría decirse nuestra hoja PRINCIPAL del proyecto en java.
  Dentro de la carpeta res esta la carpeta layout donde se encuentra nuestro main.xml
  
• XML: es un lenguaje basado en etiquetas, al cual yo llamaría hermano de html porque lo que hace es crear la parte estructural de (en este caso) componentes para android, ej: los botones, campos de texto, imágenes e.t.c. En main.xml tenemos dos vistas disponibles la forma gráfica y la forma de código.
  

• Strings.xml: por defecto si ejecutamos la máquina virtual con nuestro proyecto veremos un texto que dice Hello World, EjemploActivity! Pero si nos vamos a src, donde está la hoja principal de java en ninguna parte está escrito esto, pero sucede que en strings.xml hay una línea así:
  

Código :

<string name="hello">Hello World, EjemploActivity!</string>

Código :

setContentView(R.layout.main);

Código :

import android.widget.TextView;

Código :

TextView variable = new TextView(this);
variable.setText("Hola Mundo");
setContentView(variable);

Opción 1: Shift + Arrastrar

Opción 2: Duplicar capas en un nuevo documento

Objetivo

Requisitos

• Cuenta en Paypal
  
• Tarjeta Payoneer
  
• Cuenta Virtual en USA
  

• Servicios o productos que ofrecemos (Incluir sitio web propio)
  
• Links de productos o servicios ofrecidos donde se vea nuestro nombre o algo que evidencie nuestra relación laboral (ejemplo: una web que hemos hecho linkeando a nuestro website en el footer).
  
• Screenshot de Paypal donde se muestre un balance de pagos recibidos en el último período
  
• Scan de pasaporte o documento de identidad
  

Transfiriendo el dinero desde Paypal a nuestra tarjeta de débito

Código :

git rm <nombre del archivo>

¿Por qué debo implementarlo en diseño web?

¿Entonces no puedo hacer responsive design a mi website actual?

¿Y cómo es un diseño responsive?

¿Y ahora debo hacer cuatro diseños?

¿Te has fijado que el flujo de los elementos es similar?

Mostly Fluid – más o menos fluido

Column Drop – caída de columna

Layout shifter – movimiento de estructura

Tyny tweaks – pequeños cambios

Off canvas – fuera del canvas

¿Qué necesito para ir a estos cursos?

Crear una Base de Datos en sql Server

Código :

create database tutorial
go
use tutorial
go

Código :

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

constraint clavecategoria primary key (CodigoCategoriaProductos)

)
go

Código :

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

Código :

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

Código :

select * from CategoriaProductos
go

Código :

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)

Código :

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

Código :

exec sp_gen_s_productos 3,0

Crear un proyecto jsp

Código :

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;
}

Código :

<%@page contentType=”text/html” pageEncoding=”UTF-8″%>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<link rel=”stylesheet” href=”css/estilo.css” media=”all”>
<script type=”text/javascript” src=”js/jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”js/funciones.js”></script>
<title>JSP Page</title>
</head>
<body>
<div id=”bienvenida”>
<h2>Bienvenidos a este tutorial JSP- MSSQL SERVER 2008 – JQUERY -CSS</h2>
</div>

<div id=”menu”>
<ul>
<li>Inicio</li>
<li onclick=”listaproductos()”>Listado</li>
<li>Registro</li>
</ul>
</div>
<div id=”contenedor” >

<h3>Aqui se mostrara el listado de productos</h3>
<img src=”images/admiracion-300×300.jpg”>
</div>
</body>
</html>

Código :

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

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

Código :

<%–

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

<%@ page import=”java.util.Vector, jdbc.*” %><!– Nos permite utilizar metodos del proyecto jdbc con la clase sql.java –>
<%@page contentType=”text/html” pageEncoding=”UTF-8″%>
<%

out.println(“<br><br>”);

out.println(“<table class=’tablita’>”);
out.println(“<caption>LISTADO DE PRODUCTOS</caption>”);
out.println(“<tr>”);
out.println(“<th>Codigo</th>”);
out.println(“<th>Producto</th>”);
out.println(“<th>Categoria</th>”);
out.println(“<th>Precio</th>”);
out.println(“<th>Stock</th>”);

out.println(“</tr>”);
out.println(“<tbody>”);
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);
%>
<tr id=”grid”>

<!– voy imprimiendo los resultados en la tabla–>
<td id=”formnuevo”><%=unaFila[0]%></td>
<td id=”formnuevo”><%=unaFila[1]%></td>
<td id=”formnuevo”><%=unaFila[2]%></td>
<td id=”formnuevo”><%=unaFila[3]%></td>
<td id=”formnuevo”><%=unaFila[4]%></td>

</tr>

<%

} %>
<%
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(“</tbody>”);
out.println(“</table><br />”);
//principio del paginador
out.println(“<div style=’width:300px; float:right’>”);

if(PagAct>(PaginasIntervalo+1)) {
out.println(“<a onclick=listaproductos(’1′); class=’paginador’><< Primero</a>”);
out.println(“&nbsp;”);
}
for ( int i = (PagAct-PaginasIntervalo) ; i <= (PagAct-1) ; i ++) {
if(i>=1) {
out.println(“<a onclick=\”listaproductos(‘”+i+”‘)\” class=’paginador’>”+i+”</a>”);
out.println(“&nbsp;”);
}
}
out.println(“<span class=’paginadoractivo’>”+PagAct+”</span>”);
out.println(“&nbsp;”);
for ( int i = (PagAct+1) ; i <= (PagAct+PaginasIntervalo) ; i ++) {
if(i<=PagUlt) {
out.println(“<a onclick=\”listaproductos(‘”+i+”‘)\” class=’paginador’>”+i+”</a>”);
out.println(“&nbsp;”);
}
}
if(PagAct<(PagUlt-PaginasIntervalo)) {
out.println(“<a onclick=\”listaproductos(‘”+PagUlt+”‘)\” class=’paginador’>Ultimo >></a>”);
}
out.println(“</div>”);
//fin del paginador
%>

¿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?

¿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

Código :

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

Cross-document messaging: enviando y recibiendo mensajes

Código :

window.postMessage( Mensaje, Origen );

Enviar un mensaje

Código :

...
<body>
   <iframe src="http://receptor.com/receptor.html"></iframe>
   <button>Enviar mensaje</button>

   <script>
      var iframe = document.querySelector("iframe");
      var button = document.querySelector("button");

      var enviarMensaje = function(){
         iframe.contentWindow.postMessage("Hola, ¿como estas?", "http://receptor.com");
      };
      
      // Al dar click al botón se ejecutar el método enviarMensaje.
      button.addEventListener("click", enviarMensaje, false);
   </script>
</body>
...

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

Código :

…
  <body>
    <div id="mensaje">Aún no he recibido nada. :(</div>
    <script>
      var mensaje = document.querySelector("#mensaje");
      
      var recibirMensaje = function( evento ){

        // Verificamos que efectivamente el origen sea de emisor.com
        if (evento.origin == "http://emisor.com")
          mensaje.innerHTML = evento.data;
      };

   // Cuando se reciba un evento message se ejecutara las función recibirMensaje.
      window.addEventListener("message", recibirMensaje, false);
    </script>
  </body>
…

Código :

...
  <body>
    <iframe src="http://receptor.com/receptor.html"></iframe>
    <div id="mensaje">Esperando contestación...</div>
    
    <button>Enviar mensaje</button>

    <script>
      var iframe  = document.querySelector("iframe");
      var button  = document.querySelector("button");
      var mensaje = document.querySelector("#mensaje");

      var enviarMensaje = function(){
        iframe.contentWindow.postMessage("¿Como te llamas?", "http://receptor.com");
      };

      var recibirMensaje = function( evento ){
        if (evento.origin == "http://receptor.com")

          // Retrasamos la publicación del mensaje solo para hacerla de emoción.
          setTimeout(function(){
            mensaje.innerHTML = "Receptor: " + evento.data;
          }, 3000);

      };

      button.addEventListener("click", enviarMensaje, false);
      window.addEventListener("message", recibirMensaje, false);
    </script>
  </body>
...

Código :

…
  <body>
    <div id="mensaje">Aún no he recibido nada. :(</div>
    <script>
      var mensaje = document.querySelector("#mensaje");
      
      var recibirMensaje = function( evento ){
        if (evento.origin == "http://emisor.com"){
          mensaje.innerHTML = "Emisor: " + evento.data;

          // Aquí evento.source es una referencia al objeto window del emisor.
          // evento.origin contiene el origen del emisor: "http://emisor.com"
          evento.source.postMessage("iPad Pepito, por que solo iPad es «too mainstream».", evento.origin);
        }

      };

      window.addEventListener("message", recibirMensaje, false);
    </script>
  </body>
...

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

Código :

…
<body>
<!-- En #correos serán añadidas las direcciones de correo electrónico que sean recibidas. -->
<ul id="correos"></ul>

<script>
  var documentoCargado = function(){
    
    // Definimos las variables que serán utilizadas.
    var canal, correos, recibirMensaje;
    
    // Seleccionamos lo que será nuestro contenedor de correos.
    correos = document.querySelector("#correos");

    // Creamos un objeto MessageChannel.
    canal = new MessageChannel();

    // Esta es nuestra función que será encargada de procesar los mensajes entrantes, 
    // en otras palabras, de publicar los correos que sean enviados desde la agenda.
    recibirMensaje = function( evento ){
      // creamos un nuevo elemento "li" y le añadimos el correo recibido.
      var correo = document.createElement("li");
      correo.innerText = evento.data;

      // Depues agregamos este mismo "li" a nuestro contenedor de correos (ul#correos).
      correos.appendChild( correo );
    };  
    
    // Ahora que el documento esta cargado, le enviamos un mensaje con el puerto dos a la red social (el sitio que contiene este iframe)
    // diciendo que ya estamos listos para recibir los correos.
    window.parent.postMessage("¡Estoy listo!", "http://emisor.com", [canal.port2]);

    // Por el puerto uno escuchamos la llegada de cualquier mensaje.
    canal.port1.addEventListener("message", recibirMensaje, false);
    // y abrimos el puerto.
    canal.port1.start();
  };

  // Esperemos a que se cargue el DOM. 
  // * esta es la versión con JavaScript puro de $(document).ready() de jQuery.
  window.addEventListener("DOMContentLoaded", documentoCargado, false);
</script>
</body>
…

Código :

…
<body>
 <iframe src="juego.html"></iframe>
  <iframe src="agenda.html"></iframe>

  <script>
  var documentoCargado = function(){
  
    // Seleccionamos nuestra agenda, la cual esta contenida en el segundo iframe
    // de nuestro documento.
    var agenda = window.frames[1];

    // Función encarga de procesar el mensaje entrante.
    var recibirMensaje = function( evento ){
      
      // Le enviamos a la agenda un mensaje avisando que puede empezar
      // a enviar información a la pagina del juego. Al mismo tiempo, le enviamos
      // el puerto (port2) por el cual puede comunicarse directamente con la pagina del juego.
            agenda.postMessage("Puede transmitir", "http://emisor.com", evento.ports)
    };
    
    // Escuchamos a cualquier evento message que pueda llegar.
    window.addEventListener("message", recibirMensaje, false);
  };

  // Esperamos a que se cargue el documento.
  window.addEventListener("DOMContentLoaded", documentoCargado, false);
  </script>
</body>
 ...

Código :

…
<body>
<!-- Este es el formulario en donde se ingresarán las direcciones de correo electrónico que serán enviadas a la página del juego. -->
<form>
  <input type="email" placeholder="Ingrese e-mail" required>
  <button>Enviar</button>
</form>

<script>  
  var documentoCargado = function(){
    var recibirMensaje = function( evento ){
      
      // Localizamos nuestro formulario.
      var formulario = document.forms[0];

      var procesarFormulario = function( form ){
        
        // Detenemos el envio del formulario
        form.preventDefault();

        // Leemos el contenido de nuestra entrada de texto.
        var correo = formulario.querySelector("input").value;
        
        // Enviamos el correo ingresado por el puerto recibido en el mensaje (port2) que fue enviado desde la red social.
        evento.ports[0].postMessage( correo );
      };
              
      // Cuando se envíe el formulario se ejecutara la función procesarFormulario.
      formulario.addEventListener("submit", procesarFormulario, false);
        };
  
    // Escuchamos a cualquier evento message que pueda llegar.
    window.addEventListener("message", recibirMensaje, false);
  };  

  // Esperamos a que se cargue el documento.
  window.addEventListener("DOMContentLoaded", documentoCargado, false);
</script>
</body>
...

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

Código :

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

Código :

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; 
  }
}