Archivo de la categoría ‘HTML’

Aprender hacer expresiones regulares para quitar los tags de un texto en php

Jueves, 19 de Noviembre de 2009

Para eliminar los tags de un texto, ya sea en php o javascript o cualquier otro lenguaje, vamos a utiizar expresiones regulares.

la ideal para tags es:  .<[^>]+>.

Para aprender a como funcionan las expresiones regulares, podemos utilizar un simuladro muy bueno, que nos permite probar “in the fly”, en tiempo real. Si la expressión regular es válida o hace lo que queremos.

Para ello te deja poner un texto donde reconocer y la expressión.

El sitio es:  regexpal.com

dedicado a luis.

Técnica CSS sprite sin background

Jueves, 6 de Agosto de 2009

Sprite es una técnica que nos permite agrupar muchas imágenes bajo una misma, y luego separarlas mediante CSS. Con dicha técnica conseguimos aligerar el peso de la página web y las peticiones que realizamos.

Hasta ahora utilizábamos las propiedades background-image y bakground-position colocando la imagen como fondo de un contenedor. Con este método se consiguen efectos muy logrados de substitución de imágenes sin precarga javascript, para hovers en los links de un menú, por ejemplo.

Nosotros hemos querido ir mas allá y tener una imagen con todos los elementos gráficos de la página web (hover, cabeceras, logos, bordes redondeados de tablas, etc... ) y 'recortar' parcialmente dicha imagen para mostrar sólo una parte dentro de la página. El tiempo de carga utilizando esta técnica se reduce drásticamente. La suma de las imágenes por separado daría un tamaño mayor que el de la imagen agrupándolas todas y, sobretodo, el realizar una sola petición para descargar todo el contenido gráfico de la web reduce muchísimo dicho tiempo.

Vamos a utilizar esta imagen:

Programación web

Control+Z Web technology

Para mostrar el efecto, vamos a suponer que necesitamos utilizar por separado el logo por un lado y el teléfono y el mail por otro. Aquí está el código:

CSS:
  1. body{font-family: verdana,arial,helvetica,sans-serif;font-size:.8em;color:#5f5f5f;margin:50px;}
  2. p{margin-top:50px;}
  3. /*Estilos genericos del sprite*/
  4. .sprite{ display:block;overflow:hidden;position: relative; }
  5. .spriteImg{ position: absoluteborder:none; }
  6.  
  7. /*Medidas y coordenadas especificas del elemento 1*/
  8. .logoContenedor { width: 305px; height: 95px; }
  9. .logoImg { top:-5px;left:-50px;}
  10.  
  11. /*Rollhover*/
  12. /*a.logoContenedor:hover .logoImg{top:-10px;left:-50px;}*/
  13.  
  14. /*Medidas y coordenadas especificas del elemento 2*/
  15. .infoContenedor { width: 200px; height: 50px; }
  16. .infoImg { top:-95px;left:-100px;}

HTML:
  1. Aquí necesito un enlace con el logo:
  2.  
  3. <a class="sprite logoContenedor" href="http://www.controlzeta.net">
  4. <img class="spriteImg logoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  5. </a>
  6.  
  7. Aquí usaremos el teléfono y el email:
  8.  
  9. <a class="sprite infoContenedor" href="http://www.controlzeta.net">
  10. <img class="spriteImg infoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  11. </a>

El ejemplo (y por tanto el código) lo tenéis aquí: http://controlzeta.net/Tutoriales/Sprite/sin-background.php

La explicación técnica es simple.

Necesitamos un contenedor para cada imagen (en este caso un <a> con display:block, podría ser un div u otra elemento) que nos delimite las medidas que tendrá el recorte de la imagen mostrada. Este contenedor debe tener la propiedad "overflow:hidden;" para que no se nos muestre el trozo de imagen que no queremos ver.

Dentro del contendor, insertamos el tag <img> con el src la imagen en cuestión y, importante, las medidas completas de la imagen original. Si no las introducimos, se nos escalará la imagen para adaptarse al contenedor. Además, debemos posicionar la imagen con los atributos css top y left, para "empezar" a mostrar la imagen desde la coordenada que nos interese.

Llevamos tiempo utilizando esta técnica pero en la variante background-image. En algunas ocasiones la hemos usado para reducir el tiempo de carga, pero implicaba problemas semánticos (un logo nunca puede ser una imagen de fondo) y de posicionamiento (una imagen de fondo no puede tener alt o title). Esta nueva técnica solventa los problemas mencionados, por lo que podremos extender el concepto a toda la web, consiguiendo agrupar tantas imágenes como queramos.

Fuente: google.com No porque lo hayamos buscado, que también, sino porque, si os fijáis, google utiliza esta imagen:

google.com

google.com

Curioso, ¿no?

Multibox, solución a problema con scrollbars

Martes, 14 de Abril de 2009

Nos hemos encontrado con un problema al utilizar la libreria Multibox para la carga de imagenes y el scrollbar horizontal.

Resulta que cuando incluyes alguna imagen con multibox, en esa sección de la web aparece el scrollbar(barra desplazamiento) horizontal en el navegador y realmente molesta a un diseño de página.

Solución al problema? En una línea(aprox L.40) del fichero Overlay.js pone lo siguiente:

'frameborder': 1,

Pues bien, ponle valor 0 y el scrollbar desaparecerá.

Acceso denegado en el objeto window.opener del editor wysiwyg

Jueves, 22 de Enero de 2009

Tenemos este error: Acceso denegado en el objeto window.opener

Casualmente me da un probela de privilegios al intentar acceder desde una ventana pop-up del selector de colores del editor wysiwyg. Para ver que pasaba abrí el java script wysiwyg.js

y tocar la urls:

JAVASCRIPT:
  1. /* ---------------------------------------------------------------------- *\
  2. Global Variables: Set global variables such as images directory,
  3. WYSIWYG Height, Width, and CSS Directory.
  4. \* ---------------------------------------------------------------------- */
  5.  
  6. // Images Directory
  7. imagesDir = "http://www.tudominio.com/carpeta1/openwysiwyg/icons/";
  8.  
  9. // CSS Directory
  10. cssDir = "http://www.tudominio.com/carpeta1/openwysiwyg/styles/";
  11.  
  12. // Popups Directory
  13. popupsDir = "http://www.tudominio.com/carpeta1/openwysiwyg/popups/";

Lo importante es saber que que windows opener solo puede tener acceso a ventanas abiertas del mismo dominio y que un mismo dominio diferencia entre

http://www.tudominio.com a http://tudominio.com

Asi en mi caso el problema era poner las urls sin las www. y entrar a la página con www. El problema reside en que si lo quires areglar para los dos casos es necesario hacer un javascrip que detecte el dominio para pegarlo en el codigo.

resumiendo ojo con que tu dominio entre esas urls y el de la pagina sean exactamente el mismo.

slaudos.

Internet Explorer no puede abrir el sitio web … Operación anulada

Jueves, 22 de Enero de 2009

La página carga entera, se ven las imagenes todo bien. pero justo al terminar de cargar la página me aperece un mensaje pop-up dende internet explore me dice que no puede abrir el sitio web  que anúla la opreación y al darle al botón de aceptar me deja la pagina en blanco. Me redirecciona a una página vacía:

Internet Explorer no puede mostrar la página web

Causas más probables:

  • No está conectado a Internet.
  • Hay un problema con el sitio web.
  • Es posible que la dirección no se haya escrito correctamente.

Puede intentar lo siguiente:

Diagnosticar problemas de conexión

Más información Más información

La página funciona correctamente en otros navegadores.  Pero en internet explorer no.

Es curioso y investigando un poco en mi caso el error está en introducir javascript que recorre los nodos del documento DOM. Así cuando internet explorer aún no ha cerradola estrecutura de un nodo acaba saliendo este error.

La solución es:

Añadir los javascript justo despues de cerrar todos los tags, antes del </body> asi internet explorer acaba cargando la página.

DOMPDF - Problemas con el salto de línea

Miércoles, 26 de Noviembre de 2008

¿Qué es DOMPDF?

dompdf es una librería que permite convertir HTML a PDF, desarrollada en PHP5, leerá hojas de estilo externas, estilos en etiquetas y soporta la mayoría de los atributos HTML.

El tratamiento de PDF se hace mediante PDFLib, por lo que es necesaria la extension PDFLib de PECL, la cual mejora el rendimiento y reduce el gasto de memoria.

Admite la mayoría de las propiedades y selectores CSS2.1 y los atributos HTML 4.0. Además permite tablas complejas, imágenes PNG, GIF y JPEG, y enlaces, entre otras cosas.

Aún faltan algunos detalles como listas ordenadas, posicionamiento absoluto y relativo, y cuando el fichero tiene demasiado tamaño se toma un tiempo excesivo en generar el PDF.

dompdf

Problema

Quiero concatenar dos salidas de pagina html en un solo PDF.

ob_start();

//aquí el contenido de la página 1

$buffer1 = ob_get_contents();

//aquí el contenido de la página 2

$buffer2 = ob_get_contents();

ob_end_clean();

El problema que me he encontrado es que no hace un auto-salto de linea al detectar la etiqueta <html> ni nada por el estilo, además que da errores al concatenar dos documentos cuando el primero esta 'cerrado'(</html>).

Primero de todo, borramos el </body> y el </html> de la primera salida de contenidos (sino salta error y no genera el pdf) y en su lugar ponemos:

<div style="page-break-after: always;"></div>

¿Que es page-break-after/page-break-before?

page-break-after y page-break-before son propiedades de estilos CSS que se aplican a la hora de imprimir páginas web en la impresora, para forzar saltos de página después o antes de ciertos elementos.

Ahora ya podemos generar un documento PDF a partir de los PDF que queramos por separado, ya que solventamos el lio que se hace el dompdf con '</html> y posteriormente <html>' y ademas cuando acaba un documento, deja el espacio de la hoja que resta, y continua en la siguiente.

$dompdf = new DOMPDF();
$dompdf->load_html($buffer1.$buffer2);
$dompdf->render();
$dompdf->stream("Pdf/temporales/verfactura.pdf",array("Attachment" => 1));

como poner una imagen como botón de submit de un formulario html sin javascript

Viernes, 29 de Agosto de 2008

Para poner una imagen como botón en un formulario, tan solo será necesario definir un tag html "input" con propiedad "type" como "image". Así no será necesario usar javascript, y será estandard para todos los navegadores. Este deberá estar dentro de la estructura html del formulario y automáticamente enviará el formulario html pulsando sobre el o aciendo intro en cualquier caja del formulario.

ejemplo:

HTML:
  1. <form action="urldestino.php"> <!-- caja de texto-->
  2.  
  3. <input name="cajaTexto" type="text" />
  4. <!-- caja de texto-->
  5. <!-- botón de submit con imagen -->
  6.  
  7. <input title="boton comprar" alt=" conton comprar " src="rutaImagen/Imagen-boton-Submit.jpg" type="image" />
  8.  
  9. </form>

Este sistema es el mejor sistema para poner un boton con imagen en un submit de formulario. Aunque el tipo del input no sea submit, el tipo "image" tambien envia los datos del formulario a la url de action.

Este sistema hace mas usables las páginas, porque despues el javascript si no lo pones correctamente provoca que te vayas a explorer o a firefox y no funcione el envio del formulario. Además de que con el javascript, cuando haces intro en una caja de formulario no se enviará a no ser que haya un input type image o input type submit.


Odio las paginas que hacen esto mismo con una imagen y un javascript en el elemento onClick que ejecuta el evento Submit() del formulario.