10 errores usuales en HTML que no debes cometer

Junio 1st, 2009 | Escrito por: Tamara

A veces me quejo de la cantidad de twitts que recibo, pero muchas otras considero que envían cosas interesantes como este hallazgo en Line25.com que nos explica qué cosas nunca debemos hacer cuando estamos diseñando en HTML.

Siempre es bueno tener en cuenta cosas pequeñas que nos ayudarán a obtener un código más limpio, apropiado y ajustado a las normas que se utilizan hoy en día.

1. Colocar elementos block dentro de elementos inline

CODE:
  1. <a href="#"><h2>Esto está mal!</h2></a>
  2. <h2><a href="#">Esto está bien!</a></h2>

2. No incluir atributos ALT en imágenes

CODE:
  1. <img src="imagen.jpg" /> Incorrecto
  2. <img src="imagen.jpg" alt="Imagen de ejemplo" /> Correcto

3. No utilizar listas cuando se necesitan

CODE:
  1. INCORRECTO
  2. <p>
  3.     Item 1<br />
  4.     Item 2<br />
  5.     Item 3<br />
  6.     Item 4<br />
  7.     Item 5<br />
  8. </p>
  9. CORRECTO
  10. <ul>
  11.     <li>Item 1</li>
  12.     <li>Item 2</li>
  13.     <li>Item 3</li>
  14.     <li>Item 4</li>
  15.     <li>Item 5</li>
  16. </ul>

4. Usar <b> e <i> para negritas y cursivas

CODE:
  1. <b>Esto está en negrita</b>,
  2. y <strong>esto también (pero mejor!)</strong>
  3. <i>Esto está en cursiva</i>,
  4. y <em>esto también (pero mejor!)</em>

5. Utilizar demasiados cortes de línea <br />

CODE:
  1. Ejemplo de múltiples divisores
  2. <br />
  3. <br />
  4. No ayuda.
  5. <p>Ejemplo de divisor correcto</p>
  6. <p>Ayuda</p>

6. Utilizar las etiquetas de tachado y subrayado erróneas

CODE:
  1. <strike>Tachado</strike> o
  2. <u>subrayado</u> estan en deshuso.
  3. <del>Tachado</del> o
  4. <ins>subrayado</ins> son los que se usan ahora.

7. Utilizar estilización inline

CODE:
  1. <h2 style="color: red"> No!
  2. Utiliza siempre tu hoja de estilos.

8. Agregar o sacar bordes desde el html

CODE:
  1. <img src="#" alt="" border="0" />
  2. Utiliza siempre tu hoja de estilos.

9. No utilizar etiquetas de encabezado

CODE:
  1. <p><strong>Título</strong></p>
  2. <p>No corresponde</p>
  3.  
  4. <h3>Título</h3>
  5. <p>Corresponde</p>

10. Usar etiquetas como <blink> o <marquee>

CODE:
  1. <blink>Mira aquí!</blink>
  2. <marquee>Mira aquí!</marquee>
  3.  
  4. Simplemente, no lo hagas!

Entradas relacionadas

¿Existe potencial en los nichos pequeños y en español?

Junio 1st, 2009 | Escrito por: Pablo

Es una pregunta que me vengo haciendo hace tiempo, ¿existe potencial comercial en nichos realmente pequeños? La respuesta debería ser si o depende, porque si vamos a la teoría la dimensión del mercado donde trabajamos no es tan importante como el tipo y clase del segmento en si.

No obstante esto funciona y esta comprobado en otros idiomas, por ejemplo en ingles existen sitios a los que les va realmente bien trabajando con nichos de mercado muy pequeños y que a priori no tienen un recorrido importante, estos tienen trabajo y ganancias, en pocas palabras les va muy bien. Un ejemplo de ello podría ser el sitio Ravelry, una red social para los amantes del tejido y el crochet, una temática que realmente no se tiene en cuenta por los emprendedores, y que se podría definir como muy poco “taquillera”, el sitio cuenta con 362,878 usuarios registrados, nada mal verdad?

red social costura

Ahora si busco proyectos exitosos en español que escapen de las temáticas mas populares me cuesta muchísimo encontrar ejemplos, pero no encuentro razones por las cuales pueda llegar a fracasar abordar nichos pequeños de mercado. Aunque algo que vengo notando desde siempre es que los que hablamos este idioma en general tenemos cierta reticencia a pagar por ejemplo por un servicio premium, algo que es mucho mas común en otros idiomas. Y esto puede ser una simple razón, pero por la cual no existen empresas en español como por ejemplo Balsamiq, en donde su creador comenzó como un hobbie su aplicación para crear mockups y hoy en día reporta ganancias mas que interesante, inclusive se plantea seguir aumentando su plantilla de personal.

¿Intentarías explotar un nicho pequeño o es una perdida de tiempo?

Entradas relacionadas

Screensavers para Mac

Mayo 29th, 2009 | Escrito por: Tamara

Los protectores de pantalla son necesarios, ya sea para deleitarnos mirándolos o bien para prevenir daños a nuestros monitores, siempre están presentes en nuestros ordenadores. Aquí les acerco una serie de screensavers para Mac, en algunos casos están disponibles para Windows también, pero no todos.

Screensavers para Mac

Analogy

Viene para ambos sistemas operativos y utiliza una curiosa forma de reloj analógico en tiempo real.

Descargar Analogy

Protectores de pantalla para Mac

Time Machine

Es una animación que imita la máquina del tiempo como screensaver. Se puede utilizar normalmente o con lector de RSS.

Descargar Time Manager

Protectores de pantalla para Mac

Euphoria

Formas abstractas y múltiples colores, un screensaver solo disponible para Mac.

Descargar Euphoria

Protectores de pantalla para Mac

Fenêtres Volantes

Un curioso screensaver que catapulta tus aplicaciones fuera de la pantalla creando un efecto muy original. Solo disponible para Mac.

Descargar Fenetrês Volantes

Screensavers para Mac

Digg Labs

Uno de mis favoritos, este screensaver se encuentra sincronizado con digg y muestra el avance o crecimiento de sus etiquetas, fotografías o enlaces. Hay cinco modos diferentes de mostrar la información, siempre en movimiento. Y a su vez, se puede seleccionar que tipo de mensajes queremos que nos aparezcan, entre los nuevos, todos, o los más visitados. Este fondo de pantalla se encuentra disponible para Windows y Mac.

Descargar Digg Labs

Screensavers para Mac

Alien Sun Clock

Permite ver las cosas desde una perspectiva alienígena. Solo disponible para Mac.

Descargar Alien Sun Clock

Hay una gran variedad de screensavers, si quieren ver más les recomiendo esta entrada de Mac.Appstorm dónde encontrarán estos mismos y algunos otros.

Entradas relacionadas

La seguridad de Twitter

Mayo 29th, 2009 | Escrito por: Pablo

twitter-logoEs increíble la cantidad de aplicaciones que salen todos los días para Twitter, llegando al punto de dejar de hablar de muchas de ellas por no terminar aburriendo con el tema, además de que muchas de estas aplicaciones no tienen ni la más mínima utilidad practica. Mas allá de esto lo que me llama la atención es que Twitter no haga nada para mejorar la seguridad de todos sus usuarios, vamos con un ejemplo.

Muchas de las aplicaciones que salen para Twitter nos solicitan que ingresemos nuestro nombre de usuario y contraseña, algo que muchas veces uno hace sin dudarlo, el tema aquí es que nadie nos garantiza que esta información no sea utilizada con otros propósitos, sin ir mas lejos hace pocos días paso algo similar como lo que comento con el sitio Twittercut que prometía “regalarnos” mil seguidores en un día, cuando lo que realmente hacia era robarnos las cuentas.

Twitter necesita una especie de Facebook Connect de forma urgente, algo que provea a todos sus usuarios de otra capa de seguridad, o bien una especie de certificado de aplicación segura también podría funcionar.

Hace un tiempo se había hablado este tema y en la wiki de su api se empezaban a ver intenciones de crear algo así, pero esto aparentemente y según creo yo, quedo en la nada. Ahora la única protección que tenemos los usuarios es buscar información y referencias de otros usuarios a la hora de registrarnos.

Veremos si twitter logra mejorar este aspecto.

Y vos  ¿como decidís que aplicación es segura y cual no?

Entradas relacionadas

La etiqueta <video> disponible en Google Chrome 3.0

Mayo 28th, 2009 | Escrito por: Pablo

Una buena noticia en los avances por implementar HTML 5 es que Google Chrome 3.0 implementara y reconocerá correctamente la etiqueta <video> algo que en pocas palabras nos dice que se podrán embeber videos en la web sin la necesidad de un soporte, o reproductor de video algo que seguramente no hará saltar de alegría a los directivos a cargo de Flash de la empresa Adobe.

La implementación de esta etiqueta en el código es similar a la que Sacha coloco cuando comento la noticia:

etiqueta video chrome

Como se darán cuenta esta forma de colocar un video es MUCHO más simple que la que se utiliza en la actualidad. En lo personal me encantaría que esta etiqueta se vuelva popular rápidamente, significaría que los desarrolladores podremos colocar videos con la misma facilidad con la que ahora se muestra una simple imagen.

Es una lastima que la realidad sea tan distinta, y digo casi con certeza que para que esta etiqueta se vuelva popular deberá pasar mucho tiempo por no decir años, imaginen que si todavía se utiliza IE6 el tiempo que deberá pasar para que la gente se instale la ultima versión de los navegadores. Mas allá de esto me sigue pareciendo una buena noticia y con mucho futuro por delante.

Entradas relacionadas

Iconza: iconos personalizados gratis

Mayo 28th, 2009 | Escrito por: Tamara

Cuando busco iconos para descargar y agregar a mis proyectos suelo nunca encontrarlos como quiero, tengo que colorearlos para que combinen, o en los casos mas extremos modificarles el fondo para que no queden horribles.

Iconos personalizables

El sitio iconza es una aplicación online que nos permite editar todos los iconos al mismo tiempo y editarles los colores de fondo y frente a ojo o ingresando su código hexagecimal. Es una aplicación muy práctica dado que modificar iconos nunca ha sido una tarea fácil.

Iconos perzonalizados gratis

Además de los colores, se pueden seleccionar 3 medidas diferentes de iconos (que considero son un poco pequeños) y se pueden descargar individualmente o todo el set desde el botón "Download all icons". Una herramienta simple que puede sacarnos de un apuro.

Fuente: Web Resources Depot

Entradas relacionadas

Windows pirata u original

Mayo 27th, 2009 | Escrito por: Pablo

Hoy hablando con mi socio Miguel nos cuestionamos algo bastante interesante, ¿porque las personas deberían adquirir una licencia original de Windows? Como ya lo comente en otras oportunidades las licencias que tengo de Windows son originales y no porque las haya adquirido con esa intención sino porque vinieron con las computadoras a la hora de comprarlas. No obstante y sinceramente no me veo saliendo a comprar una licencia de Microsoft Windows porque realmente no le encuentro mucho sentido a pagar por algo que hasta cierto punto no me trae ningún beneficio.

windows vista original

Por ejemplo hace unos meses un cliente mió compro la licencia original de Windows XP y desde Microsoft le demoraron 15 días en enviarle el código de activación,15 días por algo que debería ser automático, o sea, que no solamente le hicieron perder tiempo sino que también tuvo que pagar por eso.  Obviamente estimo que esto fue un caso aislado y no pasa con todos los clientes. Y por sobre todas las cosas voy a aclarar algo, yo no odio a Microsoft, si bien creo que sus productos no son de lo mejor considero que no funcionan tan mal como muchos dicen, es mas, con la configuración correcta y sin instalar cosas raras Windows no es un sistema tan horrible, hasta cierto punto se puede decir que funciona bien.

Pero me parece que en un país como Argentina donde la piratería manda, en donde nuestra presidente quiere poner un impuesto que solo extienda la brecha digital, cobrar por una licencia 349 euros es prácticamente una locura.

Ahora muchos dirán: pero tener una versión de Windows pirata es ilegal y simplemente eso debería ser una razón para adquirir una licencia, otros dirán, también existen alternativas libres que incluso pueden ser mejor. Dos puntos que son completamente validos y que tienen más razón que un santo,  no obstante para el común de la gente no son suficientes y mas aun en un marco social-económico en donde comprar una licencia equivale a gastarse el sueldo de un mes.

Ahora la pregunta que les hago es: ¿aconsejarías comprar una licencia de Windows a una persona de una situación económica estable pero no sobresaliente?

Entradas relacionadas

Cómo aplicar texturas en Fireworks

Mayo 27th, 2009 | Escrito por: Tamara

Primero, quiero comentarles sobre una pequeña pero muy útil galería de texturas en formato png ideales para Fireworks. Este programa tiene la posibilidad de agregar imágenes como texturas de forma muy fácil.

La primera aclaración es que cualquier textura que encuentren puede ser fácilmente agregada a cualquier versión de Fireworks. Por lo que no tienen que preocuparse por la extensión o la forma del archivo de imagen.

Tutorial sobre cómo aplicar texturas con Fireworks

En el caso de esta galería nos posicionamos con el mouse sobre la imagen de la textura que deseamos descargar y hacemos clic con el botón derecho. Seleccionamos "Guardar imagen como..." y allí seleccionamos una carpeta destinada a almacenar nuestras texturas.

Texturas en Fireworks

Una vez guardadas, vamos a nuestro Fireworks y creamos un nuevo documento del tamaño que necesitemos. Yo elegí uno de 300x300 pixels con fondo transparente, dejo la selección del color para después.

Texturas en Fireworks

Texturas en Fireworks

Ahora necesitamos un sólido para rellenarlo con la textura que deseemos. Para ello iremos a la sección Vector en nuestra barra de herramientas y seleccionaremos la Herramienta Rectángulo o simplemente presionamos la tecla (U).

Texturas en Fireworks

Hacemos clic y arrastramos sobre el lienzo el tamaño del recuadro que queramos. Si no nos gusta siempre podemos utilizar las herramientas de escalar o incluso modificar el tamaño desde la barra de propiedades. Pues bien, ahora tenemos nuestro sólido, seleccionamos el color que queremos y listo, ya estamos listos para las texturas.

En nuestra barra de Propiedades, sector inferior de la pantalla, encontraremos al seleccionar el sólido que hay distintas opciones entre las que encontramos las Texturas, al desplegar el menú aparecen todas las texturas que se encuentran predeterminadas por el programa. Nos dirigimos hacia abajo con las flechas hasta la última posición.

Allí encontraremos la opción "Otras...", se abrirá una ventana en la que iremos en busca de nuestra textura descargada al principio del tutorial, seleccionamos el archivo .png que habíamos descargado y listo. Se aplica automáticamente sobre nuestro sólido.

Texturas en Fireworks

Lo último que nos queda es adaptar las configuraciones que vienen por defecto a lo que nosotros queremos lograr. Para esto debemos jugar con el color de fondo del documento, el color del sólido y la visibilidad de la textura. Por ejemplo, aquí hay una imagen de cómo quedaría mi sólido con las opciones predeterminadas. El color de mi sólido es #553747, fondo transparente, con la textura al 50%.

Texturas en Fireworks

Ahora bien, vamos a hacer que los puntos no esten tan definidos, pero sobre todo que el  blanco no invada nuestra textura. Para esto hacemos clic en la parte gris del lienzo (la que no tiene contenido, fuera del cuadrado visible) Allí en nuestra barra propiedades aparecerán las "Propiedades del lienzo", en la opción Lienzo ingresaremos un color que queramos tener de fondo, en este caso yo seleccioné negro #000000.

Texturas en Fireworks

Una vez que tenemos el color de fondo, podemos ir a nuestro solido y modificarle todas las opciones que queramos. Incluso en mi imagen modifiqué las opciones de relleno seleccionando un degradado lineal que me permitiera darle profundidad. No quiero limitarlos, por lo que simplemente les voy a decir qué cosas pueden tocar para lograr lo que necesitan.

Texturas en Fireworks

Bien, con el sólido seleccionado, si cliquean donde se lee Lineal en la imagen de arriba podrán elegir entre varias formas de relleno, que para aplicar a texturas solo nos servirán los sólidos o degradados, ya que el resto completa la imagen con otras cosas. El porcentaje que aquí se encuentra en 38% es la visibilidad de la textura, a mayor porcentaje, más marcada se ve y viceversa. Debajo podemos tildar la opción Transparente para que nos permita ver el color del sólido o bien, dejarlo destildado para que la textura se complete con blanco. Por último para dejar ver el fondo en la medida que queramos nos dirigimos al sector derecho sobre los filtros, encontrarán un número 100 esto es la visibilidad del sólido entero, al jugar con ello lo haremos más transparente para fundirlo con el fondo del lienzo.

Texturas en Fireworks

Fireworks es buen amigo para estas cosas ya que es bastante intuitivo, espero haber sido clara y les sirva el tutorial, cualquier consulta  no duden en comentar.

Entradas relacionadas

¿Punto de saturación?

Mayo 27th, 2009 | Escrito por: Pablo

Acabo de leer dos entradas que reflejan dos cosas que vengo pensando desde hace unos meses, por un lado una entrada de Guillermo sobre despersonalización de los blogs y por otro lado una entrada de Javier sobre el estado de la publicidad en la actualidad. Como se darán cuenta estas dos entradas a primera vista no tienen un factor en común, no obstante yo creo que si y hasta cierto punto una es consecuencia de la otra.

En la entrada de Loogic se habla sobre cómo la publicidad en internet está a la baja, cómo el presupuesto de las empresas tiende a menos, y hasta comenta como algunos ya comienzan a cuestionar la efectividad de Internet como soporte publicitario. Cuestiones que uno comienza a analizar cuando las cosas van mal, hace mas o menos un año cuando las cosas iban relativamente bien solo se hablaba de crecimientos, presupuestos de inversión mas grandes, etc. Hoy con la crisis, con esta incertidumbre todo tiende a cero, todo pareciera desmoronarse.

Por otro lado, en la entrada de Alt-tab se comenta como muchos blogs comienzan a despersonalizarse en el afán de crecimiento, y podrán confundir esta despersonalización con una profesionalización, pero si recapacitamos un poco un blog que no muestra opinión hasta cierto punto deja de lado uno de los factores por lo que existen las bitácoras y por lo que tomaron tanta fuerza estos últimos años. O acaso ¿alguien duda que los blogs llegaron a ser lo que son en gran parte por contar con la opinión y postura de las personas que los escriben?

Mi opinión de estas dos entradas (que recomiendo leer) es que, una es consecuencia de otra, en gran parte muchos blogs estas aumentando la cantidad de entradas, de editores en gran parte para equilibrar la balanza,  antes uno podía generar ingresos escribiendo una cantidad de X artículos por día, ahora para mantener esos ingresos hace falta 2X, por poner un numero. Y eso lamentablemente hace que la calidad descienda, que ya no quede tiempo para escribir entradas de opinión.

En nuestro caso ni Tamara ni yo vivimos del blog, aunque los ingresos que genera nos ayudan mucho, pero me parece que esta caída de la publicidad online repercutió muchísimo en la calidad de los blogs, principalmente en los que sus dueños viven prácticamente de la publicidad, especialmente de Adsense.

A menos dinero, se necesita generar mas cantidad de contenidos y lamentablemente menores sueldos para los editores, ¿Qué se calidad se puede exigir pagando menos de 5 dólares por un post?

Yo esto siempre lo vi en las redes de blogs, pero ahora veo como esto se empieza a extender por toda la red. Y a todo esto hay que sumar que la torta a repartir no solo se hizo más chica sino que también se debe repartir entre más y más personas.

Entradas relacionadas

  • No se encontraron post relacionados

Gadgets inspirados en LEGO

Mayo 26th, 2009 | Escrito por: Tamara

Hay quienes crecimos con ellos, hay quienes los conocieron ya de grandes o a través de sus hijos, y hay quienes se dedican a inventarles nuevas aplicaciones, los ladrillitos de LEGO no solo han generado fanáticos alrededor del mundo sino que también se han convertido en un emblema de la cultura pos moderna.

LEGO en la tecnología

USBs

LEGO Gadgets

Cámara Fotográfica

LEGO en la tecnología

Parlantes para iPod

LEGO en la tecnología

LEGO en el hogar

Set de cubiertos

LEGO en el hogar

Sal y pimienta

LEGO en el hogar

Correctores

LEGO en el hogar

LEGO en cine y tv

Star Wars

LEGO en el cine

Futurama

LEGO en la tv

LEGO en el arte

Arquitectura

LEGO en el arte

LEGO en el arte

Imitación de pinturas

LEGO en el arte

LEGO en el arte

Sin duda hay miles de aplicaciones más que se le han dado a estos entretenidos bloques, aquí hay una lista realizada por Toxel de diferentes aplicaciones que hoy en día se le da a la inspiración LEGO.

Entradas relacionadas