Archivo para ‘Navegadores Web’ Categoria

Fundamentos de Diseño Web

20 de Febrero de 2011

Al igual que los diseños en papel, los Diseños Web deben ser simples y claros

El espacio y los espacios en blanco

Intente aprovechar el máximo espacio, haga que se expanda o contraiga para adaptarse a la ventana del navegador.

Mantenga la resolución de pantalla en mente. Aunque la mayoría de los usuarios se han alejado de una resolución de 800×600, mantenga esto en mente cuando se esté diseñando. Que un usuario todo lo que vea pueda ser un logo en su monitor no es un buen servicio.

Utilice el color para definir los espacios. Si desea tener una página con un ancho específico, céntrese en la pantalla del navegador, haga que el color de fondo de la página sea un color diferente. Esto ayudará a la página para cambiar el tamaño de los diferentes navegadores.

Gráficos

Es fácil dejarse llevar por una gran cantidad de imágenes y animaciones, pero pueden hacer una página muy difícil de leer. Cuando esté pensando en el diseño, recuerde que las imágenes son una parte importante del diseño, no sólo ideas posteriores.

Ancho de texto

Piense en el ancho de texto. Esto es a menudo llamado el “análisis de longitud”, y se refiere a cómo las palabras que se muestran en una sola línea. La mayoría de las personas pueden leer cómodamente cerca de 7 a 11 palabras en una línea. Más líneas, y el texto sería difícil de leer, líneas más cortas provocarían desarticulación y distracción.

El centrado de texto no es aconsejable, suele ser difícil aplicarlo bien y generalmente difícil de leer.

¿Es la paleta de colores web del navegador realmente necesaria?

31 de Julio de 2010

¿Qué es una paleta de colores Web?
Uso de la paleta de colores del navegador es una opción segura que necesitamos cuando estamos creando una página Web o una imagen Web. Es especialmente importante que sepamos cuáles son las consecuencias de no usarla.

Por ejemplo, podríamos utilizar el color #dddddd para el fondo de una tabla. En el monitor probablemente se vmostraría como un gris claro neutro y agradable. Pero cuando lo viéramos en el monitor de un amigo, podría parecer muy diferente. Dependiendo de cómo interpretase su monitor el color podría parecer gris o podría verse verde o de algún otro color.

Esto se debe a que #dddddd no es un color con explorador seguro. Los colores seguros para el navegador son los 216 colores que se pueden ver en el PC de 8-bits y en los monitores de Macintosh y tienen el mismo aspecto, o casi el mismo. Si utilizamos la paleta de colores seguros para el navegador al menos sabremos que en todas las máquinas se verán iguales.

¿Qué es el tramado?
Cuando un monitor se encuentra con un color que no puede mostrar de forma nativa, trata de igualar de la mejor manera posible. Los monitores muestran elementos como puntos diminutos en la pantalla, y los colores nativos se muestran con todos los puntos del el mismo color. Aparece un color interpolado con algunos puntos como un color, otros puntos como otro color, y así sucesivamente para intentar igualar el color solicitado.

Hoy en día la mayoría de ordenadores vendidos se venden con monitores y tarjetas de video que pueden soportar millones de colores. Sin embargo, en muchos de estos sistemas el valor predeterminado es de 640×480 píxeles en la pantalla y 256 colores. Muchas personas no saben que pueden cambiar esta configuración, y mucho menos saben cómo hacerlo.

Los colores que funcionan bien en la mayoría de los navegadores
Si usas colores los que aparecen en esta página, tu página web se verá igual en los monitores que pueden mostrar 256 colores o más, en las plataformas Macintosh y PC.

colores_seguros

Accelerando Firefox desfragmentando su base de datos

1 de Septiembre de 2009

Parece que aún hay necesidades y funciones que no están del todo cubiertas por los puglins existentes para Firefox, ya que hoy nos hemos enterado de que existe un plugin para desfragmentar la base de datos (SQLite) de nuestro Firefox y así hacer que funcione más rapido.

La extensión en concreto se llama Vacuum Places Improved y es compatible en versiones de Firefox 3.5 y superiores. En realidad la extensión optimiza la carga del historial y los marcadores, así, al teclear una dirección en la barra de direcciónes lo hará (supuestamente) más rapido.

Según los autores también mejora el tiempo de inicio de Firefox.

La extesión además se puede configurar para realizar desfragmentaciones automáticas cada cierto numuero de inicios de Firefox o programar recordatorios también cada cierto número de inicios.

Sin duda vamos a probarlo y veremos que tal.

Lo que trae el nuevo Firefox 3.5

25 de Junio de 2009

Tras publicar la última RC (Release Candidate) de Firefox 3.5, Mike Beltzner, Director de Desarrollo de Firefox presenta este vídeo que describre lo nuevo en la versión 3.5:

Resumiendo:

  • Mayor velocidad de navegación, Firefox 3.5 será la versión más rapida creada por Firefox.
  • La privacidad ante todo: Firefox 3.5 traerá el popularmente conocido “modo porno” que no deja rastro de tus andadas por la red ya que borrará todos los elementos “sensibles” de la sesión.
  • El historial podrá ser eliminado basado en tiempo, es decir, borrar solo lo que hace 24h qué visitaste o 1 semana…
  • El ¡deshacer cerrar ventana!
  • Podremos ver los vídeos en línea sin ningún complemento “extra” gracias al soporte HTML5.
  • Firefox 3.5 incorpora un “geolocalizador” (se puede desactivar) incorporado que permitirá a los sitios Web detectar de forma exacta el lugar desde donde procede la visita.

Fuente: Mozilla.com

Redondear bordes en Firefox

21 de Abril de 2009

Seguramente muchos ya lo sepan, pero la forma más sencilla de redondear un borde vía CSS es usando las propiedades siguientes:

    -moz-border-radius-bottomleft:5px;
    -moz-border-radius-bottomright:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-topright:5px;

Con las propiedades anteriores aplicadas, por ejemplo, a una capa, obtenemos lo siguiente:

Pero recordad, este truco no funciona en Internet Explorer, por lo que los usuarios de este navegador verán las esquinas cuadradas ignorando estas propiedades especificas de Firefox, aún así va bien conocer estas posibilidades.

Select con imágenes de fondo para internet explorer

26 de Enero de 2009

Hace un par de semanas escribimos un post, de como poner imágenes de fondo en un Select, pero el método que se explicó se podía aplicar solamente a las combos para firefox. Entonces se nos comentó como se podría hacer para dar soporte a internet explorer. Para conseguir aplicar esto para este navegador, necesitaremos la ayuda del javascript y una de sus librerias, en concreto una llamada jDrop (aquí adjuntamos el enlace de la página): http://doctorfilter.com/jDrop/. Aquí nos podremos descargar un paquete con todo lo necesario en un .zip comprimido.

A continuación  debrmos incluir los js i los css correspondientes para poder aplicar esta libreria, en este caso incluiriamos estos casos en el head:

<script type=”text/javascript” src=”js/jquery-1.2.6.pack.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-personalized-1.5.1.packed.js”></script>
<script type=”text/javascript” src=”js/jquery.dimensions.js”></script>

<script type=”text/javascript” src=”js/jquery.jdrop.js”></script>
<link rel=”stylesheet” media=”screen” type =”text/css” href=”css/screen.css” >
<script type=”text/javascript”>
$(document).ready(function(){
$(”select”).jdrop()
$(”.dragDiv”).css({top:’100px’}).draggable()
})
</script>

Seguidamente al select le debemos poner la clase class=”comboJDrop”. Finalmente en cada una de las options del select se debe poner un atributo html en el que adjuntaremos la ruta de la imagen que pertenece a la opción, pero teniendo en cuenta que debe estar incuida enel tag img de HTML. Ver ejemplo:

<select name=”prova” style=”width:150px;” class=”comboJDrop” >
<option value=”1″ html=”<img src=’styles/imgs/checked.gif’ />”>Opción 1</option>
<option value=”2″ html=”<img src=’styles/imgs/calendar.png’ />”>Opción 2</option>
<option value=”3″  html=”<img src=’styles/imgs/page_go.png’ />” >Opción 3</option>
<option value=”4″  html=”<img src=’styles/imgs/anterior.gif’ />”>Opción 4</option>
</select>

Finalmente mostraremos el resultado que se puede obtener en internet explorer para esta combo:

Web developer para firefox

24 de Diciembre de 2008

Hoy en dia los desarrolladores puden contar con diversas herramientas para facilitar un poco la tarea del desarrollo de una página web. En este caso firefox nos ofrece un add-on llamado web- developer. Este add-on adjunta al navegadorun menú con muchas opciones que nos permitirán provar cosas en nuestros desarrollos. Este menú se divide en las siguientes opciones principales Disable, Cookies, CSS, Forms, images, Information, Miscellaneous, Outline, Resize, Tools, View Source, Options.

  • Disable: Te permite deshabilitar varias de las posibles cosas que tenemos en en navegador: como el javascript, la caché, etc…
  • Cookies: En esta opcion te permite borrar las variables de sesión, o deshabilitarlas, etc…
  • CSS: Otra opción que nos permitirá deshabilitar los estilos o poderlos ver. También nos dara la opción de deshabilitar los estilos linkados en alguna hoja, o solo los que estan en el mismo html, etc…
  • Forms: Permite visualizar los formularios, pasarlos de get a post o de post a get, borrar las selecicones del radio button, etc..
  • Images:Nos permitirá ver las dimensiones de las imágenes, los atributos,  las rutas, esconder imagenes, esconder imagenes de fondo, etc…
  • Information: Aquí tendremos una lista largade opciones para poder visualizar cosas de la web en la que estamos trabajando.
  • Miscellaneous: se puede editar el HTML, usar una regla para poder medirt elementos etc… Una herramienta bastante útil para el desarrolllo Web.
  • Outline: permite visualizar las celdas de las tablas, frames,enlaces,  entre otrasopciones que es mejor ir averiguando a medida que se va desarrollando.
  • Resize: Opción para poder redimensionar a las dimensiones del navegador según los requerimientos del desarrollo que debe sobortar diferentes resoluciones,
  • Tools: Nos permite hacer las validaciones en la W3C de la pagina web que estamos visitando.
  • View Source: Aquí nos permitirá ver el codigo fuente o el código generado de la Web.
  • Options: Son opciones generales de la herramienta.

Bueno aquí tenéis un pequeño resumen de las opciones que podéis encontrar en esta aplicación, pero tal vez la mejor opción es comprobarlo. Espero que este sea un buen regalo para las Navidades.

Compatibilidad de navegadores Web

17 de Diciembre de 2008

La creación de un sitio web que se visita constantemente a través de múltiples plataformas y múltiples navegadores no siempre es tan fácil como nos gustaría. Es seguro decir que la mayoría de los diseñadores pasan la mayor parte de su tiempo en la construcción de sus sitios web sobre una plataforma dada, pero los sitios web deben tener la compatibilidad de los navegadores web. No está de mas decir que al terminar debemos dar un vistazo a nuestra creación en diferentes navegadores y diferentes plataformas.

Es posible que algunos se conformen en verlo lo suficientemente bien en Windows XP o con Internet Explorer, pero ¿realmente queremos correr el riesgo de una mala experiencia web para millones y millones de potenciales visitantes? La compatibilidad del navegador web es crucial, consideremos esta posibilidad.

Una reciente estadística informó que el 12% de los usuarios de Internet eran los usuarios de Macintosh. Ignorar este hecho es como la creación de un catálogo que sólo puede considerarse óptima por uno en ocho de sus customers.Furthermore, no todos los usuarios de Windows están utilizando Windows 98. Windows 95 sigue siendo ampliamente utilizado, y Windows 2000 y NT representan un porcentaje significativo de visitantes.

Sería negligente hacer caso omiso de la pequeña, pero creciente contingencia de los usuarios de Linux. Aunque pequeño en número en este momento, la popularidad del sistema operativo crece día a día.
Netscape sigue gozando de un fuerte seguimiento de usuarios de numeración en los millones, y Lotus Notes está siendo utilizado por numerosas empresas como la “norma” del navegador y la aplicación de correo electrónico.

Luego, por supuesto, está AOL que es básicamente un motor basado en Internet Explorer 6.0 . Teniendo en cuenta el gran número de usuarios de AOL, este navegador no debe ser pasado por alto. Si un sitio no se ve bien en AOL, entonces corremos el riesgo de perder un enorme porcentaje de visitantes potenciales.

Debe quedar clara la necesidad de compatibilidad de los navegadores web. Por lo tanto, la comprensión de unos pocos y muy básicos de técnicas sencillas para ayudar a mantener las páginas buscando sus mejoras en la mayoría de los lugares es también un deber.

Firefox X-Ray

19 de Noviembre de 2008

Firefox es el navegador por excelencia hoy en día. Aunque la mayoria de los usuarios usa el internet explorer de microsoft eso no significa que sea el mejor navegador del mercado. Firefox interpreta con más inteligencia el código html, hasta cuando se encuentran errores en este código, dependiendo de qué tipo de fallo, lo puede resolver él mismo para mostrar la página web correctamente.
El tema es que firefox tiene un add-on denominado X-Ray que permite ver las páginas web como si las veamos con rayos X sin la necesidad de ver el código fuente. Eso quiere decir que se pueden ver los tags de la página web con sólo visualizarla como un usuario culaquiera. Esto permite desarrollar mejor o poder aprender de otros desarrollos ajenos con el fín de mejorar las propias habilidades de maquetación.
Aquí os dejo un pequeño ejemplo de como se puede ver una web instalando fácilmente este add-on.

Cae el Google Chrome

11 de Noviembre de 2008

Ha caido el uso del Google Chrome, desde su lanzamiento. Sin embargo, se mantiene en un 0,74% de cuota de mercado, aun por debajo de Opera, despues de llegar a alcanzar hasta un 1,16% de cutoa en Abril de este año, según los datos estadísticos de Market Share.

Estadística del uso del Google Chrome

Estadística del uso del Google Chrome

Quizá una de las posibles razones que expliquen esta carrera a desaparecer es el hecho de que quizá no causó todo el impacto que habría pronosticado Google que tendría. Porque, aunque se trate de un navegador novedoso y potente, todas las Webs de hoy en día ya funcionan con soporte para el IE7, IE6 y FF3 y FF2, y añadir este otro navegador en la ecuación significa añadir otra cifra de peso en el coste de las maquetaciones. Lo que no vale la pena resolver, al tratarse de un navegador con tan poca cuota de mercado. Produciendo en consecuencia que un usuario se encuentre en más de una ocasión con páginas Web que no son compatibles con el navegador. Provocando su desuoso por incompatibilidad y así… El pez que se muerde la cola.

Probablemente, hubiera sido un puntazo que el grado de compatibilidad (a nivel de DOM y soporte Javascript) hubiese sido bastante similar al del Firefox 3, para luego, al competir por la misma cuota que el FF y derratorlo, cambiar, imponer sus reglas. Probablemente estaríamos hablando de cifras de descarga que aumentan progresivamente y no que se desploman. Pero el Firefox es Gecko y el Google es Webkit, como el Safari. Dos mundos diferentes.

La incompatibilidad del Internet Explorer es una gran arma con la que juega Microsoft. El coste de los desarrollos de las Webs 2.0 se ve afectado en gran medida por satisfacer este punto en particular en cuanto queremos ofrecer una compatibilidad que abarque el no menos importante 19,97% de cuota que representa el Firefox en el mercado.