Curso de Java Clase 8: Los Archivos

Para ver en youtube haz clic aquí

Para ir a mi canal de youtube haz clic aquí (No olvides suscribirte)

Para ver mas videos como este haz clic aquí

Los Archivos

   Casi siempre cuando estamos escribiendo un programa nos vemos en la necesidad de guardar de forma permanente la información, eso es una gran diferencia a el uso de variables en las que podemos guardar información pero esta se desvanece al cerrar nuestro programa.

Las excepciones

  Se refiere a la indicación de que ha ocurrido algún problema durante la ejecución de nuestro programa, usamos la palabra excepción por que se espera que esto ocurra con poca frecuencia, generalmente es un instrucción que no se apega al funcionamiento "regular" del programa.

  En nuestro ejemplo debemos indicarle que hacer en caso de no encontrar el archivo

Manejo de Excepciones

  Es la técnica que consiste en escribir una porción de código que resuelve la situación generada por la excepción. Es un código alternativo que se ejecuta en el caso de que el primero no funcione a causa de la excepción.

 Mas información sobre las excepciones puedes hacer clic aquí

La clase File

  Como dije en el video la clase "file" solo sirve como enlace para un archivo que podría o no podría existir, con ella tenemos varios métodos útiles para extraer información de nuestro archivo, a continuación voy a listar los que me parecen más útiles para los que se están iniciando con este apartado:

• canRead(): Realiza una prueba para comprobar si es posible leer el archivo
• exists(): Devuelve false si el archivo no existe y "true" en caso contrario
• getAbsolutePath(): Obtiene la ruta completa donde está ubicado el archivo
• getName(): Obtiene el nombre completo del archivo

Si quieres saber más sobre la clase file, puedes seguir el siguiente enlace a la referencia oficial de java (está en inglés) clic aquí

Códigos fuente del tutorial

Corrección:

En el tutorial dije que solo manejaríamos una sola excepción, pero esto fue un error, ya que al leer el archivo necesitamos controlar la excepción "FileNotFoundException" y "IOException", pero en este caso podemos solo especificar "IOException" porque la primera es subclase de la segunda.

Lectura de archivos

Haz clic aquí para descargar el ejemplo de lectura de archivos

La clase File

Haz clic aquí para descargar el ejemplo con los métodos de la clase File listados arriba

Escritura de archivos

Haz clic aquí para descargar el ejemplo de escritura de archivos

Aclaratoria sobre los enlaces: Como habrás podido notar los enlaces contienen un pequeño anuncio publicitario, mi interés con esto no es causar molestia si no mas bien tener un impulso para poder seguir produciendo material como este, si por alguna razón los anuncios te parecen muy incómodos o piensas que son demasiado molestos, escríbeme y yo tomaré tu comentario en cuenta buscando una mejor forma de trabajar.

Crear un Paint en Javascript Canvas

Para ver en youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides suscribirte)

  En el video que acabas de ver aprenderás como hacer un paint en Javascript usando un elemento Canvas para dibujar, descubrirás que es muy sencillo el código es un poco largo pero no tiene complicaciones

¿Que imagenes puedo usar para mis cursores?

  Actualmente Chrome, Firefox y Safari soportan cualquier archivo de imagen soportado por el navegador mismo excepto el formato .ANI 

  Internet Expolorer solo soporta formatos .CUR y .ANI a continuación te dejo el enlace a una página para convertir cualquier imagen a formato .CUR : convertir a .cur online

  Con respecto al tamaño, lo ideal es utilizar imagenes de 32x32 actualmente cualquier tamaño es soportado, el tamaño comentado anteriormente es solo una recomendación.

  Si usas una imagen gif animada como cursor la animación no será reproducida

  Puedes usar cursores con transaparencias pero estos solo se veran en Sistemas operativos superiores a XP ya que esta es una limitación del S.O

Código Fuente

  A continuación el código fuente completo del videotutorial, sigue el enlace para descargarlo

Haz clic aquí para descargar el código fuente

Plantilla HTML

  Si solo quieres practicar tu Javascript y no quieres perder tiempo escribiendo la parte CSS y HTML puedes descargar este documento HTML que contiene lo mismo de arriba excepto la parte Javascript :  Haz clic aquí para descargar la plantilla HTML

Imágenes

  A continuación un archivo de Winrar que contiene 4 imágenes dos del lapiz y del borrador, una para usar como cursor y la otra para usar como botón :

 Haz clic aquí para descargar las imágenes

Suseción Fibonacci en Java, Ejercicion #6

Para ver en youtube click aquí
Para ir a mi canal de youtube click aquí (no olvides suscribirte)
Para ver más videos como este haz click aquí

Código fuente del video

package fibonacci;

/**

 *

 * @author satur

 */

public class Fibonacci {

    /**

     * @param args the command line arguments

     */

    public static void main(String[] args) {

        long[] fibo = new long[2];

        fibo[0] = 0;

        fibo[1] = 1;

        int cantidad = 50;

        int num = 0;

        while(num <= cantidad){

            System.out.println(fibo[0]);

            long temp = fibo[1] + fibo[0];

            fibo[0] = fibo[1];

            fibo[1] = temp;

            num++;

        }

    }

    

}

Animación de Planeta y luna rotando CSS3

Para ver en youtube click aquí
Para ir a mi canal click aquí (No olvides suscribirte)
Para ver una lista de reproducción de tutoriales CSS3 click aquí

Sobre "linear"

  Este es uno de los valores que podemos definir en nuestra propiedad "animation", si queremos definir este parámetro de forma independiente debemos usar la propiedad "animation-timing-function" y podemos darle los siguientes valores :

• linear : La animación tiene la misma velocidad desde el inicio hasta el final
• ease  : Empieza lento, luego acelera la velocidad y antes del final, lento nuevamente
• ease-in : Comienza lentamente
• ease-out : Termina lentamente
• ease-in-out: Comienza y termina lentamente
• steps(int, start|end) : Permite personalizar, hasta cierto punto la velocidad, el primer parametro es la cantidad de intervalos y el segundo es donde ocurrirá el cambio de velocidad, al inicio (start) o al final (end)
• step-start : Equivalente a colocar steps(1, start)
• step-end : Equivalente a colocar steps(1, end);
• cubic-bezier(n,n,n,n) : Permite personalizar completamenta la función de tiempo, a continuación te enseño a establecer los valores

Función cubic-bezier

  Se le deben pasar 4 parámetros numéricos que describen una "curva de bezier" sigue este enlace para saber lo que es :

http://adf.ly/1cuY4q

  Definir sus parametros de forma manual es un poco dificil, por suerte tenemos este sitio web en donde podemos crear visualmente nustra propia curva :

http://adf.ly/1cuY6D

Acerca de los enlaces: Tienen un pequeño anuncio publicitario, esto lo hago para poder tener un mejor apoyo y así poder seguir produciendo más material como este, si te parecen muy molestos, escríbeme en los comentarios y yo buscaré una mejor forma de trabajar. Luego de hacer clic en ellos debes hacer clic en donde dice: "Saltar publicidad"

Código fuente del tutorial

.tierra {
   position: absolute;
   width: 100px;
   height: 100px;
   background-image: url('tierra.jpg');
   background-size: 200%;
   border-radius: 50%;
   top: 50px;
   left: 350px;
   animation: rotartierra 2s infinite linear;
  }
  .luna {
   position: absolute;
   width: 25px;
   height: 25px;
   background-image: url('luna.jpg');
   background-size: 200%;
   border-radius: 50%;
   top: 80px;
   left: 250px;
   animation: rotarluna 2s infinite linear, traslacion1 3s infinite linear, traslacion2 3s infinite linear;
  }

  @keyframes rotartierra {
  from {
   background-position: 0px;
  }
  to {
   background-position: 200px;
  }
  }

  @keyframes
  rotarluna {from {
   background-position: 0%;
  }
  to {
   background-position: 200%;
  }
  }

  @keyframes traslacion1 {
  0%{
  left: 250px;
  z-index: 2;
  }
  49%{
  z-index: 2;
  }
  50%{
  left: 550px;
  z-index: -3;
  }
  99%{
  z-index: -3;
  }
  100%{
  left: 250px;
  z-index: 2;
  }
  }

  @keyframes traslacion2{
  0%{
   width: 35px;
   height: 35px;
  }
  15%{
   width: 50px;
   height: 50px;
  }
  35%{
   width: 50px;
   height: 50px;
  }
  50%{
            width: 35px;
   height: 35px;
  }
  65%{
   width: 25px;
   height: 25px;
  }
  85%{
   width: 25px;
   height: 25px;
  }
  100%{
   width: 35px;
   height: 35px;
  }
  }

Imagenes para descargar

En el siguiente enlace podrás descargar las imágenes de la superficie lunar y el mapa mundi de la tierra, ambas están en un archivo de winrar así que solo tienes que descargar un archivo, dentro de él están las dos imágenes:

https://drive.google.com/open?id=0B1iGBZlMDbzbRjdPR0pnTjFBNTA 

Arrays en Java, Juego de Palindromos, Curso de Java Clase 7

Para ver en youtube, haz click aquí
Para ir a mi canal de Youtube, click aquí (No olvides suscribirte)
Dame like en Facebook, click aquí

Conceptos clave del video tutorial

Array o arreglo en español : Se refiere a una variable que es capaz de almacenar, no uno, sino varios valores diferentes, estos se ordenan según unos indices que comienzan desde el 0 y terminan de acuerdo al tamaño de nuestro array. El tamaño, en java lo tenemos que definir al momento de crear nuestro array.

El objeto ArrayList : Es un objeto que nos permite más versatilidad al momento de usar arreglos, un objeto "ArrayList" es en esencia un array, en donde no tenemos que especificar ni el tipo de dato que va a guardar, ni la cantidad. Con respecto a lo último, podremos almacenar todos los objetos que queramos dentro de nuestor "ArrayList" y este en teoría nunca se va a llenar. Si queremos podemos especificar el tipo de objeto que va a guardar usando paréntesis angulares, mas abajo en los ejemplos de código fuente, veras esto más en detalle.

Diccionarios de Java: Estos los podemos llamar de una forma muy informal como "Array asociativo en Java" esto en referencia a PHP. Con los diccionarios, que se crean usando el objeto "HashMap", nos permite crear una especie de array, en donde los objetos no se acceden usando indices si no claves creadas por nosotros.

Códigos fuente

  Creación simple de array, poblamiento usando un bucle "for" y lectura usando un bucle "for each"

String[] array = new String[10];

for(int i=0; i<= array.length; i++){

      array[i] = "hola";

}

for(String s : array){

     System.out.println(s);

}

  Otra forma de crear un array 

String[] array = {"uno", "dos", "tres", "cuatro"};

  En este caso el tamaño o la cantidad de elementos que admite el array es el número con el cual se crean osea 4, siendo el indice 0 igual a "uno" y el indice 3 igual a "cuatro"

Ejemplo de ArrayList, poblamiento y lectura usando bucle "for" y "for each"

ArrayList miarray = new ArrayList();

for(int i=0; i<=100; i++){

      miarray.add(i);

}

for(Object o : miarray){

  System.out.println(o);

}

Ejemplo de ArrayList, especificando el tipo de datos que va a guardar

ArrayList<String> miarray = new ArrayList();

  En este caso no sería necesario usar "Object" en el bucle for, en su lugar usamos "String"

Ejemplo de diccionario, usando HashMap

HashMap<String, String> arreglo = new HashMap();

arreglo.put("clave", "valor");

Las claves y los valores pueden ser tipo de datos que queramos

Juego de Palíndromos en Java

  Por último el ejemplo del detector de Palíndromos en java, a continuación el código completo

package clase7;

import java.util.Scanner;

public class Clase7 {

    public static void main(String[] args) {

        Scanner scanner = new Scanner(System.in);

        String entrada = scanner.nextLine();

        char[] caracteres = entrada.toCharArray();

        char[] volteado = new char[caracteres.length];

        int num = 0;

        for(int i = caracteres.length; i>0; i--){

            volteado[num] = caracteres[i-1];

            num++;

        }

        String volteado2 = new String(volteado);

        if(entrada.equalsIgnoreCase(volteado2)){

            System.out.println("Es palindromo");

        } else {

            System.out.println("No es palindromo");

        }

    }

    

}

Respondiendo comentarios #1

¿Como poner un logo sobre un Video HML5?

 

   El usuario de youtube Pelicula xD me preguntó el otro día ¿Como poner un logo encima de un video?

  Al final del último video de CSS está la respuesta, para ir haz click aquí , en general es muy facil de hacer, luego de ver el video puedes ver el código fuente a continuación :

Parte CSS :

<style type="text/css">

div{

position : absolute;

top: 20px;

left: 350px;

opacity : 0;

transition : opacity 1s;

}

video:hover + div {

opacity: 1;

}

div img {

width: 150px;

}

</style>

Parte HTML :

<video controls width="500px">

<source src="trailer.mp4"></source>

</video>

<div>

<img src="logo.PNG" />

</div>

Dame like en facebook, click aquí

Botones animados CSS3

Para ver en youtube click aquí
Para ver la lista de reproducción de CSS3, click aquí 
Dame like en facebook, click aquí

Código fuente del video

Parte CSS :

a {
  display : inline-block;
  background-color: black;
  padding: 15px;
  color: white;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius : 5px;
  text-decoration: none;
 }
 .anim2 {
  top: 100px;
 }
 .trans {
  top : 300px;
  transition: background-color 1s;
 }
 .anim3 {
  top: 200px;
 }
 
 @keyframes anim1 {
  0%{
   top: 20px;
  left: 20px;
  }
  25%{
   top: 10px;
  left: 20px;
  }
  50%{
   top: 30px;
  left: 10px;
  }
  100%{
   top: 20px;
  left: 30px;
  }
 }
 
 @keyframes anim2 {
  0%{
   background-color: black;
  }
  25%{
   background-color: red;
  }
  50%{
   background-color: blue;
  }
  100%{
   background-color: black;
  }
 }
 
 @keyframes anim3 {
  0%{
   padding : 15px;
  }
  50%{
   padding : 8px;
  }
  100%{
   padding : 15px;
  }
 }
 .anim1:hover {
  animation : anim1 1s infinite;
 }
 .anim2:hover {
  animation-name: anim2;
  animation-duration: 1s;
  animation-iteration-count : infinite;
 }
 
 .anim3:hover {
  animation : anim3 1s infinite;
 }
 .trans:hover {
  background-color: red;
 }

Parte HTML :

<a href="#" class="anim1" onclick="alert('hola');">Boton1</a>
<a href="#" class="anim2" onclick="alert('hola');">Boton2</a>
<a href="#" class="anim3" onclick="alert('hola');">Boton3</a>
<a href="#" class="trans" onclick="alert('hola');">Transisión</a>
  

TinyMCE Los Plugins

Para ver en Youtube click aquí
Dame like en facebook, click aquí

Plugin de imagenes

  Como vimos en el video, para colocar cualquier plugin escribimos la palabra "plugins", seguido dos puntos ":" y entre comillas el plugin que queramos colocar.

 El plugin "image" sirve para poder colocar imágenes en nuestro editor de texto :

tinyMCE.init({

selector : "#editor",

plugins : "image",

})

Control de la barra de herramientas :

toolbar : "image"

Control de barra de menú :

menubar : "insert"

  Recuerda que el menú insert es común a varios plugins.

  Para ver mas detalladamente como personalizar la interfaz de nuestro editor, haz click aquí para ver el primer video.

Ejemplo completo con la interfaz personalizada :

tinyMCE.init({

selector : "#editor",

plugins : "image",

image_dimensions : false,

image_description : false,

image_advtab : true,

image_list : [

{title : "Calculadora", value : "png/calculator.png" },

{title : "Agenda", value : "png/agenda.png"},

{title : "Calendario", value : "png/calendar.png"}

]

})

Plugin "media"

Ejemplo completo :

tinyMCE.init({

selector : "#editor",

plugins : "media",

media_dimensions : false,

media_alt_source : false,

media_poster : false

})

Controles :

toolbar : "media",

menubar: "edit"

Plugin "searchrecplace"

tinyMCE.init({

selector : "#editor",

plugins : "searchreplace"

})

Controles de barra de herramientas y menú disponibles para TinyMCE

   Para ver el videotutorial de configuración y personalización de tinyMCE, click aquí

(No olvides suscribirte)

Los controles que coloco a continuación estan disponibles para la librería base, hay otros controles que estan disponibles bajo el uso de plugins, estos los veremos más adelante.

Barra de Herramientas

• newdocument: Crea un nuevo documento
• bold : Aplica el estilo de "negrita" al texto en cuestión
• italic: Aplica el estilo de "cursiva" al texto en cuestión
• underline: Aplica el estilo de "subrayado" al texto en cuestión
• strikethrough : Crea una linea que pasa por la mitad del texto, estilo de texto tachado
• alignleft: Alinea el texto a la izquierda
• aligncenter: Centra el texto
• alignright: Alinea el texto a la derecha
• alignjustify: Justifica el texto
• styleselect: Crea una lista tipo "dropdown" con los estilos disponibles para aplicar
• formatselect: Crea una lista tipo "dropdown" con los formatos disponibles para aplicar
• fontselect: Crea una lista tipo "dropdown" con las fuentes disponibles para aplicar
• fontsizeselect: Dropdown para seleccionar el tamaño del texto
• cut: Corta el texto al portapapeles
• copy: Copia el texto al portapapeles
• paste: Pega el texto del portapapeles
• bullist: Crea una lista con estilo similar a esta que estas viendo
• numlist: Lista numérica
• outdent: Cambia nivel de la lista hacia afuera
• indent: Cambia nivel de la lista hacia adentro
• blockquote: Convierte la selección en una cita
• undo: Deshace la última operación
• redo : Rehace la última operación deshecha 
• removeformat: Elimina todo el formato del texto

Controles de Menú

  Aparte de los menús que podemos mostrar, como lo son : "file", "edit", "view", "format", tenemos los siguientes controles:

• newdocument : Crea un nuevo documento
• undo: Deshace la última operación 
• redo : Rehace la última operación deshecha
• visualaid: Activa o desactiva las ayudas visuales
• cut: Corta al portapapeles 
• copy: Copia al portapapeles
• paste: Pega desde el portapapeles
• selectall: Selecciona todo el texto
• bold : Aplica el estilo de "negrita"
• italic: Aplica el estilo de "cursiva"
• underline: Subraya el texto
• strikethrough : Crea una linea que pasa por la mitad del texto, estilo de texto tachado
• removeformat : Elimina todos los formatos
• formats: Muestra una lista de los formatos disponibles