Category Archives: Diseño Web

Diseño Web, HTML y CSS

CSS Juice: Recursos y tutoriales para el diseño web

Buen sitio con recursos y tutoriales relacionados con diseño y desarrollo web. Algunos de sus

posts populares incluyen:

Visita el sitio en: http://cssjuice.com/
< ! --adsense-->

Diseño Web, Internet

12 maneras de convertir tu sitio Web 1.0 en Web 2.0

Gracioso, pero real.

1. Replace esomething.com with

MYsomething.com

2. Increase 10px font to at least 12-16px font

3. Change categories to tags

4. Change your news section to a blog

5. Change email a

friend to RSS subscriptions

6. Change bookmark this to social network this

7. Change user account to user profile

8. Change crappy hard-coded HTML to Semantic HTML with

CSS

9. It’s visitors not HITS!

10. Add comments

11. Change esite.com?id=5235&sort=desc&useless=this &one%20more=still%20useless TO.. mysite.com/meaningful-

title

12. Change custom built site to open source CMS

Arículo completo: http://www.slayerment.com/

Diseño Web

Diseñando para todas las resoluciones de monitor

Interesante artículo que explica cómo diseñar (a manera de tutorial) para las resoluciones de

monitor más comunes.

From our research we have found that majority of our viewers are on the 1024×768 resolutions and higher. As time goes by more and

more people are going to switch to higher resolutions as seen by our site statistics. It is therefore very important to design web sites for all resolutions.

Ver el artículo aquí: http://www.entheosweb.com/

Diseño Web, Tips Avanzados

Degradés de todos los colores, un sólo PNG!

Interesante tutorial de Juanjo Vargas que nos muestra cómo aplicar un sólo

PNG a cualquier color para generar degradés a nuestro gusto.

En la web 2.0 se usan mucho los degradados y difuminados para fondos en general. La verdad es que si tenemos que abrir

el Photoshop y hacer un degradado con cada color y medida que queramos podemos morir en el intento, y hacer que nuestra web sea tan heavy que nos podamos ir a mear antes de que se carguen todas las

imágenes. Por ello una vez publicaron un artículo en Alistapart en que hablaban de usar siempre el mismo PNG para todo, y es lo

que voy a tratar de explicar ahora.

Ver tutorial aquí: http://edenahp.net/

Diseño Web, Herramientas

Listado de recursos para diseño y desarrollo web (Parte 2)

Gran listado de recursos para diseño y desarrollo web compilados por Marc Andreessen. Recordemos el primer listado de recursos, con gran material de apoyo disponible.

Meta-reference sites — organized lists of references and cheatsheets:

http://www.gotapi.com/
A wonderful online API reference covering many programming languages.

http://www.digilife.be/quickreferences/quickrefs.htm
An organized list of quick references and cheatsheets.

http://techcheatsheets.com/
A great site with links to cheatsheets on lots of programming languages.

Key providers of

cheatsheets:

http://www.visibone.com/
Visibone, the company that makes the best commercial cheatsheets for HTML, CSS, colors,

etc. Site includes free resources and downloadable versions of several great cheatsheets.

http://www.ilovejackdaniels.com/cheat-

sheets/
Original cheatsheets for HTML, CSS, PHP, and other technologies.

HTML cheatsheets:

http://html-

tags.info/
Free version of Visibone’s HTML cheatsheet.

http://www.ucc.ie/doc/World-

Wide_Web/htmlcard.html
HTML cheatsheet from Andrew Ford.

http://www.utoronto.ca/ian/books/extras/html-

7nov2000.pdf
HTML cheatsheet from Ian Graham.

http://www.ilovejackdaniels.com/
HTML cheatsheet from ILoveJackDaniels.

http://gosquared.com/liquidicity/archives/51
HTML cheatsheet from

Liquidcity.

CSS cheatsheets:

http://www.deepx.com/resources/quickref/CSS-1.0.pdf
CSS cheatsheet from DeepX.

http://www.utoronto.ca/
CSS cheatsheet from Ian

Graham.

http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
CSS cheatsheet from

ILoveJackDaniels. (And really, who doesn’t?)

http://www.gosquared.com/liquidicity/archives/33
CSS cheatsheet

from Liquidcity.

http://www.spectrum-research.com/V2/projects_css_reference.asp
CSS cheatsheet

from Spectrum Research.

http://www.veign.com/downloads/guides/qrg0007.pdf
CSS cheatsheet from

Veign.

http://home.tampabay.rr.com/bmerkey/cheatsheet.htm
CSS cheatsheet from Brett Merkey.

Javascript cheatsheets:

http://wps.aw.com/
Addison-Wesley Javascript cheatsheet.

http://sage.math.washington.edu/
Javascript cheatsheet from Holmer Hemsen.

http://www.ilovejackdaniels.com/
Javascript

cheatsheet from ILoveJackDaniels. (I really don’t understand how he produces so many cheatsheets, drinking as much Jack as he must.)

Browser compatibility matrices:

http://www.quirksmode.org/dom/compatibility.html
http://www.quirksmode.org/css/contents.html
Comprehensive browser compatibility matrices for DOM, HTML, CSS, and event

handling.

Colors:

http://www.visibone.com/colorlab/
Visibone’s free interactive web color

picker.

http://html-color-codes.com/
Visibone’s free web color quick reference guide.

http://www.veign.com/downloads/guides/qrg0006.pdf
Veign’s web color reference guide.

PHP

cheatsheets:

http://www.ilovejackdaniels.com/cheat-sheets/php-cheat-sheet/
PHP cheatsheet

from ILoveJackDaniels.

http://www.stevengould.org/
PHP 4 reference card from Steven

Gould.

Ver listado completo en http://blog.pmarca.com/

Diseño Web, Eventos

Apple rediseña su sitio web

Apple finalmente rediseño su sitio oficial. Ya había

hecho algunas actualizaciones de los sitios individuales de sus productos, pero esta vez se enfocó en el diseño global y en especial en la tan conocida barra de menú que nació de

la primera versión de interfaz gráfica del OS X (Acqua).

Ahora tiene un "look" más acorde con las nuevas versiones del sistema operativo, donde destaca

lineas elegantes y "degradés" por todas partes.

El uso de encabezados gráficos sobre dimensionados es una particularidad de los diseños en Apple, que le ha dado un impacto visual importante a sus interfaces.

Esta es la nueva página de entrada.

Esta es la página de los productos Mac.