HTML y CSS desde cero - Atributos y comentarios

Que tal gente, en este segundo tutorial vamos a ver lo que son los atributos y como hacer comentarios en nuestro código.

Los atributos son propiedades que le ponemos a las etiquetas html, como por ejemplo:

<a href="http://ww.google.com">Ir a google</a>

Si se fijan arriba,  tenemos una etiqueta <a> </a>, y esta etiqueta tiene un atributo llamado href de color rojo, a este atributo le pusimos un valor que es lo que esta en color azul "http://ww.google.com".

Los atributos se ponen dentro de la etiqueta de apertura (inicio), primero se pone el nombre del atributo (href), después el signo igual (=) y por ultimo el valor entre comillas ("http://ww.google.com").

Si analizamos la linea anterior:
<a href="http://ww.google.com">Ir a google</a>
Esta etiqueta <a> </a> es para poner links en nuestra página, el atributo href  es para indicar alguna página web a donde vamos a dirigirnos, en esta caso "http://ww.google.com" y entre las etiquetas debemos poner el texto que querremos que se muestre en la página web, si nosotros hacemos click en ese texto que ponemos entre las etiquetas, nos dirigiremos a la pagina definida en el atributo href.

Esta etiqueta si la ejecutamos en el navegador, tendriamos algo como lo siguiente:
Ir a google
Vieron, solo se ve el texto que pusimos entre las etiquetas, pero si hacemos click nos llevara a la pagina que definimos con el atributo href

Existen muchos atributos, el cual los iremos viendo a medida que avanza el curso, en cada etiqueta podemos usar atributos diferentes, por ejemplo en la etiqueta <img></img> podemos usar el atributo src para indicar alguna ruta, pero ya veremos mas a fondo como usar estas etiquetas y estos atributos.

En pocas palabras, los atributos nos sirven para dar propiedades a las etiquetas.


Los comentarios sirven explicar partes de códigos que nosotros ponemos en nuestras paginas, solo son para nosotros los desarolladores y no para el usuario, el navegador no tendrá en cuenta los comentarios que nosotros ponemos al ejecutar la pagina, solo los ignora y no los muestra en la pagina, es decir no son códigos que el navegador ejecuta, simplemente son para explicar y entender mejor el código que nosotros escribimos. Bueno espero lo entiendan jaja.

Un comentario se vería de la siguiente manera:
<!-- Esto es un comentario y no se ejecutara -->

Para hacer un comentario siempre debes escribir estas 2 cosas:
<!-- inicio
--> cierre
y entre medio de ellas el comentario que quieras. Un comentario completo se vería de la siguiente manera:
<!-- Acá escribirás tu comentario -->

También puedes escribir comentarios de varias lineas, pero siempre entre <!-- y -->. Un comentario de varias lineas se vería de la siguiente manera:
<!-- Esto es un comentario
de varias lineas
un saludo-->

Puedes poner tantos comentarios como quieras, en cualquier parte de tu código html.

Bueno gente, nos vemos en el siguiente tutorial, un saludo y feliz navidad a todos
Recuerden cualquier duda comentar, estoy aquí.

Java Swing básico - Área de texto con barras de desplazamientos (JTextArea y JScrollPane)

Bienvenidos una vez mas al curso, en este tutorial veremos como hacer un área de texto. Un área de texto o JTextArea en java, es un elemento que nos permite escribir múltiples lineas, tantas como quera el usuario, se ve de la siguiente manera:

El programa que haremos, tendrá un área de texto en toda nuestro programa. También agregaremos un JScrollPane que son las barras de desplazamiento vertical y horizontal:

import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;


public class Ventana extends JFrame{

 public Ventana(){
  setTitle("JTextArea tutorial");//Titulo de la ventana
  setBounds(200,200,400,350);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  
  JTextArea textArea = new JTextArea();//Creamos el JTextArea
  JScrollPane scroll = new JScrollPane(textArea);//Creamos el JTextArea y le pasamos como parametro el textArea
  scroll.setBounds(0,0,395,323);//Posicionamos el JScrollPane "scroll"
  add(scroll);//Agregamos el scroll a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}

Para usar el JTextArea (Area de texto) y el JScrollPane (Barras de desplazamiento) debemos importar lo siguiente, aparte de lo que ya sabemos:

import javax.swing.JScrollPane;
import javax.swing.JTextArea;

Para crear un JTextArea lo hacemos de la siguiente manera:

JTextArea textArea = new JTextArea();//Creamos el JTextArea

Si se fijan cuando creamos el JTextArea, no pusimos ninguna propiedad, como setBounds ni nada de eso.

Después debemos crear un JScrollPane y pasarle como parámetro el JTextArea que queremos que contenga las barras de desplazamiento, en este caso le pasamos textArea, que así es como se llama.
También le estamos poniendo una posición y tamaño y por ultimo lo agregamos a la ventana.

     JScrollPane scroll = new JScrollPane(textArea);//Creamos el JTextArea y le pasamos como parametro el textArea
     scroll.setBounds(0,0,395,323);//Posicionamos el JScrollPane "scroll"
     add(scroll);//Agregamos el scroll a la ventana

Una vez hecho esto, nos quedara de la siguiente manera:

Bueno gente, espero que el tutorial haya sido de su agrado, nos vemos en el siguiente.
Si les quedo alguna duda, no duden en comentar.

Java Swing básico - Campos de textos (JTextField)

Bienvenidos a otro tutorial mas de Java Swing, en el que veremos como usar JTextField, este nuevo control visual nos permite poner un campo de texto, en el que el usuario podrá ingresar datos. Nosotros podemos obtener esos datos y hacer lo que queramos con ellos:

En este tutorial construiremos un pequeño programa que le pida el nombre al usuario y cuando pulse un botón, se obtendrán los valores del JTextField, osea el nombre del usuario y mostraremos ese nombre en un JLabel.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;


public class Ventana extends JFrame implements ActionListener{
 private JLabel labelNombre;
 private JTextField jtf;
 private JButton boton;
 public Ventana(){
  setTitle("Ventana java");//Titulo de la ventana
  setBounds(200,200,250,180);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  
  labelNombre = new JLabel();//Creamos el JLabel y no le pasamos nada como parametro
  labelNombre.setBounds(10,10,200,20);//Le ponemos una posicion
  add(labelNombre);//Lo agregamos a la ventana
  
  jtf = new JTextField();//Creamos un JTextField y no le pasamos nada como parametro
  jtf.setBounds(10,50,200,20);//Le ponemos una posicion
  add(jtf);//Lo agregamos a la ventana
  
  boton = new JButton("Listo");//Creamos un boton
  boton.setBounds(100,90,100,30);//Le ponemos una posicion
  boton.addActionListener(this);//Agregamos este boton al Listener
  add(boton);//Lo agregamos a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }

 public void actionPerformed(ActionEvent e) {
  String valorTextField = jtf.getText();//Obtenemos el valor del JTextField "jtf"
  labelNombre.setText(valorTextField);//Cambiamos el valor del JLabel "labelNombre"
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}

Para usar JTextField tenemos que importar, aparte de lo que ya sabemos:

import javax.swing.JTextField;

Creamos 3 variables de clases:

        private JLabel labelNombre;
        private JTextField jtf;
        private JButton boton;

Para crear JTextField lo hacemos de la siguiente manera:

                jtf = new JTextField();//Creamos un JTextField y no le pasamos nada como parametro
  jtf.setBounds(10,50,200,20);//Le ponemos una posicion
  add(jtf);//Lo agregamos a la ventana

Cuando pulsemos sobre el botón, se ejecutara el método actionPerformed(), el cual sobrescribiremos:

public void actionPerformed(ActionEvent e) {
  String valorTextField = jtf.getText();//Obtenemos el valor del JTextField "jtf"
  labelNombre.setText(valorTextField);//Cambiamos el valor del JLabel "labelNombre"
 }

Si se fijan arriba, primero obtenemos el valor del JTextField con el método getText() y luego cambiamos el valor del JLabel con el método setText()

Si ejecutamos el siguiente código obtendremos algo como esto:

Algunos métodos útiles:

getText(); Con esto podemos obtener todo lo que haya escrito en el campo.

setText(); Con esto podemos cambiar el valor del mismo.

Hasta aquí el tutorial de hoy, los vemos en el próximo.
Recuerden comentar cualquier duda.

HTML y CSS desde cero - Sintaxis y etiquetas basicas

Bienvenidos al primer tutorial de HTML y CSS en el cual veremos la sintaxis de HTML y las etiquetas mas básicas del mismo.


Para empezar a escribir código, solo necesitamos un editor de texto cualquiera, recomiendo Sublime Text 3, y un navegador de internet, que creo que todos tenemos, el que yo usare sera Google chrome, teniendo eso es suficiente, ahora para empezar a escribir el código, tenemos que crear un archivo de texto con cualquier nombre, puede ser "Mi primer pagina web" y al final colocarle la extensión html, quedaría algo así:

Ahora procederemos a abrir este archivo, pero con editor de texto, como los antes mencionados.

Es aquí en donde empezamos a escribir nuestro código html.

Html es un lenguaje que usa etiquetas. Una etiqueta se vería de la siguiente manera:
<html> </html>

En html toda etiqueta que se abre debe cerrarse,
Para abrir una etiqueta lo hacemos así:
<html>
Y para cerrarla:
</html>

 Dentro de una etiqueta podemos contener mas etiquetas, un ejemplo:
<html>
          <body>
          </body>
</html>
Si se fijan bien, vemos que la etiqueta html contiene otra etiqueta dentro, llamada body.
Siempre hay que seguir estas reglas, si queremos contener una o varias etiquetas dentro de otra, debemos colocarlas entre las etiquetas de inicio y de cierre de la etiqueta contenedora, y así podemos contener tantas etiquetas como queramos dentro de otras, e incluso podemos contener etiquetas dentro de otras etiquetas contenidas por otras y así tantas como queramos:
Ejemplo:
Así seria de la manera correcta:
<html>
          <body>
                    <h1>
                    </h1>
          </body>
</html>
De manera incorrecta:
<html>
          <body>
                    <h1>
                    </h1>
</html>
          </body>


Lo primero que debemos hacer y siempre lo harás, es definir el tipo de documento:


Con esto estamos indicando que usaremos html en su versión 5, ultima versión de html.

Ahora debemos poner las siguientes etiquetas que son las mas basicas y siempre pondras:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

La primera etiqueta que pusimos: <!DOCTYPE html> es para definir el tipo de documento, osea le estamos diciendo que usaremos la versión 5(Última versión) de html.

Las etiquetas <html> </html> son las que contendrán todo el contenido de la web, es decir, entre estas etiquetas van todas las demás.

Las etiquetas <head> </head> o cabecera, contiene información de primera, es decir es lo primero que se carga al cargar el sitio web como puede ser codificación de caracteres que usaremos, enlazar scripts y estilos, también podemos colocar un titulo en la pestaña. Osea que no necesariamente es lo que se va a ver en pantalla, si no que son valores que configuramos para que todo valla bien.

Las etiquetas <body> </body> o cuerpo, contendrá todo el contenido visual de la web, es decir, es lo que va a ver el que entra a tu pagina.

Las etiquetas <title> </title> o titulo, me permiten poner un titulo, pero que solo sera visible en las pestañas del navegador.

Bueno gente, eso es todo por este tutorial, los espero en el siguiente, un saludo.
Cualquier duda comentar 

HTML y CSS desde cero - Introduccion

Que tal gente, hoy me decidí por empezar un nuevo curso, el cual va dirigido para todas aquellas personas que quieran aprender Html y CSS desde cero, el curso sera rápido y sencillo de entender sin tantas complicaciones.

Hmtl por si no lo sabían, cosa que lo dudo ¿Por algo están acá no? jaja, es un lenguaje de marcado, o mas sencillamente, es un lenguaje en donde damos estructura a un sitio web, piensen como que es el esqueleto de la web. Html no es nada si no lo acompañamos con CSS, el cual es un lenguaje de diseño en el cual definimos los estilos de nuestra pagina web, osea HTML seria el esqueleto y CSS seria la parte elegante es decir la piel.

Cuando nosotros cargamos una web, estamos cargando el documento html ,que es interpretado por el navegador, y es lo que nos mostrara el mismo en pantalla, junto con los estilos CSS y todo eso.

En fin espero sigas este curso y te diviertas, un saludo.

Java Swing básico - Múltiples botones y manejar eventos(JButton)

Que tal gente, en este tutorial vamos a ver como manejar eventos para varios botones.

Si se acuerdan en el tutorial anterior, habíamos agregado un boton, el cual al apretarlo cambiaba el valor de JLabel, que pasa si quisiéramos agregar otro boton que haga algo diferente, para hacerlo es demasiado sencillo, solo deberemos agregar unos condicionales if  a nuestro método que maneja los eventos (actionPerformed).

El programa tendrá 3 botones, si damos click en alguno de ellos, se cambiara el valor de un JLabel, dicho valor, dirá cual botón fue el que se pulso.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;


public class Ventana extends JFrame implements ActionListener{
 private JLabel label;
 private JButton boton1, boton2, boton3;
 
 public Ventana(){
  setTitle("JButton tutorial");//Titulo de la ventana
  setBounds(200,200,400,150);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara completamente
  
  label = new JLabel("Ningun boton se ha pulsado");//Creamos el label y le pasamos el nombre como parametro
  label.setBounds(10,10,200,20);//Lo posicionamos: X, Y, Width, Height
  add(label);//Agregamos el label a la ventana
  
  boton1 = new JButton("Boton 1");//Creamos el boton1
  boton1.setBounds(10,50,100,30);//Los posicionamos y le damos tamaño
  boton1.addActionListener(this);//Lo agregamos al Listener
  add(boton1);//Lo agregamos a la ventana
  
  boton2 = new JButton("Boton 2");//Creamos el boton2
  boton2.setBounds(130,50,100,30);//Los posicionamos y le damos tamaño
  boton2.addActionListener(this);//Lo agregamos al Listener
  add(boton2);//Lo agregamos a la ventana
  
  boton3 = new JButton("Boton 3");//Creamos el boton3
  boton3.setBounds(250,50,100,30);//Los posicionamos y le damos tamaño
  boton3.addActionListener(this);//Lo agregamos al Listener
  add(boton3);//Lo agregamos a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 
 public void actionPerformed(ActionEvent e){
  if(e.getSource() == boton1){//Comprobamos si se pulso el boton1
   label.setText("Se ha pulsado el boton 1");//Cambiamos el valor del JLabel "label"
  }
  else if(e.getSource() == boton2){//Comprobamos si se pulso el boton2
   label.setText("Se ha pulsado el boton 2");//Cambiamos el valor del JLabel "label"
  }
  else{//Si no se pulso ninguno de los anteriores,entonces fue el 3
   label.setText("Se ha pulsado el boton 3");//Cambiamos el valor del JLabel "label"
  }
 }
 
 public static void main(String[] args) {
  Ventana v = new Ventana();
 }
}

Recuerden importar todo lo que usaremos.

Crearemos 4 variables de clases, 3 JButton y un JLabel:

        private JLabel label;
 private JButton boton1, boton2, boton3;

Tal como hicimos en el tutorial anterior, creamos el botón, lo posicionamos, le damos tamaño, lo agregamos al Listener y lo agregamos, como queremos agregar 3 botones, pues haremos este proceso 3 veces:

                boton1 = new JButton("Boton 1");//Creamos el boton1
  boton1.setBounds(10,50,100,30);//Los posicionamos y le damos tamaño
  boton1.addActionListener(this);//Lo agregamos al Listener
  add(boton1);//Lo agregamos a la ventana
  
  boton2 = new JButton("Boton 2");//Creamos el boton2
  boton2.setBounds(130,50,100,30);//Los posicionamos y le damos tamaño
  boton2.addActionListener(this);//Lo agregamos al Listener
  add(boton2);//Lo agregamos a la ventana
  
  boton3 = new JButton("Boton 3");//Creamos el boton3
  boton3.setBounds(250,50,100,30);//Los posicionamos y le damos tamaño
  boton3.addActionListener(this);//Lo agregamos al Listener
  add(boton3);//Lo agregamos a la ventana

Ahora llega la parte que queríamos. Para manejar varios botones deberemos modificar el método actionPerformed, deberemos agregar un condicional para cada caso:
if(e.getSource == boton1){/*Haremos esto*/}
e.getSource() obtiene el botón, y nosotros estamos comprobando, si el botón pulsado es el boton1 pues haremos algo:

public void actionPerformed(ActionEvent e){
  if(e.getSource() == boton1){//Comprobamos si se pulso el boton1
   label.setText("Se ha pulsado el boton 1");//Cambiamos el valor del JLabel "label"
  }
  else if(e.getSource() == boton2){//Comprobamos si se pulso el boton2
   label.setText("Se ha pulsado el boton 2");//Cambiamos el valor del JLabel "label"
  }
  else{//Si no se pulso ninguno de los anteriores,entonces fue el 3
   label.setText("Se ha pulsado el boton 3");//Cambiamos el valor del JLabel "label"
  }
 }

Si ejecutamos el código completo, deberíamos ver algo como esto:

Bueno gente, eso fue todo, los espero en el siguiente tutorial.

Cualquier duda comentar.

Java Swing básico - Botones y eventos (JButton)

Bienvenidos una vez mas, en este tutorial vamos a ver como agregar botones a nuestros programas, y que reaccionen cuando pulsemos sobre ellos, este elemento es uno de los mas utilizados.

Un botón visualmente se vería de la siguiente manera:

Lo que haremos sera, que al pulsar sobre un botón, se cambie el valor de un JLabel, es decir el texto del mismo.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;


public class Ventana extends JFrame implements ActionListener{
 private JButton boton;
 private JLabel label;
 
 public Ventana(){
  setTitle("JButton tutorial");//Titulo de la ventana
  setBounds(200,200,250,150);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  
  label = new JLabel("El boton no se ha pulsado");//Creamos un JLabel
  label.setBounds(10,10,200,20);//Posicion del JLAbel: X, Y, Width, Height
  add(label);//Agregamos el JLabel a la ventana
  
  boton = new JButton("Cambiar texto");//Creamos el JButton
  boton.setBounds(10,50,130,30);//Posicion del JButton: X, Y, Width, Height
  boton.addActionListener(this);//Agregamos el boton al Listener para que reaccione a una accion, y le pasamos el Listener
  add(boton);//Agregamos el JButton a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 

 public void actionPerformed(ActionEvent e) {
  label.setText("El boton se ha pulsado");//Cambiamos el valor del JLabel "label"
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}

Como siempre, antes que nada debemos importar lo que vamos a usar, en este tutorial usaremos, ademas de lo que ya hemos visto los JButton y los eventos para los mismos.

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;

Debemos hacer que la clase implemente de ActionListener, el cual nos provee un método (actionPerformed), que es el método encargado de manejar los eventos.

public class Ventana extends JFrame implements ActionListener{

Luego de esto debemos crear 2 variables de clase sin inicializar, una de tipo JButton y otra JLabel.

private JButton boton;
private JLabel label;

No explico lo demás, ya que lo explique en tutoriales anteriores, y doy por hecho que ya lo sabes hacer.
Después en el constructor inicializaremos las variables previamente creadas.
Al igual que en tutoriales anteriores:
Primero creábamos un JLabel, le colocamos una posición y un tamaño, y lo agregamos a la ventana, bueno acá es lo mismo, solo que antes de agregarlo, tenemos que hacer un paso extra, tenemos que añadir el botón al Listener para que el mismo realice una acción que nosotros mismos creamos.

  boton = new JButton("Cambiar texto");//Creamos el JButton
  boton.setBounds(10,50,130,30);//Posicion del JButton: X, Y, Width, Height
  boton.addActionListener(this);//Agregamos el boton al Listener para que reaccione a una accion, y le pasamos el Listener
  add(boton);//Agregamos el JButton a la ventana

Si se acuerdan, habíamos implementado la interface ActionListener, que nos proveía un método el cual se llama actionPerformed. Este método se llamara cada vez que pulsemos sobre un botón que se haya agregado el Listener, Obligatoriamente deberemos escribir este método (actionPerformed):
Si miramos el método, veremos que adentro de los bloques del mismo, escribimos lo que hará el botón una vez lo pulsemos, en este caso, le cambiamos el valor al JLabel:

public void actionPerformed(ActionEvent e) {
  label.setText("El boton se ha pulsado");//Cambiamos el valor del JLabel "label"
 }

si ejecutamos el código, obtendríamos algo como lo siguiente:

Algunos métodos útiles:

setText("Nombre visual del botón");  Este método me permite cambiar el nombre del botón, le pasamos como parámetro el nombre.

setEnabled(false); Con este método podremos activar o desactivar el botón, según los convenga.

Bueno terminamos con este tutorial, en el siguiente tutorial veremos como añadir múltiples botones, y que cada uno haga algo diferente.

Cualquier duda, no te olvides de comentar.