4Webs - Recursos web » Diseño web

¿Qué necesita una buena página web?

admin — Sun, 25 Sep 2011 15:44:33 +0000

Una buena página web no solo es un buen diseño, una buena maquetación o una buena programación , debemos tener en cuenta otros factores que pueden determinar el éxito o el fracaso de nuestro proyecto en internet.

Navegación y consistencia.
Este punto debe ser el punto más importante de una página web, del menú dependerá que podamos encontrar productos, que conozcamos el objeto de una empresa o que podamos contactar con el webmaster.
Los menús que desarrollemos deberán ser lo suficientemente consistentes como para facilitar la navegación, diferenciar el color respecto al resto de la página, marcar la página en la que se encuentra, son algunos de los conceptos a tener en cuenta.
La estructura de la página es igual de importante que el menú, deberemos diseñar páginas web con una estructura clara a lo largo del sitio, un logotipo visible, gráficos y tipografías acordes con la identidad de la empresa o marca.
Contenido
Google lo dijo desde que apareció, “EL CONTENIDO ES EL REY”, y es lo que tenemos que tratar de realizar, hay que tratar de escribir contenido relevante y único. Para un usuario lo más importante que hay es que al buscar algo en Google aparezcan los resultados, pero más importante es que esas páginas contengan el resultado que el usuario busca.
Generar tráfico de calidad nos aportará visitas y los buscadores nos tendrán en cuenta como sitio relevante, posicionando la pagina web en los primeros puestos.
Encabezados.
Igual de importante es usar los encabezados y seguir una jerarquía. Recordar que los encabezados son desde el h1 hasta el h6, el h1 sería el titular único más importante de la página e iría descendiendo jerárquicamente conforme vaya bajando la importancia del titular.
Usabilidad
Hoy en día y cada vez más este punto se está considerando muy importante, hacer que el usuario tenga una navegación placentera y que no abandone nuestro sitio cuando se pierda debe ser unos de nuestros principales objetivos.
En general estudiar la usabilidad de una página web nos determinará problemas que pueden aparecer en la misma, como puedes ser reproducir archivos de audio o vídeo, obtener resultados correctos en las búsquedas, en definitiva consiste en probar todas y cada una de las funciones de la web para comprobar que el funcionamiento es correcto y no llegamos a puntos sin salida donde el usuario puede perderse.
Accesibilidad
La accesibilidad es mucho más que hacer que las personas ciegas puedan navegar por el sitio correctamente, ya que hay más grupos de personas que requieren de dispositivos especiales para poder tener una navegación por internet placentera.
Has probado a navegar tu página web a través de un dispositivo móvil, si tu página está realizada en flash habrás podido comprobar que no funciona, deberíamos haber pensado en ofrecer al usuario un contenido alternativo, ¿te has preocupado por ver tu web en diferentes ordenadores o dispositivos? , es probable que el tamaño de fuente sea demasiado pequeño o demasiado grande, o simplemente personas no ciegas pero que tienen una menor visión no son capaces de poder leer una fuente pequeña.

Usar fuentes diferentes en el diseño de páginas web

admin — Sat, 02 Apr 2011 20:22:28 +0000

Hasta ahora los diseños web han estadon definido siempre por las mismas fuentes, Arial, Helvetica, San comic, Times News Roman, Lucida, Tahoma, etc.

Hace unos años la cosa cambió y se ofrecieron varias alternativas:

sFIR (Scalable Inman Flash Replacement), reemplaza los textos por flash para su uso es necesario usar la librería jquery, el problema que no lo indexa google y si encima incluimos enlaces peor todavía.
No lo recomiendo.
Cufón, funciona con javascript, se introduce la fuente en la página de cufón y nos crea un javascript que es el que se encarga de reemplazar las fuentes, el problema es que solo es recomendable para pequeños trozos de texto, lo he usado poco pero siempre que lo he usado he tenido muchos problemas, si intentamos cambiar muchos textos la página web se relenteliza hasta que no carga correctamente.
No lo recomiendo

Ahora os enseñaré las dos técnicas que más usamos y que más eficientes son, eso si dejar claro que no conviene avusar de estas técnicas para textos muy amplios ya que al ser procesos no estándar pueden surgir problemas en la optimización de la página web.

Css-> Este proceso consiste en reemplazar los textos por imágenes ,pero dejando siempre de cara a los buscadores el texto y de cara al usuario las imágenes con los textos con las fuentes que queramos, incluso podríamos cambiar los textos por otras frases, una buena forma de conseguir más densidad de palabras.
Método recomendado.
Google Font API-> Otro de los métodos recomendados, relativamente nuevo ya que aparece en 2010. Google almacernará en sus servidores las diferentes fuentes que necesitemos usar, tan solo tendremos que vincular un css que se encarga de transformar las fuentes. Lo bueno de usar este método es totalmente compatible con todos los navegadores, incluido el obsoleto Internet explorer 6, la transferencia correrá de cargo de Google, el único problema que todavía hay pocas fuentes, en vez dejaros un listado completo de fuentes prefiero dejaros el enlace hay todas las fuentes que existen disponible.

Ahora ya conocéis las principales alternativas a las fuentes tradicionales que podréis aplicar a la hora de diseñar páginas web, aunque al ser métodos relativamente nuevos, en sitios en producción y con un alto tráfico, o sitios de comercio electrónico siempre recomendaré usar las fuentes predeterminadas.

Razones para crear un blog si tienes una tienda online.

admin — Sat, 26 Feb 2011 10:21:51 +0000

Disponer de un blog si eres una pequeña empresa puede ayudarte enormemente a conseguir aumentar tus ventas, pero debéis tener claro que el blog NO es una tienda online, y las ventas nunca se realizarán a través de este medio.
Una vez tenemos claro que un blog no te va a servir para vender directamente, la eficacia de tener un blog se encuentran en el medio (Internet) y en acciones a largo plazo. Realizar un blog suele ser bastante más economico que realizar el diseño web de una empresa, podriamos reducir costes aprovechando el diseño de la tienda online por lo que el presupuesto se podría reducir considerablemente, considero que es importante que el diseño guarde cierta similitud con la tienda online ya que se supone que es la misma empresa.
Pero lo que si es una realidad es que en la actualidad es más efectivo realizar campañas a través de redes sociales, campañas virales , campañas de mailings o blogs que realizarlo mediante el medio tradicional.

1.-Comunicación:
El blog permitirá a tus clientes y clientes potenciales que conozcan los productos que vendes y la actualidad de tu sector.
También lograrás una comunicación a través de los comentarios .
2.-Reputación de la marca
El blog lejos de vender nos conseguirá reputación de la marca a través de los contenidos y las relaciones con el entorno. Si los contenidos de la página web son de calidad y didácticos podría volverse un sitio de relevancia y considerar dicha empresa como “experta” del sector. Al ser un experto es posible que te llamen para realizar ponencias o talleres lo cual podría generar publicidad gratuita y nuevamente mayor reforzamiento de la marca.

3.- Posicionamiento
Con un blog podrás posicionar los contenidos siempre y cuando sean contenidos originales y no copiados. Google es el rey, si no apareces en los buscadores no existes, generando contenido regularmente conseguirás que los buscadores te identifiquen como un sitio relevante. A su vez es muy probables que si dispones de unos conocimientos mínimos puedas posicionarte por las palabras clave que necesites, o incluso haciendo reviews de las novedades llegar a posicionar cada uno de los productos que vendemos en nuestra tienda.

4.-Captación de clientes
Al hablar de temas relacionados con tu sector, recibirás muchas visitas de clientes potenciales, que aunque puede ser que no lleguen a convertirse darán a conocer tu empresa y siempre desde el punto de vista de experto.

5.-Ahorro de costes
Una vez el blog esté en funcionamiento y traiga suficientes visitas se podrían reducir los anuncios de Adwords o anuncios patrocinados en páginas. En caso que el blog reciba suficientes visitas podrás vender anuncios a otras empresas, o directamente a tus proveedores.

6.-Vender más
La suma de todos los puntos puede hacer que nuestra tienda online venda más por Internet.
Basicamente la formula a seguir sería:

VENDER MÁS POR INTERNET= POSICIONAMIENTO+ REPUTACIÓN+ CAPTACIÓN CLIENTES

Recordar que para tener un blog, no es meter 50 post el primer mes y después no hacerle caso en meses, hay que mentalizarse que el comienzo en Internet es lento, con un artículo semanal es suficiente, pero debe ser constante para que los buscadores identifiquen el sitio web como un sitio web en constante evolución y crecimiento.

Diseñar páginas web con css sprittes

admin — Sun, 19 Dec 2010 17:26:50 +0000

¿Que es CSS SPRITE? Css Sprite es una técnica de maquetación de páginas web en la que se reduce la carga de imágenes en la web, no es lo mismo cargar 10 imágenes de 10kb que 1 imagen de 100kb, aunque el peso en Kb es similar, el número de peticiones es de solo una, aquí radica el potencial de la técnica css sprite.

La principales ventajas de usar esta técnica son las siguientes:

Reducción de transferencia y recursos del servidor.
Mayor velocidad de la página web al realizar menos peticiones Http

Esta técnica aparece en los años 80 cuando se diseñaban los juegos en 2 dimensiones, en la actualidad se usan para realizar juegos para móviles debido a que necesitan ser muy livianos. Y desde hace unos años a irrumpido en el desarrollo web.

En los videojuegos la técnica consiste en crear en una secuencia con todas las imágenes necesarias para realizar una animación, en el caso de la web consistiría en incluir el mayor número de imágenes en un solo archivo, mediante cambios css en el background conseguiremos desplazar la posición de la misma para que se muestre unicamente la parte de imagen que necesitamos.

Un ejemplo muy gráfico sería Google, si realizamos una búsqueda y nos deplazamos al pie de página , en donde figuran los resultados y está la páginación si guardamos la imagen de fondo (botón derecho del raton sobre la G de Google), podremos ver que todas las imágenes que usa Google en su web , realmente es solo una.

El código básico para comprender la forma de diseñar una página web sería la siguiente. En una lista por ejemplo primero asignaremos la imagen y le daremos el tamaño que necesitamos.
#contenedor{
background-image: url(‘imagenes/imagensprite.png’) no-repeat;
height: 16px;width:16px;
display:block;
padding-left:5px;
}
Y a cada elemento individual le aplicariamos un desplazamiento del fondo para conseguir que se muestre exactamente el trozo que necesitamos:

#contenedor lista1{background-position:0px 0px; }
#contenedor lista2{background-position:-26px 0px;}
#contenedor lista3{background-position: -43px 0px ;}
#contenedor lista4 { background-position : -68px 0px ;}
#contenedor lista5 { background-position : -94px 0px ;}

Recursos automáticos de CSS Sprites:

Css Sprittes

Aprender a diseñar páginas web en HTML

admin — Tue, 14 Dec 2010 09:48:38 +0000

Hoy en día cualquier persona puede aprender a diseñar una página web estática, simplemente debe tener una mínimas nociones de HTML y un software para el efecto.

El resto es imaginación!!!

El HTML es el lenguaje principal con el que se desarrollan las páginas web. Mediante etiquetas podemos ir incrustando imágenes, negritas o cualquier estilo, así como ubicar los contenedores de imágenes o textos en determinadas posiciones de la página web. Una vez conocidos las principales “tags” de este lenguaje nos será muy fácil diseñar una página web, incluso podremos realizar páginas web con el bloc de notas, aunque para hacerlo facilmente con Dreamweaver.

Antiguamente los estilos de una página web se incluían en el mismo documento, entendemos por estilos, los colores y tamaños de las fuentes, los colores de fondo, tamaños de los contenedores, etc… a lo largo de estos años la web ha ido evolucionando hasta separar completamente el lenguaje HTML del de los de estilos.
Los estilos vienen vinculados en otro documento , que hoy en día se conoce como CSS. Con esto conseguimos que la web sea mucho más rápida , ya que una vez cargado el css se mantiene en la caché del navegador y conforme vayamos visitando el resto de páginas que componen el site , la css no se vuelve a cargar ,sino que lo coge de la caché.

Otro de los aspectos importantes a día de hoy, es que las tablas, más conocido como tableless, ha quedado totalmente en desuso y solamente se usa para tabular datos,. Las tablas son muy usadas por lo novatos por la gran facilidad para ubicarlas y manipularlas, aunque es un gran error ya que una vez conocido el poder de los “DIV” y las CSS se comprueba el verdadero potencial de combinar ambas técnicas. Por lo tanto recomiendo usar DIV + CSS, el código es más limpio, la web es más rápida y podemos posicionar todos los elementos donde queramos.

La web sique evolucionando, y el lenguaje HTML también , a día de hoy y con la recién salida del HTML5 y CSS3, la evolución nos obliga a estar siempre atentos a las novedades para poder implantarlos en nuestros diseños web, aunque debemos recordar que siempre tendremos el pero de la compatibilidad con los navegadores, si empleamos muchas de las novedades que van apareciendo , todos los navegadores antiguos tendrán el inconveniente que no sean compatibles y podrían generar fallos o malas visualizaciones en la página web.

Yo siempre recomiendo y realizo mis proyectos validados para Firefox, Internet Explorer 7 o superior, Safari y Chrome, como podéis ver no doy soporte a IE6, mi opinión personal es que las personas que usan navegadores tan antiguos no les importará visualizar la web con fallos ya que disponen de equipos totalmente obsoletos. Pese a lo que piensan algunos que se pierde una cantidad de usuarios, prefiero perder ese 4% de usuarios que tener que perder todas las ventajas gráficas que se consigue diseñando páginas web con leguajes más o menos actualizados.

CONOCIMIENTOS IMPRESCINDIBLES PARA DISEÑAR CON HTML:

Las etiquetas comienzan siempre por “<” y se cierran con un “>”. Para que guarde el estandar muchas de ellas se cerrarán con la barra invertida. Por ejemplo un párrafo comenzaría con “
” y se cerraría con “
”.
El título de la página, descripciones y carga de documentos externos siempre se introducen entre las etiquetas “HEAD”, con el fin que los buscadores omitan el contenido de los mismos.
En la etiqueta “BODY” se debe cargar el contenido.
Las imágenes se incrustan con la tag “

Ahora solo os queda coger el toro por los cuernos y comenzar a probar y experimentar por vosotros mismos. Una vez tengáis los conocimientos suficientes de HTML + CSS podréis pasar al siguiente nivel PHP + MYSQL, y una vez aprendido podéis pasar a……bla bla bla, por experiencia esto no se acaba, así que solo me queda deciros que disfrutéis y no desesperéis….

Tutoriales y consejo para diseñar páginas en HTML5

admin — Fri, 28 May 2010 22:19:38 +0000

El lanzamiento de HTML5 y CSS3 es inminente, por lo que debemos estar preparados para poder diseñar páginas web siguiendo la condiciones de este sistema. Deberemos recordar como siempre pasa en estos casos, que no todos los navegadores son compatibles con este lenguaje….

1-ESTRUCTURA:
En html5 la estructura de las páginas web deben seguir un esquema básico a la hora de hacer el diseño, un header para presentar la web donde se incluirá el menú, una zona de contenidos, una zona para elementos adicionales y la zona footer que será el pie de página. En principio el diseño sigue lo estandar aunque por la forma que quieren que sigamos como por ejemplo la sidebar , nos puede recordar a WordPress que a una página normal.

2-ELEMENTOS DE NAVEGACIÓN:
En html5 los menús deben realizarse medianta listas no ordenadas

3-CABECERA:
La cabecerá deberá incluir el logo a título de la página la cual debería ser un h1, seguido de un h2 con una breve descripción del contenido de la página web.

4-ELEMENTOS DE FECHA:
Cuando enviamos contenidos actualizados a la página web, por ejemplo noticias o post para un blog deberemos incluir una nueva etiqueta

5-FORMULARIOS:
Los elementos de un formulario que sean obligatorios debemos marcarlos como tales. .

6-MAQUETACIONES:
En CSS3 no está permitido el uso de tablas por lo que debemos aprender a usar los nuevos elementos.
Un elemento contenedor ( #content { display: table;} y los elemento que queremos hacer flotar que deberos darle la propiedad display: table-cell; para que se comporten como una tabla con td o como un div flotante.

7-SOMBRAS:
Podemos conseguir efectos de sombra con la nueva propiedad css3 que añade efecto de sombra a los elementos, por ejemplo para añadir una sombra con css3 deberemos usar la siguiente propiedas:
box-shadow: 5px 5px 10px #777;

Mi opinión personal es que para poder usar todos estos elementos debemos comprobar que seán compatibles en todos los navegadores, por lo que es posible que muchas de estas técnicas no podremos usarlas hasta que los usuarios actualicen completamente sus navegadores, por lo que aún queda mucho camino…..

Apple y Google juntos para lanzar HTML5

admin — Thu, 22 Apr 2010 21:59:25 +0000

A estas alturas no hace falta que os presente como hace las campañas de Marketing Apple, con su capitan Steve Jobs, un genio del Marketing, pues bien, ya tenemos rumor al orden del día:

Nadie utilizará Flash. El mundo se está pasando a HTML5

Esta fue la respuesta de Steve Jobs, cuando se le pregunto porque el Ipad no soportaba flash . Haciendo la presentación del Ipad algunas imágenes no se visualizaban y los videos o contenidos multimedia tampoco, en vez de preocuparse y poner mala cara ante dicha pregunta, el se rie, increible….
Así me quede yo también, vaya puta mierda, ya estamos igual que siempre con APPLE, como piensa que vamos a ver los videos, teniendo en cuenta que el programa de ADOBE se usa para ver el 75% de los videos online y que se encuentra casi en el 98% de los ordenadores?

Sus palabras le costaron sendas amenazas por parte de Adobe, que podría planear una demanda ante las autoridades, aunque la respuesta oficial de Adobe a dichos rumores es silencio total.

STEVE JOBS LO HA VUELTO A HACER

Pues sí lo ha vuelto a hacer, a conseguido atraer la atención de toda la industria, la mayoría de diseñadores web esta de acuerdo en que 2012 será la fecha en que paulatinamente flash dejara de usarse para dar paso a HTML5 . Todos los navegadores mayoritarios Firefox, Chrome, Safari y Opera han anunciado que en breve darán soporte, por el contrario Internet Explorer hasta su versión 9 no se espera que sea compatible.

Flash es el cáncer de Internet: propietario, cerrado y sin control para el programador
Isidro Gilabert, director técnico de Virtual Toys

LA REVOLUCIÓN, LAS VENTAJAS DEL HTML5

Apoyado por el consorcio W3C, junto con Mozilla y Apple en 2004 decidieron unirse para formar WHATWG, posteriormente Google se unió al grupo gracias a Ian Hickson.

La indexación en buscadores será mucho más sencilla.
Incluirán microdatos para insertar información (fechas, descripciones,etc…).
Permitirá incluir audio y video sin necesidad de usar flash.
Posibilidad de crear gráficos y dibujos directamente en el navegador.
Permitirá guardar datos en local.
Etiquetas de geolocalización.
Funcionara en cualquier soporte, la portabilidad será su fuerte , compatible con pc, smartphones, pdas,ipads.

Bien como todo en esta vida habrá gente que apoye esta tecnología y gente que esté totalmente en contra, si hay que posicionarse públicamente, yo lo hago, no es que sea fanático de Steve (que sí lo soy), pero estoy totalmente en contra de las webs en Flash, ya sabéis el motivo principal que digo , INACCESIBLE…..

¿Y tú de quien eres?

Diseñar Páginas web para Iphone

admin — Tue, 09 Mar 2010 22:04:23 +0000

El futuro del diseño web pasan por los dispositivos moviles, las estadísticas están ahí, un millón de dispositivos vendidos el primer fin de semana que salió el Iphone, en 2009 fueron vendidos alrededor de 45 millones de dispositivos, lo que querría decir que todos los españoles tendrían un iphone…

Debemos saber ciertas reglas cuando diseñamos para iphones, como que no se visualizan los elementos flash, disponemos de una resolución menor, el tamaño de imágenes no puede pasar de un tamaño específico, 320×480px. Las tipografías soportadas son American Typewriter, Arial, Arial Rounded MT Bold, Courier, Courier New, Georgia, Helvetica, Helvetica Neue, Marker Felt, Times New Roman, Trebuchet MS, Verdana y Zapfino.

Estas son solo algunas de las cuestiones básicas que os enseñaremos.

CARGAR CSS O WEB DISEÑADA ESPECÍFICAMENTE PARA IPHONE

El código para que detecte que la página se está viendo desde un iphone es el siguiente, se podría hacer bien que cargue una css específica o bien que cargue una web con programación específica para el dispositivo móvil.

Mediante Javascript:

^?Ver código JAVASCRIPT

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
	if (document.cookie.indexOf("iphone_redirect=false") == -1) {
		window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
	}
}

Mediante PHP:

^?Ver código PHP

if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
	header('Location: http://yoursite.com/iphone');
	exit();
}

DEFINIR LA ESCALA DE VISUALIZACIÓN DE LA PÁGINA WEB
Cuando entramos en una web desde nuestro iphone y la vemos en pequeñito,es debido a que el desarrollador no ha insertado el código que indica el ancho de pantalla (width=device-width).

^?Ver código HTML

AÑADIR UN ICONO PERSONALIZADO DE LA PÁGINA WEB EN EL ESCRITORIO DEL IPHONE

Si lo que necesitamos es añadir un icono a la web, para que cualquier usuario la pueda agregar a favoritos en su dispositivo movil, tan solo tendremos que crear una imagen de 57px por 57px en formato .png. No tienes por qué añadir brillos o esquinas ya que el iPhone las añade automáticamente:

^?Ver código HTML

<rel="apple-touch-icon" href="images/template/engage.png"/>

DESACTIVAR AUTOAJUSTE DE TEXTO AL ROTAR EN SAFARI
Cuando giramos el iphone, safari por defecto autoajusta el tamaño del texto si lo que queremos es desactivar esta función tendremos que añadir las siguiente lineas en nuestra css.

^?Ver código CSS

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
	-webkit-text-size-adjust:none;
}

APLICAR CSS ESPECIFICOS PARA EL IPHONE

Si lo que queremos es que se apliquen ciertos estilos solamente cuando se esté visualizando en un iphone, aplicando el siguiente código:

^?Ver código CSS

@media screen and (max-device-width: 480px){
	/* Todo el CSS para iPhone va aqui */
}

REDIMENSIONAR IMÁGENES AL ANCHO DE PANTALLA DEL IPHONE

Otro dato que tenemos que tener en cuenta cuando diseñamos páginas web para iphone es el tamaño de las mismas, ya que en este dispositivo móvil el ancho máximo es de 480px por lo que si es más grande se saldrá de la pantalla, con el siguiente código conseguiremos que se queden encajadas en la pantalla

^?Ver código CSS

@media screen and (max-device-width: 480px){
	img{
		max-width:100%;
		height:auto;
	}
}

FUNCIONES EXCLUSIVAS PARA IPHONE: LLAMAR Y MANDAR SMS
Uno de mis grandes descrubimientos han sido estas dos funciones ya que son específicas para usar en dispositivos móviles, y nos servirán para llamar directamente al pulsar o enviar un sms

^?Ver código HTML

Llámame

^?Ver código HTML

Mándame un SMS

APLICAR CSS SEGUN ESTE EN VERTICAL O HORIZONTAL
Con este script conseguiremos aplicar un css especifica según se esté visualizando horizontal o verticalmente.

^?Ver código JAVASCRIPT

window.onload = function initialLoad() {
	updateOrientation();
}
function updateOrientation(){
	var contentType = "show_";
	switch(window.orientation){
		case 0:
	contentType += "normal";
	break;
	case -90:
	contentType += "right";
	break;
	case 90:
	contentType += "left";
	break;
	case 180:
	contentType += "flipped";
	break;
	}
	document.getElementById("div_identificativo").setAttribute("class", contentType);
}

DESACTIVAR BARRA DE TAREAS EN SAFARI

^?Ver código JAVASCRIPT

window.addEventListener('load', function() {
	setTimeout(scrollTo, 0, 0, 1);
}, false);

ESTILO LINKS HOVER EN IPHONE

^?Ver código JAVASCRIPT

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i &lt;myLinks.length; i++){
   myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
   myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

^?Ver código CSS

a:hover, a.hover {
	/* el efecto hover que sea*/
}

Televisores con navegación de páginas web

admin — Tue, 23 Feb 2010 21:46:31 +0000

Philips lanzará esta primavera televisores con acceso a internet completo es decir, incorporará las páginas habituales de otros fabricantes como pueden ser Youtube, Picasa, el tiempo, tráfico…y aparte se podrá ver cualquier página web en nuestro televisor, cosa que hasta ahora ningún fabricante había incluido.

Todo tiene un pero, y el pero en esta caso es que solo soportará páginas en formato C-HTML, para el que no lo conozca , saber que es un formato pensado para dispositivos pequeños, como pueden ser teléfonos móviles o pdas. Al estar desarrollado para dispositivos móviles dispone de algunas limitaciones, como pueden ser el uso de diferentes tipografías, imágenes, diferentes colores de fondo…

Inspiración diseño web semanal

admin — Sun, 24 Jan 2010 19:56:54 +0000

Os dejo mi selección semanal de diseños web que he considerado que hay destacar. Diseño sencillos, fondos estáticos integrados perfectamente con la web o el uso de transparencias serían los puntos que habría que destacar de estos sitios web

Baby Yu

Design wise

Jenning Brewery

Nosotros también usamos MySQL, ¡ayuda a salvarlo!

admin — Mon, 14 Dec 2009 22:05:50 +0000

Michael “Monty” Widenius, el creador de MySQL está pidiendo ayuda para salvar lo que, a su juicio, puede ser la muerte de MySQL, el software de gestión de bases de datos Open Source utilizado por la mayoría de los CMS actuales, WordPress Joomla, Oscommerce,Drupal y proyectos web propios.

Ante la inminente compra de Sun, empresa que actualmente mantiene MySQL, por parte de Oracle podrían sucederse algunos hechos de mercado que pusieran en peligro la pervivencia de este software o de su carácter libre.

Y es que Oracle está en una posición comercial de dura competencia, y MySQL se ha mostrado como un software muy capaz de competir con gestores de bases de datos comerciales. Por ello, Oracle podría considerar convertir esta pieza libre en un software propietario, al ser dueño del mismo.

Porque Oracle no se ha comprometido a mantener MySQL Open Source, ni a liberar versiones de un modo habitual, ni a mantener los precios de licencia y soporte, ni a no agregar código cerrado a MySQL. Y claro, Monty sospecha que la situación no es la más halagüeña para la comunidad.

Para ello nos pide a todos los que usemos MySQL que apoyemos su iniciativa (que ya ha llevado a la Comisión Europea) de salvar MySQL.

¿Como podemos ayudar?, muy sencillo:

Hasta el 19 de diciembre de 2009

Reenviar este mensaje/correo a todo el mundo que sepas que está usando MySQL o a una lista de correo electrónico donde sepas que hay gente presente que usa y le preocupa MySQL y el código abierto (por favor, comprueba primero que este mensaje no ha sido enviado allí antes)
También puedes enviar correos electrónicos con información sobre esto y pedirles que lean http://monty-says.blogspot.com/2009/12/help-saving-mysql.html
Añadir enlaces en tu web a http://monty-says.blogspot.com/2009/12/help-saving-mysql.html con el texto “Estamos usando MySQL, ayuda a salvarlo“, solo durante las dos próximas semanas.
Bloguea acerca de esto (sé libre de incluir este texto, o simplemente un enlace al blog de Monty)
Llamar por teléfono (no en contacto por correo electrónico, es urgente) a su jefe o VP e invitarle a leer este correo y ¡enviar una carta a la Comisión Europea lo antes posible!
Si no tienes a nadie en contacto con lo anterior, ¡envía un correo electrónico a la CE!

Como queremos que la CE tenga una imagen correcta de la situación, primero completa la parte superior y, a continuación, elige uno de los textos de abajo que mejor se adapte a tu punto de vista de la situación. Siéntete libre para proveer tu propio texto y la información adicional si crees que esto ayudará a la CE para alcanzar una mejor comprensión de cómo se usa MySQL.

Envíalo a: comp-merger-registry@ec.europa.eu

Si tienes tiempo extra para ayudar, rellena lo siguiente, si no, salta al texto principal.

Nombre:
Título:
Empresa:
Tamaño de la empresa:
¿Cuántas instalaciones de MySQL?:
Cantidad total de datos almacenados en MySQL (megabyte):
¿Para qué tipo de aplicaciones utilza MySQL?:
Si este correo electrónico se mantendrá en secreto por la CE: Sí / No

Copiar o utilizar uno de los siguientes textos como base para su respuesta:

a) No me fío de que Oracle se ocupe realmente de MySQL y se debería ceder a otra empresa o fundación que tenga mucho que ganar mediante el desarrollo y la promoción de MySQL. También en el futuro debería podría combinar de MySQL con la aplicación de código cerrado (ya sea por excepción, una licencia más permisiva o ser capaz de licencia dual de MySQL en condiciones favorables)

b) Creo que Oracle podría ser un buen administrador de MySQL, pero tendrá que actuar la CE para tener garantías jurídicamente vinculantes de Oracle que:

Todo MySQL continuará Open Source / software libre en el futuro (sin módulos de código cerrado).
La versión de código abierto y de doble versión con licencia de MySQL debe tener la misma fuente (como actualmente).
Que el desarrollo se lleve a cabo en la comunidad de manera amistosa.
El manual debe ser liberado bajo una licencia permisiva (de manera que sea igual para el servidor que para el receptor)
MySQL debe ser liberado bajo una licencia más permisiva para asegurar que los forks (versiones adaptadas) de verdad puedan competir con Oracle si Oracle no es un buen administrador, después de todo.
Alternativamente:
- Uno debe ser capaz de comprar siempre bajo licencias comerciales, con los precios de MySQL.
- Todo lo anterior debe ser perpetuo e irrevocable.

También debería existir un mecanismo para que, si Oracle no está haciendo lo que se espera de ella, los forks (versiones adaptadas) deberían ser capaz de competir con Oracle.

c) Confío en Oracle y sugiero que la CE aprobará el acuerdo de manera incondicional.

Usar etiquetas META para optimizar el posicionamiento.

admin — Sat, 12 Dec 2009 15:40:17 +0000

Las etiquetas las usan los buscadores para identificar el contenido de las páginas web ,o , para indicarle una acción a realizar, siempre se encuentran entre las etiquetas . Hay muchas leyendas referentes a este tema , ya que hay buscadores, como puede ser Google , que no las tienen en cuenta, y lo que hacen es indexar el contenido, mi opinión es que no cuesta nada colocarlas ya que podriamos conseguir visitas gracias a estas etiquetas por medio de otros buscadores.

Entras la principales que se usan voy a destacar las siguientes:

Keywords.
.
Se usan para que cuando los usuarios introduzcan las palabras clave en el buscador, puedan localizar las páginas que contienen estas palabras. Debido a lo facil que es manipular este campo , dice la leyenda, que Google ya no tiene en cuenta esta meta etiqueta, también dice la leyenda que Yahoo, sigue usandolas…, yo por si acaso sigo añadiendolas en todos mis proyectos, al ser un algoritmo, en cualquier momento puede volver a tener mucha importancia, y no cuesta nada introducirlas.

Description.

La descripción no debe ser excesivamente larga, 160 carácteres es el máximo que admiten los buscadores, generalmente es la información que aparece en los buscadores en la descripción de la página, digo generalmente, porque a veces muestra el contenido de la web en vez de la meta descripción. Para mí, el más importante.
Languaje.

Indica a los buscadores el idioma de la página web, aunque los buscadores tienen muy en cuenta los dominios, en el caso que sea .com , que es un dominio mundial, ayudaría a los buscadores a identificar el lenguaje que se está usando en la página.
Author.

Bueno esta etiqueta es otra más, no tiene mucho sentido para los buscadores, para mí, es como quien firma un cuadro al finalizarlo, o sea, indica quien ha realizado el diseño web.
Robots.

Se usa para indicar a los buscadores que partes se debe indexar, por ejemplo se podría usar para restringir el acceso a un panel de administración, tengo que decir que yo esta etiqueta no la uso, ya que incluyo la información necesario en un archivo de texto llamado robots.txt (En otro capítulo explicaremos el uso de este archivo).
Revisit.

Esta etiqueta indica a los buscadores con que frecuencia deben volver a rastrear la página, por ejemplo, si tienes una tienda y añades productos diariamente debes colocar 1 day, en el caso de los foros el contenido puede cambiar cada hora o incluso cada minuto, en la práctica los buscadores han conseguido saber con que frecuencia se actualiza una página web, por lo que aunque pongas 1 día si actualizas a la semana, el robot no va a volver diariamente. Si la usas no mientas porque es tonteria.
Canonical.

Esta etiqueta la he descubierto hace poco y su uso nos puede salvar de recibir alguna penalización de los buscadores por tener contenido duplicado, la usaremos cuando tengamos dos páginas con el mismo contenido (contenido duplicado) y que se accede por diferentes url, en la etiqueta introduciremos la url de la página correcta, en la práctica cuando cremos tiendas virtuales y realizamos busquedas por articulos o fabricantes, un mismo producto puede tener varias urls de entrada, creo que con esta explicación ha quedado aclarado.

Estas son las etiquetas más usadas, por Internet encontarás infinidad pero con estas deberían ser más que suficientes, si colocas 200 etiquetas es posible que se indexen tus etiquetas y que el contenido no se indexe, así que tú mismo.

Suspenso a los sitios web de bebidas alcohólicas.

admin — Tue, 08 Dec 2009 23:16:41 +0000

Parece increible que las grandes compañias descuiden por completo el tema de la accesibilidad y usabilidad, smashing magazine ha publicado un articulo en el cual se estudian las páginas web de las principales compañias de bebidas alcohólicas, hemos podido observar que la mayoria están hechas en flash, la mayoria graficamente son muy buenas, pero en la mayoría se han encontrado problemas de tipografías, usabilidad y accesibilidad.

Hay que destacar que en la mayoría de webs de este articulo, para poder entrar al sitio requieren la fecha de nacimiento, no es más facil aceptar que se és mayor de edad….¿acaso se creen que nos vamos a beber la bebida que aparece anunciada?
Pero más sospechoso es que aparte requieran el país de procedencia, ¿porque piden el país de procedencia? hoy en día todos los sistemas de analíticas tienen soporte para localizar la procedencia del usuario.

La web de Budweiser llega más lejos todavia y nos propone un encantador juego para introducir la fecha de nacimiento, si mi madre entrara en esta web seria la primera en largarse a otro sitio por no saber como introducir la fecha de nacimiento. La web de Samuel Adams primero nos pide la fecha de nacimiento y una vez introducida nos vuelve a pedir el año de nacimiento, ¿con que fín? ellos sabran, y más teniendo en cuenta que actualmente no hay ninguna ley que obligue a solicitar la fecha de nacimiento (según fuentes de smashing magazine).
El sitio web de Busch Beer nos solicita en un formulario el año con dos cifras, y cuando introducimos el año, nos lanza la pantalla de error en el cual dice que tenemos que introducir 4 cifras.

Por ejemplo la página web de Seagram’s Gin está desarrollada totalmente en flash, aparte que la pantalla se mueva por todos los lados… que ventajas presenta diseñar un sitio integramente en flash, me puede explicar alguien como un ciego por ejemplo va a poder navegar la página o como los usuarios van a encontrar su contenido en los buscadores? ACCESIBILIDAD CERO. Algunas de las animaciones que presentan estas páginas web se podrían desarrollar perfectamente con jquery, con esto no estoy diciendo que dejemos de usar FLASH, pero deberiamos limitarlo a aquellas aplicaciones que requieran interacción con los usuarios en las cuales no se podría desarrollar de otra manera. Por ejemplo la página de Finlandia vodka usa una animación en flash para mostrar unos cuadros, esta animación es perfectamente desarrollable con JQUERY.

La página de BACARDI también ha desarrollado su sitio al completo en flash , cuando los menús y el pie de página habrían podido ser desarrollados perfectamente en CSS y HTML, dejando el contenido FLASH para la parte central que es donde realmente es necesario el contenido animado.

No todo es malo , tambien hay diseños web que siguen las normas de accesibilidad y usabilidad, las cuales merecen les pongamos un enlace a su web:

El navegador más usado en 2009

admin — Thu, 12 Nov 2009 22:49:32 +0000

Cuando diseñamos páginas web nos encontramos siempre con el mismo problema, ¿para que navegador tenemos que diseñar?, la respuesta es sencilla, para todos, tenemos que pensar en todos nuestros usuarios. 2010 parece que va a ser el año del entierro de Internet Explorer 6, por fín, cuantos problemas nos ha dado este navegador en multitud de proyectos…. Aparte del descenso de Internet Explorer 6 hay que destacar a Chrome ,que va creciendo poco a poco. Firefox por su parte sigue como lider indiscutible.

Tenemos que decir que todos los usuarios que entran a nuestra página web y usan Internet Explorer 6, les sale una advertencia para que se actualicen su navegador a Firefox, ya que creemos que a día de hoy es el que mejor funciona, y aunque sea lentamente este navegador tiene que morir tarde o temprano.

Siguiendo con el informe ,hay que destacar también que el 95% de usuarios tiene activado javascript en sus navegadores. Podéis ver las estadísticas al completo aquí.

navegador mas usado en 2009

25 Herramientas imprescindibles para diseñadores web

admin — Fri, 16 Oct 2009 23:02:19 +0000

Os dejo una colección de 25 herramientas imprescindibles que cualquier diseñador deberia conocer, son todas online y nos facilitan la vida, desde el famoso lorem lipsum con el cual rellenamos nuestros páginas antes de entregarlas, hasta generadores de stripes, o herramientas para tratar imagenes, o códigos css para realizar bordes.

Podéis visualizar el contenido aquí