Básicos Diseño Web

RSS (Rich Site Summary, o más comúnmente Really Simple Syndication) es un formato popular para publicar un «feed» de contenido de un sitio web. Los blogs, comunicados de prensa, actualizaciones u otros contenidos actualizados regularmente son candidatos lógicos para obtener un feed RSS.

Aunque no es tan popular como lo era hace unos años, sigue siendo útil convertir el contenido de este sitio web actualizado regularmente en un canal RSS y ponerlo a disposición de los visitantes de su sitio. Además, como también es bastante fácil crear y añadir este feed, hay pocas razones para evitar añadir uno a su sitio web.

Puede añadir un feed RSS a una página web individual o incluso añadirlo a todas las páginas de su sitio web en caso de que eso sea lo que decida hacer. Los navegadores habilitados para RSS verán entonces el enlace y permitirán a los lectores suscribirse a su feed automáticamente, o cualquiera puede copiar la URL de su feed y leer su contenido con un lector RSS en línea.

Los lectores que se suscriben a su feed RSS reciben actualizaciones de su sitio automáticamente, en lugar de tener que visitar siempre sus páginas para comprobar si algo es nuevo o ha cambiado. Además, los motores de búsqueda verán su feed RSS cuando esté enlazado en el HTML de su sitio.

Una vez que haya creado su feed RSS, querrá enlazarlo para que sus lectores puedan encontrarlo. Esto hace que sea muy fácil para ellos saber que tienes un feed y saber exactamente cómo suscribirse a él.

Uso de un hipervínculo

Hay dos maneras principales de vincularse a un feed RSS: a través de un hipervínculo estándar y a través de una imagen en la que se puede hacer clic.

Dos maneras de enlazar con un canal RSS.

La manera más fácil de enlazar con su archivo RSS es con un enlace HTML normal. Se recomienda apuntar a la URL completa de su feed, incluso si normalmente utiliza enlaces de ruta relativos. He aquí un ejemplo de esto usando sólo un enlace de texto (también llamado texto de anclaje):

Si quieres ser más aficionado, puedes usar un icono de feed junto con tu enlace (o como enlace independiente). El icono estándar utilizado para las fuentes RSS es un cuadrado naranja con ondas de radio blancas (ver arriba). El uso de este icono es una gran manera de hacer que la gente sepa inmediatamente a qué va ese enlace. De un vistazo, reconocerán el icono RSS y sabrán que este enlace es para un RSS.

Puedes poner estos enlaces en cualquier lugar de tu sitio que quieras sugerir a la gente que se suscriba a tu feed. Por supuesto, el HTML también se puede editar a su gusto; puede ajustar el tamaño del icono ( ancho y alto ), borde del img valor, alt texto, src enlace para la imagen RSS, y href enlace para el enlace a su feed RSS.

Agregue su feed al HTML

Muchos navegadores modernos tienen una forma de detectar los canales RSS y luego dan a los lectores la oportunidad de suscribirse a ellos, pero sólo pueden detectar los canales si les dices que están ahí.

Enlace a un canal RSS desde el HTML de un sitio web.

Esto se hace con la etiqueta link en la cabecera de su HTML:

Este texto tiene que ir dentro de las etiquetas para funcionar correctamente.

Luego, en varias ubicaciones, el navegador web verá la fuente y proporcionará un enlace a ella en el navegador chrome. Por ejemplo, en Firefox verás un enlace al RSS en el cuadro URL. A continuación, puede suscribirse directamente sin tener que visitar ninguna otra página.

Uso de RSS hoy

Aunque sigue siendo un formato popular para muchos lectores, el RSS no es tan popular hoy en día como lo era antes. Muchos sitios web que solían publicar su contenido en formato RSS han dejado de hacerlo y los lectores más populares, incluido Google Reader, han sido descontinuados debido a la disminución constante del número de usuarios.

En última instancia, añadir un feed RSS es muy fácil de hacer, pero el número de personas que se suscribirán a ese feed es probable que sea pequeño debido a la menor popularidad de este formato en estos días.

Hay muchos beneficios para los editores de texto o de código HTML. Pero también hay algunos inconvenientes. Antes de unirse al debate, conozca todos los hechos. Un editor se define como un editor de texto si su modo de edición principal es texto o código HTML, incluso si incluye una opción de edición WYSIWYG.

Últimos desarrollos

Las herramientas de desarrollo web más avanzadas en la actualidad ofrecen la posibilidad de editar sus páginas web tanto en vista HTML/código como en WYSIWYG, por lo que la distinción no es tan estricta como antes.

¿Por qué tanto alboroto?

Este argumento realmente se deriva de la forma en que comenzó el desarrollo de la página web. Cuando comenzó a principios o mediados de la década de 1990, la construcción de una página web requería que se pudiera escribir código HTML, pero a medida que los editores se volvían más y más sofisticados, permitían que las personas que no sabían HTML construyeran páginas web. El problema era (y a menudo, todavía lo es) que los editores WYSIWYG pueden generar HTML que es difícil de leer, no cumple con los estándares y sólo es realmente editable en ese editor. Algunos puristas del código HTML creen que esto es una corrupción de la intención de las páginas web, mientras que la mayoría de los diseñadores sienten que lo que sea que les facilita la construcción de sus páginas es aceptable e incluso valioso.

Pros

• Más rápido de editar : Para ediciones simples, a menudo es más rápido hacer cambios en una página usando un editor de texto.
• Le ayuda a aprender HTML : Los editores de texto le enseñan a leer HTML. A menudo tienen asistentes y funciones para realizar las tareas más comunes (como las etiquetas básicas de la página), pero aprenderás HTML y código básico si usas un editor de texto.
• Más comercializable : Un desarrollador web que puede escribir HTML usando un editor de texto será más comercial que uno que sólo puede usar un editor WYSIWYG. El primero es más flexible y puede ponerse al día con cualquier herramienta de edición HTML, mientras que el segundo tiene que empezar de nuevo con cada nueva herramienta de edición.
• Sin HTML «Funky» : El único HTML que estará en el documento serán las etiquetas que usted colocó allí deliberadamente. Esto ayudará a que sus páginas se descarguen más rápido, así como a que se vean más delgadas.
• HTML legible para humanos : Esto es especialmente importante si trabaja en un equipo de desarrolladores web. El HTML se puede espaciar como le guste a su equipo, e incluir comentarios u otras notas para permitir una edición más eficiente por parte de otros miembros del equipo.

Contras

• Debe saber HTML : Aunque la mayoría de los editores de texto HTML pueden ayudar con las etiquetas y sugerir atributos, etc., esto no sustituye el conocimiento de HTML. La mayoría de los editores de texto modernos tienen estilos de arrastrar y soltar como negrita y cursiva, pero si no puedes recordar el código para el «espacio no quebradizo», es posible que tu editor no pueda ayudarte.
• Curva de aprendizaje más empinada : Debido a que usted tiene que aprender tanto HTML como las funciones del editor en sí, un principiante encontrará un editor de texto más difícil de usar.
• Más difícil de «Diseñar» Con : Algunas personas encuentran que los editores de texto son más difíciles de diseñar páginas porque no pueden visualizar cómo se verá la página sólo desde el HTML.

Resolución

• Para Desarrolladores Web Profesionales y Escritores HTML Avanzados : Si quieres hacer del Desarrollo Web tu profesión, y no planeas abrir tu propio estudio de diseño web, entonces definitivamente es recomendable aprender HTML y usar un editor de texto. Los editores de texto le llevarán más lejos a largo plazo, ya que reforzarán sus conocimientos de HTML.
• Para principiantes y desarrolladores web no profesionales : Si quieres hacer desarrollo web como hobby, no hay razón para no usar un editor WYSIWYG. Pero recuerda, para conseguir un trabajo como desarrollador web, realmente necesitas saber HTML, y un editor WYSIWYG no te ayudará allí.

Los formularios de Mailto no siempre son tan fiables como cabría esperar. Parece una cosa simple, haga clic en el botón del formulario y le enviará los datos del formulario por correo electrónico. Pero los formularios de mailto no siempre son tan simples. A veces, usted o su cliente rellenan cuidadosamente el formulario, pero luego, en lugar de enviar el contenido del formulario a la dirección mailto, abre el cliente de correo electrónico.

A veces, el cliente de correo electrónico tiene un asunto que se parece a:

?name=jennifer&email=webdesign@aboutguide.com&comments=estos son mis comentarios

pero el cuerpo del email está en blanco. Y a veces, no hay nada del formulario que se agrega al correo electrónico en absoluto. Este es el problema con Mailto Forms. Se basan en dos cosas:

1. El sistema del cliente debe tener un cliente de correo electrónico predeterminado
2. El navegador web del cliente debe poder conectarse a ese cliente de correo electrónico

Si crea una página con un formulario mailto y su cliente no tiene un cliente de correo electrónico en su sistema, el formulario mailto no funcionará. Si su navegador web no puede conectarse al cliente de correo electrónico, el formulario mailto no funcionará. Este problema depende de muchos factores, entre ellos:

• sistema operativo
• navegador web y versión
• cliente de correo electrónico y versión
• otros factores desconocidos

Y si bien es posible que pueda utilizar JavaScript para detectar para el navegador y el sistema operativo – si se trata de la interacción entre ellos y el cliente de correo electrónico, todavía tendrá un problema.

¿Qué puede hacer para arreglar los formularios Mailto rotos?

Si usted es un desarrollador web que utiliza formularios y desea utilizar un formulario mailto, debe tener en cuenta esta limitación. No importa lo que haga, es posible que algunos de sus clientes no puedan utilizar el formulario.

Si todavía desea utilizar un formulario mailto en su sitio, debe asegurarse de que sus formularios sean correctos. Y debe validar su HTML para asegurarse de que no haya otros problemas.

La mejor solución para formularios Mailto rotos

Le recomiendo encarecidamente que utilice un script CGI o PHP en lugar de un formulario mailto. Hay muchas maneras de usar un CGI aunque no sepa programar. Algunos recursos que pueden ayudar:

• Escribe tu propio CGI: Usando Perl u otro lenguaje CGI, puede escribir su propio CGI para procesar el formulario. El beneficio de esto es que usted puede hacer que el CGI haga lo que necesite.
• Asegúrese de que el correo electrónico es correcto: independientemente del tipo de formulario que utilice, puede utilizar JavaScript para validarlo. Y este script validará un campo para una dirección de correo electrónico correctamente formateada.

Mira cualquier página web en línea hoy y notarás que comparten ciertas cosas en común. Uno de esos rasgos compartidos son las imágenes. Las imágenes correctas añaden mucho a la presentación de un sitio web. Algunas de esas imágenes, como el logotipo de una empresa, ayudan a marcar el sitio y a conectar esa entidad digital con su empresa física.

Para añadir una imagen, icono o gráfico a su página web, necesita utilizar la etiqueta en el código HTML de una página. La etiqueta IMG se coloca en el HTML exactamente donde se desea que se visualice el gráfico. El navegador web que está renderizando el código de la página reemplazará esta etiqueta con el gráfico apropiado una vez que la página sea vista. Volviendo al ejemplo del logotipo de nuestra compañía, aquí está la forma en que usted podría agregar esa imagen a su sitio:

Atributos de imagen

Mirando el código HTML de arriba, verá que el elemento incluye dos atributos. Cada uno de ellos es necesario para la imagen.

El primer atributo es el «src». Este es literalmente el archivo de imagen que desea que se muestre en la página. En nuestro ejemplo estamos usando un archivo llamado «logo.png». Este es el gráfico que el navegador mostrará cuando renderice el sitio.

También notará que antes de este nombre de archivo, hemos añadido información adicional, «/images/». Esta es la ruta del archivo. La barra oblicua inicial le dice al servidor que busque en la raíz del directorio. Luego buscará una carpeta llamada «images» y finalmente el archivo llamado «logo.png». Usar una carpeta llamada «images» para almacenar todos los gráficos de un sitio es una práctica bastante común, pero la ruta de su archivo cambiaría a lo que sea relevante para su sitio.

El segundo atributo obligatorio es el texto «alt». Este es el «texto alternativo» que se muestra si la imagen no se carga por alguna razón. Este texto, que en nuestro ejemplo dice «Logotipo de la empresa», se mostrará si la imagen no se carga. ¿Por qué pasaría eso? Una variedad de razones:

• Ruta de archivo incorrecta
• Nombre de archivo incorrecto o error ortográfico
• Error de transmisión
• El archivo se eliminó del servidor

Estas son sólo algunas de las razones por las que nuestra imagen especificada puede estar ausente. En estos casos, nuestro texto alternativo se mostraría en su lugar.

El texto alternativo también es utilizado por el software de lectura de pantalla para «leer» la imagen a un visitante con problemas de visión. Como no pueden ver la imagen como nosotros, este texto les permite saber qué es la imagen en sí. Esta es la razón por la que se requiere texto alternativo y por la que debe indicar claramente lo que es la imagen!

Un malentendido común del texto alternativo es que está destinado a los motores de búsqueda. Esto no es cierto. Mientras que Google y otros motores de búsqueda leen este texto para determinar qué es la imagen (recuerde, ellos tampoco pueden «ver» su imagen), usted no debe escribir texto alternativo para atraer únicamente a los motores de búsqueda. Autor de texto alternativo claro que está destinado a los seres humanos. Si también puede agregar algunas palabras clave en la etiqueta que atraen a los motores de búsqueda, eso está bien, pero siempre asegúrese de que el texto alternativo está cumpliendo su propósito principal, indicando cuál es la imagen para cualquiera que no pueda ver el archivo de gráficos.

Otros atributos

El tag IMG también tiene otros dos atributos que puede ver en uso cuando pone un gráfico en su página web: el ancho y el alto. Por ejemplo, si utiliza un editor WYSIWYG como Dreamweaver, automáticamente agrega esta información por usted. Aquí hay un ejemplo:

Los atributos WIDTH y HEIGHT indican al navegador el tamaño de la imagen. El navegador sabe entonces exactamente cuánto espacio en el diseño para asignar, y puede pasar al siguiente elemento de la página mientras la imagen se descarga. El problema con el uso de esta información en su HTML es que no siempre querrá que su imagen se muestre en ese tamaño exacto. Por ejemplo, si tiene un sitio web con capacidad de respuesta cuyo tamaño cambia en función del tamaño de la pantalla del visitante y del dispositivo, también querrá que sus imágenes sean flexibles. Si indica en su HTML cuál es el tamaño fijo, le resultará muy difícil invalidar con consultas de medios CSS con capacidad de respuesta. Por esta razón, y para mantener una separación de estilo (CSS) y estructura (HTML), se recomienda que NO añada atributos de ancho y alto a su código HTML.

Una nota: Si deja estas instrucciones de tamaño desactivadas y no especifica un tamaño en CSS, el navegador mostrará la imagen en su tamaño original predeterminado.

Editado por Jeremy Girard

El contenido de texto siempre ha sido una pieza importante de los sitios web, pero en los primeros días de la Web, los diseñadores y desarrolladores estaban severamente limitados en el control tipográfico que tenían sobre sus páginas web. Esto incluía una limitación en las fuentes que podían utilizar de forma fiable en sus sitios. Es probable que haya escuchado el término «fuentes seguras para la web» mencionado en el pasado. Esto se refería al pequeño conjunto de fuentes que era muy probable que se incluyeran en el ordenador de una persona, lo que significa que si su sitio utilizaba una de esas fuentes, era una apuesta segura que se renderizaría correctamente en el navegador de una persona. Hoy en día, los profesionales de la web tienen una gran cantidad de nuevas fuentes y opciones de tipos con las que trabajar, una de las cuales es el formato WOFF.

¿Qué es WOFF?

WOFF es un acrónimo que significa «Web Open Font Format». Se utiliza para comprimir fuentes para su uso con la propiedad CSS @font-face. Es una forma de incrustar fuentes en páginas web para que pueda utilizar fuentes especializadas más allá de las típicas «Arial, Times New Roman, Georgia», que son algunas de las fuentes seguras para la web mencionadas anteriormente.

WOFF se presentó al W3C como un estándar para el empaquetado de fuentes para páginas web. Se convirtió en un borrador de trabajo el 16 de noviembre de 2010. Hoy en día tenemos WOFF 2.0, que mejora la compresión de la primera versión del formato en casi un 30%. En algunos casos, estos ahorros pueden ser aún más sustanciales!

¿Por qué usar WOFF?

Las fuentes web, incluidas las que se entregan en formato WOFF, ofrecen muchas ventajas sobre otras opciones de fuentes. Por muy útiles que hayan sido esas fuentes seguras para la web, y ciertamente todavía hay un lugar para ellas en nuestro trabajo, es bueno también ampliar nuestras opciones y abrir nuestras opciones tipográficas.

Las fuentes WOFF tienen las siguientes ventajas:

• Son más accesibles que las fuentes como imágenes. Los estilos WOFF son texto HTML plano con CSS, lo que le proporciona una accesibilidad y un control de diseño que las imágenes no permiten.
• Los archivos WOFF incluyen información tipográfica como formas contextuales y figuras de estilo antiguo. Esto le da a sus páginas web una mejor tipografía porque está usando los caracteres correctos, no sólo aproximaciones.
• Las fuentes WOFF pueden ayudar con la internacionalización porque puedes incrustar fuentes con caracteres de otros idiomas.
• Como todo el texto con estilo CSS, las fuentes con estilo WOFF son más amigables con los motores de búsqueda. Los motores de búsqueda no «ven» el texto incrustado en una imagen, y aunque el texto ALT puede ayudar, no hay sustituto para el texto en sí.
• Las fuentes WOFF están comprimidas, por lo que son más pequeñas que otros tipos de archivos de fuentes. Esto ayudará con la velocidad de descarga del sitio y el rendimiento general.
• Puede utilizar archivos WOFF para preservar su identidad de marca incrustando sus fuentes corporativas como archivos WOFF.

Soporte del navegador WOFF

WOFF tiene un excelente soporte para navegadores modernos, incluyendo:

• Cromo 6+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 11.1+
• Safari 5.1+

Hoy en día, es esencialmente compatible con todas las versiones de Opera Mini, con la única excepción de todas las versiones de Opera Mini.

Cómo usar fuentes WOFF

Para usar un archivo WOFF, necesita subir un archivo WOFF a su servidor web, darle un nombre con la propiedad @font-face, y luego llamar a la fuente en su CSS. Por ejemplo:

1. Suba la fuente myWoffFont.woff al directorio /fonts del servidor web.
2. En su archivo CSS agregue una sección @font-face:
   1. @font-face {
   2. familia de fuentes: myWoffFont;
   3. src: formato url(‘/fonts/myWoffFont.woff’) (‘woff’);
3. Añada el nuevo nombre de fuente (myWoffFont) a su pila de fuentes CSS, como lo haría con cualquier otro nombre de fuente:
   1. p {
   2. familia de fuentes: myWoffFont, Geneva, Arial, Helvetica, sans-serif;

Dónde obtener fuentes WOFF

Hay dos grandes lugares donde se pueden encontrar muchas fuentes WOFF que son gratuitas para uso comercial y no comercial:

• Abrir biblioteca de fuentes
• Ardilla de fuente

Si usted tiene una licencia para utilizar una fuente que no está disponible en un formato WOFF, puede utilizar un creador de WOFF como en Font Squirrel para convertir sus archivos de fuente en archivos WOFF. También hay una herramienta de línea de comandos llamada sfnt2woff que puede usar en Macintosh y Windows para convertir sus fuentes TrueType/OpenType a WOFF. Descargue el binario apropiado para su sistema y ejecútelo en la línea de comandos (o Terminal) y siga las instrucciones.

Ejemplo de WOFF

He aquí algunos ejemplos de archivos WOFF: Página WOFF en HTML5 en 24 horas.

Original de Jennifer Krynin. Editado por Jeremy Girard el 7/11/17

Si estás interesado en aprender a hacer flotar una imagen a la derecha del texto, te alegrará saber que es una tarea bastante sencilla. Hay muchas situaciones en las que los programadores quieren que una imagen en una página Web aparezca dentro del texto con el texto fluyendo o envuelto alrededor de él. Afortunadamente, manipular imágenes es similar a manipular texto, así que si tienes experiencia con este último, este proceso no debería ser difícil en absoluto.

De hecho, con la propiedad float de CSS, es fácil hacer flotar su imagen a la derecha del texto y hacer que el texto fluya a su alrededor en el lado izquierdo. Utilice este tutorial de cinco minutos para aprender cómo.

Introducción

Para empezar, escriba un párrafo de texto y añada una imagen al principio del párrafo. Esto debe hacerse antes del texto pero después de la etiqueta

):

A continuación, añada un atributo de estilo a la imagen y aplique la propiedad float:

El texto se apisonará contra la imagen, así que agregue algunos márgenes a la imagen para que sea más fácil de leer:

La propiedad margin shorthand aplica márgenes en el orden superior, derecho, inferior e izquierdo (TRBL).

Envolviendo

Y eso es todo. Ahora ves que flotar una imagen a la derecha no es nada difícil. También le puede interesar hacer flotar una imagen a la izquierda y hacerla flotar hacia el centro. Mientras que el primer movimiento es posible, desafortunadamente, usted no puede hacer flotar una imagen al centro, ya que eso requeriría típicamente un diseño de dos columnas.

El equilibrio en el diseño es la distribución de los elementos del diseño. El equilibrio es una interpretación visual de la gravedad en el diseño. Los elementos grandes y densos parecen ser más pesados, mientras que los elementos más pequeños parecen ser más ligeros. Los diseños se pueden equilibrar de tres maneras:

• equilibrio simétrico
• equilibrio asimétrico
• discordante o fuera de balance

Uso de Balance in Design

El equilibrio en el diseño Web se encuentra en la maquetación. La posición de los elementos en la página determina el equilibrio de la página. Un gran desafío para lograr el equilibrio visual en el diseño Web es el pliegue. Puede diseñar un diseño que esté perfectamente equilibrado en la vista inicial, pero cuando el lector se desplaza por la página, puede desequilibrarse.

Cómo incluir el equilibrio en los diseños web

La forma más común de incorporar el equilibrio en los diseños Web es en el diseño. Pero también puede utilizar la propiedad float style para posicionar elementos y equilibrarlos en la página. Una forma muy común de equilibrar un diseño simétricamente es centrar el texto u otros elementos en la página.

La mayoría de las páginas Web se construyen en un sistema de cuadrícula, y esto crea una forma de equilibrio para la página de inmediato. Los clientes pueden ver la cuadrícula, incluso si no hay líneas visibles. Y las páginas Web se adaptan bien a los diseños de cuadrícula debido a la naturaleza cuadrada de las formas de la Web.

Balance simétrico

El equilibrio simétrico se consigue colocando los elementos de forma muy uniforme en el diseño. Si tiene un elemento grande y pesado en el lado derecho, tendrá un elemento pesado a juego en el lado izquierdo. El centrado es la forma más fácil de obtener una página equilibrada simétricamente. Pero tenga cuidado, ya que puede ser difícil crear un diseño centrado que no parezca plano o aburrido. Si desea un diseño simétricamente equilibrado, es mejor crear el equilibrio con diferentes elementos, como una imagen a la izquierda y un gran bloque de texto más pesado a su derecha.

Balance Asimétrico

Las páginas balanceadas asimétricamente pueden ser más difíciles de diseñar, ya que no tienen elementos que coincidan con la línea central del diseño. Por ejemplo, puede tener un elemento grande colocado muy cerca de la línea central del diseño. Para equilibrarlo asimétricamente, es posible que tenga un pequeño elemento más alejado de la línea central. Si usted piensa en su diseño como si estuviera en un balancín o balancín, un elemento más ligero puede equilibrar uno más pesado al estar más lejos del centro de gravedad. También puede usar color o textura para equilibrar un diseño asimétrico.

Discordante o desbalanceado

A veces el propósito del diseño hace que un diseño desequilibrado o discordante funcione bien. Los diseños que están desequilibrados sugieren movimiento y acción. Hacen que la gente se sienta incómoda o incómoda. Si el contenido de su diseño también pretende ser incómodo o hacer que la gente piense, un diseño discordantemente equilibrado puede funcionar bien.

Muchos de los nuevos diseñadores web freelance asumen que si crean un sitio web y ofrecen sus servicios, los clientes empezarán a mostrar un trabajo exigente. Pero el escenario más común es que un cliente se anuncie, buscando un diseñador para trabajar en su sitio, o que envíe una solicitud de propuestas. En ambos casos, debe informar al cliente que está interesado en trabajar para ellos. Y la mejor manera de hacerlo es redactar una propuesta de diseño web.

Las propuestas de diseño web responden a las preguntas más comunes que los clientes potenciales tienen sobre la contratación de alguien para construir su sitio web:

• ¿Cuánto costará esto?
• ¿Qué me comprará ese precio?
• ¿Cuánto tiempo se tarda en construir?

Las propuestas de diseño web más simples sólo responden a esas preguntas. Pero las mejores propuestas son las que proporcionan más información al cliente potencial. De hecho, las mejores propuestas también pueden ser utilizadas como un contrato, indicando que si el cliente está de acuerdo con la propuesta, simplemente tiene que firmarla y devolvérsela a usted y usted comenzará a trabajar.

Cuándo usar una propuesta de diseño

Usted puede utilizar una propuesta de diseño web en cualquier momento que usted está tratando de conseguir un nuevo cliente o si usted tiene un cliente existente que quiere hacer algo nuevo con su sitio. Las propuestas de diseño web son una buena manera de iniciar la conversación con un cliente que todavía está considerando qué hacer con su sitio. Y, por supuesto, siempre debe utilizar una propuesta cuando responda a una solicitud de propuestas.

No debe considerar la propuesta como un contrato a menos que su cliente lo haya firmado y esté de acuerdo. Si usted no tiene su firma, entonces la propuesta no es un acuerdo vinculante y usted puede encontrarse haciendo más de lo que planeó por menos dinero cuando las necesidades del cliente se expanden.

Utilice una propuesta de diseño que le ayude a conseguir más trabajo. No deberías pasar meses elaborando una propuesta de diseño. De hecho, la mayoría de las RFP tienen un plazo de entrega bastante corto. En su lugar, concéntrese en construir la propuesta más clara y concisa que cubra todas las necesidades del cliente. Una buena idea, si no está respondiendo a una solicitud de propuestas, es que el cliente llene un formulario de solicitud de proyecto. Esto asegura que usted sabe lo que están buscando y le ayudará a construir una mejor propuesta.

¿Cuáles son las partes de una propuesta?

Hay varias partes de una buena propuesta que deberías tener siempre. Una de las mejores cosas que puede hacer es crear una plantilla de propuesta que luego puede personalizar para los proyectos que está tratando de aterrizar.

Una propuesta de diseño debe incluir:

• El nombre y el logotipo de su empresa -Este es un documento oficial procedente de su empresa. Debe tratarla como tal incluyendo el logotipo y el nombre de su empresa en la parte superior de la propuesta. Esto hace que sea fácil para el cliente potencial recordar quién es usted. Para propuestas de varias páginas, es una buena idea incluir el nombre de su empresa y posiblemente un logotipo de menor tamaño en el encabezado o pie de página de cada página después de la primera también.
• Su información de contacto -La información de contacto de su empresa también es de vital importancia. Como mínimo, debe incluir una dirección de correo electrónico. Pero tener un número de teléfono y una dirección postal también es una buena idea, ya que hace que su negocio se vea más profesional. Al igual que el nombre y el logotipo de la empresa, debe incluir su dirección de correo electrónico o número de teléfono en el encabezado o pie de página de cada página posterior a la primera para que los clientes puedan ponerse en contacto con usted inmediatamente con cualquier pregunta.
• Nombre del cliente e información de contacto -Cada propuesta debe ser personalizada con el nombre y la información de contacto del cliente potencial. Si usted tiene el nombre completo de una persona en esa compañía, es una buena idea incluirlo aquí, en un formato similar al de una carta comercial. Esto le dice al cliente que usted los toma en serio y que tratará su sitio web con respeto.

• Declaración de confidencialidad -Muchos clientes esperan que usted firme un acuerdo de confidencialidad antes de trabajar en su sitio, indicando que no utilizará el diseño de su sitio en ningún otro trabajo. Pero también debería incluirlo en su propuesta. Debe asegurarse de que el cliente potencial entienda que el contenido de esta propuesta se le proporciona para su evaluación, pero que hasta que se firme el contrato, todo el trabajo descrito o proporcionado en la propuesta es de su propiedad. He aquí un ejemplo de una declaración de confidencialidad:

La presente propuesta y los expedientes que la acompañan son confidenciales y están destinados exclusivamente al uso de la persona o entidad a la que van dirigidos. Esta propuesta contiene información confidencial y está destinada únicamente a la persona o empresa nombrada. Si usted no es el destinatario designado, no debe difundir, distribuir o copiar esta propuesta. Todos los contenidos de esta propuesta son propiedad de[NOMBRE DE LA EMPRESA]. Si usted no es el destinatario previsto, se le notifica que está estrictamente prohibido revelar, copiar, distribuir o tomar cualquier medida que se base en el contenido de esta información.

• Descripción de su compañía -Debería incluir un párrafo corto describiendo su compañía y los tipos de servicios que usted típicamente provee. Piense en esto como una breve declaración de marketing que explica por qué su empresa sería la mejor para este proyecto.
• Objetivos del proyecto -Esta es la esencia de la propuesta. Debe ser lo más explícito y claro posible, detallando exactamente lo que entregará al cliente. Si está respondiendo a una RFP, debe abordar todo lo que se menciona en esa RFP. No debe incluir ejemplos reales de lo que construirá para ellos, pero sí debe incluir qué tecnología propone utilizar, cuántas páginas planea construir y qué tipo de contenido necesitará de ellos para completar los objetivos.
• Fases del proyecto -Todos los proyectos tienen fases específicas por las que pasan para tener éxito. En su propuesta, usted debe indicar qué fases estará manejando y qué se espera de usted y del cliente durante cada fase. Algunas de las fases típicas del proyecto de diseño web incluyen.
  • Recolección de datos
  • Diseño
  • Desarrollo
  • Pruebas
  • Entrega
  • Lanzamiento
  • Mantenimiento

• Timeline -Esto responde a la pregunta «¿cuánto tiempo tomará esto? Usted debe indicar cuánto tiempo tomará cada fase del proyecto y qué entregables habrá tanto para usted como para su cliente. Recuerde que cuando está construyendo un sitio web, necesita contenido como texto e imágenes del cliente antes de poder terminarlo. De hecho, muchos proyectos se paralizan simplemente porque el cliente no devuelve las imágenes o el contenido a tiempo. Otro aspecto del cronograma que usted debe incluir es el tiempo durante el cual esta propuesta es válida. Usted no quiere que aparezcan clientes potenciales, exigiendo que cumpla con una propuesta que escribió hace cinco años cuando su tarifa por hora era mucho más baja. La clave de esta sección es ser lo más claro posible sobre cuánto tiempo tardarán las cosas y cuándo se vencerán. Si usted prevé una negociación larga, puede indicarlo en días en lugar de dar fechas específicas, es decir, «la recogida de datos tardará 5 días en completarse tras la recepción del contrato firmado».

• Tarifas – Aquí es donde usted le proporciona al cliente cuánto costará el trabajo en esta propuesta. Puede cobrar una tarifa fija o una tarifa por hora. Si cobra una tarifa fija, especialmente de más de 1.000 dólares, debería incluir un desglose de lo que cubren las tarifas, es decir, «el 50% cubre la fase de diseño y desarrollo, la recopilación de datos es del 20% y el resto de las tarifas cubren las pruebas, la entrega y el lanzamiento, con el mantenimiento cubierto en un acuerdo separado». Si cobra una tarifa por hora, debe indicar una estimación de cuántas horas tardará cada fase y el potencial de desviación, es decir, «la recogida de datos tardará 10 horas +/- 2». También debe indicar cómo se cubrirán los excedentes – ¿seguirá trabajando y luego discutirá los cargos; dejará de trabajar y solicitará la aprobación para continuar; continuará trabajando a una tarifa reducida por hora? La clave aquí es ser lo más claro posible.
• Firmas -Aunque no vaya a utilizar esta propuesta como un contrato, debe incluir su firma y fecha al final. Esto indica que la propuesta es vinculante.

Aunque se recomienda que utilice todas las partes anteriores en una propuesta, puede elegir las que sean más útiles para su negocio. Y siempre se pueden añadir secciones adicionales. La idea es ser claros para que el cliente quiera que usted haga su trabajo de diseño.

Contrato y precios

Aunque una propuesta no es un contrato, muchas de las mismas cuestiones surgen al redactar una propuesta. Y recuerde que un contrato es una parte muy importante del freelance. De hecho, si tuvieras que elegir entre redactar una propuesta o redactar un contrato, siempre deberías elegir el contrato.

La industria de la web es una industria que está llena de diferentes responsabilidades y roles de trabajo, lo que significa que también es una industria llena de títulos de trabajo. A veces estos títulos hacen bastante obvio lo que una persona hace, o al menos cuál puede ser su papel principal en el proceso. Por ejemplo, un «Project Manager» es un título común y fácil de entender que se encuentra en la mayoría de los equipos web.

A veces, sin embargo, los títulos de los puestos de trabajo en la industria de la web no son tan obvios o sencillos. Los términos «diseñador web» y «desarrollador web» se utilizan a menudo en la industria de la web. Muchas veces, estos términos son un «catch all» que describe a alguien que realmente cumple una serie de roles en el proceso de creación de un sitio web. La desventaja de utilizar estos términos genéricos es que, aunque cubren una base amplia, no ofrecen ninguna especificidad en cuanto a lo que realmente implica el papel. Si ves un anuncio de trabajo para un «desarrollador web», ¿cómo sabrás de qué es responsable ese puesto? Si la empresa está utilizando el término correctamente, en realidad hay algunas habilidades específicas que deben ser requeridas y algunas tareas que se espera que esa persona realice.

Lo específico de un desarrollador web

Tan básico y obvio como pueda parecer, la definición más directa es que un desarrollador web es alguien que programa páginas web. Un desarrollador web está más enfocado en la forma en que funciona un sitio web que en cómo se ve; la apariencia sería manejada por el «diseñador» de la web. Un desarrollador web suele utilizar editores de texto HTML (a diferencia de un programa visual WYSIWYG como Dreamweaver) y trabaja con bases de datos y lenguajes de programación, así como con HTML.

Los desarrolladores web suelen tener las siguientes habilidades:

• HTML: Este es el componente básico de las páginas web, por lo que cualquier desarrollador web tendrá una comprensión del lenguaje de marcado de hipertexto.
• Algo de CSS: Con las hojas de estilo en cascada que dictan la apariencia de un sitio, es el desarrollador web, o más específicamente el «desarrollador frontal», quien a menudo codifica el CSS.
• JavaScript y Ajax
• PHP, ASP, Java, Perl o C++
• MySQL de la base de datos SQL
• Gestión de proyectos
• Comunicación con el cliente
• Documentación, especialmente para conceptos técnicos y código que se está creando de forma personalizada

La conclusión es que las empresas que buscan desarrolladores web están buscando personas con fuertes habilidades de programación que puedan construir y mantener sitios web que funcionen bien. Sin embargo, también buscan buenos jugadores de equipo. Muchos sitios y aplicaciones son administrados por equipos de personas, lo que significa que los desarrolladores deben trabajar bien con otros para tener éxito. A veces esto significa trabajar con otros desarrolladores, a veces significa trabajar con clientes o partes interesadas en el proyecto. Sin embargo, las habilidades personales son tan importantes como las técnicas cuando se trata del éxito de un desarrollador web.

Back End contra Front End Developer

Algunas personas usan el término desarrollador web para referirse realmente a un programador. Este es un «desarrollador back end». Están trabajando con bases de datos o código personalizado que potencian la funcionalidad del sitio. El término «back end» se refiere a la funcionalidad que se encuentra en el fondo de un sitio, a diferencia de las piezas con las que la gente interactúa y ve. Este es el «front end» y es creado por el «front end developer».

Un desarrollador de front end construye páginas con HTML, CSS y quizás algo de Javascript. Trabajan en estrecha colaboración con el equipo de diseño para convertir los diseños visuales y el aspecto de las páginas del sitio en un sitio web de trabajo. Estos desarrolladores de front end también trabajan con los desarrolladores de back end para asegurar que la funcionalidad personalizada se integre correctamente.

Dependiendo del conjunto de habilidades de una persona, pueden decidir que el desarrollo del módulo de acceso es más su estilo, o pueden determinar que quieren hacer más con el desarrollo del módulo de servicio. Muchos desarrolladores también encontrarán que sus responsabilidades y habilidades de trabajo cruzan y abarcan partes de cada uno de estos lados, tanto en el desarrollo del front end como en el del back end, y tal vez incluso algún diseño visual. Cuanto más cómodo se sienta alguien al pasar de un lado del diseño y desarrollo web al otro, más valiosos serán para los clientes y empresas que los contratan por esas habilidades.

La resolución de la página web es un gran problema. Muchos sitios que enseñan diseño web han escrito sobre ello y dependiendo de quién usted crea, usted debe diseñar páginas para el mínimo común denominador (640×480), la resolución más común (800×600), o la más vanguardista (1280×1024 o 1024×768). Pero la verdad es que usted debe diseñar su sitio para los clientes que vienen a él.

Datos sobre las resoluciones de pantalla

• 640×480 no está muerto
• Mientras que 640×480 no es tan común como solía ser, esta resolución sigue existiendo. Los equipos más antiguos, los portátiles con pantallas más pequeñas, los netbooks y las personas que necesitan fuentes más grandes utilizan esta resolución. Incluso si decide no diseñar su página con esta resolución, debería probar su sitio con esta resolución.
• 800×600 es muy común
• Muchas guías de diseño de sitios web recomiendan diseñar sitios web con una resolución de 800×600. Aunque esta resolución es más común en la web en general, puede que no sea el caso de sus clientes. Si está planeando rediseñar su sitio web, tómese unas semanas para analizar las estadísticas de su navegador y determinar las resoluciones más comunes utilizadas por sus clientes.
• 1024×768 es mucho más común
• Las pantallas son cada vez más grandes y 1024×768 es el otro tamaño popular para el diseño porque muchos diseñadores tienen monitores que lo soportan de forma nativa. Pero esta resolución puede ser bastante difícil de leer para muchas personas. Un monitor de ordenador portátil de 14 pulgadas puede soportar 1024×768, pero el texto es prácticamente ilegible. Y los portátiles son muy populares.

• 1280×1024 y mayores son menos comunes
• En la mayoría de los casos, verá estas resoluciones más grandes en los equipos de escritorio o en los portátiles de gama alta. Pero a menudo en estos tamaños más grandes, los clientes no están navegando a pantalla completa. Por lo tanto, el diseño de un sitio que es más ancho de 1000 píxeles va a causar barras de desplazamiento horizontales en la mayoría de las pantallas.

Tenga en cuenta estos consejos de resolución

• No todos maximizan su navegador
• Si determina que sus clientes navegan a 1024×768, es posible que esté construyendo páginas que requieran desplazamiento horizontal. Por qué? Porque mientras están navegando con esa resolución, no maximizan la ventana de su navegador, por lo que 800×600 podría encajar mejor en la ventana de su navegador.
• No olvide el navegador chrome (no el navegador Google Chrome)
• Los navegadores restan hasta 50 píxeles a la derecha y a la izquierda, y 200 píxeles en la parte superior e inferior para su propio uso en cosas como barras de desplazamiento, barras de herramientas y el contenedor de la ventana. Esto se llama browser chrome. Así que si crea una tabla de 800 píxeles de ancho, los clientes con navegadores maximizados en pantallas con una resolución de 800×600 tendrán que desplazarse horizontalmente.

Cómo manejar el tamaño de la pantalla en función de la resolución

1. Determine quién visita su sitio: Revise sus archivos de registro web, o ponga una encuesta o un script para determinar qué resolución utilizan realmente sus lectores. Utilice el script del tamaño de un navegador real para hacer un seguimiento de sus lectores.

2. Basa tus rediseños en tus clientes: Cuando rediseñe su sitio, constrúyalo basándose en los hechos de su sitio web. No lo base en estadísticas de «la web» ni en lo que dicen otros sitios. Si construye un sitio que se ajuste a la resolución que utilizan sus clientes, los mantendrá mucho más contentos.

3. Pruebe su sitio en varias resoluciones: Cambie su propio tamaño de pantalla (cambie la resolución de pantalla de Windows o de Macintosh) o utilice una herramienta de prueba.

4. No espere que sus clientes cambien: No lo harán. Y ponerles restricciones sólo les anima a marcharse.