CursosOnline

Control de varios servos Arduino + Java +RXTX

noreply@blogger.com (Giovanni) — Sun, 02 Mar 2014 15:17:00 +0000

En esta entrada les muestro un simple programa escrito en java y la librería para conexión serial RXTX, que envía parámetros a un Arduino con 3 servomotores conectados, el programa a través de una serie de "Sliders" controla con precisión los servos desde la computadora, tiene varios campos de texto con los cuales puedes establecer con exactitud el angulo que quieres colocar en el servo, incluso puedes mover los 3 servos al mismo tiempo al colocar los ángulos y luego presionar el botón enviar, para ver un demo del programa en accion : https://www.youtube.com/watch?v=R-7sTBZKypY&feature=youtu.be

El programa esta compuesto de 3 clases, Gui.java, Multiservo.java y map.java

GUI.java :

import java.awt.event.*;
import java.awt.*;
import javax.swing.*;
import javax.swing.event.*;

public class GUI extends KeyAdapter implements ActionListener, ChangeListener {

JFrame vt = new JFrame("Servos");
JLabel txt1 = new JLabel("Selecciona el puerto de tu Arduino");
String[] puertosOp = {"COM1", "COM2", "COM3", "COM4", "COM5", "COM6", "COM7", "COM8", "COM9",};
JComboBox puertosSelec = new JComboBox(puertosOp);
JPanel panel1 = new JPanel();

JSlider motor1 = new JSlider(JSlider.VERTICAL, 0, 180, 0);
JTextField manual1 = new JTextField(3);
JPanel m1 = new JPanel();
JSlider motor2 = new JSlider(JSlider.VERTICAL, 0, 180, 0);
JTextField manual2 = new JTextField(3);
JPanel m2 = new JPanel();
JSlider motor3 = new JSlider(JSlider.VERTICAL, 0, 180, 0);
JTextField manual3 = new JTextField(3);
JPanel m3 = new JPanel();

JPanel panel2 = new JPanel();

JButton enviar = new JButton("Enviar");
JPanel panel3 = new JPanel();

MultiServo conexion;

GUI() {
vt.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
vt.setResizable(false);
vt.setLayout(new BorderLayout());
vt.add(panel1, BorderLayout.NORTH);
vt.add(panel2, BorderLayout.CENTER);

panel1.add(txt1);
panel1.add(puertosSelec);
puertosSelec.addActionListener(this);

panel2.add(m1);
panel2.add(new JLabel(" "));
panel2.add(m2);
panel2.add(new JLabel(" "));
panel2.add(m3);

m1.setLayout(new BorderLayout());
m1.add(motor1, BorderLayout.CENTER);
m1.add(manual1, BorderLayout.SOUTH);
motor1.addChangeListener(this);
manual1.addKeyListener(this);

m2.setLayout(new BorderLayout());
m2.add(motor2, BorderLayout.CENTER);
m2.add(manual2, BorderLayout.SOUTH);
motor2.addChangeListener(this);
manual2.addKeyListener(this);

m3.setLayout(new BorderLayout());
m3.add(motor3, BorderLayout.CENTER);
m3.add(manual3, BorderLayout.SOUTH);
motor3.addChangeListener(this);
manual3.addKeyListener(this);

vt.add(panel3, BorderLayout.SOUTH);
panel3.add(enviar);
enviar.addActionListener(this);
motor1.setEnabled(false);
motor2.setEnabled(false);
motor3.setEnabled(false);
manual1.setEditable(false);
manual2.setEditable(false);
manual3.setEditable(false);
vt.pack();
vt.setVisible(true);
}

@Override
public void actionPerformed(ActionEvent e) {
Object f = e.getSource();
if (f == puertosSelec) {
motor1.setEnabled(true);
motor2.setEnabled(true);
motor3.setEnabled(true);
String op = (String) puertosSelec.getSelectedItem();
conexion = new MultiServo(op);

manual1.setEditable(true);
manual2.setEditable(true);
manual3.setEditable(true);

puertosSelec.setEnabled(false);
}
if (f == enviar) {
String val;
val = manual1.getText();
motor1.setValue(Integer.parseInt(val));

val = manual2.getText();
motor2.setValue(Integer.parseInt(val));

val = manual3.getText();
motor3.setValue(Integer.parseInt(val));
}
}

@Override
public void stateChanged(ChangeEvent e) {
Object f = e.getSource();
String val;
if (f == motor1) {
val = String.valueOf(motor1.getValue());
conexion.enviar(Map.rTres(motor1.getValue()));
manual1.setText(val);
}
if (f == motor2) {
val = String.valueOf(motor2.getValue());
conexion.enviar(Map.rTres(motor2.getValue()) + 85);
manual2.setText(val);
}
if (f == motor3) {
val = String.valueOf(motor3.getValue());
conexion.enviar(Map.rTres(motor3.getValue()) + 170);
manual3.setText(val);
}
}

@Override
public void keyReleased(KeyEvent e) {
Object f = e.getSource();
int tecla = e.getKeyCode();
String val;
if (f == manual1 && tecla == KeyEvent.VK_ENTER) {
val = manual1.getText();
motor1.setValue(Integer.parseInt(val));
}
if (f == manual2 && tecla == KeyEvent.VK_ENTER) {
val = manual2.getText();
motor2.setValue(Integer.parseInt(val));
}
if (f == manual3 && tecla == KeyEvent.VK_ENTER) {
val = manual3.getText();
motor3.setValue(Integer.parseInt(val));
}
}
}

MultiServo.java :

import gnu.io.*;
import java.io.IOException;
import java.io.PrintStream;
import java.util.Enumeration;
import java.util.Scanner;
import java.util.logging.Level;
import java.util.logging.Logger;
public class MultiServo {
Enumeration listaPuertos = CommPortIdentifier.getPortIdentifiers();
CommPortIdentifier puertoId ;
PrintStream arduinoOut ;
SerialPort puerto;
MultiServo(String pto){
while(listaPuertos.hasMoreElements()){
puertoId = (CommPortIdentifier)listaPuertos.nextElement();
if(puertoId.getName().equals(pto)){
break;
}
}
try {
puerto = (SerialPort)puertoId.open("Serial", 1000);
puerto.setSerialPortParams(28800, SerialPort.DATABITS_8, SerialPort.STOPBITS_1, SerialPort.PARITY_NONE);
arduinoOut = new PrintStream(puerto.getOutputStream());
} catch (PortInUseException | IOException | UnsupportedCommOperationException ex) {
Logger.getLogger(MultiServo.class.getName()).log(Level.SEVERE, null, ex);
}
}

public void enviar(int num){
arduinoOut.write(num);
}
public static void main(String[] args) {
GUI app = new GUI();
}

}

Map.java:

public class Map {
static int rTres(int n){
//85 x n/180
int resultado = (85*n)/180;
return resultado;
}
}

Esto es el programa en java, ahora falta el sketch para el Arduino, aqui esta:

#include <Servo.h>
Servo motor1;
Servo motor2;
Servo motor3;
int num;
int mov;

void setup(){
Serial.begin(28800);
motor1.attach(9);
motor1.write(0);

motor2.attach(10);
motor2.write(0);

motor3.attach(11);
motor3.write(0);
}

void loop(){
if(Serial.available()>0){
num = Serial.read();
if(num >=0 && num <85){
mov = map(num, 0, 84, 0, 180);
motor1.write(mov);
}
if(num >=85 && num <170){
mov = map(num, 85, 169, 0, 180);
motor2.write(mov);
}
if(num >=170 && num <= 255){
mov = map(num, 170, 255, 0, 180);
motor3.write(mov);
}
}
}

Curso de TinyMCE: Personalizacion con Skins

noreply@blogger.com (Giovanni) — Fri, 19 Nov 2010 22:55:00 +0000

Para un mejor entendimiento, se recomienda acompañar este curso con la parte audiovisual, disponible totalmente gratis en http://giovaelpe.blip.tv
Skins
En TinyMCE, las skins, son las que nos permiten personalizar el aspecto de nuestro reproductor, en lo referente a: el color de fondo de nuestra toolbar, el aspecto de los iconos, mos no afecta cosas como por ejemplo la posición de los mismos
Skins Disponibles con la instalación de tinyMCE
Default: Como su nombre lo dice, es la Skin por defecto, y su apariencia es la siguiente:

o2k7: Aparte de la Skin default, esta es la unica que viene incluida con la instalacion de tinyMCE, y el resultado es el siguiente:

Skin_variant:
Permite especificar alguna variante para el skin en uso, el skin default no ofrece ninguna variante, pero o2k7, ofrece dos: Silver y Black cuya apariencia son repectivamente:

Implementacion de las Skin y de Skin_variant:
skin: "o2k7"
Configuracion por defecto
skin : "o2k7",
skin_variant : "silver"
Con la variante silver apllicada.
Creacion de un Skin
La creacion de skins se especifica mejor en el videotutorial que acompaña esta clase, disponible de forma gratuita en: http://giovaelpe.blip.tv

Curso de TinyMCE: Los Plugins

noreply@blogger.com (Giovanni) — Fri, 05 Nov 2010 20:13:00 +0000

insertdatetime:
Este plugin nos permite crear un botón que nos inserta automáticamente la fecha y la hora, también nos ofrece la flexibilidad de personalizar el formato de salida, tanto de la fecha como de la hora, para ello debemos utilizar los siguientes identificadores:
%D : Atajo que nos permite colocar la fecha completa con un solo identificador, con el formato (mm/dd/yy)
%r : Atajo que crea un reloj completo con formato de 12 horas
%y : Año sin incluir el siglo
%Y : Año completo incluyendo el siglo
%m : muestra el numero del mes, en formato de dos números
%B : nombre completo del mes (ingles)
%b : nombre en ingles del mes abreviado
%d : numero que representa el numero del mes
%A : el nombre del día de la semana, completo
%a : nombre del mes abreviado
%H : Hora con formato de 24 horas
%I : Hora con formato de 12 horas
%M : muestra los minutos
%S : muestra los segundos
%p : muestra am o pm segun sea el caso
SearchReplace
Permite buscar y reemplazar el texto selecionado
Print
Permite imprimir el documento
advhr
Con este plugin podemos crear lineas divisorias personalizadas
autoresize
Al utilizar este plugin, el textarea que estemos utilizando con tinyMCE va a ir adaptando su tamaño conforme vamos escribiendo
Emotions
Permite insertar emoticones en el documento
Example
Este plugin por si solo no permite hacer nada util, su función es la de ser una plantilla para los desarrolladores que quieran crear su propio plugin
Inlinepopups
Convierte todos las ventanas de dialogo en elementos Div, lo que ayuda a un mejor funcionamiento en navegadores que tengan activado el bloqueo de elementos emergentes
Layer
Añade la funcionalidad de agregar nuevas capas, las cuales no afectan la estructura del documento
Visualchars
Permite ver los caracteres ocultos
Advlink
Modifica el cuadro de dialogo original, para crear enlaces, reemplazandolo por uno mas complejo
Advlis
Modifica la forma de crear listas, agregando funciones mas avanzadas
Autosave
Muestra un mensaje de alerta cuando el usuario ha hecho modificaciones y no a enviado el formulario
bbcode
Proporciona la posibilidad de trabajar con codigo bbcode, convirtiendo [b] en <strong>, y luego esta ultima nuevanente en [b]

Mas plugins los continuaremos viendo a lo largo del curso para acceder a los videos has click aqui

Curso de TinyMCE en español

noreply@blogger.com (Giovanni) — Thu, 04 Nov 2010 15:13:00 +0000

Que es TinyMCE:
Es lo que se conoce, como un editor WYSIWYG, lo cual es un acronimo en ingles de: lo que ves es lo que obtienes, y se refiere a los procesadores de texto que muestran directamente el resultado final, y escribir directamente en el, se muestra como una alternativa, a procesadores de texto poco frecuentes el día de hoy, en los que el resultado final no se mostraba hasta el momento de imprimir el documento.

En el caso de TinyMCE esta diseñado para poder ser usado en nuestras paginas web, integrándolo en el HTML de la misma, esta creado en javascript, y es OpenSource.

En la imagen de arriba vemos un ejemplo de tinyMCE aplicado a una textarea

Primera parte del curso: Implementacion y Uso de tinyMCE
Implementacion:
Lo primero, y mas obvio es descargarse la librería haciendo click aqui, luego para ver el primer capitulo del videotutorial dirigete a este enlace
Archivos de Ejemplo:
Para descargar un archivo de ejemplo, con una implementación básica de tinyMCE, haz click aqui

Como limitar el numero de caracteres en textarea (maxlength en textarea)

noreply@blogger.com (Giovanni) — Wed, 03 Nov 2010 19:53:00 +0000

El Maxlength en los campos textareas
Muchos de ustedes habrán querido limitar la cantidad de caracteres, en los <textarea> , y desgraciadamente el atributo maxlength solo esta disponible en las etiquetas <input> , pero les tengo una buena noticia, una de las novedades de html5 es la implementacion de este atributo a los <textarea> , sin embargo html5 no esta disponible de la misma forma para todos los navegadores, por que después de haberlo probado en: IE9 beta, Firefox 3.6, Google Chrome , Opera 10.62, Safari 5.02. Este atributo solo funciono en Chrome y en Safari.
Para el resto de los navegadores vamos a tener que utilizar el "método antiguo" que es a través de javascript, en el siguiente vídeo les muestro como, y hago una comparativa de el uso de ambos métodos, espero que les guste:

Archivo de Ejemplo:
Javascript:

<script type="text/javascript">
limite = 10;
function verLimite(){
document.getElementById('numero').innerHTML = limite;
}
function comprobar(){
texto = document.formulario.texto;
num = document.getElementById('numero');
if(texto.value != 0 || texto.value != limite){
num.innerHTML = limite - texto.value.length;
}
if(texto.value.length >= limite){
textofin = "";
for(i=0;i<limite;i++){
textofin = textofin + texto.value.charAt(i);
}
texto.value = textofin;
num.innerHTML = 0;
}
}
</script>
Fomrmulario:
<body onload="verLimite()">
Caracteres Restantes
<span id="numero"></span>
<form name="formulario">

<textarea id="texto" cols="50" rows="10" onkeyup="comprobar();" maxlength="10"></textarea>
</form>

Introducción HTML5 Parte 1

noreply@blogger.com (Giovanni) — Wed, 06 Oct 2010 14:11:00 +0000

Pregunta Básica ¿Que es HTML5?
Es la nueva revisión del lenguaje HTML, especifica dos variantes para su sintaxis, un html clásico, la variante conocida como html5 que asi se llama por ser la quinta revisión importante, y una variante xml conocida XHTML5, esta es la primera vez que html y xhtml se desarrollan en paralelo, dicho de una forma mas simple es un borrador de lo que sera la próxima versión de html
Diferencias entre html y html5
Etiquetas que pasaron al desuso:
<acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u>, <xmp>
Etiquetas nuevas en html5:
<article>, <aside>, <audio>, <canvas>, <command>, <datalist>, <details>, <embed>, <figcaption>, <figure>, <footer>, <header>, <hgroup>, <keygen>, <mark>, <meter>, <nav>, <output>, <progress>, <rp>, <rt>, <section>, <source>, <summary>, <time>, <video>, <wbr>
Atributos que pasaron al desuso:
rev y charset en <link /> y <a />, target en <link />, nohref en <area />, profile en <head />, version en <html />, name en <map />, scheme en <meta />, archive, classid, codetype, declare y standby en <object />, valuetype en <param />, charset en <script />, summary en header, axis y abbr en <td /> y <th />
Atributos Estándar nuevos:
Al igual que las versiones html anteriores existen atributos que son aplicables a todas las etiquetas, en html5 se agregan los siguientes:
contenteditable, contextmenu, data-yourvalue, draggable, hidden, item, itemprop, spellcheck, subject
Atributos maneja-dores de Evento nuevos:
onafterprint, onbeforeprint, onbeforeonload, onerror, onhaschange, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate, onredo, onresize,onstorage, onundo, onunload
Definición de cada uno de los atributos y etiquetas
La parte practica de este tutorial la pueden encontrar en los videos haciendo click aqui
Archivos de Ejemplo:
video
sonido
archivo html

Curso de php clase 13

noreply@blogger.com (Giovanni) — Thu, 30 Sep 2010 21:38:00 +0000

¿Que es un CMS?

Son las iniciales en ingles de, Sistema de Gestión de Contenidos, son la serie de programas que nos permiten crear una estructura de soporte, para la creación y el mantenimiento principalmente de sitios web, dicho de una forma mas simple, es un script ya listo, escrito en lenguaje de servidor (PHP por ejemplo), el cual podemos personalizar a nuestro estilo, teniendo con ello una pagina web ya lista, mucho mas rápido de lo que nos hubiera tomado hacerla nosotros mismos desde cero.

Ejemplos de CMS, de Codigo Abierto:

ClipBucket:

Conocido también como el clon de youtube, nos permite crear un portal de videos, al mejor estilo de youtube, lo pueden descargar de aqui, lo único que no me gusto al probarlo fue que la instalación es algo complicada, a diferencia de otros cms cuyo instalador es prácticamente automático

MediaWiki

Es desde mi punto de vista es uno de los mejores cms, y mas faciles de instalar, es un proyecto de el grupo WikiMedia, que son los que manejan wikipedia, wikilibros, wikisource, etc todos los proyectos wiki, y nos permite crear nuestra propia wikipedia, su instalacion es muy sencilla, para descargar media wiki haz click aqui

Joomla!

El signo de exclamación es parte del nombre, y es un cms que nos sirve tanto para crear, redes sociales blogs y portales de noticias, crearle una plantilla es muy facil, descargar Joomla!

OsComerce

Nos permite crear una tienda electrónica, tiene una lista de articulos de ejemplo al principio, este no solo lo probe si que lo utilice en una situacion real para una tienda electronica que instale en la pagina web de la empresa de mi padre, descargar OsComerce.

Curso de HTML parte 3

noreply@blogger.com (Giovanni) — Wed, 29 Sep 2010 19:27:00 +0000

Las Tablas
En html una tabla se puede definir de la forma mas simple, diciendo que consisten en un conjunto de columnas que contienen celdas, y permiten organizar cualquier tipo de contenido, en el interior de las mismas,
un ejemplo:
Queremos organizar un horario:

Horario	Lunes	Martes	Miercoles	Jueves	Viernes
Mañana	Trabajo	Trabajo	Trabajo	Trabajo	Trabajo
Receso	Almuerzo	Almuerzo	Almuerzo	Almuerzo	Almuerzo
Tarde	Trabajo	Trabajo	Trabajo	Trabajo	Trabajo

Este es un ejemplo sencillo de la organización de datos, en este caso, un horario básico
Tambien las tablas nos pueden ayudar a organizar el diseño de nuestra pagina web algo asi:

Mi Pagina Web
Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc	Contenido En este espacio podemos colocar el contenido general de nuestra pagina, en el caso de un blog el ultimo porst publicado etc	Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc

En este ejemplo vemos como podríamos reorganizar la estructura completa de una pagina de la forma que queramos, que en este caso esconderíamos los bordes y quedaría así:

Mi Pagina Web
Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc	Contenido En este espacio podemos colocar el contenido general de nuestra pagina, en el caso de un blog el ultimo porst publicado etc	Columna En este espacio podriamos organizar, columnas de texto, menus laterales, etc

Las dos tablas son exactamente iguales, la única diferencia es que la segunda no tiene bordes, los cuales se pueden modificar con el atributo border, que en este caso esta definido como 0, pero en el caso de que no definamos ningún atributo border, el valor por defecto del mismo seria 0, por lo que tampoco se mostraría.
También en el ejemplo anterior vemos el uso de el atributo colspan y rowspan, que permiten, que una celda ocupe el espacio de varias, cambiando la forma natural de una tabla:
Tabla sin rowspan y/o colspan:

Con Colspan:

Con Rowspan:

Curso de Javascript Tercera Clase

noreply@blogger.com (Giovanni) — Mon, 27 Sep 2010 21:00:00 +0000

Primera introducción al DOM
Document Object Model, se puede traducir, de forma no literal, pero apropiada, modelo en objetos para la representacion de documentos, y es una interfaz de programacion de aplicaciones, que proporciona un conjunto estandar para la representacion de documentos HTML y XML, una forma estandar de como se agrupan dichos objetos, y una interfas para acceder a ellos y modificarlos.
Ejemplo de uso del DOM:
Primero definamos lo que es la sintaxis de punto con la cual vamos a separar lo que se podría llamar la jerarquía de objetos:
document.images[0]
en el ejemplo anterior estamos accediendo a la primera imagen de nuestro documento HTML, ya con images, lo que tenemos es una array de todas las imagenes, una ves ahi podemos modificar sus valores:
document.images[0].src = "nueva.jpg";
en el ejemplo de aquí arriba acabamos de definir un valor desde javascript

CSS desde el DOM:
El estilo de algún elemento también de puede modificar desde javascript, aqui vemos un ejemplo
document.getElementById('capa').style.backgroundColor = "#000000";
Mas en detalle en el video
Archivos de Ejemplo:
clase3.html
Nuevo blog! Visita mi nuevo blog para aprender como ganar dinero facilemente en internet haz click aqui

Curso de Html parte 2

noreply@blogger.com (Giovanni) — Wed, 15 Sep 2010 23:11:00 +0000

Para ver el vídeo que acompaña a esta clase haz clic aquí o copia y pega esta dirección: http://giovaelppe.blip.tv/file/4140444/
Los Atributos:

En html y en cualquier lenguaje de marcado basado en xml o sgml, los atributos son informacion adicional que se agrega a las etiquetas, en algunos casos estos son necesarios para el funcionamiento de las etiquetas, en otros solo brindan detalles específicos, como por ejemplo la anchura, el largo o el color, un ejemplo de atributo seria el siguiente:

Lista de Caracteres especiales en HTML

< = <

> = >

Á = Á

É = É

Í = Í

Ó = Ó

Ú = Ú

&ampaacute; = á

é = é

í = í

ó = ó

ú = ú

Ä = Ä

Ë = Ë

Ï = Ï

Ö = Ö

Ü = Ü

ä = ä

ë = ë

ï = ï

ö = ö

ü = ü

Ã = Ã

Ñ = Ñ

Õ = Õ

ã = ã

ñ = ñ

õ = õ

Ø = Ø

ø = ø

Ð = Ð

ð = ð

ß = ß

¼ = ¼

½ = ½

¾ = ¾

® = ®

ª = ª

² = ²

³ = ³

¹ = ¹

¯ = ¯

µ = µ

¶ = ¶

· = ·

° = °

¸ = ¸

¿ = ¿

× = ×

÷ = ÷

 = “

 = ”

 = Œ

 = ‡

Etiquetas para texto

Primero un repaso a la clase pasada, para recordar las etiquetas que vimos, sabemos que <marquee> crea una marquesina de texto en movimiento, que <b> define un texto en negrirta, que <i> define un texto en itálica, ahora en esta clase veremos mas etiquetas para texto:

<strike>que sirve para mostrar texto con una linea en el medio atravesándolo así: ~~texto de ejemplo~~

Encabezados en html existen 6 tipos de encabezado, que se crean con las etiquetas de encabezado aquí listadas:

<tt> crea texto con el estilo de las maquinas de escribir, ejemplo:

texto con forma de teletipo

<big>sirve para agrandar el texto

<small>encoje el texto

<br /> crea un salto de linea

Archivos de ejemplo:

Clase2.html
Nuevo Blog! Visita mi nuevo blog para aprender como ganar dinero facilmente en internet, haz click aqui

Curso de Html parte 1

noreply@blogger.com (Giovanni) — Sun, 12 Sep 2010 16:04:00 +0000

Para ver el videotutorial que acompaña a este curso haz clic aquí o accede a esta dirección: http://giovaelppe.blip.tv/file/4112558/
¿Que es HTML?

Hyper Text Markup Language son sus iniciales, y es un lenguaje de marcado, que se ha convertido en el estándar en la creación de paginas web, su definición seria:

Lenguaje de marcado que se utiliza en la representación de textos en forma de hipertextos y así como para complementar el texto con imágenes y colores, por lo que hasta cierto punto puede incluso describir la presentación del documento, y contener scripts ( como javascript) con los cuales se puede modificar el comportamiento del navegador.

Breve Historia de HTML

La primera descripción de HTML fue un documento llamado html tags, publicado por Tim Benners Lee en 1991, pero no fue si no hasta 1993 cuando la IETF publico la primera proposición para la especificación de HTML, el boceto de HTML de banners lee y Da Conolly, en el cual se incluía una Definición del tipo de documento SGML para definir la gramática.

SGML

Standard Generalized Markup Languge, es un sistema para la organización y etiquetado de documentos, La organización internacional de Estándares, normalizo los estándares lo normalizo en 1996, el SGML sirve para especificar el etiquetado de documentos y no impone en ningún caso un conjunto de etiquetas en especial

XML

Son las iniciales en ingles de Extensible Markup Language, y al igual que SGML es un metalenguaje, que permite definir la gramática de un lenguaje ( al igual que HTML es definido por SGML) y fue desarrollado por World Wide Web Consorium como una simplificación de SGML, y no esta pensado para su uso solo en la web sino para el intercambio de informacion estructurada entre diferentes plataformas.

XHTML

Al igual que HTML esta basado en el SGML, XHTML es el lenguage de marcado pensado para sustituir a HTML como estándar en la creación de paginas web, y es básicamente la versión XML de HTML , su objetivo es avanzar en el proyecto de la W3C de crear una web semántica, donde la presentación y el contenido estén separados

DTD

Definición de tipo de documento (Document Type Definition) es la descripción de la estructura y sintaxis de un documento XML o SGML, su función es describir el formato de datos y así mantener una coherencia entre distintos documentos que usen la misma DTD.

Por tanto un DTD especifica las restricciones en la estructura y sintaxis del mismo, las etiquetas que pueden ser contenidas y el contenido de dichas etiquetas, la estructura ya que indica el orden en le que van las etiquetas dentro del documento, y el anidamiento que dice la forma en la que van etiquetas dentro de otras.

XML_Schema

Es un lenguaje de esquemas utilizado para describir las restricciones y estructura de los documentos XML de forma mas precisa que un DTD, mas alla incluso de las normas en la sintaxis de XML, llegando un muy alto nivel de abstracción en la percepción del tipo de documento

Archivos de Ejemplo:

ejemplo.xml

Variables y Arrays en javascript

noreply@blogger.com (Giovanni) — Fri, 10 Sep 2010 23:44:00 +0000

Continúo este curso de javascript, disculpándome con mis seguidores por la tardanza en este segundo capítulo, en el cual aprenderemos a definir variables y Arrays
Para ver el Videotutorial que acompaña este curso haz click aqui

Las Variables: Hablando de programación en términos generales una variable se puede definir como un contenedor de algún dato, un sitio donde poner información, ya sea Strings o números, a diferencia de otros lenguajes, en javascript no es necesario definir el tipo de dato que se va a guardar, por lo que para definir una variable hacemos lo siguiente:

Nombre de la variable, operador de asignación, valor y finalizamos con punto y coma

variable = 1;

Las variables representan una necesidad primaria para cualquier lenguaje de programación, pero tienen una defecto: solo pueden guardar un dato a la vez, y es bajo esta limitante en donde aparecen los arrays

Arrays: Nuevamente, en términos generales un Array, es una serie de datos ordenados en una fila, básicamente es un tipo de variable en la que se pueden guardar varios datos a la vez, javascript presenta una flexibilidad muy grande en este sentido ya que permite el almacenamiento de diferentes tipos de datos en un solo Array, lo que significa que se pueden combinar Strings con números en uno solo, esto a diferencia de otros lenguajes en los que los Arrays están formados por elementos de un mismo tipo; los elementos del Array se acceden a través de la asignación de un índice a cada elemento del mismo, esta asignación ocurre de forma automática comenzando desde cero "0".

Tipos de Arrays en Javascript:

Array Asiciativo:

Cuando asignamos nuestros propios índices, el Array se conoce como Array asociativo, y en este los índices son el nombre que les pongamos.

Array multidimensional:

Cuando uno de los elementos del array es otro array, lo que significa que un array tiene dentro de sí mismo otro array, se le conoce como array multidimencional

Archivos de Ejemplo:

En este caso he agregado un archivo de ejemplo para ayudarles mejor en esta clase

http://www.mediafire.com/?n48c1d2l324yt5m

Curso de JavaScript

noreply@blogger.com (Giovanni) — Tue, 01 Jun 2010 23:18:00 +0000

Para ver el video que acompaña este curso haz click aqui
Breve historia de JavaScript :

JavaScript es un lenguaje de programacion inventado por Brendan Eich de la empresa Netscape Comunications y fue desarrollado para potenciar el navegador de Netscape, Navigator y aparecio por primera vez en la vercion 2.0.

JavaScript es un lenguaje interpretado, lo que significa que no requiere de compilacion, en vez de eso, las lineas se van traduciendo una por una por un interprete, que en este caso es el navegador; tambien pertenese a los lenguajes de Script, que son los lenguajes que se pueden insertar dentro de documentos.

DOM(Document Objet Model):

El Document Object Model (una traducción al español no literal, pero apropiada, podría ser Modelo en Objetos para la representación de Documentos o también Modelo de Objetos del Documento ), abreviado DOM, es esencialmente una interfaz de programación de aplicaciones que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos.

Insertar el Código JavaScript:

Con la etiqueta script en el mismo documento:

<script type="text/javascript">

nuestro codigo javascript va a qui

</script>

En un documento externo:

<script type="text/javascript" src="la ruta de nuestro documento js">

</script>

Nuestro documento externo va a ser un archivo javascript (con extensión js)

Nuevos Tutoriales

noreply@blogger.com (Giovanni) — Sun, 30 May 2010 19:39:00 +0000

Quisiera pedir disculpas a todos mis suscriptores en Youtube pareciera que terminé con el mismo entusiasmo con el que comencé, pero no es así, nuevos proyectos en el trabajo y una intervención quirúrgica impidieron que continuara subiendo vídeos, pero no eliminaron la idea principal, que consistía en colaborar con la comunidad enseñando gratuitamente, ya se normalizaron mas las cosas en mi día a día lo que significa que viene una nueva oleada de videotutoriales.

Youtube tiene una limitación respecto a la duración de los vídeos, los mismos no pueden exceder los 10 minutos, razón por la cual en mi regreso he decidido subir los vídeos en blip.tv, ya que en esta pagina la duración de los vídeos es ilimitada, por lo que los próximos vídeos tendrán una duración entre 15 y 20 minutos o mas.

Gracias.

P.D.

Todavia estoy en la mudanza a blip.tv

http://giovaelpe.blip.tv

Las librerias

noreply@blogger.com (Giovanni) — Thu, 17 Dec 2009 15:00:00 +0000

Para ver el videotutorial que acompaña esta clase haz click aqui

Las libreras son porciones de código que podemos reutilizar en cualquier srcipt con una simple llamada, son algo así como lugares donde guardamos libros de código, para ser leídos en cualquier momento.
En php existen cuatro maneras de llamar a una librería: include(), require(), require_once(), include_once().
Include():
include("nuestro_archivo.php");
Require():
require("nuestro_archivo.php");

La diferencia con include es que este se puede utilizar en un condicional, en cambio require() carga el código sin importar si su línea se ejecuta o no, también si la función no puede localizar el archivo, include solo va a dar una alerta y continuara ejecutando el código que le sigue, en cambio require dará una alerta y no ejecutara ningún código.
require_once(), include_once():
Estos dos poseen la misma sintaxis que los dos anteriores, pero se diferencian de que solo cargaran el código una vez, lo cual es útil a la hora de evitar conflictos con reescritura de variables y funciones.

Bucles

noreply@blogger.com (Giovanni) — Thu, 10 Dec 2009 22:02:00 +0000

Para ver el video que acompaña esta clase haz click aqui

Los bucles son porciones de código que se ejecutan una y otra vez hasta que una condición deje de cumplirse, y son útiles para la realización automática de tareas repetitivas.
En php existen 3 tipos de bucle: el for, el while y el do.
El bucle While:
Es el más básico y su sintaxis es la siguiente:
$variable //que se va a usar en la condición
while(condición) {
sentencias a ejecutar ;
contador // este permite llegar a un punto en el cual la sentencia deje de ejecutarse
}
El bucle For:
Con una sintaxis más resumida que while:
for($variable;condicion;contador){
sentencia
}
El bucle do:
A diferencia de los demás bucles, do tiene la particularidad de que las condiciones se comprueban después de la sentencia, lo que produce que así la condición no se cumpla a la primera, la sentencia se ejecuta por lo menos una vez, y su sintaxis es la siguiente:

do{
sentencia
contador
}
while(condicion);

Sentencias De Control

noreply@blogger.com (Giovanni) — Fri, 04 Dec 2009 22:22:00 +0000

Para ver el video que acompaña esta clase sigue estos enlaces:

Parte uno

Parte dos

Las denominadas sentencias de control de flujo nos permiten decidir que parte del código se va a ejecutar, ya que normalmente el interprete php va ejecutando línea por línea el código.
Sentencia if
Es el condicional más sencillo y simplemente devuelve falso si la condición no se cumple, y su sintaxis es la siguiente: if(condición) sentencia que se va a ejecutar si la condición se cumple ;
si la sentencia dentro del condicional ocupa más de una línea se encierra entre llaves así:
if(condición) {
sentencia uno
sentencia dos
etc.
}
Sentencia else
Ejecuta el código en el caso de que la condición if no se cumpla, ya que este se coloca siempre después de if, y su sintaxis es la siguiente:
if (condición) {
sentencias
}
else sentencia
al igual que if, si las sentencias ocupan mas de una la línea se deben encerrar en llaves.
Sentencia Swicht
Esta permite seleccionar entre un grupo de opciones de código que se va a ejecutar, y su sintaxis es la siguiente:
swicht($variable){
case "valor 1":
código que queremos que se ejecute
break()
case "valor 2":
código que queremos que se ejecute
break()
default:
código que queremos que se ejecute
break()
}
En este ejemplo, la sentencia default es la que se ejecutaría si ninguna de las condiciones se cumple, y la sentencia break no es obligatoria pero ayuda a reducir la carga de trabajo del procesador.
Calculadora en php:
Parte html:
<form action="calculadora.php" method="post" >
<input type="text" name="uno" >
< select name="operador" >
<option> + </option>
<option> - </option>
<option> * </option>
<option> / </option>
</select>
<input type="text" name="dos">
</form>

Parte php:
<?php
if($_POST["operador"] == "+") echo $_POST["uno"] + $_POST["dos"];
if($_POST["operador"] == "-") echo $_POST["uno"] - $_POST["dos"];
if($_POST["operador"] == "*") echo $_POST["uno"] * $_POST["dos"];
if($_POST["operador"] == "/") echo $_POST["uno"] / $_POST["dos"];
?>

Operadores de comparacion:
== Igual
!= Distinto
<> Mayor que
<= Menor o igual >= Mayor o igual

El uso de Formularios

noreply@blogger.com (Giovanni) — Tue, 01 Dec 2009 23:37:00 +0000

Para ver los videos que acompañan esta clase sigue estos enlces:

Parte uno

Parte dos

Almacenar los datos del formulario en variables:
Como ya dije antes en el curso, este esta dedicado a personas que ya tienen un conocimiento aunque sea básico de html.
Dentro de las etiquetas <form> colocamos la etiqueta <input> , y para esta existe el atributo "name" el cual va ser igual al nombre que va a tener la variable en donde se va a almacenar el dato en nuestro script en php
Los métodos de envio:
Método get: Este método utiliza la url de la pagina para enviar los datos, por ejemplo si tenemos un formulario que envía un texto llamado dato, y nuestra pagina php es "ejemplo.php", al enviar los datos desde un documento html quedaría así:
http://localhost/curso/ejemplo.php?dato=hola
el texto remarcado en negrita es la información que se ha agregado al url para enviar los datos
Método post: Este método a diferencia de get deja la url de nuestro script intacta, ya que envía los datos a través de un estándar llamado STDIO

Una vez que conocemos los métodos de envió, necesitamos saber cómo recibir los datos y php tiene un conjunto de variables internas, y dos de ellas sirven para recibir los datos.

Variables internas para get y post:
Suponiendo que el atributo "name" sea igual a nombre:
$_GET["nombre"]; si utilizamos el método get
$_POST["nombre"]; si utilizamos el método post.

La longitud del método GET está limitada por el espacio libre en los buffers de entrada. Por lo que para mandar una gran cantidad de información al servidor ha de utilizarse el método POST.

Ejemplo:
<form method="post" action="ejemplo.php">
&ltinput type="text" name="ejemplo">
<input type="submit">
</form>

<?php
echo $_POST["ejemplo"];

?>

Curso de php III

noreply@blogger.com (Giovanni) — Sun, 29 Nov 2009 18:57:00 +0000

Para ver el video que acompaña esta clase haz click aqui

Funciones Útiles para elementos array
sort: Ordena de forma ascendente los elementos del array por ejemplo:
$numeros = array(2,1,3,4);
echo $numeros[0], $numeros[1], $numeros[1], $numeros[3];
esto nos mostraría en pantalla:
2 1 3 4
pero al aplicarle la función sort de esta forma:
sort($numeros);
echo $numeros[0], $numeros[1], $numeros[1], $numeros[3];
nos lo mostraria así:
1234
esta función también puede funcionar con valores de string, en este caso los ordenaría alfabéticamente de acuerdo a la primera letra.
count: cuenta la cantidad de elementos que tiene el array:
si tenemos un array:
$ejemplo = array("hola", "uno", "mundo");
al escribir:
echo count($ejemplo);
en la pantalla nos aparecería:
3
porque el array tiene 3 elementos
shuffle: ordena el array aleatoriamente, por ejemplo:
$ejemplo = array(1,2,3,4,5,6);
shuffle($ejemplo);
echo $ejemplo;
ahora cada vez que actualicemos la pagina nos va a aparecer un numero diferente emtre 1 y 6
Ejemplo practico de la clase:
Vamos a utilizar la función shuffle para mostrar un fondo diferente cada vez que se visite la página:
$fondos = array("img1.jpg", "img2.jpg", "img4.jpg");
shuffle($fondos);
echo "<body background=\"fondos[0]\">"

Curso de PHP II

noreply@blogger.com (Giovanni) — Sun, 29 Nov 2009 01:23:00 +0000

Para ver el video que acompaña a esta clase haz click aqui o dirigete a esta direccion

En la clase anterior veiamos que una variable es una lugar donde se guarda una dato, pero cuando tengamos la nesesidad de trabajar con muchos datos, vamos a nesesitar muchas variables, y manejar 50, 100, variables seria muy dificil, asi que, he aqui los arrays que son como variables pero para almacenar varios datos a la vez.

Los Arrays
En programación un vector(array en ingles) es una zona de almacenamiento continuo, que contiene una serie elementos, que son ordenados por índices, y estos índices sirven para referenciar la posición que tienen dentro del vector.
Por defecto en php el primer elemento va a ser 0 (cero), el segundo 1, el tercero 2... y así sucesivamente, por ejemplo:
$array = array(1,2,3,4,5,6);
para ubicar el elemento 3 seria:
$array[2];
esto lo podemos cambiar con los denominados array asociativos.
Arrays asociativos
Un Array asociativo es un array en el cual nosotros definimos los índices, en lugar de empezar desde cero podríamos por ejemplo colocar una letra, texto, o números ordenados en la forma que queramos.
Para hacerlo vamos a utilizar un operador de asociación que va a ser: => y con el vamos a señalar el elmento al que va a apuntar nuestro índice, ejemplo:
$array = array(
"uno" => 1,
"dos" => 2,
"tres" => 3);

ahora bien si quisiéramos llamar a el elmento 2 seria:
$array["dos"];
Arrays multidimencionales
Un array multidimensional es un array cuyos elementos son a su vez otros arrays asi:

$array = array(array(1,2), array(3,4));

ahora para utilizar por ejemplo el primer elemento del primer array seria asi:

$array[0][0];

Cada array dentro de un array es una dimension, y estos pueden tener las dimenciones que queramos, pero para evitar confuciones no se acostumbra a que estas sean mas de dos

Uso Practico de los Arrays

En la clase anterior veiamos como escribir dinamicamente la fecha actual, con el uso de la funcion date(), pero tambien vimos que php por defecto solo nos permite escribir los nombres de los meses y de los dias en ingles, con el uso de un array podemos ver como escribirlos al español

$meses = array("enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre");

$mes = date("m");

echo $meses[$mes - 1];

Material de Apoyo de la Primera Clase del curso de php

noreply@blogger.com (Giovanni) — Tue, 24 Nov 2009 22:36:00 +0000

Para ver el videotutorial que acompaña a este curso haz click aqui
QUÉ ES PHP?
PHP es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Es usado principalmente en interpretación del lado del servidor (server-side scripting). mas sobre php.
Por lo que el intérprete php se instala en un servidor, razón por la cual si creas un archivo.php y lo abres del navegador no te va a funcionar el script a menos que instales php.
QUE ES WAMP?
para descargar wamp haz click aqui
Para programar en php necesitamos un servidor que tenga instalado php,y a menos que desees pagar un servicio de hosting puro para aprender a programar necesitas wamp, este programa nos instala: el servidor web apache, el interprete php, El gestor de bases de datos MySql, y el programa phpMyadmin; todo esto nos permite probar nuestros trabajos en php a nivel local ya que nisiquiera vas a necesitar internet para poder correr tus scripts.
Tambien hay otras alternativas como: XAMP, AppServ etc. que ofrecen la misma funcionalidad que WAMP
POR QUÉ PHP?
¿Por qué php y no sólo html? ¿es decir no es mucho ya con sólo html?
Esto lo vamos a explicar tratando de crear un sitio como facebook, pero sólo en html: para ello cada uno de los perfiles tendría que ser una página nueva y teniendo en cuenta la cantidad de usuarios de facebook serían 300.000.000 de páginas en html que tendríamos que hacer en 68 idiomas diferentes, eso ya es demasiado no sólo para cualquier persona sino para cualquier empresa, ya que tendría que haber personas exclusivamente dedicadas a la actualización de los perfiles de forma manual, en cambio creando un script en php que permita entre otras cosas: conectar con una base de datos de usuarios, logearse, crear un perfil, subir fotos, etc. la tarea disminuye a tal punto que un solo programador podria realizarla.
IMPLEMENTACION PHP:
PHP se puede implementar de varias maneras entre las que destacan:
el metodo abreviado que simplemente consiste en los siguientes signos <? el codigo va en medio de los sigientes signos ?>
EL siguiente método parecido es el siguiente:
<?php el codigo va en medio de los sigientes signos ?>
y como pueden ver es igual pero se coloca php despues de los primeros signos.
El ultimo metodo es igual al implementacion de javascript:
<script language="php">
el codigo va en medio de las dos etiquetas
</script>
LA SENTENCIA echo:
echo sirve para imprimir texto en pantalla, por ejemplo un hola mundo seria:
<?php echo "hola, mundo"; ?>
echo tambien puede funcionar con variables con lo que pasamos a la definicion de variables.
LAS VARIABLES:
Una variable es, diciendolo muy resumidamente, un lugar donde se guarda un dato, el cual puede ser un valor numerico o de string, un valor numerico es, como su nombre lo dice, un numero, y un string son cadenas de caracteres, osea texto el cual dentro de php debe ir entre comillas.
Una variable en php se declara asi:
$variable, simbolo del dolar y un nombre cualquiera, segidamente el simbolo igual, que dentro de php va a ser llamado operador de asignacion, asi:
$variable = 1;
si se le asigna un valor numerico
$variable = "hola";
si se le asigna un valor string, y siempre todas las sentecias php terminan con punto y coma.
LA FUNCION DATE():
Date es una funcion interna que recupera valores de fecha y hora, y se llama de esta forma:
date("un identificador");
los identificadores le dicen a la funcion, que dato queremos recuperar, fecha, dia, hora, minutos, segundos, mes, año, etc... por ejemplo esto daria:
date("j, F, Y");
27, November, 2009,
ya que j es el identificador de fecha, F es el nombre del mes, Y es el año en 4 digitos; aqui les dejo una tabla con los identificadores:

a am o pm

A AM o PM

h Hora (de 1 a 12)

H Hora (de 0 a 23)

i Minutos

s Segundos

j Dia (sin los ceros)

d Dia (con los ceros)

D Abreviacion del dia

l Nombre del dia

z Numero de dia del año (desde 1 hasta 365)

m Numero del Mes

M Abreviacion del mes

F Nombre del mes

y Año (formato de 2 digitos)

Y Año (formato de 4 digitos)

Por lo menos por ahora esta funcion solo nos permite escribir los nombres de los meses y de los dias, solo en ingles, pre mas adelante les enseñare una tecnica muy sencilla de pasarlo al español.
Nos vemos en siguiente tutorial