Programación

Slide content sin JavaScript

Mar 19th

Posted by miguelsumaran in Programación

No comments

Navegando por la nube encontré un Slide Content, que funciona sin necesidad JavaScript, esto es posible gracias a Css y Html.

Para realizar este Slide Content, se debe usar la propiedad CSS, overflow, el cual es soportado por navegadores como: Internet explorer, Mozilla, Opera, Chrome y Safari.

El código Html esta compuesto por uls y divs, que hacen posible que Slide Content funcione:

HTML:
  1. <div id="content-slider">
  2. <ul id="content-slider-inside">
  3.     <li id="one">1</li>
  4.     <li id="two">2</li>
  5.     <li id="three">3</li>
  6.     <li id="four">4</li>
  7.     <li id="five">5</li>
  8. </ul>
  9. </div>
  10. <ul id="navigation">
  11.     <li><a href="#one">1</a></li>
  12.     <li><a href="#two">2</a></li>
  13.     <li><a href="#three">3</a></li>
  14.     <li><a href="#four">4</a></li>
  15.     <li><a href="#five">5</a></li>
  16. </ul>

Y este es el código CSS necesario para hacer funcionar este Slide content

CSS:
  1. #content-slider {
  2. width: 650px;
  3. overflow: hidden;
  4. height: 300px;
  5. }
  6.  
  7. #content-slider-inside {
  8. list-style: none;
  9. height: 320px;   // these 3 lines
  10. overflow: scroll;   // help Opera
  11. overflow-y: hidden; // behave
  12. }
  13.  
  14. #content-slider-inside li {
  15. width: 650px;
  16. height: 300px;
  17. }

Más información | Ejemplo

Contador al estilo Twitter con Jquery

Mar 17th

Posted by miguelsumaran in Programación

No comments

Como realizar tu contador de caracteres al estilo Twitter, para implementarlo, utilice JQuery un framework de Javascript, muy conocido, el plugin Jquery Limit y CSS para realizar el estilo que tiene este contador en Twitter.

Como todo plugin jQuery debemos cargar los ficheros Javascript necesarios.

HTML:
  1. <script src="lib/jquery-1.4.2.min.js" type="text/javascript"></script>
  2. <script src="lib/jquery.limit-1.2.js" type="text/javascript"></script>
  3. <link rel="stylesheet" type="text/css" href="css/twitter.limit.css" />

la implementación con el plugin: Jquery Limit, es súper sencilla, solo basta incluir el siguiente código dentro del body de la pagina:

PHP:
  1. <script type="text/javascript">
  2. $(document).ready( function() {
  3.         $('#myTextarea').limit('140','#charsLeft');
  4. });
  5. </script>

Donde 140 es el numero de caracteres máximo, #charsLeft es el tag html donde irá el contador de caracteres y #myTextarea es el nombre del textarea donde se aplicara el conteo.

Ejemplo para verlo funcionando.

,

Como crear un acortador de enlaces

Mar 15th

Posted by miguelsumaran in Programación

1 comment

Para programar un acortador de enlaces, usaremos PHP y su función base_convert.

base_convert ( string $number , int $abase , int $debase ).-  La función base_convert retorna un string del número convertido a la base indicada en "abase". La base original del número introducido se especifica con el parámetro "debase".

Ambas bases deben encontrarse entre los números 2 y 36, inclusive. A partir del 10 se comienza con la representación por letras a-z (como en el caso de números hexadecimales: a=10,b=11 ... f=15).

Esto quiere decir como se muestra en el siguiente código, un valor de 1000 nos retornara un string "rs"

PHP:
  1. $id = 1000;
  2. echo base_convert($id, 10, 36);

Ahora para convertir "rs" a 1000 deberás cambiar el orden abase a debase como muestra el siguiente código:

PHP:
  1. $id = "rs";
  2. echo base_convert($id,36,10);

Ahora para crear tu sistema de enlaces cortos, solo debes guardar el enlace en una DB como MySQL o Postgresql al cual lo asocias un id numérico y este id lo conviertes usando base_convert creando un enlace como este.

http://tuweb/rs

Y luego el valor "rs" lo conviertes con base_convert para que te retorne el id que tiene asociado un enlace en DB y listo ya tienes tu propio sistema de acortador de enlaces.