Esconder texto que no cabe a lo ancho css …

Simular “text-overflow:ellipsis” para textos largos ( multilínea )

En CSS, si utilizamos las siguientes propiedades:

 
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
 
Podemos conseguir que un texto se corte a la anchura que queramos y se inserten automáticamente unos puntos suspensivos al final.
 

El murciel…

 

Leer más

¿Como puedo convertir o crear mi sitio web en responsive web design?

Desde la llegada de HTML5 y CSS3, el Responsive Design o “Diseño Sensible” es una nueva técnica que se está empezando a utilizar cada vez más. Consiste básicamente en adaptar los diseños de las páginas web en función del tamaño de la ventana del navegador, cambiando según esta aumenta o disminuye y sin necesidad de disponer varias versiones de CSS o HTML.

Podéis ver un pequeño ejemplo si redimensionáis el blog o si lo véis en un iPad; o podéis flipar si comprobáis hasta que punto se puede utilizar esta técnica entrando a Smashing Magazine o en mi página personal.

El ejemplo que os voy a proponer es muy simple y solo cuenta con 3 pasos: Añadir un meta tag al header, añadir compatibilidad con navegadores antiguos y realizar modificaciones en el CSS.

 

1. Añadir el meta tag para la escala

En primer lugar debemos añadir el siguiente código entre las etiquetas “<head>” de nuestra página.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Básicamente lo que hace esta etiqueta es ajustar el ancho al ancho del dispositivo (sea un navegador o un dispositivo móvil) e indicar que no se debe hacer zoom inicialmente.

2. Añadir compatibilidad con navegadores antiguos

Como las versiones antiguas de Internet Explorer no soportan el meta “viewport”, debemos añadir un javascript que realice su función.

Leer más

Mostrar Leyenda / Aviso al cerrar pagina Web (javascript)

Les dejare un ejemplo de un codigo en JavaScript que servira para mostrar un advertencia o aviso al abandonar pagina web, de esa manera se puede evitar que algun usuario se salga por accidente de una pagina o pierda sus datos y claro tambien podra tener otras utilidades, espero les sirva.

 

Este codigo insertalo en el HEAD de tu Pagina:

<script language='javascript'>
closingvar =true
window.onbeforeunload = exitcheck;
function exitcheck()

///control de cerrar la ventana///
 if(closingvar == true)
  { exitcheck = false
    return "Aqui reemplaza esto por tu leyenda o aviso a mostrar ";
  }
}
</script> 
Leer más

Técnicas para mantener estado entre páginas con PHP

1. Alcance de variables en aplicaciones de escritorio y en aplicaciones web

En el presente artículo se aborda la cuestión del ámbito (o alcance) de variables en aplicaciones web, los inconvenientes que los protocolos sin estado introducen en su desarrollo, y las posibles formas de resolver estos problemas utilizando PHP.

Comencemos con un poco de historia (muy simplificada) para que el problema quede claro. Hace unos años era posible crear una aplicación de escritorio, inicializar variables en el módulo principal del programa, y luego consultar y modificar estas variables desde cualquier procedimiento de la aplicación. En algunos casos a lo sumo era necesario declarar a estas variables como “globales” para que se encuentren siempre en alcance. Por cierto, esta facilidad para el uso de variables perennes condujo al desarrollo de programas con alto acoplamiento y problemas de mantenimiento por lo que rápidamente fueron desaconsejadas, pero esa ya es otra historia.

En ese ambiente de desarrollo aún sin llegar a utilizar variables globales se podían utilizar variables locales que sin ser tan persistentes tenían un ciclo de vida de mediano alcance. En realidad unos de los problemas con que el programador se encontraba era el de cómo eliminar de memoria aquellas variables que se habían dejado de usar y consumían innecesariamente recursos; y es en parte por esto que aparecen en algunos lenguajes los “recolectores de basura” (garbage collector).

Lo destacable es que en ese contexto el programador podía decidir cúal sería el ciclo de vida de una variable sin que esto le implicara un esfuerzo adicional de codificación, y más bien tenía que cuidarse de que las variables no queden “vivas” luego de que habían dejado de ser utilizadas.

Leer más

CSS específico para Internet Explorer

#1 Comentarios Condicionales para IE

Probablemente este sea el recurso mas utilizado para solucionar bugs de Internet Explorer para versiones especificas (IE 6, IE 7, IE 8). Lo que hace es detectar que versión de IE esta usando nuestro visitante, dependiendo de que versión sea le decimos que cargue determinado estilo.

Aquí te dejamos el ejemplo de como se usa para las diferentes versiones de Internet Explorer.

  • <!--[if IE 8]> = IE 8
  • <!--[if lt IE 8]> = IE 7 y versiones anteriores
  • <!--[if gte IE 8]> = IE 8 en adelante
<!--[if IE 8]>
<style type="text/css">
	/* css para IE 8 */
</style>
<![endif]-->

<!--[if lt IE 8]>
	<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->

Nota: Fueron creados por Microsoft para su navegador y sólo son soportados por éste.

#2 Reglas de CSS especificas para Internet Explorer (IE CSS hacks)

Otra opción es declarar reglas de CSS que solo puedan ser leídas por Explorer.

Por ejemplo, agregando un asterisco (*) antes de la propiedad del CSS afectará solo al IE7 y agregando el guión bajo (_) afectara solamente al IE6. Sin embargo, estos métodos no son recomendados porque no cumple con los estándares de validación del CSS.

Leer más