Tutoriales de Programación

sábado, 25 de junio de 2016

Tooltips en CSS

Para ver en Youtube haz click aquí (Recuerda Suscribirte)
Para ver en Youtube (segundo video) haz click aquí
Para ver más videos de CSS click aquí
Dame like en facebook, click aquí

¿Que es un "Tooltip" ?

Los tooltip son usados para mostrar información extra acerca de un elemento, justo cuando el usuario pasa el mouse por encima. Los podemos ver como una forma mas moderna del antiguo atributo "alt", para los que no lo saben, anteriormente este atributo nos permitía mostrar un texto cuando el usuario posaba el mouse encima, actualmente este atributo tiene otra funcionalidad totalmente diferente.

Tooltip de texto

En el primer video (El segundo estará disponible mas tarde o mañana) les muestro como hacer un tooltip animado de texto, a continuación el código fuente :

La parte CSS :

.tooltip {

background-color: black;

color: white;

padding : 5px;

position: absolute;

border-radius: 5px;

top: 15px;

visibility: hidden;

transition: opacity 1s, visibility 1s, top 1s;

opacity: 0;

}

.tooltip::after {

content: " ";

position: absolute;

top: 100%;

left: 50%;

border-style: solid;

border-width: 5px;

border-color: black transparent transparent transparent;

}

.txt:hover + .tooltip {

visibility: visible;

opacity: 1;

top: 10px;

}

</style>

El HTML:

<br>

<span class="txt">mi texto</span>

Información

</div>

Las etiquetas <br> las coloco para que "mi texto" no quede muy arriba y poder colocar el tooltip arriba de este

Tooltip con imagenes

En el segundo video, les enseño también a crear un toolttip, pero ahora este no esta compuesto de texto sino de imágenes.

EL CSS :

.tooltip img{

width: 350px;

box-shadow: 5px 5px 10px black;

}

.nav {

list-style-type: none;

margin: 0;

padding: 0;

}

.tooltip {

position : absolute;

visibility: hidden;

opacity: 0;

transition : opacity 1s, visibility 1s;

}

.hori {

display: inline-block;

}

.hori a{

display: block;

padding: 8px;

color: white;

background-color: gray;

text-decoration: none;

}

.hori:hover a{

background-color: black;

}

.hori:hover .tooltip{

visibility: visible;

opacity: 1;

}

</style>

El html :

<a href="#">Cuzco</a>

</div>

</li>

<a href="#">Louvre</a>

</div>

</li>

<a href="#">El puente de la torre</a>

</div>

</li>

<a href="#">Venecia</a>

</div>

</li>

</ul>

Si te gustó este tutorial recuerda suscribirte a mi canal de Youtube y darme like en Facebook

domingo, 19 de junio de 2016

Curso de Java Ejercicio 5: Pirámide de asteriscos

Para ver en youtube haz click aquí
Para ir al curso de java click aquí
Para ver mas ejercicios como este, haz click aquí
Para ir a mi canal de youtube click aquí (Recuerda Suscribirte)

Acabas de ver un ejercicio simple pero interesante, en donde usando bucles logramos dibujar de forma automática una pirámide de asteriscos, se te invita a pensar la forma de hacerlo tu mismo, si tienes dificultades, a continuación te presento una pista.

La pista

La clave para llevar a cabo este ejercicio esta en los bucles anidados, debes hacer un bucle for y dentro de este colocar un bucle while

El código fuente

A continuación el enlace para que descargues el código fuente de este ejercicio:

Click aquí para descargar el código fuente

Curso de Java Clase 6: Bucle For y bucles anidados

Para ver en youtube click aquí
Para ir a la lista de repoducción del curso click aquí
Para ir a la lista de reproducción de los ejercicios click aquí
Para ir a mi canal de youtube click aquí (Recuerda suscribirte)

Acabas de ver lo que es el bucle for, quizás te estés preguntando: ¿Que diferencia tiene con el bucle while? La respuesta corta es en esencia ninguna ya que todos los bucles hacen prácticamente lo mismo, pero al tener una sintaxis y una implementación diferente estos se pueden adaptar a situaciones diferentes, eres tú como programador el que decide que bucle se adapta mejor al código que estas escribiendo.

Números del 1 al 100

En el video viste el siguiente ejemplo:

package clase6;

public class Clase6 {

public static void main(String[] args) {

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

System.out.println(i);

}

For con dos condiciones

package clase6;

public class Clase6 {

public static void main(String[] args) {

int num = 0;

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

num++;

if(num >= 10){

System.out.print(i);

num = 0;

}

System.out.println("");

}

Bucles anidados

El siguiente ejemplo escribe un "cuadro" de números usando un bucle while, dentro de un bucle for

package clase6;

public class Clase6 {

public static void main(String[] args) {

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

int num = 0;

while(num <= 10){

System.out.print(i);

num++;

}

System.out.println("");

}

sábado, 18 de junio de 2016

Menu desplegable en CSS, sin Javascript

Para ver en youtube haz click aquí
Para ir a mi canal haz click aquí (Recuerda suscribirte)

En el video que acabas de ver te enseñaré a crear un menú desplegable también conocido como "Dropdown menu" solo en CSS, aquí no hay nada de JavaScript, mucha gente hace esto no solo con JS sino que acude a librerías como JQuery cuando hacerlo de esta forma es bastante sencillo.

El código que acabas de ver te va a funcionar en prácticamente todos los navegadores actualmente en uso, incluso en versiones viejas de Internet Explorer, como la versión 7, este último lo nombro porque es el que siempre tiende a hacer las cosas diferentes. Eso ha cambiado mucho con la llegada de Microsoft Edge el cual es ful compatible con CSS3, luego de ver el video, a través de esta entrada voy a explicar cada uno de los elementos, y al final puedes descargar el código fuente.

Propiedades CSS

Padding: Esta propiedad altera el espacio en blanco que se encuentra alrededor del contenido, al colocarle un número cada vez mas alto estamos haciendo este espacio mas grande, este espacio esta entre el elemento y el borde de nuestro objeto
Margin: Se refiere al espacio en blanco que se encuentra alrededor de nuestro objeto y fuera del borde, este espacio rodea a nuestro objeto desde fuera del borde
lyst-style-type: Elimina los adornos que tienen las listas, por lo general HTML solo crea un pequeño circulo del lado derecho del texto de los elementos de nuestra lista
background-color: Especifica el color de fondo de nuestro objeto
color: Aquí podemos definir el color de nuestro objeto, si hablamos de un enlace, por ejemplo, nos referimos al texto del mismo
text-decoration: Esta propiedad es casi exclusiva de los enlaces, elimina el subrayado del texto
display: Aquí especificamos la forma en la cual se van a mostrar los elementos, es importante destacar de que aquí solo voy a mencionar las propiedades usadas en el vídeo y algunas importantes, al final un enlace donde podrán verlas todas :
- inline: Los despliega en orden de linea
- inline-block: En linea y en forma de bloque
- none: No muestra el elemento, hace lo mismo que usar "visibility:hidden", pero recomiendo utilizar visibility ya que esta es animable, en cambio display no lo es
- block: Lo muestra como un bloque
font-family: Aquí podemos cambiar el tipo de fuente
position: Aquí le decimos como vamos a posicionar los elementos, con el valor "absolute" creamos una capa flotante, que no afecta la disposición de los demás elementos
visibility: Aquí podemos especificar si el elemento en cuestión va a ser visible o no
opacity: Recibe valores entre 1 y 0, con esto creamos una transparencia
transition: Esto nos permite crear una animación usando los estados de nuestro elemento.

Para más información sobre display click aquí

Para más información sobre las transiciones click aquí

¿Cual es la diferencia entre Padding y Margin?

Padding se refiere al espacio en blanco que se encuentra, entre el borde y el contenido, no saliendo este fuera del borde.

Margin es el espacio en blanco que está fuera del borde y que separa nuestro objeto de otros objetos.

Código fuente

En el enlace a continuación podrás descargar el código fuente :

Click aquí para descargar el código fuente

domingo, 12 de junio de 2016

Curso de Java Ejercicio #4 : Juego de Preguntas con bucle While

Para ver en Youtube click aquí
Para ir a mi canal click aquí
Para ir a la lista de reproducción del curso click aquí
Para ir a la lista de reproducción de los ejercicios click aquí

Lo que acabas de ver

En el video que acabas de ver mas arriba, modificamos el juego del ejercicio 1, y le agregamos el bucle while, con esto podemos exigir una respuesta correcta y restar puntos cada vez que se responda mal

La pista

El secreto para poder hacer el ejercicio es algo tan simple que solo ocupa el espacio de un caracter : "!" este signo de exclamación, en Java es un operador lógico de negación, lo que hace es invertir el valor de una condición, veamos el siguiente ejemplo

int num = 5;

if(num == 5){

.....

}

La condición dada arriba se va a ejecutar como verdadera, ya que obviamente lo es, veamos que ocurre si agregamos el operador de negación

int num = 5;

if(!num==5){

.....

}

En este caso no se va a ejecutar, ya que el operador de negación invierte su valor, ahora solo se va a ejecutar si la variable "num" tiene algún otro valor que no sea 5

En nuestro juego de preguntas lo que necesitamos es colocar como condición "que la respuesta sea falsa" y eso lo hacemos con el operador de negación.

El código fuente

Si quieres descargar el código fuente de este ejercicio haz click aquí

Curso de Java Ejercicio #3 : Test de primalidad

Para ver en youtube click aquí
Para ir a mi canal de Youtube has click aquí (Recuerda hacer click en suscribirse)
Para ir a la lista de reproducción del curso click aquí
Para ir a la lista de reproducción de los ejercicios click aquí

Saber si un número es Primo

En el video que acabas de ver te invito a que intentes crear un programa que detecte si un número es primo o no, para hacerlo necesitas conocer sobre los bucles "while", las sentencias de control "if" y los operadores de incremento y decremento, a continuación los enlaces a cada tema :

La pista

En la clase anterior a este ejercicio, en la entrada correspondiente (el primer enlace en la lista de arriba), aprendimos acerca del operador de módulo, el cual se escribe con el símbolo de porcentaje (%) este operador permite calcular el resto de una división, por ejemplo las siguientes operaciones con el operador de módulo darían los siguientes resultados

10%3 = 1 ; 5%2 = 1 15%4=3

Este operador es la clave para resolver este ejercicio, ya que una operación con un número, usando este operador, solo va a dar 0, cuando es primo, si el otro operando es el mismo número o uno (1). Por lo que el ejercicio consiste en hacer un bucle que "pruebe" todos los números menores hasta llegar a uno y buscar bajo que números es divisible.

Código Fuente

Para descargar el código fuente del ejercicio has click aquí

Operadores Aritmeticos y el Bucle While Java

Para ver en Youtube haz click aquí

Para ir a la lista de reproducción del curso, click aquí

Para ir a mi canal haz click aquí

Para ir a los ejercicios : Ejercicio 1, Ejercicio 2

La aritmética en Java

En videos y entradas anteriores hemos visto que podemos escribir operaciones aritméticas directamente en nuestro código, y Java al igual que una calculadora resolverá la operación, veamos el siguiente ejemplo :

System.out.println(2+4);

En este caso la salida en consola sería la siguiente : 6

Los operadores

Hay algunos operadores que como veremos son bastante obvios, los signos aritméticos que conocemos realizan las mismas operaciones de la matemática :

Suma + operador "más"
Resta - operador "menos"
Multiplicación o Producto * operador "por" Se escribe con un asterisco
División / operador "entre"

Pero hay otros operadores en Java que podrían no parecer tan obvios desde el punto de vista matemático.

El operador de Módulo

Este operador nos va a realizar una división, pero en lugar de mostrarnos el cociente, nos va a mostrar el resto, este operador lo vamos a escribir con el signo de porcentaje "%", ejemplo :

10%3 = 1
Ya que hace la división "entera" osea no de forma exacta sino únicamente usando números enteros, de esta forma :
10/3 = 3 y nos sobra 1 otros ejemplos
15%4 = 3 ; 50%3 = 2

Los operadores de incremento y decremento

En el video que acompaña a esta entrada vemos un operador formado de dos signos "más" (++), esto se conoce como operador de incremento, y no es el único, existen tres operadores de incremento : "++" , "+=" y "*="
Al usar el primero con una variable, numérica, estamos incrementando su valor en uno (1) cada vez que se ejecute la respectiva linea de código, ejemplo
Si usamos el operador ++ fuera de un bucle
int num = 0;
num++; //aquí aumentamos en 1 el valor de la variable
num++; // aquí lo volvemos a hacer
num++; // aquí lo hacemos una vez más
System.out.println(num);
La salida en consola será : 3
y si llegamos a ejecutar 100 veces esa linea de código el valor de num llegaría a 100, tal cual como vimos en el video con el bucle while

Con el segundo (+=) podemos aumentar el valor de la variable en la cantidad que especifiquemos, por ejemplo si usando el bucle while quisiéramos mostrar los números del 1 al 100 pero de 2 en 2, haríamos lo siguiente

int num = 0;
while(num <= 100){
System.out.println(num);
num+=2;
}
El resultado en consola serían los números del 2 al 100 pero de 2 en 2 osea :
0, 2,4,6,8,10....100

También lo podemos hacer de 3 en 3 de la siguiente forma

int num = 0;
while(num <= 100){
System.out.println(num);
num+=3;
}

El tercer operador de incremento "*=" nos permite aumentar el valor no de forma aditiva, si no multiplicando, de la siguiente manera :
int num = 2;
num*=2; // el valor será ahora 4 ya que 2*2 = 4
num*=2; // el valor será ahora 8 ya que 4*2=8
num*=2; // el valor ahora será 16 porque 8*2=16
num*=2; // aquí tenemos 32 ya que 16*2=32

Y los mismo es válido para cualquier número

El decremento

Existen 2 operadores de decremento, la lógica detrás de ellos es la misma que con los anteriores; tenemos los siguientes : "--", "-=" y "/="

En el caso del primero disminuye el valor de nuestra variable en 1 cada vez que se ejecute, podríamos usarlo para escribir los números del 100 al 0 de la siguiente manera :

int num = 100;

while(num >= 0){

System.out.println(num);

num--;

}

La salida en consola sería : 100, 99, 98, 97 ....3,2,1,0

El segundo nos permite disminuir el valor en la cantidad que queramos, por ejemplo :

int num = 100;

while(num >= 0){

System.out.println(num);

num-=2;

}

El resultado en consola sería el siguiente : 100, 98, 96, 94, 92....6,4,2,0

Y por último, el operador "/=" nos permite disminuir el valor de la variable dividiéndolo por la cantidad que especifiquemos:

int num = 100;

while(num > 0){

System.out.println(num);

num/=2;

}

El resultado en consola sería : 100, 50, 25, 12, 6, 3, 1

En este último ejemplo en lugar de usar la condición "num >=0" usamos "num>0", la razón de esto te la dejo de tarea, escríbanme la respuesta en los comentarios