feed twitter facebook LinkedIn facebook

Bootstrap » Contactos con Bootstrap

junio 26, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Cuando estamos utilizando el framework Bootstrap tenemos una forma sencilla de darle forma a los contactos dentro de una página.

Para poder dar formato a los contactos con Bootstrap deberemos de utilizar el elemento address.

El código nos quedaría de la siguiente forma:

  1. Información de Contacto
  2. </address>

Dentro del elemento address insertaremos toda la información relativa al contacto. Lo que viene siendo el nombre del contacto, dirección, teléfono,...

Por ejemplo podríamos tener como contacto con Bootstrap el siguiente código:

  1. <strong>Bar Pascual</strong><br>
  2. Bulevar Indalecio Prieto, 12<br>
  3. 28032, Madrid
  4. </address>

Una cosa importante a la hora de crear un contacto con Bootstrap es que todas líneas que contenga el elemento deberán de acabar con un salto de línea. Para crear el salto de línea utilizaremos el elemento br.

Además hay que fijarse que para resaltar el contacto el nombre del contacto o de la razón social irá recubierto del elemento strong.

Para completar la información del contacto podemos insertar otros elementos como pueden ser abreviaturas para detallar un teléfono:

  1. <strong>Bar Pascual</strong><br>
  2. Bulevar Indalecio Prieto, 12<br>
  3. 28032, Madrid<br>
  4. <abbr title="Teléfono">Tel:</abbr> 91 534 98 67
  5. </address>

O enlaces hacía las páginas web o emails de los contactos.

  1. <strong>Bar Pascual</strong><br>
  2. Bulevar Indalecio Prieto, 12<br>
  3. 28032, Madrid<br>
  4. <abbr title="Teléfono">Tel:</abbr> 91 534 98 67
  5. <a href="mailto:barpascual@gmail.com">barpascualgmail.com</a>
  6. </address>

De esta forma tan sencilla hemos visto como podemos crear un contacto con Bootstrap.

CSS » Alto y ancho de una tabla en HTML

junio 24, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Mediante el lenguaje CSS podemos definir el alto y ancho de una tabla en HTML de una forma muy sencilla. Lo primero que tenemos que saber es como crear una tabla en HTML.

Al crear una tabla en HTML vemos que el elemento principal HTML es el elemento table. Así que a la hora de definir el alto y ancho de una tabla en HTML lo que tenemos que hacer es modificar las propiedades de este elemento table.

La tabla que podemos manejar es una parecida a la siguiente:

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. <td>España</td>
  7. <td>Madrid</td>
  8. <td>504.645 km<sup>2</sup></td>
  9. <td>46,6 M</td>
  10. </tr>

Ahora creamos en la parte superior de nuestra página web un código CSS. Para ello deberemos de utilizar el elemento style.

  1. // Estilos CSS
  2. </style>
  3. </head>

Para indicar las propiedades de la tabla utilizamos table como selector:

  1. table {
  2. ...
  3. }

Ahora para definir el alto y ancho de una tabla en HTML vamos a utilizar las propiedades width y height. Podemos definir el alto y el ancho mediante unidades fijas o mediante porcentajes. Por ejemplo podríamos definir lo siguiente:

  1. table {
  2. width: 50%;
  3. height: 300px;
  4. }

En este caso hemos indicado que el ancho de la tabla es el 50% del ancho de la página y que el alto es de 300px.

Otras unidades, además del porcentaje y los pixels (px), que podemos utilizar para definir el alto y el ancho de una tabla en HTML son las relativas al tamaño de la fuente (em).

Bootstrap » Citas en Bootstrap

junio 23, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Ya vimos en un artículo como podemos poner una cita en el lenguaje HTML mediante el elemento blockquote. Normalmente los navegadores interpretan este elemento como un bloque identado, el cual tiene una separación superior e inferior con los elementos que lo representan. Es por ello por lo que se mal utilizó para ejecutar identaciones de información en las páginas web.

Mediante el framework Bootstrap podemos dar un formato a las citas de una forma muy sencilla y utilizando el elemento blockquote. Si seguimos una serie de estructuras podremos ver que las citas en Bootstrap se representan con estilos asociados.

Lo primero será poner una cita. Vamos a utilizar una cita de Groucho Marx. Simplemente tendremos que poner el texto de la cita entre el elemento blockquote.

  1. <p>No tengo respuestas para casi nada y sin embargo tengo preguntas para casi todo.</p>
  2. </blockquote>

Es importante destacar que el texto de la cita está dentro del elemento blockquote, pero que de igual forma lo hemos recubierto de un elemento párrafo.

Visualmente veremos que el texto aparece con una identación, cambio de tipografía y la fuente es ligeramente distinta a la del texto normal.

Ahora pondremos el autor de la cita. El autor irá en un siguiente bloque dentro del blockquote, pero recubierto de un elemento footer.

  1. <p>No tengo respuestas para casi nada y sin embargo tengo preguntas para casi todo.</p>
  2. <footer>Groucho Marx</footer>
  3. </blockquote>

En este caso la cita en Bootstrap nos mostrará el autor con una tipografía más pequeña, el texto en gris y con un guión por delante.

Otra cosa que podemos hacer a la hora de crear una cita en Bootstrap es alinear la cita a la derecha. Para ello deberemos de utilizar la clase "blockquote-reverse" la cual aplicaremos al elemento blockquote.

  1. <blockquote class="blockquote-reverse">
  2. <p>No tengo respuestas para casi nada y sin embargo tengo preguntas para casi todo.</p>
  3. <footer>Groucho Marx</footer>
  4. </blockquote>

Por último podemos hacer citas en Bootstrap en las que incluyamos información de dónde encontramos la cita. Es decir, si es de algún libro, película,.. Para ello dentro del elemento footer utilizamos el elemento cite indicando dónde está referenciada la cita.

Podría quedar de esta forma para, por ejemplo, una cita de Miguel Delibes.

  1. <p>“Yo nací en Ávila, la vieja ciudad de las murallas, y creo que el silencio y el recogimiento casi místico de esta ciudad...</p>
  2. <footer>Miguel Delibes en <cite title="La sombra del ciprés es alargada”">La sombra del ciprés es alargada</cite></footer>
  3. </blockquote>

Vemos que el elemento cite tiene un atributo title que complementa la información del origen de la cita.

Lo mejor es que visualices el resultado para que veas el efecto de poner citas en Bootstrap.

CSS » Ancho de columnas en tabla

junio 22, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

En este ejemplo vamos a ver como podemos definir el ancho de columnas en tabla HTML para que dicho ancho sea diferente en cada una de las columnas que tengamos.

Lo primero para definir el ancho de columnas en tabla HTML vamos a necesitar crear una tabla. Los elementos de tabla en HTML que vamos a utilizar son table para definir la tabla, tr para definir la fila y td para definir la celda.

Vamos a crear nuestra tabla:

  1. <th>País</th>
  2. <th>Capital</th>
  3. <th>Superficie</th>
  4. <th>Habitantes</th>
  5. </tr>
  6. <td>España</td>
  7. <td>Madrid</td>
  8. <td>504.645 km<sup>2</sup></td>
  9. <td>46,6 M</td>
  10. </tr>
  11. ...
  12. </table>

Para poder definir el ancho de columnas en tabla tenemos que recurrir al lenguaje CSS. En concreto el lenguaje CSS va a definir el ancho de las columnas mediante los elementos td que son los que representan a las celdas.

Para poder acceder al elemento td utilizaremos el selector:

  1. table td {
  2. ...
  3. }

Si queremos acceder a todos las celdas de la primera columna utilizaremos el pseudoelemento nth-child, al cual pasaremos el valor 1.

  1. table td:nth-child(1) {
  2. ...
  3. }

Si queremos darle el ancho a otras columnas podemos hacerlo cambiando el valor que pasamos como parámetro: 2, 3, 4,...

Si solo queremos dar el ancho a la primera columna también podríamos utilizar el pseudolemento first-child.

  1. table td:first-child {
  2. ...
  3. }

Solo nos queda utilizar la propiedad width para indicar el tamaño que queramos darle a la columna.

De esta forma podríamos definir el ancho de columnas en tabla de la siguiente forma:

  1. table td:first-child {
  2. width: 100px;
  3. }
  4.  
  5. table td:nth-child(2) {
  6. width: 100px;
  7. }
  8.  
  9. table td:nth-child(3) {
  10. width: 200px;
  11. }
  12.  
  13. table td:last-child {
  14. width: 150px;
  15. }

Java » Primer punto de la cadena con Java

junio 21, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Nos solicitaban en los comentarios de la web como podíamos localizar el primer punto de la cadena con Java. Y sobre si era aconsejable utilizar un StrintTokenizer al respecto.

La verdad que localizar el primer punto de la cadena con Java es algo relativamente sencillo. Para ello lo que debemos de hacer es utilizar el método indexOf. Mediante el método indexOf obtendremos la posición en la cual se encuentra el carácter buscado. En nuestro caso un punto.

Pero lo primero será definir nuestra cadena.

  1. String sCadena = "www.lineadecodigo.com";

Ahora vamos a buscar la posición del primer punto.

  1. int posicionPunto = sCadena.indexOf('.');

Ahora que ya tenemos la posición solo tendremo que cortar desde el principio de la cadena hasta la posición del punto

  1. String sHastaPrimerPunto = sCadena.substring(0,posicionPunto);

Y desde la posición del punto + 1 hasta el final de la cadena. El final de la cadena lo podemos conseguir mediante el método length.

  1. String sDesdePrimerPunto = sCadena.substring(posicionPunto+1,sCadena.length());

Ya solo tendremos que volcar estas cadenas por consola.

  1. System.out.println(sHastaPrimerPunto);
  2. System.out.println(sDesdePrimerPunto);

Y lo que veremos será algo parecido a:

www
lineadecodigo.com

Como se puede observar es muy sencillo el obtener el primer punto de la cadena con Java.

Java » Llenar un array con números aleatorios en Java

junio 20, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

En este ejemplo vamos a ver como podemos llenar un array con números aleatorios en Java. Es decir vamos a inicializarlo e ir insertando diferentes números aleatorios.

Para ello lo primero que tenemos que saber es como definir un array de números enteros.

  1. int[] numeros = new int[10]

En este caso hemos definido un array llamado números con capacidad para diez elementos.

Lo siguiente que tenemos que saber es como acceder a un elemento para insertarle información. Para ello utilizamos el nombre del array y el operador [] con la posición del array en el que insertaremos la información.

  1. array[posicion] = valor;

Hay que recordar que la primera posición de un array corresponde al número 0.

Así si queremos insertar un valor de 4 en la posición 2 utilizamos el siguiente código:

  1. umeros[2] = 4;

Lo siguiente que tenemos que saber es como generar un número aleatorio en Java. Para ello utilizamos el método Math.random() el cual genera valores entre 0.0 y 1.0

  1. int aleatorio = (int) Math.random();

Ya que queremos un número entero lo que hacemos es forzar su conversión a int. Deberemos de hacer algún ajuste más que es, crear un límite de número aleatorio superior y añadirle 1 para no tener el 0 como número aleatorio.

  1. int aleatorio = (int) (Math.random()*20)+1;

Este código nos genera números entre 1 y 20.

Ahora lo que vamos a realizar es la carga en el array Java. Par ello utilizamos un bucle for en el cual vamos generando un número.

  1. for (int x=0;x<numeros.length;x++)
  2. numeros[x] = (int) (Math.random()*20)+1;

De esta forma hemos conseguido llenar un array con números aleatorios en Java.

JavaScript » Hipotenusa en Javascript

junio 19, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Siguiendo con un conjunto de ejemplos matemáticos vamos a ver como calcular una hipotenusa en Javascript. La buena noticia a la hora de calcular la hipotenusa en Javascript es que en ECMAScript 6 está propuesta la función Math.hypot la cual ya implementan algunos de los motores Javascript.

Así sería tan simple como escribir lo siguiente:

  1. console.log(Math.hypot(2,3));

Y tendríamos calculada la hipotenusa de un triángulo cuyos catetos sean 2 y 3.

La mala noticia es que no podemos asumir que el entorno en que se ejecute nuestro código tenga un interprete de ECMAScript 6 (lo más probable es que sea ECMAScript 5) y por lo tanto debamos de tomar una serie de precauciones.

Estas precauciones pueden pasar por crear un pollyfil, es decir, utilizar la función Math.hypot en el caso de que exista, y si no utilizar nuestra propia implementación.

De esta forma la clase de formulas Javascript que tenemos podría tener un método como el siguiente:

  1. function formulas() {
  2. this.hipotenusa = Math.hypot || function() {
  3. ...
  4. }
  5. }

Lo que estamos haciendo es indicar que usamos la función Math.hypot y si no existe, en ese caso, vamos a implementar la función.

Para implementar una hipotenusa en Javascript lo que tenemos que saber es que la hipotenusa es la raíz cuadrada de la suma de los catetos al cuadrado. Es decir, la famosa formula de:

hipotenusa2 = cateto12 + cateto22

Ahora, para calcular la hipotenusa en Javascript deberemos de saber dos cosas. La primera es que para poder realizar una raíz cuadrada tenemos el método Math.sqrt, al cual pasaremos el valor del cual queramos conocer su raíz cuadrada.

Por otro lado tenemos que saber como elevar un cateto al cuadrado. Para ello podemos hacerlo de dos formas: multiplicando el número por si mismo o utilizar el método Math.pow. El método Math.pow recibe un primer parámetro que es la base (nuestro cateto) y el segundo será el exponente (que será un 2).

De esta forma la formula para calcular la hipotenusa en Javascript tendremos:

  1. Math.sqrt(Math.pow(c1, 2) + Math.pow(c2, 2));

Dónde c1 y c2 son los catetos.

En el caso de que queramos crear el polyfill de la función hypot de ECMAScript 6 hay que tener en cuenta que está realmente puede recibir N parámetros y que eleva todos al cuadrado, los suma y calcula la raíz cuadrada. De esta forma el código será de la siguiente forma:

  1. this.hipotenusa = Math.hypot || function() {
  2. var y = 0;
  3. var length = arguments.length;
  4.  
  5. for (var i = 0; i < length; i++) {
  6. y += arguments[i] * arguments[i];
  7. }
  8. return Math.sqrt(y);
  9. };

Vemos que utilizamos el objeto arguments el cual representa los N parámetros enviados al método hipotenusa.

HTML » Tablas HTML con imágenes

junio 18, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Cuando estamos viendo ejemplos en HTML sobre manejo de tablas siempre suelen aparecer datos ya sea texto o números. Si bien una de las cosas que podemos es crear tablas HTML con imágenes. Es decir, que el contenido de las celdas de la tabla sean imágenes.

La creación básica de una tabla se realiza mediante los elementos table para reflejar la tabla en sí, tr que representaría las filas y td que serían las propias celdas.

Así podemos tener una tabla de dos columnas de la siguiente forma:

  1. <th>Texto</th>
  2. <th>Imagen</th>
  3. </tr>
  4. </thead>
  5. <td></td>
  6. <td></td>
  7. </tr>
  8. ...
  9. </table>

Esta tabla lo que nos va a permitir es insertar imágenes en la segunda columna. Cuando vayas a manipular imágenes en HTML recurrirás al elemento img. De esta forma podrás insertar una imagen de forma sencilla en una página web.

  1. <img src="url_imagen" alt="texto alternativo" width="ancho" height="alto"/>

Por ejemplo un código para cargar una imagen podría ser:

  1. <img src="descargar.png" alt="Elemento de Descarga" width="50px" height="50px"/>

Puedes ver ejemplos sobre uso de imágenes en páginas web.

Así que para tener tablas HTML con imágenes solo tienes que utilizar el elemento img dentro de las celdas de la tabla.

  1. ...
  2. <td>Test</td>
  3. <td><img src="test.png"/></td>
  4. </tr>
  5. ...

Así podríamos tener tablas HTML con imágenes de la siguiente forma:

  1. <th>Texto</th>
  2. <th>Imagen</th>
  3. </tr>
  4. </thead>
  5. <td>Test</td>
  6. <td><img src="test.png"/></td>
  7. </tr>
  8. <td>Descargar</td>
  9. <td><img src="download.png"/></td>
  10. </tr>
  11. <td>Curso</td>
  12. <td><img src="curso.png"/></td>
  13. </tr>
  14. </table>

JavaScript » Número aleatorio Javascript

junio 17, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

En este ejemplo vamos a ver como podemos generar un número aleatorio Javascript. Para ello nos vamos a apoyar sobre la función random del objeto Math.

  1. Math.random();

La clase random del objeto Math nos va a generar un número aleatorio entre 0.0 y 1.1. De esta forma, si lanzamos el método Math.random() diez veces:

  1. for (x=0;x<10;x++) {
  2. console.log(Math.random());
  3. }

Podríamos obtener algo parecido a lo siguiente:

0.9122037563938648
0.24961371789686382
0.5979564934968948
0.03806222160346806
0.30373380333185196
0.19379574037157
0.05634263646788895
0.7814728866796941
0.8046142403036356
0.3550372617319226

Lo primero que apreciamos es que los números aleatorios generados son decimales, por lo que si estamos pensando en un número entero no nos va a valer. Para ello, lo que deberemos de hacer es multiplicar el número aleatorio por el número máximo más uno del límite superior del número aleatorio a generar:

  1. Math.random()*numero_maximo+1;

De esta manera, si queremos generar números entre el 1 y el 25 utilizaremos la siguiente sentencia.

  1. Math.random()*25+1;

Si bien deberemos de tener todavía cuidado ya que seguiremos teniendo números decimales. Es por ello que tendremos que convertirlos a enteros mediante el método parseInt().

  1. parseInt(Math.random()*maximo+1);

De esta forma ya tenemos una función que puede calcular un número aleatorio Javascript. Y que la podemos añadir a nuestra clase de formulas.

  1. function formulas() {
  2. this.aleatorio = function (maximo) {
  3. return parseInt(Math.random()*maximo+1);
  4. }
  5. }

JavaScript » Área de un círculo en Javascript

junio 16, 2015 por Víctor Cuervo Sin Comentarios Imprimir Imprimir

Una de las cosas que me preguntan para diferentes lenguajes es sobre las formulas matemáticas, en concreto una de las que preguntan mucho es sobre cómo podemos calcular el área de un círculo en Javascript.

Lo primero será saber cual es la formula de para calcular el área de un círculo. Esta es:

area_circulo = π * radio 2

Así que partiendo que de alguna forma te vas a hacer con el dato del tamaño del radio, solo nos quedará saber como resolver el valor de π y como ejecutar potencias para poder elevar el radio al cuadrado.

Pero además para poder calcular el área de un círculo en Javascript vamos a crearnos una clase que contenga diferentes fórmulas matemáticas. A esta clase la llamaremos fórmulas:

  1. function formulas() {
  2. ...
  3. }

El primer método de esta clase será el que nos calcule el área de un círculo en Javascript.

  1. function formulas() {
  2.  
  3. /* Área de un círculo */
  4. this.areaCirculo = function (radio) {
  5. ...
  6. }
  7.  
  8. }

Como vemos hemos creado un método areaCirculo que recibe como parámetro el radio que nos servirá para la formula.

Este método se va a apoyar en la clase Math para obtener el valor de π y las potencias. En primer lugar mediante la constante PI de la clase Math obtenemos el valor de π

  1. Math.PI;

Y en segundo el método .pow() de la clase Math nos permitirá elevar un número a una potencia.

  1. Math.pow(numero,potencia);

De esta forma nuestro método para calcular el área de un círculo en Javascript nos quedará de la siguiente forma:

  1. function formulas() {
  2.  
  3. /* Área de un círculo */
  4. this.areaCirculo = function (radio) {
  5. return Math.PI * Math.pow(radio,2);
  6. }
  7.  
  8. }

Ya podremos llamar a este método desde cualquier código Javascript de la siguiente manera:

  1. var f = new formulas();
  2. console.log ("El área de un círculo de radio 2 es " + f.areaCirculo(2));