Todas las entradas de: Javier Iglesias

Acerca de Javier Iglesias

Desarrollador de aplicaciones informáticas, diseñador Web y SEO

Ajustar background image con css

Es posible ajustar background image con css 3 gracias a la propiedad background-size.

El problema que existe con la propiedad background-image de css es que la resolución de la imagen no se adapta al tamaño de la capa y por tanto tampoco de cualquier otro elemento heredando el problema de las diversas resoluciones de pantalla para todos los tipos de dispositivos.

La propiedad background-size pretende solucionar este problema. Como gran parte de las propiedades de css3 cada navegador usa su propia etiqueta para aplicarlo en su renderizado.


.capa_imagen_ajustada

{

background-image: url('img/fondo.jpg');

-moz-background-size: 100% 100%; /*Firefox 3.6*/

-o-background-size: 100% 100%; /*opera*/

-webkit-background-size: 100% 100%; /*Safari*/

background-size: 100% 100%; /*estandar css3*/

-moz-border-image: url('img/fondo.jpg') 0; /*Firefox 3.5*/

}

Bancos de imagenes gratuitos

En este post iré actualizando aquellas webs que sirvan como bancos de imagenes gratuitos.

  • Unsplash, es una web con fotografías de una altísima calidad. En esta web no busques iconos o algo por el estilo ya que son fotografías tomadas por profesionales de la imagen.
  • Foter, web con  un poco de todo. Incorpora un buscador que a veces no sirve ya que no encuentras lo que necesitas. Imagenes de buena, mediana y mala calidad.

Iré metiendo más según vaya probando por internet.. por favor si conoces alguno que sea interesante no dudes en dejar tu comentario.

Gracias.

Opacidad con css

En este post explicaremos las dos maneras de dar transparencia u opacidad con css.

La manera a utilizar la opacidad dependerá de cómo quieres que se comporten los elementos secundarios. Los elementos secundarios que se encuentren anidados dentro un elemento padre pueden heredar o no esa opacidad.

  • Heredar transparencia a elementos secundarios:

#parent

{

opacity: .5;
-moz-opacity: .5;
filter:alpha(opacity=5);

}

  • No heredar la opacidad a elementos secundarios:

#parent

{

background:rgba(0,0,10,0.5);

}

Ajustar una capa a la altura de la pantalla con css

Para ajustar una capa a la altura de la pantalla con css es necesario especificar lo primero las alturas a las etiquetas html y body del documento. Y después ajustarle a la capa que queremos establecer el alto.


<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        Make this division 100% height.
      </p>
    </div>
  </body>
</html> 

Scroll lento a secciones de una página mediante enlaces

Quizá ya conozcamos que si estamos en una página que tiene distintas secciones se puede ir a través de un menú o enlaces.

...
<div id="seccion_1">contenido 1</div>
<div id="seccion_2">contenido 2</div>
...
<a href="#seccion_1">ir a sección 1</a>
<a href="#seccion_2">ir a sección 2</a>
...

La navegación a estos elementos o capas es instantánea. Con jQuery podemos establecer la velocidad con la que se producirá la navegación haciendo un efecto de transición que en muchas ocasiones es visualmente más atractivo.

Lo primero que haremos es importarnos, si no la tenemos ya, nuestra librería de jQuery.

Después para cada elemento que queramos el efecto de animación usaremos este código:

$('a[href=#seccion_1]').click(function (event)
{
event.stopPropagation();
var Position = jQuery('[id="seccion_1"]').offset().top;
jQuery('html, body').animate({ scrollTop: Position }, 1100);
return false;
});

Donde pone 1100 se refiere al tiempo en milisegundos que estará realizando la animación.

Con este valor podemos establecer un scroll lento a secciones de una página.

Globalización en Master Pages

Esta entrada tratará sobre cómo incluir la globalización en Master Pages en asp.net de manera independiente. En el ejemplo utilizaremos código C#.

3 pasos:

Establecer la cultura en el Global.asax

Utilizaremos cookies para guardar el valor de la currentculture en el manejador BeginRequest.


protected void Application_BeginRequest(object sender, EventArgs e)
{
HttpCookie cookie = Request.Cookies["CultureInfo"];

if (cookie != null && cookie.Value != null)
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo(cookie.Value);
Thread.CurrentThread.CurrentCulture = new CultureInfo(cookie.Value);
}
else
{
Thread.CurrentThread.CurrentUICulture = new CultureInfo("es-ES");
Thread.CurrentThread.CurrentCulture = new CultureInfo("es-ES");
}
}

Este código lee la información del actual culture y lo establece en la cookie, si la cookie no está establecida entonces pone la cultura por defecto es-ES.

Usar un desplegable para cambiar la cultura en el MasterPage

En nuestro ejemplo usaremos un dropdownlist para cambiar la cultura:


<asp:DropDownList ID="ddlLanguage" runat="server"
OnSelectedIndexChanged="ddlLanguage_SelectedIndexChanged"
AutoPostBack="true">
<asp:ListItem Text="<%$ Resources:Resource, users_Spanish %>" Value="es-ES" />
<asp:ListItem Text="<%$ Resources:Resource, users_French %>" Value="fr-FR" />
</asp:DropDownList>

Manejaremos el evento SelectedIndexChanged en el codebehind:


protected void ddlLanguage_SelectedIndexChanged(object sender, EventArgs e)
{
//Establecemos la cookie que será usada en el Global.asax
HttpCookie cookie = new HttpCookie("CultureInfo");
cookie.Value = ddlLanguage.SelectedValue;
Response.Cookies.Add(cookie);

//Establecemos la cultura en el currentthread y refrescamos la página.
//Global asax se encargará del siguiente trabajo.
Thread.CurrentThread.CurrentCulture =
new CultureInfo(ddlLanguage.SelectedValue);
Thread.CurrentThread.CurrentUICulture =
new CultureInfo(ddlLanguage.SelectedValue);
Server.Transfer(Request.Path);
}

En este paso establecemos el valor de la nueva cultura y volvemos a recargar la página mediante el comando Server.Transfer.

Mostrar la cultura actual seleccionada en el dropdownlist en el MasterPage

En este punto solamente queda mostrar cual es la cultura actual seleccionada. Lo haremos con el siguiente código:


protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ddlLanguage.SelectedValue = Thread.CurrentThread.CurrentCulture.Name;
}
}