Tutoriales y Opiniones

Mostrando entradas con la etiqueta Desarrollo web. Mostrar todas las entradas

Como incluir tablas en tus post de blogger

Tutorial HTML: Incluir tablas en tus post de blogger

En este artículo voy a explicar la manera de incluir tablas en tus post de blogger ya que en ocasiones nos encontramos con la necesidad de incluirlas en nuestros artículos y observamos que el editor de blogger no dispone de ninguna herramienta que nos permita insertar tablas.

Para incluir tablas en los post de blogger tendremos que recurrir al editor HTML y definir nosotros mismos la estructura de la tabla en html. A continuación os pongo el código html necesario para definir una tabla en vuestros post de blogger:


<table border="1" style="float: left; margin-right: 2%; width: 100%;">

<tbody>
<tr>
<td>Columna 1</td>

<td>Columna 2</td>

<td>Columna 2</td>
</tr>

</tbody>

</table>

Y el resultado de aplicar el código anterior es el siguiente:

Columna 1

Columna 2

Explicación: Elementos utilizados en la creación de la tabla.

table: Instrucción que indica que se va a definir una tabla en HTML.
style: Instrucción que se utiliza para definir el estilo de la tabla.
float: Indica donde se alinea la tabla, en nuestro caso a la izquierda de su contenedor.
margin-right: Margen derecho de la tabla, en nuestro ejemplo el 2% del contenedor de la tabla.
width: Ancho que ocupará la tabla, en nuestro ejemplo el 100% del contenedor de la misma.
tbody: Indica que se va a definir el contenido del cuerpo de la tabla.
tr: Se utiliza para definir el contenido de una fila de la tabla
td: Instrucción para definir celdas en una tabla

A través del ejemplo anterior podéis personalizar las tablas que incluyáis en vuestros post de blogger ya que con cambiar los valores de las propiedades que he descrito anteriormente observaréis como va cambiando la tabla.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Añadir gadget últimos tweets en Blogger
Cómo poner una imagen de fondo en Blogger
Cómo crear un sitemap para Blogger
Widget nube etiquetas para Blogger
Añadir gadget redes sociales en Blogger

Como incluir código en tus post de blogger

Tutorial blogger: Como añadir código a tus post

En ocasiones queremos incluir código fuente en los artículos de nuestro blogger para mostrar a nuestros lectores un ejemplo práctico con el que resolver sus dudas.

Algunos bloggers utilizan el tag blockquote para escribir el código, recordemos que blockquote marca una sección de nuestra página o artículo como si fuera una referencia de otra fuente, estéticamente aplica una sangría y poco más.

La opción que yo suelo utilizar para añadir código a mis post de blogger es la siguiente:

Edito el html de la plantilla que utilizo en mi blog.
Desde el menú principal de blogger seleccionar la opción Plantilla y a continuación pinchar sobre Edición de HTML
Esto abrirá un cuadro de diálogo donde deberemos seleccionar la opción Continuar.
En este momento veremos el código HTML de la plantilla que estemos utilizando en nuestro blog.
Ahora buscaremos el siguiente texto: ]]></b:skin>
Recordad que para buscar rápidamente podemos utilizar la combinación de teclas Ctrl + F
Justo antes del texto del punto número 5 pegaremos el siguiente código:

code {background:#EEEEEE; font-family: Trebuchet MS; display:block; border:1px solid #999999; padding:10px;}

Explicación: Con el código anterior estamos creando la code y asignándole unas determinadas características como por ejemplo:

background: Color del fondo en hexadecimal.
fonf-family: Tipo de letra
display: Especifica cómo se mostrará el html resultante.
border: ancho, tipo y color del borde que rodeará al texto.
padding: espacio entre el texto y su contenedor.

¿Cómo se utiliza?: Muy sencillo, para incluir código en un post de blogger deberás seguir los siguientes pasos:

Pulsar el botón HTML del editor.
Escribir en código que quieres mostrar en tu post entre las siguientes tags <code></code>

Si te ha gustado el artículo sobre cómo corregir error "Apache shutdown unexpectedly" al iniciar Xampp te pido un favor: Haz clic sobre uno de los anuncios, con esto me ayudarás a mantener el Blog y pueda escribir más artículos.

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Mostrar últimos tweets de un usuario con PHP

Tutorial PHP: Mostrar últimos tweets de un usuario

A continuación mostramos una funcion PHP que devuelve los últimos tweets de un determinado usuario. El funcionamiento de la función PHP que muestra los últimos tweets de un usuario es muy sencillo, simplemente hay que pasarle dos parámetros:

El nombre de la cuenta de twitter. Por ejemplo masetru
El número de tweets que queremos mostrar. Por ejemplo mostrar los últimos 10 tweets de @masetru

A continuación os mostramos el código de la función php que muestra los últimos tweets de un determinado usuario:

<?php

      $json = file_get_contents("http://twitter.com/status/user_timeline/masetru.json?count=10", true);

      $decode = json_decode($json, true);

      print_r($decode);

    ?>

MOSTRAR ÚLTIMOS TWEETS CON PHP: AÑADIDO 04/06/2013


function getTweets($tweetsToDisplay, $user_id) { 



$twitterrequest = 'http://api.twitter.com/1/statuses/user_timeline.json?user_id=' . $user_id . '&include_rts=true&count=' . $tweetsToDisplay; 

$twitterci = curl_init($twitterrequest); 

curl_setopt($twitterci, CURLOPT_RETURNTRANSFER, TRUE); 

$twitterinput = curl_exec($twitterci); 

curl_close($twitterci); 

return ($twitterinput); 



} 



$user_id = '99999999';

$var = json_decode(getTweets(1, $user_id));

$txt = $var[0]->text;

$txt = preg_replace('%(https?://)[^\s]*%', '$1...', $txt);

echo $txt;

ARTÍCULOS QUE TE PUEDEN INTERESAR

Cómo guardar la configuración de una red wifi en Windows 7
Cómo abrir puertos windows 7
Atajos de teclado de Windows
Windows 7 no muestra la fecha

Calcular distancia entre dos puntos con PHP

Tutorial PHP: Calcular distancia entre dos puntos

A través de la siguiente función PHP podremos obtener la distancia en kilómetros, millas o millas náuticas entre dos puntos.

Generar clave aleatoria en php

Tutorial PHP: Como generar contraseñas aleatorias

En ocasiones nos será muy útil poder disponer de un método de generación automática de contraseñas, en mi caso en particular he necesitado generar contraseñas de manera aleatoria cuando he abordado proyectos web donde se requería que el usuario se diera de alta.

El procedimiento que sigo para generar contraseñas aleatorias es el siguiente:

El futuro usuario registra su mail en una web o aplicación móvil.
El sistema manda al usuario un correo electrónico con la contraseña que hemos generado de manera aleatoria y un link a la página de logueo.
El usuario ingresa en el sistema y cambia su contraseña aleatoria por la que él quiera.

A continuación os muestro el código php que genera claves aleatorias:

Detectar idioma del visitante de tu web

Tutorial PHP: Como detectar el idioma del visitante de una web

En ocasiones nos puede interesar conocer el idioma del visitante de una web, imaginad que tenemos una web donde queremos mostrar el contenido en el idioma del visitante.

La idea es muy sencilla: Si conocemos el código ISO del país del visitante podemos seleccionar el idioma del contenido de nuestra web.

En primer lugar recogemos el idioma del visitante de la siguiente manera:

$idioma = ($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);

En segundo lugar, conociendo el código ISO del país, redireccionamos a nuestro visitante a la página que se nos antoje:

$idioma = ($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
if($idioma=='es'){
("Location: es.php");
}elseif($idioma=='fr'){
("Location: fr.php");
}else{
("Location: en.php");
}

En el ejemplo anterior podemos observar que redirigimos al visitante a la página es.php si el código ISO pertenece a 'España', lo redirigimos a fr.php si pertenece a 'Francia' y si el visitante es de otro país lo redirigimos a en.php