domingo, 3 de junio de 2012

Como ajustar texto dinámico en div

Programando en javascript me he visto en la obligación de ajustar un texto que se generaba dinámicamente dentro de un div de tamaño fijo. El problema de hacer esto es que si generas el texto directamente dentro del div (una vez que el javascript de la página ha cargado) éste puede llegar a sobresalir o ser mucho más pequeño que el div según la propiedad font-size de css que le demos al texto, ya que el texto se ha cargado después de cargar el div contendor.

Mi solución es llamar a una función en javascript cuando se cargue el texto dinámico donde, al introducir el texto y el tamaño del div, la propiedad font-size dependa del tamaño de dicho div.

Para ello se crea una capa, la cual no ha de ser visible al usuario, con propiedades absolute, top: -500px; left:-500px; la razón por la cual se crea con esas propiedades es porque, como he dicho antes, no puede ser visible pero sí que debe estar visible para el documento ya que habrá que leer sus propiedades, si en vez de hacerlo así creáramos una capa en display: none; no se podría leer su tamaño debido a que está oculta.
Nótese que se trabaja con jquery el cual habrá que incluir en la página.

En el código se entiende mejor:


function sizetext (texto,w,h) {
//la capa #pretext la hacemos visible
$("#pretext").css("display", "block");
//le damos el ancho que queramos que ocupe el texto
$("#pretext").css("width", w);
//generamos nuestro texto dentro de la capa
$("#pretext").html(texto);
//hacemos un for desde tamaño de letra 30 ya que, en mi caso
//el div no será tan grande y el texto tan pequeño para
//tener una letra más grande que 30px
for (i=30;i>0;i--) {
//añadimos en la propiedad font-size el tamaño de la variable "i"
$("#pretext").css("font-size", i);
//sacamos ancho y alto del nuevo div generado
pw = $("#pretext").width();
ph = $("#pretext").height();
//como en la quinta línea ya le dimos el ancho al cual
//se tendría que ajustar, solo queda comprobar el alto
if (ph <= h) {
//yo hago un alert pero bien podría ser un return i;
//para devolver el tamaño de la letra
    alert(i);
//salimos del bucle for
    break;
}
}
//para evitar posibles errores en css ocultamos la capa
//ya que solo nos sirve para determinar el tamaño
$("#pretext").css("display", "none");
}
//llamamos a la función...
sizetext(texto, tamaño_div_ancho, tamaño_div_alto);

Ahora solo queda incluir dentro del body el div:

<div id="pretext" style="position:absolute; z-index:0; top: -500px; height: -500px; display: none;"></div>


Cualquier duda o sugerencia será bien recibida en los comentarios.

jueves, 24 de mayo de 2012

Como sacar todas las Urls de las imágenes de cualquier documento html

 /** ***********************************
 *                                     *
 * Función para sacar Urls de imágenes *
 *                                     *
 **************************************/
  function imgurl($url){
    //$url ha de tener código html, en el caso de que quieras abrir una página se utiliza $url = file($url);
    //buscamos la etiqueta <img> con la siguiente expresión regular
 if(preg_match_all('/<img.*?src=(\'|")((http|https|ftp|\/)\s*)([^\s]*)(\'|")/', $url, $resultado, PREG_SET_ORDER)){
      //creamos una variable y la declaramos vacia
   $addimg = '';
      //itineramos los resultados
      foreach ($resultado as $sresultado){
    //volvemos a hacer una expresión regular, en este caso con preg_replace para quitar todo lo innecesario
        $addimg2 = preg_replace('/<img.*?src=(\'|")/i', '', $sresultado[0]);   
        $addimg .= preg_replace('/".*?/i', '', $addimg2).'<br>';     
   }
      //puesto que no me interesa el último caracter de addimg ya que es una "," lo elimino con substr 
      $addimg = substr ($addimg, 0, -1);
      return $addimg;
 }
  }

Trabajar con expresiones regulares puede llegar a ser difícil, pero con un poco de estudio se resuelve rápido. En esta función, lo que más problemas puede dar, es obviar lo que haya entre <img y src=, como atributos width, height, class, alt... Con la expresión (.*?) obviamos cualquier elemento que se repita 0 o más veces en la expresión entre img y src. Para más información: preg_match_all  y preg_replace

Os recomiendo que os leáis el siguiente tutorial que lo explica "for dummies":

Manual completo y sencillo de Expresiones Regulares en PHP

jueves, 17 de mayo de 2012

Del porqué WordPress me defraudó

En mi segundo artículo sobre plataformas de blogs quiero analizar WordPress. Al contrario de lo que hice con Tumblr, no voy a extenderme tanto.



WordPress es la plataforma más completa creada hasta ahora. La cantidad de módulos, addons, plantillas, es realmente grande, tiene una inmensa comunidad de desarrolladores detrás de ella y además su descarga es gratuita.

Poco más decir queda, es la mejor plataforma de blogs, pero solamente si éste es instalado en tu propio servidor. Si quieres que tu blog se aloje dentro de WordPress te van a cobrar por todo, mi sorpresa fue que, tras instalar un tema gratuito, al querer modificar su CSS cobraban 1$. Veo estupendo el que cobren, es una empresa, deben facturar, de hecho cobran una minucia por lo mucho que te ofrecen, pero yo quería un blog gratuito. Nunca digas nunca, tal vez algún día pagaré, pero ahora mismo no necesitaba los servicios de WordPress y más teniendo los de Blogger, que por cierto será mi último post de esta trilogía.




Trabajo con APIs

API, Aprenderse la documentación, Programar en base a ello e Imaginar que funciona..."

Función de Tumblr

Tumblr es para chistes"

 * Definición de la función de Tumblr por parte de mi amigo Copy

miércoles, 16 de mayo de 2012

Del porqué Tumblr me supo a poco

Reconozcamolo, hacer las cosas bien cuesta y más cuando se es tiquismiquis. Tras el intento de mi nueva publicación "ChocoCode" he probado diferentes plataformas de creación de blogs: Tumblr, Wordpress y Blogger, para encontrar una plataforma ideal para mi, Tumblr no fue esa plataforma.


Tumblr fue mi primera experiencia con este blog. Es sencillo, intuitivo, rápido, gratis... y la capa social que incluye es increíble: seguir, reblogear, comentar...
Pero no todo son halagos para esta plataforma, en el aspecto técnico está falto, es "demasiado" simple. No existen widgets ni addons, tampoco muchos temas gratuitos, cierto es que si se tiene nociones de programación web, se puede editar el 100% tanto del HTML, CSS y JavaScript, pero resulta incomodo tener que construirte tu propia programación para tener el blog totalmente funcional.

Además de todo esto, tiene aspectos poco limados, ejemplo de ello son:

  • No dispone de subida de imágenes.
  • Las ventanas estilo popup en la edición de post resultan molestas.
  • El editor de texto no funciona correctamente y además es demasiado simple.
  • Pocas plantillas gratuitas.
  • Poco desarrollo por parte de la comunidad.

Con todo esto no quiero decir que Tumblr sea una mala de plataforma, sino todo lo contrario, es una espectacular plataforma de creación de blogs, pero para usuarios no experimentados que quiera aprovecharse de su gran capa social, a mi se me quedó pequeña debido a que no supo suplir mis necesidades.

Como abrir WampServ para que cualquiera pueda conectarse a tu ip





He visto muchos post sobre el tema, algunos con demasiados aspectos técnicos, otros con muy pocos y otros que, simplemente, no hacen lo que yo quiero, "abrir WampServ para que cualquiera pueda conectarse a tu ip".

El siguiente mensaje es el que se visualiza cuando alguien no puedo conectarse a nuestro pc.

         Forbiden
         You don't have permission to access

Mi solución consta solo de tres sencillos pasos:
  1. Abrir con el block de notas el archivo httpd.conf ubicado en wamp/bin/apache/apachex.x.xx/conf, siendo x.x.xx la versión instalada en el propio ordenador.
  2. Se sustituyen todos los "Deny from all" por "Allow from all".
  3. Abrimos en nuestro router el puerto 80 TCP
¡Por fin, acabas de crear tu propio servidor Apache abierto en internet desde tu propio pc! ¿Y ahora? para que alguien pueda conectarse a tu servidor sol ha de poner tu ip en la barra de direcciones de tu su navegador.
En no-ip encontraréis soluciones para la sustitución de vuestra ip por un nombre de dominio personalizado.