jueves, 19 de abril de 2012

Descargar NetBeans 6.8


Descargate el IDE para implementar el lenguaje JAVA, esta herramienta nos ayudara a compilar nuestro codigo y probar los sistemas que hagamos.

Link:

El JDK, esto es primero que tienes que instalar: 


Luego el NetBeans:


Si tienes dudas, aquí te dejo un tutorial, pero es del 6.7 pero igual lo entenderas:

miércoles, 18 de abril de 2012

Frames en HTML


-->
Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras.

Ejemplo:

<HTML>
<HEAD>
<TITLE>Mi primera página con marcos</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
  <FRAME NAME="indice" SRC="indice.html">
  <FRAME NAME="principal" SRC="introduccion.html">
  <NOFRAMES>
    <P>Lo siento, pero sólo podrás ver esta página
    si tu navegador tiene la capacidad de visualizar
    marcos.</P>
  </NOFRAMES>
</FRAMESET>
</HTML>

Atributos del FRAMESET:

  • ROWS : Sirve para las filas del Frame
  • COLS : Sirve para las columnas del Frame

El número puede ser en: PORCENTAJE, NUMERO ABSOLUTO o VALOR RELATIVO.

EJEMPLO:
  • <FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)
  • <FRAMESET COLS="40, 600"> (la columna de la izquierda tendrá 40 pixels de ancho y la de la derecha 600)
  • <FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior y la inferior de una altura fija de 100 pixels, y la del medio obtendrá el espacio restante).

Atributos del FRAME:

  • SRC: Indica la dirección del documento HTML que ocupará el marco
  • NAME: Asigna un nombre a un marco para que después podamos acceder a él.
  • MARGINWIDTH: Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
  • MARGINHEIGHT: Igual al anterior pero con márgenes verticales.
  • SCROLLING: Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO.
  • NORESIZE: Si lo especificamos el usuario no podrá cambiar de tamaño el marco.
  • FRAMEBORDER: Al igual que su homónimo en la etiqueta , si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero.
Atributo Target:

Es el blanco que apunta nuestra dirección URL, ya sea en una nueva página, dentro de la misma, o en un FRAME. Entre ellos tenemos:

  • _Blank: Muestra la nueva página en una ventana nueva y sin nombre del navegador.
  • _Top: Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.
  • _Self: Muestra la nueva página en el marco donde está declarado el enlace.
  • _parent: Muestra la nueva página en el que contiene al marco donde se declara el enlace. (Marco principal)

11.1.- FRAMES FLOTANTES

Es posible situar en nuestras páginas Web una especie de frames o marcos "flotantes", queriendo decir con esto que son como frames pero que podemos situarlos en la posición que queramos dentro de nuestra página, situando mediante coordenadas su vértice superior izquierdo. Estas ventanas son configurables, pudiendo definir además de su posición su tamaño y otra serie de propiedades.

Para crear estos Frames flotantes, se usan las etiquetas <IFRAME>...</IFRAME>. Estas etiquetas deben situarse dentro del cuerpo de la página que contiene al marco, es decir, entre <BODY> y </BODY>.

Los principales atributos de la etiqueta <IFRAME> son:

  • NAME: análogo al atributo de <FRAME>, sirve para identificar unívocamente al marco flotante, con vistas a referenciar su contenido mediante un enlace por medio del parámetro TARGET.
  • WIDTH: Con este atributo definimos la anchura que va a tener el marco flotante, en píxeles.
  • HEIGHT: Con este atributo definimos la altura que va a tener el marco flotante, en píxeles.
  • ALIGN: Va a definir si el marco va a estar alineado a la izquieda en la ventana del navegador, centrado o a la derecha. (left / center / right)
  • FRAMEBORDER:, Este atributo hace que el marco aparezca sin borde o con borde (valor por defecto) respectivamente. (0,1)
  • VSPACE: Nos sirve para posicionar el marco, y define la distancia entre el borde superior del marco y el límite superior de la ventana del navegador.
  • HSPACE: Nos sirve para posicionar el marco, y define la distancia entre el borde izquierdo del marco y el límite izquierdo de la ventana del navegador.
  • MARGINHEIGHT: Nos define el espacio en píxeles que va a haber entre el borde superior del marco y su contenido.
  • MARGINWIDTH: Nos define el espacio en píxeles que va a haber entre el borde izquierdo del marco y su contenido.
  • SCROLLING: (yes / no / auto), nos define si el marco va a tener barra deslizadora siempre, nunca o sólo cuando sea necesario por exceder el contenido al tamaño del mismo. Su valor por defecto es auto.
  • SRC: : Indica la dirección del documento HTML que ocupará el marco
  • STYLE: Este atributo es una aplicación directa de las Hojas de Estilo en Cascada (CSS), y nos permiten definir la posición y tamaño del marco en la ventana del navegador.
  • CLASS: "clase", Análogo al anterior, pero ahora refiriendo el estilo del marco flotante (posición y tamaño) de acuerdo con una clase de estilos definida en la sección de la página que contiene al marco o en un archivo externo de extensión ".css"
  • ID: "identificador", en todo semejante al anterior, pero con la diferencia que ahora el nombre de identificador asignado debe ser único para cada marco en concreto. También posibilita cambiar dinámicamente las propiedades del marco usando un lenguaje de Script, como JavaScript.

Ejemplo de Marco Flotante:

<html>
<head>
<title>Ejemplo de MARCO FLOTANTE</title>
</head>
<body>
<p align="center">
<iframe name="page" src="inicio.htm" width="504" height="335" border="0" frameborder="0" style="color: #000000; font-family: Verdana; font-size: 10px; border-style: solid; border-width: 1px; background-color: #FFFFFF"
SCROLLING=yes>
</iframe></p>
</body>
</html>

 Podemos ver un ejemplo de Frame Flotante:


Formularios en HTML


-->
Los formularios son elementos de HTML que permiten recoger información del usuario. Disponemos de una gran variedad de elementos de formulario que nos permiten interactuar de forma rica y eficiente con los usuarios. De todas maneras, cabe destacar que los formularios no procesan la información introducida por los usuarios, sino que debemos procesarla nosotros por otros medios (CGI, JSP, Servlets, etc.).

Un ejemplo de cómo crear un formulario es el siguiente:

<FORM ACTION=“url proceso” METHOD=“POST”>
... Elementos
..
</FORM>

La etiqueta FORM nos proporciona algunos atributos:

  • ACTION: este atributo nos permite especificar a qué URL se enviarán los datos que el usuario haya introducido en el formulario. Podemos especificar como URL una dirección de correo electrónico, de la forma: mailto:direccion@correo.electron podemos especificar una URL de http: http://www.uoc.edu/proceso.cgi
  • METHOD: el método especifica de qué forma se envían los datos. Disponemos de dos opciones: GET y POST.
  • ENCTYPE: especifica el tipo de codificación usada. Generalmente sólo se usa para especificar en caso de enviar el resultado del formulario por correo para cambiar la codificación a text/plain.
  • NAME: sirve para asignar un nombre al formulario, necesario pasa usarlo posteriormente desde “Javascript”.

10.1.- Elementos del formulario

HTML proporciona una gran variedad de elementos de entrada para los formularios. Estos elementos permiten desde introducir texto hasta enviar ficheros.

•   Elemento <INPUT>

El elemento INPUT es quizás el más conocido y usado de los elementos de los formularios. Actúa como un campo de entrada, disponiendo de diversos tipos de elementos  INPUT en función del valor del atributo TYPE:

TYPE=RADIO: permite escoger entre múltiples opciones, pero sólo una de las del mismo nombre.
TYPE=RESET: pone en blanco todo el formulario.
TYPE=TEXT: permite la entrada de una línea de texto.
TYPE=PASSWORD: permite la entrada de una línea de texto mostrando en lugar de éste caracteres como “*”, usado generalmente para entrada de contraseñas.
TYPE=CHECKBOX: permite escoger una o varias opciones múltiples.
TYPE=SUBMIT: acepta los datos entrados en el formulario y ejecuta la acción especificada.
TYPE=HIDDEN: campo de texto no visible para el usuario. Usado para conservar valores.

El elemento INPUT dispone, además, de otros atributos opcionales:

NAME: da nombre al campo. Es importante ponerlo para después poder procesarlo desde nuestros programas.
VALUE: otorga un valor inicial al campo.
SIZE: tamaño en el caso de los campos TEXT y PASSWORD.
MAXLENGTH: longitud máxima aceptada de la entrada del usuario (campos TEXT y PASSWORD).
CHECKED: en caso de RADIO o CHECKBOX si ésta está mar- cada o no por defecto.

•   Elemento SELECT

El elemento SELECT nos permite seleccionar una o varias de las opciones presentadas.

Un ejemplo de elemento SELECT sería:

<SELECT name=“destino”>
<option> África
<option> Antártida
<option> América
<option> Asia
<option> Europa
<option> Oceanía
</SELECT>

Los atributos que ofrece el elemento SELECT son:

SIZE: el tamaño en pantalla del elemento SELECT. Si es uno, sólo nos mostrará una opción y el elemento SELECT actuará como una lista desplegable. Si es mayor que uno, veremos una lista de selección.
MULTIPLE: si lo indicamos, podremos elegir más de una opción.

El elemento OPTION dispone de dos atributos:

VALUE: el valor que se asignará a la variable al seleccionar esta opción.
SELECTED: qué opción quedará seleccionada por defecto.


• Elemento TEXTAREA

El elemento TEXTAREA nos permite recoger del usuario elementos de texto de múltiples líneas. El formato es el siguiente:

<TEXTAREA name=“comentarios” cols=30 rows=6> Introduzca comentarios sobre la página
</TEXTAREA>

Cabe destacar que el contenido encerrado entre <TEXTAREA> y </TEXTAREA> será considerado el valor inicial del campo. Los atributos que nos ofrece TEXTAREA son:

ROWS: filas que ocupará la caja de texto.
COLS: columnas que ocupará la caja de texto.

 
CODIGO DE FORMULARIOS:


<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<H1>Prueba de formulario</H1>
<FORM METHOD=GET>
Nombre:<INPUT TYPE=TEXT NAME=NOMBRE SIZE=10><BR>
Apellidos:<INPUT TYPE=TEXT NAME=APELL SIZE=30><BR>
Clave: <INPUT TYPE=PASSWORD NAME=PASS SIZE=8><BR>
<HR>
Sexo: <BR>
<INPUT TYPE=”RADIO” NAME=“SEXO”>Hombre
<INPUT TYPE=”RADIO” NAME=“SEXO”>Mujer
<BR> Aficiones:<BR>
<INPUT TYPE=”CHECKBOX” NAME=“DEPORTES”>Deportes
<INPUT TYPE=”CHECKBOX” NAME=“MUSICA”>Música
<INPUT TYPE=”CHECKBOX” NAME=“LECTURA”>Lectura
<BR> Procedencia:<BR>
<SELECT name=“PROCEDENCIA”>
<option> África
<option> Antártida
<option> América
<option> Asia
<option> Europa
<option> Oceanía
</SELECT>
<HR>
Dónde le gustaría viajar:<BR>
<SELECT name=“destino” MULTIPLE SIZE=4>
<option> África
<option> Antártida
<option> América
<option> Asia
<option> Europa
<option> Oceanía
</SELECT>
<BR> Opine:
<BR>
<TEXTAREA COLS=25 ROWS=10 NAME=“OPINA”>
¡Escriba aquí su opinión!
</TEXTAREA>
<HR>
<INPUT TYPE=SUBMIT> <INPUT TYPE=RESET>
</FORM>
</BODY>
</HTML>


Podemos ver a continuación un ejemplo de este formulario básico construido con los elementos presentados anteriormente.


Tablas en HTML


-->
Disponemos en HTML de un grupo de etiquetas que nos permite introducir texto en forma de tablas. Las etiquetas para ello son:

  • TABLE: marca el inicio y final de la tabla.
  • TR: marca el inicio y final de una fila.
  • TH: marca el inicio y final de una celda de cabecera.
  • TD: marca el inicio y final de una celda.
  • CAPTION: permite insertar títulos en las tablas.

Una tabla simple queda conformada por el siguiente código:

<TABLE> 
<TR><TH>Cabecera 1</TH>...<TH>Cabecera n</TH></TR>
 <TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
 ...
<TR><TD>Celda 1.1</TD>...<TD>Celda n</TD></TR>
<CAPTION>Título</CAPTION>
</TABLE>

Como podemos ver, la tabla queda envuelta dentro de una etiqueta TABLE. Para cada fila de la tabla debemos envolver esta fila entre las etiquetas  <TR></TR>. En cada fila tenemos dos opciones para mostrar las celdas: podemos envolverlas entre etiquetas o entre etiquetas . La diferencia entre ellas es que la primera selecciona un tipo de letra negrilla y centra la columna.

9.1 Etiqueta  TABLE

La etiqueta TABLE tiene algunos atributos que nos permiten especificar más concretamente el formato que queremos darle a la tabla.

  • BORDER: nos indica el tamaño de los bordes de la celda.
  • CELLSPACING: nos indica el tamaño en puntos del espacio entre celdas.
  • CELLPADDING: nos indica el tamaño en puntos entre el contenido de una celda y los bordes.
  • WIDTH: especifica el ancho de la tabla. Puede estar tanto en puntos como con relación al porcentaje de la anchura total disponible. Por ejemplo, 100% indica toda la ventana del navegador.
  • ALIGN: alinea la tabla respecto a la página, a la izquierda (LEFT), a la derecha (RIGHT) o al centro (CENTER).
  • BGCOLOR: especifica el color de fondo de la tabla.

9.2.- Etiqueta TR

La etiqueta TR nos permite introducir las diferentes filas que componen una tabla. TR presenta los siguientes atributos:

  • ALIGN: alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
  • VALIGN: alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
  • BGCOLOR: especifica el color de fondo de la fila.



9.3.- Etiquetas TD y TH

Las etiquetas TD y TH nos permite introducir las celdas que formarán la fila en la que se encuentran. La diferencia principal entre ellas estriba en que TH centra horizontalmente el contenido de la celda y lo muestra en negrillas. Estas dos etiquetas pueden presentar los siguientes atributos:

  • ALIGN: alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
  • VALIGN: alinea el contenido de las celdas de la fila verticalmente: arriba (TOP), abajo (BOTTOM) o centro (MIDDLE).
  • BGCOLOR: especifica el color de fondo de la celda.
  • WIDTH: especifica el ancho de la celda, en puntos o porcentualmente. En este último caso hay que tener en cuenta que se refiere al ancho de la tabla, no de la ventana.
  • NOWRAP: impide que en el interior de las celdas se divida la línea por espacios.
  • COLSPAN: específica cuántas celdas, incluyendo esta, se unirán hacia la derecha para formar una sola. Si COLSPAN es cero, todas las celdas se unirán a la derecha.
  • ROWSPAN: especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.

9.4.- Etiqueta CAPTION

Nos permite añadir una leyenda o título centrado sobre o debajo de una tabla. Disponemos de un solo atributo:

ALIGN: nos indica dónde se situará el CAPTION respecto a la tabla, siendo los posibles valores: TOP, que la sitúa sobre la tabla y BOTTOM, que la sitúa debajo de ella.

CODIGO DE TABLAS:


<HTML>
<HEAD>
<TITLE>Título del documento</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD>
<TD>2,2
<TD>2,3
</TR>
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
<CAPTION ALIGN=bottom>Tabla Simple</CAPTION>
</TABLE>
<HR> <!-- Regla horizontal -->
<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=#0000FF>
<TR><TD>
<TABLE BORDER=0 CELLSPACING=1 CELLPADDING=2WIDTH=400 BGCOLOR=#FFFFFF>
<TR>
<TH><IMG SRC="logo.gif"></TH>
<TH>Abril</TH>
<TH>Mayo</TH>
<TH>Junio</TH>
<TH>Julio</TH>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Vehículos</TD>
<TD>22</TD>
<TD>23</TD>.
<TD BGCOLOR=#FFa0a0>3</TD>
<TD>29</TD>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Visitantes</TD>
<TD>1234</TD>
<TD>1537</TD>
<TD BGCOLOR=#FFa0a0>7</TD>
<TD>1930</TD>
</TR>
<TR>
<TD BGCOLOR=#A0A0A0>Ingresos</TD>
<TD>11000</TD>
<TD>13000</TD>
<TD BGCOLOR=#FF4040>-500</TD>
<TD BGCOLOR=#a0a0FF>60930</TD>
</TR>
</TABLE>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Podemos ver en la imagen dos tablas de HTML: