Evitar parpadeo de color blanco mientras carga un marco interno en una página HTML

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Evitar-parpadeo-de-color-blanco-mientras-carga-un-marco-interno-en-una-pagina-HTML.aspx

ParpapdeoHoy un truco rápido pero interesante.

Si tienes una página HTML en la que debes incluir un marco interno que muestra recursos de otras páginas lo normal es que simplemente insertes el iframe y punto. Por ejemplo

<iframe src=“/modulo/OtraPagina.aspxstyle=”width:100%;height:30px;”>

Lo malo de hacer esto es que el contenido del marco lógicamente comienza a cargar más tarde que el de la propia página, y por regla general observamos durante una fracción de segundo (o puede que más si la carga es lenta) un espacio en blanco en donde va a estar situado el nuevo contenido. Si el fondo de la página principal no es blanco se notará un montón y producirá una especie de “parpadeo” que se notará, puede resultar molesto y además queda poco profesional.

Un primer intento que podemos hacer para solucionarlo es cambiar el color del fondo del marco para que coincida con el fondo de la página. Pero no funcionará porque lo que tenemos dentro del marco es un nuevo documento HTML que por defecto tiene el fondo blanco.

¿Alguna solución mejor?

Una opción mejor es combinar la carga del contenido con un evento que señala el fin de ésta. La idea es sencilla y también es muy fácil de implementar.

Lo que se hace es hacer que el iframe esté oculto, detectamos cuándo ha terminado de cargar el contenido, y lo mostramos mediante JavaScript. La forma de implementarla es súper-sencilla ya que basta con incluir un estilo “inline” y un atributo con una línea de JavaScript, así:

<iframe src="/Modulo/OtraPagina.aspx" style="visibility:hidden;"
onload="this.style.visibility='visible';">

De este modo el iframe permanece oculto hasta que acaba de cargar y evitamos por completo el molesto parpadeo.

El único problema de usar esta técnica es que si algún usuario no tiene JavaScript habilitado (raro, raro, pero ocurre) no verá el iframe nunca. Sinceramente creo que podemos arriesgarnos 😉

¡Espero que te sea útil!

Si vas a compartir este post: por favor utiliza la URL original en JASoft: http://www.jasoft.org/Blog/post/Evitar-parpadeo-de-color-blanco-mientras-carga-un-marco-interno-en-una-pagina-HTML.aspx

Recuperar la vista de diseño y la vista partida para HTML en Visual Studio 2013

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Recuperar-la-vista-de-diseno-y-la-vista-partida-para-HTML-en-Visual-Studio-2013.aspx

Hasta ahora estábamos acostumbrados a que en Visual Studio pudiésemos editar páginas HTML usando un diseñador que nos permitía alternar entre tres vistas diferentes:

  • Design: edición visual de la página, pudiendo sacar partido a herramienta gráficas y facilitándonos la escritura de textos, creación de tablas, etc…
  • Source: edición directa de código fuente HTML, con ayuda “intellisense”, etc… pero nada visual.
  • Split: dividía el diseñador en dos zonas, mostrando en cada parte los dos modos anteriores, de modo que podíamos editar visualmente algo y ver los cambios reflejados en el código y viceversa.

VS2013_EditorHTML0

En Visual Studio 2013 sin embargo, la primera vez que editamos una página HTML nos damos cuenta de que esta característica ya no está disponible y sólo disponemos de la vista de código.

En Visual Studio 2013 han escrito de nuevo desde cero el editor de HTML, que no tiene nada que ver con el anterior aunque se parezcan en el modo “source”, y han dejado fuera estas funcionalidades imagino que por falta de tiempo (desconozco el motivo).

Lo cierto es que la complejidad de las páginas actuales, con HTML, CSS y JavaScript entrelazados, con partes reutilizables que se dispersan por nuestro proyecto, tanto en aplicaciones en aplicaciones ASP.NET MVC como en Single Page Applications, hace que al final escribamos muchos fragmentos diferentes, no siempre fáciles de relacionar y además el resultado conjunto cambia dinámicamente al ejecutar la aplicación. Por este motivo cada vez tiene menos sentido usar un diseñador gráfico y es más común escribir código directamente y probarlo en un navegador real. De hecho por eso tienen tanto éxito algunos editores de texto avanzados como Sublime Text, tan de moda últimamente.

Además, las facilidades que nos proporciona el nuevo editor para escribir código, sobre todo si instalamos las Visual Studio Web Essential Tools, hacen que muchos no echemos de menos en absoluto el antiguo editor.

Sin embargo si eres de los que realmente lo echan de menos y te gustaría volver a disponer de las tres vistas anteriores y poder editar tus páginas HTML de manera visual, estás de suerte pues es muy sencillo lograrlo.

La primera opción y menos “definitiva” es que, si el archivo que quieres editar pertenece a un proyecto de Visual Studio, puedes pulsar con el botón derecho sobre el mismo en el Explorador de Soluciones y elegir la opción de «Abrir con…». En el diálogo que aparece elige el editor de Web Forms:

VS2013_EditorHTML1
Click para aumentar

También tienes la posibilidad de cambiar el editor por defecto para las páginas HTML de modo que, en lugar de usar el nuevo, se utilice siempre el editor de Web Forms (páginas .aspx) y así puedas tener la edición visual y la vista partida de toda la vida.

Para ello vete a Herramientas·Opciones y dentro del apartado «Editor de texto·Extensión de arhivo» añade las extensiones «htm» y «html» eligiendo como editor el de Web Forms:

VS2013_EditorHTML2

¡Listo! A partir de ahora tendrás la experiencia de edición de siempre, aunque seguramente te perderás muchas de las mejoras de escritura de código “puro” que ofrece el nuevo editor.

Espero que te sea útil.

Si vas a compartir este post: por favor utiliza la URL original en JASoft: http://www.jasoft.org/Blog/post/Recuperar-la-vista-de-diseno-y-la-vista-partida-para-HTML-en-Visual-Studio-2013.aspx

Suplantación de usuarios en IIS y ASP.NET: un resumen detallado

Si vas a compartir este post: por favor utiliza la URL original en JASoft: http://www.jasoft.org/Blog/post/Suplantacion-de-usuarios-en-IIS-y-ASPNET-un-resumen-detallado.aspx

WindowsSecurityA la hora de desplegar en un entorno real de producción, para ponerlas a disposición de todo el mundo, las aplicaciones web creadas con ASP.NET se albergan en un servidor web. Por regla general éste será Internet Information Server (IIS), incluido en las versiones de servidor de Windows.

IIS no es más que otra aplicación que se ejecuta sobre el sistema operativo, por lo que es Windows el que se ocupa del nivel más bajo de la cadena de la seguridad.

Por ello conviene tener claro que la última palabra a la hora de conceder acceso a un recurso físico del sistema la tiene el propio sistema operativo, no IIS ni ASP.NET.

Contextos de seguridad

En Windows, cada proceso se ejecuta dentro de su propio contexto de seguridad. Cuando un proceso accede, por ejemplo al sistema de archivos NTFS, los permisos se le otorgan en función del contexto en el que se ejecute.

Normalmente si un proceso lanza otro subproceso éste se ejecutará bajo el mismo contexto de seguridad que el primero. Existen casos sin embargo en los que, por razones de seguridad, un proceso puede producir otros procesos que trabajen bajo condiciones de seguridad diferentes.

Esto es lo que ocurre con IIS. Éste trabaja bajo el contexto de seguridad del sistema, es decir, como si se tratase del usuario System, que tiene una capacidad muy amplia de acceder a los recursos del sistema (para algunas cosas incluso más que un administrador).

Sin embargo, por cuestiones de seguridad, cuando IIS ejecuta una aplicación ASP/ASP.NET, la inicia en un nuevo proceso bajo un contexto de seguridad diferente, efectuando lo que se denomina una suplantación de usuario.

De este modo si el código de servidor de una página (o alguno de los componentes que ésta emplee) intenta acceder al disco duro u otro recurso cualquiera del sistema, lo hará con los permisos que tendría el usuario al que está suplantando el proceso bajo el que se ejecuta, es decir, bajo el contexto de seguridad de dicho usuario.

Este párrafo anterior, aunque algo enrevesado, es fundamental para entender las implicaciones de seguridad en el sistema de archivos.

En la práctica lo que quiere decir es que, cuando IIS suplanta a un usuario la aplicación web se ejecutará con los mismos permisos que si dicho usuario se encontrase sentado frente al servidor utilizándolo físicamente. Este es el motivo por el que se deben vigilar mucho los permisos que se asignen a cada uno de los recursos que hay en el servidor.

ASP.NET nos permite controlar con mucho detalle qué usuario del sistema suplanta IIS en cada situación, cuando ponemos una aplicación web a ejecutarse en Internet.

Nota: El lugar más importante donde podemos controlar el usuario que se va a suplantar en el proceso de IIS es en la propiedad "Identidad" del grupo de aplicaciones asociado a nuestra aplicación web (dentro de la Consola de administración de IIS·Grupos de aplicaciones·Propiedades avanzadas.

Suplantación de usuarios en ASP.NET

La cuenta utilizada a la hora de ejecutar las páginas ASP.NET depende del modo de ejecución del grupo de aplicaciones asociado a la aplicación y de los ajustes establecidos en el archivo web.config de nuestra aplicación.

Existe un ajuste específico en el archivo de configuración cuya sintaxis es la siguiente:

<identity impersonate="true|false" userName="dominiousuario" password="clave"/> 

Gracias a ella es posible decidir exactamente bajo qué proceso se ejecutará nuestro código ASP.NET. Existen varios posibles casos según los valores que tome este atributo impersonate.

IMPORTANTE: Este ajuste solo se puede poner a "true" cuando el modo del pipeline de ASP.NET en el grupo de aplicaciones de IIS asociado a nuestra aplicación está en modo "clásico".

Suplantación de un usuario concreto

Si en el modo de integración clásico escribimos dentro de web.config lo siguiente:

<identity impersonate="true " userName="MiDominioMiUsuario" password="miclave"/> 

lo que conseguiremos es que los procesos de nuestra aplicación ASP.NET se ejecutarán suplantando a la cuenta especificada en los dos últimos atributos y disfrutarán de sus mismos permisos.

De este modo, si por ejemplo pusiésemos las credenciales de un administrador de la máquina, nuestra aplicación tendría los mismos permisos que tendría dicho administrador, pudiendo acceder a recursos muy protegidos del sistema.

Nota: evidentemente jamás deberemos hacer esto. Esta característica se utiliza para ejecutar la aplicación usando una cuenta concreta con unos permisos muy controlados y solamente en situaciones muy específicas que lo requieran. Por no mencionar que introducir las credenciales en texto plano en el archivo de configuración nunca es una buena idea. Si es preciso utilizarlo existe la posibilidad de guardar el nombre de usuario y la clave encriptados en el registro en lugar de ponerlos en  web.config. En general, yo escaparía de utilizar esta opción.

Suplantación del usuario actualmente autenticado en la aplicación

En este caso, activamos el atributo de suplantación de usuarios, pero sin especificar unas credenciales, así:

<identity impersonate="true"> 

Al hacer esto lo que conseguimos es que IIS ejecute la aplicación utilizando las credenciales del usuario actualmente autenticado en el sistema, generalmente mediante autenticación Windows. En caso de que no se use autenticación Windows, entonces se usará el usuario asignado en el grupo de aplicaciones.

Finalmente, si usamos la siguiente sintaxis:

<identity impersonate="false"> 

es equivalente a no poner nada y obtendremos el comportamiento por defecto, que es suplantar al usuario del grupo de aplicaciones.

Diagrama resumen

El siguiente diagrama ilustra mucho mejor los distintos valores que pueden tomar los diferentes usuarios que podemos consultar desde nuestro código en función del modo del pipeline de IIS, del modo de suplantación de usuarios establecido en el web.config y del modo autenticación especificado para la aplicación.

Es importante saber que el usuario que suplanta IIS es el que viene indicado por WindowsIdentity.getCurrent(). Si tenemos alguna duda sobre qué usuario se está usando, este es el que debemos comprobar.

El diagrama es el siguiente:

Suplantación usuarios IIS - ASPNET

(Pulsa para aumentar)

Puedes descargarlo también en PDF (220 KB) para verlo mejor.

Es muy importante tener en cuenta esto si tenemos conflictos a la hora de acceder a algún recurso, sobre todo un archivo en disco, ya que tendremos que tener en cuenta cuál es el usuario bajo el cual se está ejecutando nuestra aplicación para poder otorgar los permisos pertinentes.

¡Espero que te sea útil!

Cómo hacer con CSS que la parte central se expanda por completo para ocupar toda la página

Post original en JASoft.org: http://www.jasoft.org/Blog/post/Como-hacer-con-CSS-que-la-parte-central-se-expanda-por-completo-para-ocupar-toda-la-pagina.aspx

Este post viene a raíz de una pregunta que recibí hace unos días. La cuestión era similar a la siguiente:

Tengo una página que, básicamente, consta de  una cabecera, un cuerpo principal con contenido, y un pie de página.
En la parte central tengo necesidad de introducir una aplicación de foros que tengo que mostrar mediante un iframe.
Lo que me gustaría es que esa parte central ocupase siempre todo el espacio disponible entre la cabecera y el pie.
Si le pongo un 100% al div del contenido principal no me funciona y de hecho es bastante más grande que la altura
disponible.

¿Cómo puedo conseguir esto?

Es un caso muy típico de maquetación.

Lo ilustro mejor con una figura:

DivCentralExpandido

En este ejemplo lo que he hecho es poner una cabecera y un pie, y entre ambos ocupando todo el espacio disponible, mi blog embebido en un iframe.

Esta zona central debe adaptar su tamaño automáticamente y en tiempo real al espacio disponible incluso si cambiamos las dimensiones de la ventana.

¿Cómo lo conseguimos?

La manera clásica de conseguir algo como esto sería usando tablas, una estructura de este estilo:

   1: <table width="100%" height="100%" cellpadding="0" cellspacing="0">

   2: <tr>

   3:     <td>Cabecera</td>

   4: </tr>

   5: <tr height="100%">

   6:     <td><iframe height="100%" width="100%"></iframe></td>

   7: </tr>

   8: <tr>

   9:     <td>Pie</td>

  10: </tr>

  11: </table>

Con esto conseguiríamos la distribución deseada. La tabla ocupa todo el espacio disponible en la ventana con su ancho y alto al 100%, las filas superior e inferior ocupan lo que sea necesario para mostrar su contenido, y la fila del medio (que tiene una altura del 100% respecto a la tabla) crece hasta ocupar el espacio restante en vertical.

Sin embargo esta solución no es adecuada para las necesidades de las webs actuales. El motivo es que no deben usarse tablas ni otros elementos con el mero objetivo de definir la parte visual de una página. La web semántica y HTML5 promueven la separación completa del contenido y su representación visual, la cual dependerá de las reglas CSS que se definan y se apliquen sobre el contenido.

En el ejemplo de código anterior el único objetivo de introducir la tabla es el de definir la distribución que tendrá la página. Además se indican sus dimensiones con atributos, otra mala práctica y de hecho está obsoleta en HTML5. Además no se trata de una solución aconsejable desde el punto de vista de la accesibilidad de los contenidos, algo muy importante en muchas webs. Las tablas son únicamente para mostrar datos. Punto.

Lo que deberíamos tener es una distribución de contenidos como esta:

   1: <div id="contenido">

   2:     <div id="cabecera">

   3:         Cabecera

   4:     </div>

   5:     <div id="principal">

   6:         <iframe style="width:100%;height:100%;" src="http://www.jasoft.org/blog"></iframe>

   7:     </div>

   8:     <div id="pie">

   9:         Pie de página

  10:     </div>

  11: </div>

Es decir, tres simples divs para marcar cada zona y, si acaso, un div contenedor de toda la página.

También podríamos haber usado etiquetas semánticas de HTML5, pero lo cierto es que al final la mayor parte de los diseñadores web usarán divs en su día a día.

La mejor opción para conseguir lo que buscamos  es sacar partido a ciertos valores poco conocidos en general de la propiedad display de CSS3, soportados hoy en día por todos los navegadores (incluso por Internet Explorer a partir de la versión 7).

La propiedad CSS3 «display»

Los valores más conocidos de esta propiedad son «none» para ocultar elementos, «block» para mostrarlos como un elemento de bloque, e «inline» para que se muestre en línea.

CSS3 sin embargo introduce más de 10 valores adicionales a esta propiedad.

Los dos que nos interesan para nuestro problema concreto son «table» y «table-row».

Éstos y sus 7 valores «hermanos» (relacionados con lo mismo) surgen para poder usar las facilidades de las tablas sin necesidad de incluir marcado de tablas en el HTML, que es justo lo que queremos.

Para resolver este problema en concreto lo que tenemos que saber es que:

  • display:table hace que el elemento al que se le aplique el estilo se comporte como si fuera una tabla.
  • display:table-row hace que se comporte como la fila de una tabla, con lo que todo ello conlleva.

En mi curso de HTML(5) y CSS(3) en campusMVP se explican con detalle todos los valores y su funcionamiento un tanto peculiar, y también hay vídeos prácticos de maquetación de páginas usándolos (y con muchas otras técnicas de maquetación de páginas), pero para nuestro ejemplo nos llega con saber esto.

Así, lo único que tenemos que hacer es definir unas reglas CSS como las siguientes:

   1: html, body {

   2:     height:100%;

   3:     width:100%;

   4:     margin:0;

   5: }

   6:  

   7: #contenido {

   8:     height:100%;

   9:     width:100%;

  10:     display:table;

  11: }

  12:  

  13: #cabecera {

  14:     padding:5px;

  15:     font-size:70px;

  16:     background-color:blue;

  17:     color:white;

  18:     display:table-row;

  19: }

  20:  

  21: #pie {

  22:     padding:5px;

  23:     font-size:70px;

  24:     background-color:red;

  25:     color:white;

  26:     display:table-row;

  27: }

  28:  

  29: #principal {

  30:     padding:5px;

  31:     background-color:yellow;

  32:     height:100%;

  33:     width:100%;

  34:     display:table-row;

  35: }

Lo que he hecho es indicar que el div que contiene a todos los demás («contenido») se comporte como una tabla. Ahora, cada uno de los divs que contiene y que van uno tras otro, indicamos mediante display:table-row que se deben comportar como filas de una tabla. Además de eso es importante indicar que el div principal es el que va a tener una altura del 100%. En este caso se refiere al 100% dentro de su contenedor que se comporta como una tabla.

Esto es equivalente a lo que haríamos antiguamente con una tabla, pero la diferencia es muy sustancial ya que ahora tenemos perfectamente separado el contenido de su representación y podríamos variarlo a voluntad tocando únicamente el CSS.

En realidad ni siquiera es necesario utilizar el elemento contenedor e indicar que se comporte como una tabla. CSS3 detecta automáticamente los elementos «virtuales» que faltan en una tabla y los introduce por nosotros, así que incluso eliminando el contenedor funcionaría bien.

Con los valores CSS de display para emular tablas podemos conseguir cosas de otra manera muy complicadas de hacer, como lo que acabo de mostrar, pero también centrar elementos dentro de otros con propiedades directas (como text-align y vertical-align) y sin necesidad de subterfugios, tener alineaciones exactas de bloques sin necesidad de flotar ni de posicionarlos, etc… Esto nos proporciona grandes ventajas a la hora de maquetar, ya que no estamos a merced de las cosas extrañas que nos pueden hacer los elementos flotados o posicionados de manera absoluta. Se nos simplifica mucho en general crear la distribución de elementos que queramos.

En mi curso online de HTML(5) y CSS(3) de campusMVP. aprenderás infinidad de cosas más relacionadas con todo esto. Si quieres aprender de verdad sobre HTML y CSS y tenerme como tutor para contestar tus dudas empieza hoy mismo.

Puedes descargar el código de este ejemplo de aquí (ZIP, 566 bytes).

¡Espero que te sea útil!

Si vas a compartir este post: por favor utiliza la URL original en JASoft: http://www.jasoft.org/Blog/post/Como-hacer-con-CSS-que-la-parte-central-se-expanda-por-completo-para-ocupar-toda-la-pagina.aspx