Entradas etiquetadas ‘web’
Top Programas de gráficos Web para Macintosh
8 de Abril de 2011Cuando se trata de seleccionar un programa de gráficos Web, hay tantas opciones que a menudo puede ser difícil determinar qué programa es el adecuado. Si bien la tendencia es querer ir siempre a buscar el más popular, no siempre es la opción más adecuada para las necesidades de cada persona.
1. Adobe Photoshop
Photoshop es uno de los programas disponibles más avanzados y versátiles, y los desarrolladores de webs siempre quieren tener Photoshop en su arsenal de herramientas. Photoshop ofrece herramientas y funciones para la creación de animaciones GIF, imágenes, optimización de corte, procesamiento por lotes y automatización. Se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Fireworks, Flash, y GoLive.
2. Adobe Fireworks
Fireworks se ha desarrollado desde cero específicamente para satisfacer las necesidades de los profesionales del diseño web. Fireworks tiene características de estrecha integración con otros productos de Macromedia como la herramienta de animación vectorial, Flash y Dreamweaver. Fireworks sólo es capaz de trabajar en el entorno de color RGB, por lo que no es una opción apropiada para trabajar con imágenes destinadas a la impresión comercial. Fireworks se integra perfectamente con otros productos de Adobe como Illustrator, Dreamweaver, Photoshop y Flash.
3. Stone Studio
Esta suite de diseño web para Mac OS X incluye Create, PhotoToWeb, PStill, GIFfun, Slice & Dice, Pack Up & Go, y TimeEqualsMoney. Create es el principal componente de diseño web y se puede comprar por separado. Ofrece herramientas de texto, dibujo, efectos, producción automatizada de la página web, desarrollo de contenidos, y las características de diseño de la página. PhotoToWeb te permite crear álbumes web de fotos y presentaciones de diapositivas. GIFfun crea banners animados. SliceAndDice crea mapas de imagen y barras de navegación.
4. Adobe Photoshop Elements
Photoshop Elements está construido alrededor de los elementos básicos de la interfaz de Adobe Photoshop sin las características de la gama alta. Elements es principalmente una herramienta para edición de fotos, procesamiento y mejora, pero también puede funcionar para la creación de gráficos Web, tales como botones, banners, animaciones y galerías web para su uso personal y empresarial. Está diseñado principalmente para los fotógrafos aficionados,
Descripción y esquemas de color Web
16 de Enero de 2011Hay cuatro colores básicos que se pueden utilizar para un sitio Web. Vamos a ir mostrando con imágenes la combanización de colores y cómo puede generar un esquema similar en Photoshop.
- Monocromáticos
Es el uso de colores de la misma tonalidad. Pueden tener diferentes matices o tonalidades dependiendo de la cantidad de blanco o negro que podamos añadir. - Análogos
Son aquellos colores que se encuentran a ambos lados de cualquier color en el círculo cromático. - Complementarios
Los colores complementarios son los que quedan en el lado contrario del circulo cromático. - Triádicos
Estos colores están uniformemente espaciados en la rueda de color.
Vamos a utilizar como color base en todas las combinaciones el color amarillo.
Combinación de colores monocromáticos
Esta combinación de colores utiliza el amarillo mostaza de color base y se añade algo de blanco y negro al color y a la sombra.
- Superior izquierda – base de color # ffe500
- Superior derecha – se ha añadido un relleno de 50% de blanco para conseguir # fff280
- Abajo a la izquierda – se ha agregado un relleno de 75% de blanco para obtener fff8bf #
- Abajo a la derecha – se ha añadido un relleno de 50% de negro para obtener # 7f7200
Utilizar el esquema de color monocromático hará que un sitio web parezca más fluido y controlado.
Más esquemas monocromáticos
Se ha añadido a un cuadrado el 20% de negro para obtener más colores en el esquema. La adición de color negro o blanco a los colores puede crear un nuevo color a la paleta sin ensuciar el tono de la página.
Combinación de colores análogos
Este esquema de color toma el color base el amarillo y suma y resta 30 grados de la tonalidad en la paleta de color de Photoshop.
- Superior izquierda – base de color # ffe500
- Superior derecha – 30 grados para conseguir # 99ff00
- Abajo a la izquierda – 30 grados para conseguir # FF6600
- Inferior derecha – 100% blanco # ffffff
Los colores análogos pueden trabajar muy bien juntos, pero a veces puede entrar en conflicto.
Más colores análogos
Se ha añadido un cuadrado de 20% de negro para obtener más colores en el esquema.
Combinación de colores complementarios
A diferencia de otros esquemas de color normalmente sólo tienen dos colores. El color base y su opuesto en la rueda de color. Photoshop hace que sea fácil obtener el color complementario, sólo tiene que seleccionar el área de color que desea como complemento de y pulsar Ctrl-I. Photoshop lo invertira por nosotros. Asegúremonos de hacer esto en una capa duplicada, para no perder el color base.
- A la izquierda – base de color # ffe500
- Derecha – el complemento # 001aff
Los planes complementarios de color son a menudo mucho más llamativos que otros esquemas de color, por lo que hay que usarlos con cuidado. Suelen ser más utilizados para sobresaltar.
Más esquemas de colores complementarios.
Para obtener esta versión, de ha añadido un 50% blanco a la mitad inferior de los colores y el 30% de negro a la plaza central. Como podemos ver, nos da algunas opciones mas pero sigue siendo una combinación de colores complementarios.
Combinación de colores triádicos
Los esquemas triádicos color se componen de 3 colores más o menos equidistantes alrededor de la rueda de color.
- Superior izquierda – base de color # ffe500
- Superior derecha – 120 grados para obtener # e500ff
- Abajo a la izquierda – -120 grados para conseguir # 00ffe6
- Inferior derecha – 100% blanco # ffffff
Los esquemas triádicos color producen a menudo unas páginas web muy vibrantes. Pero al igual que las combinaciones de colores complementarios estos pueden afectar a las personas de manera diferente.
También podemos crear esquemas de color tetrádicos o 4 colores, donde los colores están igualmente espaciados alrededor de la rueda de color.
Más esquemas triádicos
Al igual que con los otros ejemplos, hemos añadido un cuadrado negro al 30% de los colores para obtener los tonos adicionales.
Esquemas de colores discordantes
Recordemos que la belleza siempre está en los del espectador. Los colores discordantes son colores que están más lejos que cerca de 30 grados de diferencia en la rueda de colores y no son complementarios o parte de una tríada.
Los esquemas de colores discordantes puede ser muy impactantes y sólo debemos utilizarlos para generar atención. Recordemos que estos colores suelen crear un choque para atraer la atención del espectador, pero no debemos olvidar que quien lo reciba no sea lo que exactamente está buscando.
Los elementos de diseño. Construcción del Diseño
11 de Enero de 2011Los elementos del diseño son los pilares del diseño. Estos elementos son los que componen cada página que se genera. Y comprender estos elementos básicos nos hará capaces de elaborar más páginas web de gran alcance y mayor calidad.
Hay cinco elementos básicos de diseño:
Líneas y línea de trabajo
Las líneas son las fronteras y las reglas. Pueden ser horizontales o verticales y ayudar a delinear los espacios alrededor de los elementos en las páginas Web. La línea de trabajo aumenta la legibilidad del diseño. Pueden mejorar la comprensión y la legibilidad de un diseño, pueden ser utilizadas como un borde alrededor de elementos o un divisor entre los elementos.
Las líneas en el diseño web se pueden utilizar de muchas maneras:
- Fronteras alrededor de los elementos
- Líneas divisorias entre los elementos
- Contornos alrededor de los elementos
- Decoración
Hay tres maneras de incluir las líneas de trabajo de diseño Web:
1. La etiqueta <hr/> son líneas horizontales en los documentos de la página web. El estilo de la etiqueta <hr/> puede mejorar las líneas a futuro.
2. CSS ofrece muchas maneras de agregar bordes a los elementos. Con las fronteras de una o dos caras de un elemento, podemos crear líneas que son un poco más interesantes que un borde cuadrado simple.
3. Las ideas pueden ser utilizadas como líneas y bordes para crear efectos más decorativos.
Forma
Formas para hacer cualquier contorno cerrado en el diseño. Las formas en la mayoría de las páginas Web son cuadradas o rectangulares. No siempre tiene que ser así, se pueden utilizar imágenes para generar otras formas dentro de los diseños. Se utilizan para transmitir el significado y organizar la información. Las formas pueden ser de 2 dimensiones o 3 dimensiones.
Hay tres tipos básicos de formas:
- Formas geométricas
- Formas naturales
- Formas abstractas
Las formas en el diseño web se puede utilizar de muchas maneras:
- Agregar interés a un diseño
- Mantener el interés
- Organizar elementos separados
- Dirigir la vista a través del diseño
Figuras geométricas:
Las formas geométricas son lo que la mayoría de la gente piensa cuando piensa en las formas. La mayoría de las formas geométricas en las páginas web se crean a través de la disposición y CSS. Algunas formas geométricas comunes que se ve en las páginas Web son:
- Cuadrados y rectángulos
- Círculos
- Triángulos
- Diamantes
Las formas naturales:
Las formas naturales son formas que se encuentran en la naturaleza, y también suelen ser formas de objetos hechos por el hombre. La mayoría de las formas naturales en las páginas web se crean con imágenes. Algunos ejemplos de las formas naturales son:
- Hojas
- Charcos
Resumen formas:
Las formas abstractas son las que tienen una forma reconocible, pero no son “reales” de la misma manera que las formas naturales. Por ejemplo, un dibujo de palo de la figura de un perro es un perro de forma abstracta, un perro en una foto es una forma natural. Las formas abstractas en el diseño Web se agregan generalmente a través de imágenes.
Algunos ejemplos de formas abstractas son las siguientes:
- Alfabeto glifos
- Iconos
- Símbolos
Textura
La textura es lo que le da un diseño de la sensación de una superficie. Es el sentido del tacto de los elementos en el diseño. En el diseño web, la textura es visual. Algunas texturas más comunes son:
- En bruto
- Suave
- Dura
La textura en el diseño web se puede utilizar de muchas maneras:
- Fondos
- Énfasis
- Diseños estilizados, como grabados o aguafuertes
La manera más común para incorporar la textura en los diseños Web es con la propiedad de estilo background-image. Podemos poner imágenes de fondo en la mayoría de los elementos a nivel de bloque, que nos permite agregar textura a lo largo de las páginas web.
Color
El color es el elemento de diseño en el que la mayoría de diseñadores de páginas web son muy conscientes, aunque es muy importante, el color no es un elemento necesario en cualquier diseño. De hecho, un buen plan de diseño no usa el color en primer lugar, sino que lo va añadiendo poco a poco y a medida para mejorar el diseño.
Algunos de los mejores diseños se hacen con sólo en blanco y negro o un toque de un solo color.
El color en el diseño web se puede utilizar de muchas maneras:
- Fondos
- Texto en primer plano
- Imágenes
El color es muy fácil de añadir a las páginas Web. Hay muchas propiedades de estilo para añadir color, incluyendo:
- El color de primer plano, como las fuentes y texto
- El color de fondo, que cambia el color de fondo del elemento
- Las fronteras de color para cambiar el color de los bordes alrededor de los elementos
También puede añadir color a su diseño a través de sus imágenes. Imágenes JPEG para las fotografías y GIF para imágenes de color plano.
Dirección
La dirección le da movimiento a los diseños web, le proporciona el estado de ánimo y la atmósfera. La dirección da la ilusión de movimiento dentro de un diseño. En la mayoría de los diseños hay una sensación de movimiento en una dirección a través del mismo. Los buenos diseños dirigen la vista a través del diseño de una manera deliberada para que el espectador vea lo que el diseñador quiere.
Hay tres direcciones básicas en el diseño:
- Horizontal
- Vertical
- Diagonal
En el diseño web, la dirección es más a menudo retratada por las imágenes en la página. Pero se puede imponer dirección a través de la colocación de elementos de la página, y con líneas especialmente cuando tienen puntas de flechas sobre ellas.
Se puede incorporar la dirección en los diseños web de las siguientes maneras:
- Miramos las imágenes para determinar la dirección a la que los sujetos se enfrentan. Si la gente en la foto están mirando hacia la derecha, entonces debemos colocar la imagen en el lado izquierdo de la página. En caso contrario la dirección de los ojos en la foto dirigirá los ojos de los lectores fuera de la página.
- Utilizaremos su disposición para sugerir la dirección. La posición de los elementos densos, como las fotos, en las líneas horizontales, verticales o diagonales. Mientras que los elementos menos densos, como el texto, los rodeen.
- Utilizaremos las líneas, ya sea imágenes o etiquetas de recursos humanos, para sugerir el movimiento y la dirección.
Colores corporativos
1 de Agosto de 2010Vamos a echar un vistazo a las paletas de colores de algunas empresas bien conocidas. Lo que es interesante es que muchas de estas gamas de colores se basan en paletas de colores muy monocromáticas con un solo acento de color. Esto puede ser una forma muy efectiva para resaltar elementos. Y como pueden ver, en las páginas de Apple y Adobe, se utilizan colores muy neutros como el gris o el negro como base principal de su gama de colores lo hace que los colores de las imágenes de su producto destaquen.
A continuación vamos a ver alguna de esas paletas.
Paleta Facebook
Colores:
- # 3b5998
- # 8b9dc3
- # F7f7f7
- # Dfe3ee
Descripción:
Paleta de color monocromático azul. La paleta de Facebook tiene un color de base muy popular de color azul y crea una paleta a su alrededor. Casi todos los colores en la página son de un color azul, incluso los grises del fondo tienen algún tinte azul.
Paleta MySpace
Colores:
- # 2358b8
- # 82aad3
- # 313246
- # c9d0d6
Descripción:
Paleta de colores monocromáticos en azul. MySpace utiliza una paleta de color bastante oscuro en sus colores, pero todos se centran en el color azul. El fondo de la mayor parte de la página es de color blanco, que hace que el azul oscuro destaque más.
Paleta Youtube
Colores:
- # D02525
- # 595757
- # 0033cc
- # Ebebeb
Descripción:
Una combinación de colores bicromática utilizando dos de 3 colores triádicos – rojo y azul. YouTube se basa en la década de rojo y negro del mismo logotipo para ofrecer una imagen de marca en la página. Pero también hay una gran cantidad de azul en todas partes.
Paleta Flickr
Colores:
- # 0063dc
- # Ff0084
- # 999999
Descripción:
Flickr utiliza colores análogos, rosa y azul en su paleta para el logotipo. El gris es muy neutro y sirve para mostrar tanto el contenido de las páginas como el logotipo.
Paleta Adobe
Colores:
- # Ff0000
- # 343434
- # 454545
- # E9e9e9
Descripción:
La paleta de colores de Adobe es bastante llana – gris oscuro y rojo como acentuado. Los grises oscuros son muy neutrales y esta paleta funciona bien para resaltar los productos que tienen sus propios colores.
Paleta Apple
Colores:
- # 979797
- # 666666
- # Eeeeee
- # 000000
- # 0088cc
Descripción:
Apple apuesta por los grises neutros, negros y blancos para destacar la mayor parte de su página. Además, los grises monocromáticos hacen que los colores de los productos de Apple se destaquen aún más.
Paleta Microsoft
Colores:
- # 5ca5d8
- # 013655
- # F0f8fc
- # 4e7dc2
- # 007734
Descripción:
Microsoft tiene una paleta de azules y las utiliza para acentuar y poner relieve. Se trata de una paleta muy monocromática. Casi no hay blanco en la página, y lo blanco que hay se utiliza para hacer la navegación más fá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.
Formatos gráficos
1 de Marzo de 2010Aunque hay cientos de formatos de archivos gráficos existen navegadores web que sólo admiten algunos de ellos. Aquí describiremos los diferentes formatos de archivos gráficos que están disponibles para los diseñadores web y cuándo deben usarse.
Los formatos de archivos gráficos soportados por los navegadores web más populares son Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) y gráficos vectoriales. Algunas de las propiedades de los archivos gráficos son:
Transparencia – esta característica permite que la imagen sea de mayor o menor grado de opacidad, y sólida a totalmente transparente.
Compresión - esta característica permite que la imagen se almacene en un archivo mucho menor mediante el uso de un algoritmo matemático para manejar grupos de píxeles como un solo tema.
Entrelazado – el entrelazado permite que la imagen se cargue en primer lugar de las filas impares y luego volver y sacar las filas pares. Permite al visitante a ver la imagen antes.
Animación - la animación da la apariencia de movimiento por medio de una serie sucesiva de imágenes. Los Gifs animados no requieren un plug-in de navegador y pueden trabajar en casi todos los dispositivos.
Carga progresiva – la carga progresiva es similar a entrelazar ya que sólo carga una parte de la imagen al principio, pero no se basa en filas alternas y permite al usuario ver la imagen más rápidamente.
GIF
Se originó en la década de 1980 y fue adoptado por los diseñadores de web en la década de 1990 como el formato gráfico preferido para páginas web. Los archivos GIF utilizan un algoritmo de compresión que mantiene archivos de pequeño tamaño para una carga rápida.
Se limitan a 256 colores (8 bits) y apoyan la transparencia y los gráficos entrelazados. También es posible crear gráficos animados usando el formato GIF. Todos los navegadores pueden visualizar los archivos GIF.
Ventajas del GIF :
* La mayoría da amplio apoyo de formato gráfico.
* Los diagramas se ven mejor en este formato.
* Soporta la transparencia.
JPEG
Los archivos JPEG son comprimidos con apoyo de “color verdadero” (24 bits) y son el formato preferido para las fotografías en materia de calidad de imagen. JPEG admite un formato progresivo que permite una imagen casi de inmediato con mejora de calidad como el resto de cargas.
A diferencia de un archivo GIF, la compresión de archivos JPEG puede ser controlada por el diseñador, que permite diferentes niveles de calidad de imagen y tamaño de archivo.
Ventajas JPEG:
* Ración media de compresión de grandes velocidades de descarga.
* Produce excelente calidad de fotografías y dibujos complejos.
* Soporta 24-bit de color.
PNG
Es un formato bastante reciente que se presentó como una alternativa a los archivos GIF. PNG admite hasta 24 bits de color, con transparencia y entrelazado puede contener una descripción breve texto de contenido de la imagen para el uso de motores de búsqueda.
Desafortunadamente, la mayoría de los navegadores no soportan PNG y los que lo apoyan, no son compatibles con todas sus características todavía. Pero eso cambiará en el futuro.
Ventajas PNG:
* Supera la limitación de 8-bits de color del GIF.
* Permite la descripción de texto de la imagen para el uso de motores de búsqueda.
* Soporta la transparencia.
Gráficos Vectoriales
La mayoría de los gráficos web son imágenes de mapa de bits o mapas de bits, que consisten en una rejilla de píxeles de colores. Dibujo e ilustraciones deben ser creadas como gráficos de vectores que consisten en descripciones matemáticas de cada elemento que compone las líneas de las formas y el color de la imagen. Los gráficos vectoriales se crean mediante la elaboración de programas tales como Adobe Illustrator y Macromedia Freehand y son la elección de artistas gráficos para crear dibujos. Los gráficos vectoriales se debe convertir a GIF, JPEG o PNG para ser utilizados en una página web.
¿Qué formato debemos utilizar?
Podemos elegir entre el formato GIF o JPEG para la mayoría de usos. Pero, dado que el tamaño de archivo de un archivo GIF es generalmente mas pequeño que el tamaño de archivo de un archivo JPEG, la mayoría de los diseñadores utilizan el formato GIF para los fondos, cajas, marcos y cualquier otro elemento gráfico.
La mayoría de los diseñadores seleccionan el formato JPEG para las fotografías e ilustraciones en la compresión para no comprometer la calidad visual de la imagen.
GIF y JPEG son un apoyo universal y la elección del diseñador es determinada para el elemento gráfico que utilice.
Optimización de Páginas Web
27 de Febrero de 2010Todos queremos tener la web más atractiva y dejar a nuestros visitantes con los ojos abiertos y completamente deslumbrados. Por lo general un diseño muy atractivo implica gran cantidad de elementos gráficos, aumentando el tamaño de la página. Aquí hablaremos de algunos consejos útiles sobre cómo mantener un diseño web atractivo, pero con descargas rápidas.
Debido a la tasa media de ancho de banda de Internet por ordenador, los webmasters dejan de desarrollar sitios web complejos cargados con fuertes elementos gráficos. En casos extremos se pueden encontrar sitios web que toman unos minutos para cargar el contenido en su navegador. Por supuesto el usuario no va a esperar ese tiempo para que un sitio web cargue, y pasará a la siguiente página web en sus resultados de búsqueda.
¿Entonces por qué algunos webmasters aún desarrollan páginas de carga lenta? Principalmente debido a la falta de conocimiento de sencillas técnicas de optimización de gráficos que les permitan mantener un sitio web atractivo, manteniendo el tamaño de página más pequeño.
¿Cuántos somos conscientes del hecho de que un cuadro con esquinas redondeadas puede conseguirse utilizando el código CSS solamente, sin la necesidad de cualquier imagen gráfica. Los que están familiarizados con CSS saben que un nivel relativamente alto de la programación es necesario, los errores más comunes pueden tener relación con la optimización de las soluciones simples.
Se podría hacer la afirmación de que lo que un diseñador Web puede hacer con el software gráfico es imposible de aplicar al código. No estoy de acuerdo. Cuando el diseño está terminado y está listo para cortarlo en pequeñas imágenes a utilizar en el código html, la creatividad se ha probado. Todo lo que se hace en esta etapa afectará al tamaño de página total. Si el diseño contiene formas redondeadas que se superponen unas a otras o zonas con gradientes de color, entonces deberemos cortarlas con cuidado para que el resultado sea tamaño de archivo pequeño.
Veamos lo que significa cortar eficientemente:
- No hacer cortes grandes que contiengan gran cantidad de colores diferentes. Utilizaremos un pequeño número de cortes en cada porción contieniendo un número limitado de colores.
- No haremos una gran parte que contenga la estructura del mismo gráfico. Cortarmeos una pequeña parte de él y se repetirá en el código. Esto suele ser un error muy común que los webmasters / programadores hacen cuando se trata de fondo de color degradado.
- No usaremos el formato de archivo JPEG siempre. En algunos casos, un formato GIF será mucho menor en tamaño. Una regla de oro – un segmento con un elevado número de colores será más pequeño de tamaño con el formato JPEG en lugar del formato GIF, y lo contrario también es cierto. Comprobaremos cada opción por separado. Cada 1KB que nos permita reducir el tamaño de archivo de la imagen finalmente se sumará a una reducción significativa en el tamaño de página.
- Si tenemos texto sobre un fondo de color sólido, utilizaremos el código para crear el fondo en su lugar. Recordemos que se puede definir tanto el estilo de fuente y color de fondo de la zona utilizando CSS.
Técnicas avanzadas
Gráficamente la optimización de un sitio web es algo más que saber hacer optimizaciones de la imagen. Existen algunas técnicas avanzadas que requieren un alto nivel de programación. CSS2 tiene mucho más que ofrecer que el CSS. Aunque no todos los navegadores han adoptado esta norma todavía se debe estar listo para cuando lo hagan. JavaScript también nos da un conjunto de opciones para crear algunos efectos interesantes sin necesidad de sobrecargar la página con Flash. El uso de herramientas limitadas, como JavaScript, frente a una aplicación avanzada, como Flash para crear los efectos deseados puede ser difícil. Sin embargo, pensemos en el resultado del esfuerzo que puede diferenciar el sitio web de los demás. Obtendremos un atractivo sitio web de aspecto profesional y que carga rápidamente.
Regreso al futuro
Las PDAs, teléfonos móviles y ordenadores portátiles mini son usados con conexiones a inalámbricas para navegar por Internet, la publicación de páginas web de carga rápida mejorará la experiencia de navegación, no sólo para aquellos que utilizan conexiones de gran ancho de banda, sino también hará que el usuario tenga una experiencia de navegación fácil.
Para aquellos que insisten en que la optimización del diseño web no es necesaria porque todos tendrán conexiones de banda ancha alta con el tiempo, estoy de acuerdo, hasta cierto punto. Sin embargo, las empresas de software están creando aplicaciones que utilizan más ancho de banda porque saben que están disponibles para que se utilicen. Acostumbrémonos a optimizar bien las páginas web, porque este juego del gato y el ratón no terminará nunca, y es mejor aprender las reglas del juego, que ser mordido.
Browser Shooter, el juego de los navegadores en JS
4 de Septiembre de 2009Browser Shooter es un juego desarrollado con Javascript que nos recuerda al famoso Puzzle Bobble pero con los logos de navegadores
web.
El juego usa jQuery 1.3.2 y con una gran cantidad de archivos JS se controla la física de los rebotes, el movimiento del lanzador y demás efectos del juego.
Puedes probarlo aquí
A través de Google
3 de Agosto de 2009Gracias a un algoritmo que produce los resultados más relevantes para cualquier consulta, Google se ha convertido, indiscutiblemente, el mejor motor de búsqueda en Internet. En el último recuento, Google ha indexado más de 4 millones de páginas y se ocupa de unos 200 millones de búsquedas al día! Un grupo de 100 mil servidores se utilizan para almacenar, y arrojar a los resultados de la consulta con la velocidad de la luz que está tan acostumbrados a ver.
Si bien, Google está constantemente agregando nuevas características de gran utilidad, la mayoría de nosotros, lamentablemente, no utilizamos todas las capacidades de ese motor de búsqueda. Los siguientes consejos harán que su navegación en Internet sea mas eficaz.
Seleccione palabras de búsqueda más específicas
Google devuelve páginas web que contienen todas las palabras que usted consulta. Si desea ver las páginas más relevantes en la primera página de su resultado de búsqueda, debe ser muy específico con la elección de las mismas. Por ejemplo: si quiere investigar sobre el ex jugador de baloncesto Juan Antonio Corbalán, deberá iniciar la búsqueda con Juan Antonio Corbalán no como ex jugador de baloncesto. Aún mejor si busca las palabras: ex jugador de baloncesto Juan Antonio Corbalán. Porque sólo la palabra Juan Antonio Corbalán mostrará las páginas web sobre “Juan Antonio Corbalán”. Las refinerías de la consulta en Google significan añadir más palabras específicas para su búsqueda inicial.
Establece una nueva característica
¿Qué pasa si usted está buscando un par de pantalones vaqueros de diseño de Valentino, pero no puede recordar el nombre del diseñador? Consulta sobre los pantalones vaqueros de diseño italiano que pueden traer el resultado, sin embargo, hay una mejor herramienta que Google tiene llamada “Conjuntos”.
Llene los nombres de algunos diseñadores que recuerde en la forma determinada, como Levis, Wrangler, Versace y haga clic en cualquiera de los dos botones y ¡voilá! Obtendrá una lista de los nombres de diseñadores y probablemente, el de Valentino esté allí.
Calculadora
El otro día, estaba sentada en la oficina de un amigo que necesitaba el cálculo de algunos productos alimenticios básicos y buscaba su calculadora en el escritorio. Muy a su pesar no logró encontrarla y comenzó a buscar en sus programas de Microsoft una calculadora. Me di cuenta que estaba en línea y que el navegador estaba abierto. Yo, educadamente, le pregunté si el sabía que Google podría calcular las expresiones matemáticas más comunes. Me dijo que no muy sorprendido! Pues si, Google es capaz incluso de efectuar unidades de conversión! ¡Pruébelo!
Definición
Si está buscando la definición de una palabra o una frase, Google es el mejor lugar para hacerlo. En el cuadro de búsqueda de Google, escriba “define: la palabra o la frase” sin las comillas y haga clic en botón de búsqueda. Si hay una definición para el término de búsqueda, sin duda, la encontrará.
Sinónimos
Usted puede pensar que los motores de búsqueda son demasiado tontos para mostrar los resultados de las consultas de los sinónimos. No es así! Al menos, en el caso de Google! Si utiliza tilde “~” delante de una palabra clave en el término de búsqueda, Google aportará resultados sobre los sinónimos de esa palabra también.
Cómo buscar en un sitio web
Otra interesante característica del motor de búsqueda de Google es que permite que usted haga su consulta dentro de un sitio web específico. En primer lugar, escribir el término de búsqueda en el cuadro de búsqueda de Google y, a continuación, escriba “site: el sitio web o nombre de dominio”. Por ejemplo: si usted busca la palabra “Microsoft” en el sitio web www.micromedia.com le escribe a: sitio de Microsoft: micromedia.com.
Comprobar los vínculos de su sitio web
Si usted tiene un sitio web, el motor de búsqueda de Google también tiene una característica que le muestra las páginas web que enlazan con la suya. En el cuadro de búsqueda, escriba: Enlace: su dirección.
Otros consejos importantes para recordar:
* No hay necesidad de recurrir a la “Y”. Google siempre se refiere a todas las palabras en el término de búsqueda usando el operador booleano “y”. ( O mejor dicho como unir una palabra con otra)
* Sin embargo, si usted desea hacer su consulta para dos palabras – una u otra – puede usar “O”. Tiene que escribir “o” en mayúsculas para darle valor booleano.
* Google no es sensible a mayúsculas. Usted puede escribir los términos de búsqueda ya sea en mayúsculas o en minúsculas. Incluso las puede mezclar entre ellas.
* Google omite la mayoría de las palabras muy comunes, como el, en, etc Para buscar una palabra con mas fuerza, deberá hacer uso del signo más (+) delante de esa palabra. De la misma manera, se puede excluir una palabra de la búsqueda poniendo el signo menos (-) delante de ella.
* Si desea realizar una búsqueda exacta de una frase o expresión, deberá poner las palabras entre comillas. De esta forma, en su resultado de búsqueda sólo se mostrarán las páginas en las que la expresión exacta fue encontrada. Con el fin de buscar la frase: El Anillo de Moebius, escribirá “El Anillo de Moebius” en el cuadro de búsqueda.
También sugiero descargarse la barra Google. Aparte de la caja de búsqueda y su capacidad para bloquear los pop-ups, la barra Google también muestra el pagerank de la página web que esté visitando. El PageRank es un sistema de evaluación de páginas web desarrollado por Google y utilizados como base en el motor de búsqueda del algoritmo. La barra de herramientas también incluye la función de la capacidad de llenar formularios online de la información almacenada automáticamente. También puede mantener su diario o blog desde la barra de herramientas.
Para las delicias de gran parte de los usuarios de la red, Google, con su ambiciosa misión de organizar información de todo el mundo y hacerla universalmente accesible y útil, hasta el momento está haciendo un gran trabajo como motor de búsqueda muy útil en sus características y servicios. Sólo podemos esperar que el flujo de ideas innovadoras de Google no disminuyan en el futuro.
CSS: 3 simples pasos para que sus hojas de estilo sean más eficientes
24 de Julio de 2009En este artículo se pretende cubrir como podemos generar las hojas de estilo en su forma más eficiente.
1. Una hoja de estilo debe ser fácil de leer.
2. Una hoja de estilo debe ser fácil de mantener.
3. Una hoja de estilo debe ser bien comentada
4. El tiempo para alcanzar estos objetivos no debería afectar negativamente el tiempo de desarrollo de un sitio web.
Sugerencia 1: Comentario de su hoja de estilo
Lo primero sería componer la hoja de estilos por secciones. Esto tiene una serie de beneficios. Es decir, cabecera, navegación, el pie de página, etc -, esto hace que sus hojas de estilo sean mucho más manejables. El segundo beneficio es la legibilidad. Le tomará sólo un momento tener en cuenta cuando la sección de encabezado y la sección de navegación comienza.
1. /**** Cabecera ****/
2. /**** Contenido ****/
El segundo es explicar el uso poco ortodoxo de los estilos. Esto le permite recordar rápidamente la razón por la que ha insertado un truco o propiedad. Esto puede ser muy útil a la hora de regresar a una hoja de estilo después de un número de meses, y también ayudará a entender a otros desarrolladores porque se utilizó esa declaración.
1. ! Importante / ** Hack para hacer la navegación del IE correcta ** /
Sugerencia 2: Organice sus estilos alfabéticamente.
Eche un vistazo al siguiente ejemplo.
1 .#header {
2. width:200px;
3. margin:0 auto;
4. height: 80px;
5. background:url(../images/header.png) no-repeat;
6. padding:1px 0;
7. }
Ahora compárelo con la siguiente.
1. #header {
2. background:url(../images/header.png) no-repeat;
3. height: 80px;
4. margin:0 auto;
5. padding:1px 0;
6. width:200px;
7. }
Por orden alfabético la lista de atributos mejora la legibilidad de la hoja de estilos. Es mucho más fácil elegir rápidamente un elemento y modificarlo.
Sugerencia 3: Ficha de elementos anidados
Esto es algo similar a lo de comentar sus hojas de estilo. En un esfuerzo para hacer su hoja de estilo más fácil de leer es una buena idea la ficha de elementos anidados. Veamos el siguente ejemplo.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a { }
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
Ahora compárelo con el siguiente.
01. #header{ }
02.
03. #header #logo { }
04.
05. #header #logo a {}
06.
07. #header #logo a:hover { }
08.
09. #container { }
10.
11. #container #sidebar { }
12.
13. #container #content { }
La Tabulación de elementos anidados le permite ver rápidamente lo que está anidado y lo que a su vez le permite ver fácilmente cómo se anidan los elementos que afectan a uno u otro.
