Source: http://yeti.mx/capacitacion-diseno-web/
Timestamp: 2018-10-20 23:59:12+00:00

Document:
Capacitación y diseño web en México DF | Recursos y sitios de interés sobre diseño web
Donde descargar fotografías e imágenes libres de derechos
Publicado el 2011/09/04 por yeti.mx
En una entrada publicada anteriormente se había presentado probablemente la más grande y conocida página web para descargar fotos gratis. Debido a la popularidad de este recurso, ahora se presentarán otros lugares donde se pueden conseguir de manera gratuita y legal fotografías e imágenes para usar en proyectos de diseño web o diseño gráfico en general.
Otra vez, estos recursos contienen las fotografí­as libres de derechos, de alta calidad y tamaño o resolución suficiente para su uso en la mayoría de los proyectos de diseño, sobre todo cuando se trata de páginas web.
Estos diferentes sitios, facilitan la manera de navegar y revisar los recursos que casi siempre están agrupados por categorías o accesibles a través de un buscador que funciona bien sobre todo cuando la búsqueda es en idioma inglés aunque a veces puede dar buenos resultados también en español.
Free Range Stock permite a los usuarios registrados descargar gratis fotografías de alta calidad que se pueden usar libremente en todo tipo de proyectos.
Morgue File es otro repositorio de fotografías libres de derechos, con temas interesantes y variados que hacen especial énfasis en la creatividad e inspiración.
Image After contiene casi 30 mil imágenes gratuitas con un enfoque particular en texturas, objetos y temas abstractos. Los temas principales de esa gran colección son naturaleza, arquitectura e inspiración.
En Stock Vault puede uno escoger entre más de 25 mil fotografías gratuitas para descargar, aunque esta página restringe el uso de sus imágenes para proyectos no-comerciales. A pesar de que las fotos se pueden descargar libremente, es recomendable leer las condiciones antes de usarlas para diseño de páginas web o materiales impresos desarrollados con fines lucrativos.
PhotoGen es la más pequeña de las páginas presentadas aquí, sin embargo contiene recursos bastante interesantes de fotografía tipo stock, gratuita y libre para descargar.
Publicado en Imágenes | Etiquetado fotografía, gratis, web | Deja un comentario
Publicado el 2011/09/01 por yeti.mx
Un buen nombre de dominio para un sitio o una página web debe cumplir con varios requisitos para que funcione bien y ayude a mejorar el desempeño del negocio tanto en internet como en los demás materiales de mercadotecnia. Para que tenga éxito, el nombre del dominio debe ser por ejemplo fácil de escribir, de memorizar y de pronunciar y es de mucha ayuda en el proceso de optimización en motores de búsqueda cuando contiene algunas de las palabras claves, debe relacionarse con el giro del negocio y no debe ser demasiado largo.
El problema es que la mayoría de los dominios que probablemente cumplen con estos parámetros, es decir nombre corto que utilice una sola palabra, las más comunes o sus mejores combinaciones ya están desde hace tiempo registrados. Cada vez se vuelve más necesario aguzar su ingenio para encontrar alguna idea que se vea, lea y escriba bien, además de que no este ocupada.
Para facilitar este proceso se pueden utilizar algunas herramientas web, que ayudan a generar ideas para los dominios web, proporcionan tips, sugerencias y al mismo tiempo avisan de la disponibilidad de las propuestas.
Instant Domain Search (Buscador Instantáneo de Dominios) es una página que revisa en tiempo real la disponibilidad de dominios web. Ahí escribe uno el dominio que le gustaría registrar y la página le dice si este dominio ya está registrado o en venta, así que se vuelve muy rápido y directo cambiar de idea y escribir otra propuesta hasta que encuentre uno algo que le agrade y que no este aún ocupado.
En caso de acabar con las ideas, se puede apoyar uno en otra herramienta que va a ser más activa para proporcionar opciones de nombres de dominios web basándose en las primeras letras que uno escriba. En la página Psychic Who Is es suficiente con empezar a teclear algunas palabras para observar como se van presentando las posibles propuestas de los nombres de dominios. De esta sencilla herramienta se puede, de manera rápida y fácil sacar inspiración y muchas ideas para opciones de nombre de dominio.
En caso de tener varias palabras que uno quisiera incluir en el nombre de su dominio, se puede verificar la disponibilidad de varias combinaciones de estas palabras a través de usar Bust A Name, una excelente herramienta que hace trivial este proceso que de otra forma sería muy tardado y seguramente tedioso si uno quisiera comprobar manualmente la disponibilidad de cada posible idea para registrar un nombre del dominio.
Esta página funciona de la siguiente manera: en el campo superior con el fondo azul hay que escribir una por una las palabras que uno quiere que estén incluidas en el nombre del dominio de su página y aceptar con el botón para que se agreguen a la caja inferior de color rojo. Todas estas palabras se van acumulando y en la otra caja del lado derecho van apareciendo basados en la combinación de estas palabras los posibles nombres de dominios que están disponibles para su registro, inclusive hay un botón que facilita al instante la compra directa.
En la parte de abajo se encuentran varias opciones que permiten configurar y optimizar el proceso de la búsqueda del mejor nombre de dominio, como por ejemplo el uso de prefijos o guiones. Desgraciadamente está herramienta permite hacer las combinaciones solo para los dominios con extensiones .com, .net y similares y no incluye por ejemplo .mx. Pero de todas maneras sirve muy bien en la primera parte como apoyo para generar varias combinaciones de nombres de dominios y la disponibilidad de los mejores encontrados se puede revisar utilizando otra página.
Publicado en Hospedaje y dominios | Etiquetado formatos, productividad, web | Deja un comentario
Publicado el 2011/08/30 por yeti.mx
Existen varias herramientas y técnicas que permiten a uno saber quien es el dueño de una página web. Una de las más sencillas y de uso directo es Domain Tools (herramientas de los dominios) donde es suficiente con proporcionar la URL (la dirección web o el dominio) para obtener el desglose de la información relacionada con este sitio.
Publicado el 2011/08/25 por yeti.mx
Comúnmente en la vida profesional de un diseñador o desarrollador, es necesario comprar algún equipo o solicitar materiales, los cuales son en la mayoría de los casos entregados por paquetería y por esta razón resulta importante realizar frecuentes revisiones al estado del pedido para saber cuando llegará el paquete y no estar esperando sin tener idea del tiempo que tardará.
En estos casos esulta muy útil conocer una sencilla página web que permite rastrear la ubicación actual del paquete en las empresas de entrega de paquetería mas grandes e importantes. Por supuesto uno siempre puede rastrearla entrando en la página oficial de FedEx o DHL, pero estas páginas son muy grandes, lo que implica que hay que esperar para que se carguen y poder visualizarlas, después hay que navegar para encontrar donde proporcionar el número del paquete que uno quiere rastrear, a veces hay que pasar además de lo anterior algunas etapas adicionales para encontrar la respuesta.
La alternativa altamente recomendable es conocer el Boxoh donde todo ese proceso está simplificado y reducido a un solo paso – solo hay que pegar o teclear el número de rastreo, darle Enter y ya.
La página es pequeña y ágil y se presta muy bien para usarla desde el celular, ahorrando bastante tiempo en situaciones en las que necesitamos esa información de manera casi inmediata.
Publicado en Herramienta web | Etiquetado gratis, productividad, web | Deja un comentario
Publicado el 2011/06/29 por yeti.mx
Para aprender acerca de las nuevas tendencias en el diseño web o diseño gráfico en general está bien revisar las revistas de buena calidad donde uno puede encontrar información e inspiración relacionada con las últimas tecnologías, los efectos en boga y tips sobre el negocio de ser diseñador de páginas web.
Hay muchas revistas, boletines y blogs que se dedican a presentar esta temática y es difícil marcar cuales son las mejores – todo depende de las necesidades y preferencias de cada lector. Aquí hay una selección arbitraria de tres recomendables páginas para un amplio rango de interesados en el desarrollo y diseño web con diferentes niveles de conocimiento e intereses. Los recursos están en inglés lo que tal vez puede ser un obstáculo, pero no siempre se hace fácil encontrar artículos sobre temas recientes con la misma calidad en español y por eso vale la pena hacer el esfuerzo de leer los textos aunque esten en otro idioma.
SmashingMagazine es un clásico que compila una gran cantidad de recursos de todos tipos – desde tips para inspiración, vínculos de interés agrupados según temas o características, componentes gratuitos para páginas web disponibles para descargar, tutoriales detallados y últimamente hasta libros sobre tecnologías web. La información en este sitio es interesante, útil y está bien presentada, se nota que los editores siempre ponen especial cuidado en incluir contenido muy selecto.
DesignModo es otra recopilación de recursos útiles para diseñadores web. Aparentemente su ámbito temático es un poco menos tecnológico pero con más enfoque en la inspiración directa para el diseño, la fotografía, los negocios en la web y presenta a los lectores los recursos disponibles en la red.
DMXzone es probablemente el más técnico y avanzado de los tres sitios presentados acá destaca sobre todo por la calidad y cantidad de tutoriales interesantes que enseñan diferentes maneras del uso creativo de las recientes tecnologías web para las cuales frecuentemente no existe todavía la enseñanza formal de los libros.
Publicado en Referencia | Etiquetado capacitación, diseño, web | Deja un comentario
Publicado el 2011/06/27 por yeti.mx
Por la facilidad de copiar y pegar el contenido que encontramos en internet se presenta el abuso de gente que quiere o necesita armar alguna página web pero les da flojera escribir. Con anterioridad en otro artículo fue explicado Como saber si se fusilaron fotografías e imágenes, ahora vienen algunos vínculos que permiten rastrear la red en busca del texto robado.
Para empezar cabe mencionar por que le conviene a un webmaster saber si no han copiado sus textos – aparte de las más obvias cuestiones éticas y financieras relacionadas con el tema de proteger su propiedad intelectual, un texto copiado y pegado en otra página web puede tener un impacto muy negativo sobre SEO (posicionamiento en motores de búsqueda).
A estos motores es preferible y recomendable darles siempre y cuando sea posible el contenido fresco y original que no existe en ninguna otra parte de los recursos de la red y teniendo presente ese hecho, no cuesta mucho trabajo imaginarse que pasa si el texto original escrito por uno empieza a aparecer sin el permiso del autor en varias páginas de dudosa procedencia y mala reputación. En pocas palabras el texto deja de ser original por lo menos para los motores de búsqueda y puede ser considerado por ellos como contenido duplicado que no se posicionará tan bien como esperaba uno cuando invertía su tiempo y esfuerzo en escribirlo. Pedirá a los que lo usaron que lo quiten de su sitio o que vínculen a la página original, lo que mejorará el posicionamiento gracias a este vinculo, es del todo derecho legítimo del autor.
Es posible para un autor buscar sus textos usando cualquier motor de búsqueda pero esa tarea es algo tardada y no garantiza los mejores resultados, sobre todo por que existen páginas web especializadas en este tipo de búsqueda que funcionan de manera gratuita y ofrecen en poco tiempo la respuesta a si alguien se ha robado los textos para usarlos en su sitio web o no.
Dos parecidas en su manera de funcionar son CopyScape y CopyrightSpot donde uno introduce la dirección de una página web que quiere verificar y el sistema se encarga de buscar las copias que existen en internet, ya sean legales o ilegales.
Ambos sitios ofrecen unos banners de admonición contra el intento de robar los textos y el CopyScape cuenta con una funcionalidad que ya no es gratuita que se dedica a monitorear la web periódicamente de manera automatizada y avisa al autor de las ocurrencias de aparecer su contenido en páginas no autorizadas.
Otras dos soluciones que no requieren tener una página web en línea sino se basan en copiar y pegar una frase, una parte del texto o hasta un artículo entero son ArticleChecker y PlagiarismChecker. En principio ambos servicios ayudan a detectar plagios ya que facilitan la búsqueda de las expresiones exactas, mientras un buscador clásico tiene tendencias de dar soluciones aproximadas y sugerencias de contenido parecido o relacionado. En otras palabras funcionan como por ejemplo Google cuando uno le pone frases que está buscando entre comillas, pero usando estos buscadores es redundante poner las comillas aparte se pueden buscar varias expresiones a la vez.
Por supuesto estas herramientas se pueden usar también para detectar plagios de otro tipo, como por ejemplo en trabajos académicos u obras artísticas.
http://www.copyscape.com/CopScep
Publicado en Análisis y posicionamiento SEO | Etiquetado gratis, productividad, web | Deja un comentario
Publicado el 2011/06/25 por yeti.mx
Una cuenta de e-mail tiene casi siempre un límite que hace difícil o imposible enviar archivos de gran tamaño. En general este límite se relaciona con la capacidad del servicio o el tamaño máximo de un archivo adjunto que se puede recibir.
Las soluciones alternativas como por ejemplo cortar un archivo que excede este tamaño límite en partes más pequeñas no resultan muy cómodas y requieren invertir algo de tiempo. Las conexiones tipo P2P no siempre son adecuadas y subir los archivos a un servidor web via FTP (el protocolo de transferencia de archivos) suele ser poco práctico debido a cuestiones de disponibilidad de un servidor de este tipo y de algún cliente FTP (una aplicación) para hacerlo, además de la seguridad y los conocimientos generales para realizar esta tarea – hay clientes a quienes les cuesta mucho trabajo poder instalar un programa de FTP, conectarse con un servidor, ubicar el archivo y bajarlo a su computadora.
Para evitar el tener que grabar los archivos en un CD o DVD y entregarlo personalmente, se pueden utilizar algunas páginas web que se dedican a facilitar el proceso de compartir los archivos por medio de interfaces web que manejan la transferencia de archivos en el navegador sin tener que instalar, conocer aplicaciones o realizar con ellas conexiones manuales.
Algunos de los sitios de este tipo que ganaron popularidad en la primera etapa de su funcionamiento no son muy recomendables ya que dificultan su uso intentando de manera importuna instigar al usuario para que se inscriba en un plan comercial en lugar de uno gratuito. Hacen esperar al usuario para poder descargar el archivo, lo obligan a introducir códigos que en caso de ser rechazados implican seguir esperando más tiempo, complican el proceso de descarga si uno está usando algún administrador de descargas y ofrecen todo un abanico de sinsabores.
Pero existen sitios que son libres de complicaciones y desazones de este tipo que permiten fácilmente subir y de manera igualmente fácil descargar archivos. Algunos tienen restricciones en el tamaño o número de archivos, pero en general son muy flexibles y amigables y si uno no está contemplando abusar de estos servicios gratuitos puede esperar de su parte buenas experiencias y desempeño.
MediaFire sencillo y poderoso servicio que permite subir y bajar archivos a través de simplemente arrastrarlos por encima de la ventana del navegador. Luego los archivos pueden ser administrados por medio de la creación de una cuenta, este sitio hospeda y facilita el acceso a los recursos almacenados después de un tiempo cuando esto sea necesario.
SendSpace es una manera sencilla y directa de compartir archivos grandes – el destinatario recibirá un aviso a su e-mail con un vínculo de donde podrá descargar su paquete. Se pueden subir archivos múltiples de manera anónima y no es obligatorio registrarse.
MinUs es otro servicio super sencillo para compartir archivos – arrastrarlos a la ventana del navegador y subirlos al servidor es igual de fácil para el usuario que copiarlos a otra carpeta dentro de su máquina. Es una excelente manera de obtener los archivos de un cliente que no es muy experimentado en el uso de tecnologías más avanzadas y no es capaz de pasarlos de otra manera.
En GeTT uno puede almacenar y compartir archivos de manera cómoda y gratuita, pero para tener acceso a opciones más avanzadas está página requiere registrarse.
WeTransfer.com destaca sobre todo por que permite añadir archivos de hasta 2GB de tamaño, mientras que otros servicios de este tipo limitan a unos cientos de megabytes.
En cuanto a compartir los archivos por medio de conexiones tipo P2P (peer to peer o persona a persona en español) hay varias soluciones, pero posiblemente la más sencilla y lista para uso directo es Sendoid – al instalar esta pequeña aplicación se pueden compartir archivos de manera instantánea y segura sin tener que subirlos a un servidor web.
Publicado el 2011/06/23 por yeti.mx
En algunas situaciones resulta necesario crear o editar una imagen en una máquina que no tiene disponible ningún editor como por ejemplo Photoshop. En la entrada sobre editores gratuitos para diseño web fueron presentadas las herramientas gratuitas multiplataforma que se puede iniciar desde la memoria USB sin instalarla en el sistema. Pero existen también alternativas que no requieren instalar ni iniciar ningún tipo de software para crear o editar imágenes o fotografías, lo único que se necesita para realizar las tareas comunes es tener cualquier navegador web y una conexión a internet.
El SumoPaint es un poderoso editor que corre en el navegador web visiblemente inspirado en la interfaz y diferentes soluciones usadas en Photoshop lo que lo hace más intuitivo de usar para los usuarios de este programa. Esta herramienta permite realizar diferentes técnicas de dibujo e ilustración digital, retoque y edición de fotografías u otras imágenes tipo mapas de bits, crear fondos, texturas abstractas y demás tareas relacionadas con el diseño web o gráfico en general.
Otro editor de esta serie de herramientas web es Pixlr, con mucho enfoque en aplicar los efectos visuales y ajustes de manera sencilla e intuitiva, no es necesario tener mucha experiencia en utilizar este tipo de herramientas gráficas. En pocos clicks permite añadir sobre una fotografía efectos especiales actualmente en boga.
Splashup es más un editor que funciona en el navegador y facilita la edición de fotografías múltiples además de que cuenta con integración en la mayorí­a de sitios sociales dedicados a compartir fotografías.
Aviary, un editor de fotografías en línea es más sencillo de usar y tiene varias funciones simplificadas para realizar las tareas comunes con pocos clicks, como por ejemplo girarlas, cambiar el tamaño, quitar el efecto de ojo rojo, mejorar el contraste o ajustar los colores. En este sitio viene toda una suite de editores relacionados que permiten realizar modificaciones sobre archivos de varios formatos y medios, tales como crear y editar mapas de bits, vectores, audio y música o tomar fotos de la pantalla.
Fotoflexer es también bastante avanzado en cuanto a las opciones de edición que ofrece, aparte destaca también por tener la versión en español. Cuenta con rutinas simplificadas para obtener objetivos tales como aplicar a la fotografía efectos de sepia o decorar con los balloons de caricaturas, arreglar ojos rojos, suavizar arrugas, y también crear los posters o tarjetas graciosas.
Estas herramientas permiten cargar imágenes, manipularlas y luego guardar el trabajo en proceso en el disco duro o en el servidor para luego continuar el diseño. Esta última opción está por supuesto disponible para los usuarios registrados.
Publicado en Herramienta web | Etiquetado capacitación, diseño, web | Deja un comentario
Publicado el 2011/06/21 por yeti.mx
Las páginas web están diseñadas para desplegarse y ser leídas en la pantalla de una computadora o últimamente también en algún dispositivo portátil como una tableta o un teléfono celular. Pero a veces uno requiere imprimir la página web para llevar en papel la información que necesita como referencia. Existen en general versiones para imprimir solo en los sitios grandes como en los noticieros y no siempre funcionan como uno desea. En muchas situaciones uno requiere imprimir solamente una parte de la página web sin todos los elementos como botones, menús, ligas, anuncios, comentarios, fondos, imágenes y cualquier otro tipo de contenido irrelevante.
Para ayudar a cumplir está tarea y al mismo tiempo ahorrar la tinta y el papel, puede uno usar una de las herramientas web que permiten reorganizar el contenido de una página web para optimizar el proceso de impresión. PrintWhatYouLike (en español, imprime lo que quieres ) es una herramienta gratuita que permite la impresión selectiva de los contenidos de la página web para enviar al papel solo lo que uno quiere y eliminar los espacios vacíos y los problemas comunes como el texto que sobresale de la pagina, impresión del contenido no deseado, demasiado grande o pequeño etc.
Usar esta herramienta es bastante sencillo, basta con introducir la dirección web de la página que uno quiere imprimir y esta se abrirá con un panel de control del lado izquierdo de la ventana del navegador. Ahora, al pasar el puntero del ratón por encima del contenido de la página se van a mostrar los marcos rojos que indican el límite de cada elemento. Al darle click sale un pequeño menú con una lista de opciones disponibles para tratar ese elemento, como aislarlo, eliminarlo, cambiarle su tamaño y demás. De esa manera uno puede rediseñar la página para que contenga solo la información que necesita y organizarla de la manera como le guste para que quepa en la hoja de tamaño carta u otro.
Otra herramienta con el mismo objetivo pero más automatizada y por eso también más rápida y fácil de usar, se encuentra en PrintFriendly – ahí es suficiente con meter la dirección de la página web que uno quiere imprimir y el algoritmo preconfigurado va a realizar el tratamiento a la página web para convertirla en una versión optimizada imprimible. Lo que distingue esta herramienta de la anterior es que hace todo sola, lo que resulta útil, sobre todo cuando uno necesita ahorrar tiempo pero a veces no es tan conveniente cuando uno quiere más que ahorrar tiempo, ahorrar tinta o el papel ya que proporciona resultados menos personalizados.
En ocasiones sucede que uno quiere imprimir la página web pero no tiene disponible ninguna impresora o la impresora de repente falló o se quedo sin tinta. En este casó conviene convertir la página web en un archivo de formato PDF para poder después imprimirla desde otro equipo. Se puede intentar iniciar la conversión a PDF desde el cuadro de diálogo de Imprimir del navegador, dado que está instalado en el sistema operativo la opción de crear los PDF en lugar de imprimir.
Pero existe una mejor solución y más cómoda, funcionando en el navegador de manera independiente a las condiciones del equipo, su configuración y sistema operativo JoliPrint convierte la página web en un elegante y bien formateado archivo PDF. No se dedica a convertir los sitios enteros, sino más bien páginas o artículos individuales.
Para probar como funciona es suficiente con darle click derecho con el botón del ratón sobre el titulo de esta entrada y seleccionar desde el menú contextual la opción de copiar la ruta del vínculo. Luego basta con pegar está ruta al campo de dirección de está herramienta para obtener un archivo PDF de muy buena presentación y listo para imprimir a tamaño carta.
Publicado en Herramienta web | Etiquetado diseño, formatos, web | Deja un comentario
Publicado el 2011/06/19 por yeti.mx
Uno de los problemas que determinan el éxito y popularidad de una página web es su velocidad o en otras palabras el tiempo de acceso que necesita esperar un visitante para poder ver y usar el contenido. Es obvio que si la página web está descargando de manera muy lenta y tarda en funcionar desesperara a mucha gente y causará que la abandonen para no volver más. En cambio una página que se carga rápidamente tiene más probabilidad de atraer más visitantes frecuentes, además los motores de búsqueda dan preferencia a páginas ágiles y veloces, así que la rapidez ayuda a obtener mejores resultados en posicionamiento.
Para verificar como se desempeña un sitio web en cuanto a su tiempo de descarga puede uno usar la herramienta de Pingdom con la cual es suficiente con proporcionar la dirección de la página web para obtener un informe detallado y gráfico en forma de barras. Esta herramienta funciona simulando el funcionamiento de un navegador web, descargando todos los elementos de la página tales como los archivos de HTML, CSS, JavaScript así como las imágenes, películas Flash y demás. Luego se presenta un desglose de todos esos elementos con estadísticas detalladas que tratan de su número general, sus rutas de acceso, el tamaño y duración de descarga de cada uno. Estos resultados los puede uno después ordenar según varios criterios para detectar los archivos posiblemente más problemáticos que pueden causar problemas en la descarga de la página.
Otro problema relacionado con ese, que también afecta de manera negativa a la experiencia de los usuarios, los resultados de posicionamiento y el prestigio de un webmaster son fallas o bajas cuando la página web no está disponible en línea. Eso puede deberse a varias causas tales como problemas técnicos en el servidor o con el plan de hospedaje o el dominio. Si los problemas de este tipo son frecuentes es una cosa grave ya que hace el sitio inaccesible tanto a los visitantes como a los robots de los motores de búsqueda y es fácil de imaginarse que impacto puede tener eso sobre el negocio – los prospectos no pueden ver el contenido, los e-mails rebotan y los resultados en posicionamiento serán inferiores.
Para monitorear este tipo de eventos y tener presente cuando la página web es dada de baja y poder actuar con prontitud, se puede usar uno de los sistemas que revisan periódicamente si el sitio esta dado de alta y envía al webmaster los informes sobre su desempeño. El más sencillo es Wasitup, donde uno puede añadir la dirección de la página web que quiere ser avisado vía e-mail cuando esté dada de baja. Un sistema más complejo y desarrollado es Siteuptime, gratuito en su forma básica que permite revisar cada media hora o una hora si la página web está en línea y funciona correctamente y en caso de detectar alguna falla envía un e-mail con la notificación al administrador. Estas soluciones son muy prácticas sobre todo para los que tienen que administrar varios sitios web simultáneamente y que algunos no actualizan diario así que a veces pueden pasar días antes de que se den cuenta que algo esta mal y la página web está dada de baja. Otro sistema Monitor.Us, ofrece monitoreo gratuito del servidor donde uno hospeda su página web, tomando en cuenta algunos parámetros como el desempeño de su procesador, la memoria, el almacenamiento de datos y demás.
Y en caso de detectar que el sitio web no está funcionando de manera correcta y tiene problemas relacionados con la saturación excesiva de los recursos en el servidor, se puede alivianar su carga con Coralcdn, que es una red de distribución de contenido la cual permite agilizar las descargas de la página web y reducir los problemas de inaccesibilidad temporal.
Publicado en Análisis y posicionamiento SEO | Etiquetado productividad, programa, web | Deja un comentario
Publicado el 2011/06/17 por yeti.mx
Antes de lanzar un sitio web o entregárselo al cliente vale la pena realizar una revisión para asegurarse de que todas las partes y los elementos están incluidos y terminados. Los objetivos principales de este proceso son: en primer lugar comprobar que no se le olvidó a uno incluir alguno de los componentes importantes que forman la página web exitosa y segundo, verificar si los componentes están bien desarrollados y cumplen con los requisitos tecnólogicos y estándares modernos.
Para ayudar a uno en esta etapa de finalización del diseño de un proyecto web se han creado varias listas que contienen compilaciones de los componentes que cada página web debería incluir si su autor tiene contemplado lograr el éxito de posicionamiento en los motores de búsqueda y ofrecer buena usabilidad a sus visitantes.
Un buen ejemplo de muchas listas de este tipo es básicamente una recopilación de las buenas prácticas en el diseño web que incumben a los desarrolladores web. Está disponible en idiomas inglés y francés, además de tener la presentación de un formulario dividido en categorías relacionadas con diferentes facetas de un proyecto web, tales como contenido, posicionamiento, seguridad, mercadotecnia y demás. Cada una de las categorías enumera los componentes individuales para palomearlos cuando estén listos, ya que la lista se puede descargar en formato PDF e imprimir. Unas ideas adicionales interesantes se encuentran también en los comentarios publicados por los lectores que se situan al termino de la lista.
Otra opción de una lista antes del lanzamiento de una página web que destaca por su elegante y moderno diseño tiene la funcionalidad de palomear en el navegador los 28 componentes más importantes en el desarrollo de un sitio web, tales como comprobación en varios navegadores, verificación de vínculos, validación de los códigos y más. En la parte inferior de la página se encuentra un contador que está descontando cada una de las posiciones seleccionadas, para que al final cuando todo esté listo y cerrado, sea enviado un informe al cliente.
Poner palomitas a todas las casillas no garantiza por supuesto el éxito de una página web ni quiere decir que está bien hecha, más bien ayuda a un diseñador honesto y objetivo a encontrar posibles imperfecciones o puntos débiles en su proyecto.
Publicado en Análisis y posicionamiento SEO | Etiquetado código, productividad, web | Deja un comentario
Vista previa de una página web en varias pantallas
Publicado el 2011/06/15 por yeti.mx
Una de las partes más difíciles en el diseño web es lograr que las páginas se desplieguen de manera correcta en la multitud de condiciones que están en existencia actualmente. Se trata sobre todo de varias resoluciones o dimensiones de pantalla y de las diferentes versiones de muchos navegadores que se encuentran en uso corriendo en varios sistemas operativos, tanto en las máquinas de escritorio como en los dispositivos portátiles.
Lo ideal para un diseñador sería poder constatar él mismo y con sus propios ojos la manera como se despliega la página web en la mayoría de los navegadores y pantallas que se usan hoy. Pero esto es algo difícil de realizar ya que intentar hacer algo así implicaría invertir en equipos que tengan instalados diferentes sistemas operativos o alternativamente en desplazarse entre diferentes ubicaciones en las cuales algunos amigos o conocidos tengan equipos con estos sistemas y los puedan prestar para este tipo de comprobación personal. Entonces, aparte de ser poco económico eso requiere también dedicar bastante tiempo.
La opción de simular diferentes entornos por medio de las herramientas web desde su máquina es tal vez menos precisa y fidedigna, pero seguramente es la opción más rápida, cómoda y barata.
En SafeArea se encuentran áreas seguras para algunos de los navegadores más utilizados, para los sistemas de Windows y de Mac OS, estas áreas determinadas en píxeles permiten estimar las dimensiones de un contenedor principal ya sea un elemento DIV o una tabla o el tamaño de las imágenes de fondo para las páginas web cuando uno quiere que ocupen el espacio en la pantalla de manera óptima. Hay disponibles para descargar plantillas de Photoshop para iniciar más rápido el proceso de diseño para estos tamaños de pantallas.
Para obtener una simulación más tangible de como se va a ver una página ya desarrollada en HTML y CSS en diferentes tamaños de pantalla, se puede cargar esta página a la ventana del navegador ajustada al tamaño que uno desea visualizar o probar por medio de ResizeMyBrowser. Este sitio al darle click sobre uno de los botones con las resoluciones más comunes realizará una operación de reducción de la ventana del navegador con la cual uno la está visitando para ajustarlo al tamaño indicado en el botón.
Cuando las dimensiones en las que uno quiere visualizar la pagina no aparecen en ninguno de los botones por ser tal vez menos comunes, existe la opción de proporcionar estas dimensiones manualmente.
La página BrowserSize tiene una funcionalidad parecida a la del sitio anterior con una opción adicional de medir y retroalimentar al usuario acerca de su presente resolución de pantalla y las dimensiones de la ventana del navegador, así como presencia de los plug-ins (complementos) para diferentes formatos multimedia.
BrowserShots ofrece otro tipo de retroalimentación – por medio de una red de computadoras contectadas para prestar este servicio, toma las fotos de la pantalla de la página web cuya dirección proporciona el usuario y se los regresa en formato JPG. De está manera un diseñador puede ver con sus propios ojos como se ve su trabajo en otros sistemas operativos y navegadores sin tener que comprar muchos dispositivos ni salir de su oficina.
Este último servicio es parecido al BrowserLab – un laboratorio de navegadores, todavía gratuito, creado por Adobe cuya ventaja principal es la integración con el flujo de trabajo en la Creative Suite CS5, sobre todo con Dreamweaver.
Publicado en Herramienta web | Etiquetado capacitación, diseño, productividad, web | Deja un comentario
Generador de propiedades o estilos CSS3
Publicado el 2011/06/13 por yeti.mx
Hoy en día las propiedades de CSS3 están cada vez más ubicuas o presentes en las páginas web, a pesar de todavía no estar oficialmente incluidas en el estandar contemporáneo. Eso se debe a que no todos los navegadores las pueden visualizar, se trata aquí sobre todo de las antiguas versiones del Explorador de Internet que todavía un gran número de usuarios emplea como su navegador de preferencia. Pero se puede suponer que pronto la mayoría de usuarios estará navegando con uno de los navegadores modernos y por está razón muchos diseñadores utilizan estas propiedades CSS3 en sus proyectos de manera bastante extensa ya en este momento.
Para asegurar que el mayor número posible de navegadores pueda hoy visualizar estás propiedades hay que utilizar las versiones especificas por lo menos para los motores de webkit y mozilla de estas propiedades. Esto hace que el código CSS crezca y se haga más confuso, al mismo tiempo que se vuelve más susceptible a presentar posibles errores.
Una excelente solución para este problema es la opción de usar el Css3Maker, un sencillo pero muy poderoso generador de código CSS3 con sus nuevas propiedades tales como ángulos redondeados, sombras, degradados, rotaciones, transiciones, animaciones y demás.
Usar esta herramienta web gratuita es bastante sencillo e intuitivo. Para empezar hay que seleccionar del menú superior o de la lista del lado izquierdo una propiedad para la cual uno desea generar el código de la regla CSS. Después de seleccionarla aparecen los desplazadores con los cuales uno puede especificar que valores quiere asignar a la propiedad – puede cambiarlos y al mismo tiempo observar en el centro de la ventana del navegador un demo de como se visualizará la propiedad con estos valores. Si no le agrada como se ve, los puede modificar hasta obtener el efecto deseado y después copiar o descargar (apretando el botón llamado download) el código que crea este efecto y que se desplega del lado derecho. Lo mejor es que este código está estructurado de tal manera que se desplegará en varios navegadores, es suficiente con pegarlo en la hoja de estilo o cabecera de un documento HTML.
La lista de navegadores, inclusive los de los teléfonos celulares capaces de desplegar la propiedad CSS3 en cuestión aparece abajo, indicando a la vez que versiones de cada uno de estos navegadores son suficientemente compatibles para poder visualizar cada uno de los efectos.
Como uno puede fácilmente notar, aun no hay uniformidad de este nivel avanzado en todos los navegadores, lo que causa que el uso de las propiedades CSS3 sea todavía un experimento más que un logro de efectos garantizados. Si se quiere tener la seguridad de que algún efecto sea visualizado por todos los navegadores, la recomendación sería por el momento, hacerlo por medio de una imagen generada con un editor de gráficos tipo Photoshop, aunque de cualquier forma todo lo anterior resulta ser algo muy interesante que seguramente en un futuro no muy lejano se estandarizará de manera que podrá ser utilizado y visualizado por todos y en todas partes.
Publicado en Herramienta web | Etiquetado capacitación, código, diseño, productividad, web | Deja un comentario
Comprimir y descomprimir archivos en línea
Publicado el 2011/06/11 por yeti.mx
En ocasiones surge la necesidad de comprimir o descomprimir archivos, ya sea por que son demasiados, de gran tamaño o simplemente para protegerlos con alguna contraseña, si no tiene uno disponible ninguna aplicación que lo haga, existen soluciones fáciles y gratuitas en línea que permiten realizar estas tareas en el navegador y sin tener que instalar en el sistema operativo ningún programa.
La primera, FileStomp facilita la creación de un archivo comprimido en formato ZIP en línea. El proceso para realizarlo es sumamente sencillo – basta con seleccionar los archivos múltiples de cualquier tipo que se encuentren en la máquina local y apretar el botón que dice “Zip It” para que el sistema se encargue de todo lo necesario. Uno sabe que la operación fue exitosa cuando se despliega una dirección web en forma de vinculo el cual hay que copiar y pegar o enviar para poder descargar el archivo de destino. Esa funcionalidad puede ser muy útil cuando uno necesita enviar una carpeta de archivos y no tiene el software necesario para realizar la compresión por que trabaja por ejemplo en algún dispositivo móvil como un teléfono celular.
La operación inversa que es la descompresión o extracción de archivos de uno comprimido se puede realizar igual de fácil en WobZIP que permite subir un archivo en formatos comunes como ZIP, 7z, RAR, ISO y otros para después descargar los archivos individuales que traía dentro. Este sitio cuenta con escaneo de los contenidos con un antivirus que aumenta la seguridad del usuario, ya que elimina el riesgo de extraer archivos infectados en su máquina.
Esta utilería es muy práctica ya que permite abrir archivos comprimidos en varios formatos, inclusive los más extraños, también suele ser de mucha ayuda en situaciones en las que uno no tiene permiso de instalar herramientas necesarias en el sistema operativo.
Otra oportunidad de mostrar la utilidad de esta herramienta es cuando uno envía un archivo comprimido a un cliente o amigo y este dice no saber como abrirlo. En lugar de dar largas explicaciones acerca de donde y como descargar el archivo o de como instalar y usar alguna aplicación de extracción de este tipo de archivos, uno puede proporcionarle esta página web que es muy fácil de usar y que le facilitará el acceso a los contenidos ahí comprimidos.
Publicado en Herramienta web | Etiquetado formatos, gratis, productividad | Deja un comentario
Matices de colores web
Publicado el 2011/06/09 por yeti.mx
En el proceso de diseño de páginas web frecuentemente necesita uno crear sucesiones progresivas de color, secuencias armónicas de claros a oscuros de un mismo tono o color principal. Así es por ejemplo en el caso de crear botones o pestañas que tienen algún color definido y en función al diseño hay que crear variaciones cromáticas para diferenciar los estados como el de encima, presionado etc., cuidando al mismo tiempo la armonía acompasada y la relacion proporcional entre varios tonos.
El Color picker de W3schools permite crear matices de cualquier color – es suficiente con escoger uno de los colores web del panal cromático o teclear el valor hexadecimal en el campo marcado como selected color. Del lado derecho aparecen variaciones más claras y oscuras del color seleccionado, con sus valores hexadecimales.
Así que en lugar de escoger los colores a ojo de buen cubero es mejor usar esta herramienta para crear matices, lo que puede asegurar consistencia y exactitud en la selección de colores para una página web.
En otras situaciones la paleta de colores no requiere una armonía con tanto grado de precisión matemática, sin embargo la relación entre los colores no se puede dejar al azar y hay que seleccionarla según algún criterio razonable y consistente. Una buena manera de hacer esto es al muestrear colores de una fotografía o pintura, ya que en muchas ocasiones tienen colores bonitos e interesantes.
Para realizar esta tarea hay que usar alguna herramienta que convierta la imagen en una paleta de colores de manera automática o alguna otra utilería que permita hacerlo manualmente. Una excelente ayuda para lo anterior es PMeter disponible para descargar gratis.
Esta aplicación es muy ligera, pequeña y no requiere instalación, se puede fácilmente iniciar desde una memoria USB lo que facilita utilizarla en cualquier máquina que corra un sistema operativo adecuado. Al abrir la utilería aparece una regla que permite medir distancias y dimensiones de los objetos en la pantalla, así como determinar las coordenadas. Con doble click cambiará la posición de la regla de horizontal a vertical y apretando la tecla Shift se puede desplazar el medidor por toda la pantalla (lo mismo se puede lograr arrastrando el rectángulo oscuro que se encuentra a la izquierda de la regla), apretando el botón derecho del ratón uno obtiene acceso a más opciones.
Del lado derecho hay una lupa que permite realizar ampliaciones de los detalles y en un panel pequeño se abre un selector de colores que permite sacar los valores hexadecimales de cualquier color presente en la pantalla del usuario sin importar en que aplicacion se está desplegando este color.
Esta misma tarea se puede realizar con Photoshop y no es muy complicada de realizar, aunque no es de muchos conocida. Por defecto la herramienta Gotero o Cuentagotas (Eyedropper Tool) funciona solo dentro de la aplicación de Photoshop. Pero es suficiente con tener cualquier documento abierto, seleccionar dicha herramienta, darle click sobre ese documento abierto y arrastrar – sin soltar el botón del ratón – fuera de la ventana de Photoshop para jalar como el color de frente o principal el valor de cualquier píxel en la pantalla, sin importar en qué programa se esté desplegando.
Publicado en Color | Etiquetado diseño, programa, web | Deja un comentario
Como convertir un documento escaneado en texto
Publicado el 2011/06/07 por yeti.mx
En algunas ocasiones, el cliente solo puede proporcionar la información para comenzar a trabajar en un formato de hojas impresas a tamaño carta y el proyecto requiere usar ese contenido en algún formato de texto por ejemplo como HTML en una página web. Esto implica la captura manual de los datos, la cual no es una actividad agradable, ni rápida y mucho menos barata. Otra situación por ejemplo es cuando se requiere copiar el texto de alguna otra fuente como un libro, revista, carta, fax o hacer un respaldo de cualquier otro tipo de archivo no digital.
Una persona que tiene un escanner, casí siempre tiene también por defecto alguna aplicación para realizar OCR (Optical Character Recognition por sus siglas en inglés que significa Reconocimiento óptico de caracteres en español) – esas aplicaciones sirven para convertir documentos escaneados en texto editable, suelen ser regaladas en los discos que acompañan los dispositivos para escanear.
Pero en caso de que uno tenga que convertir a texto editable algún documento impreso y no tenga la disponibilidad de un software adecuado, puede acudir al uso de una aplicación en línea que no requiere ningún tipo de instalación. Si el documento que uno quiere convertir ya está digitalizado, es suficiente con subirlo para que la herramienta haga la conversión automática. Por el contrario si el documento no esta digitalizado sino impreso, hay que escanearlo antes y si no se cuenta con un equipo de escanner disponible, se pueden obtener bastante buenos resultados con una cámara digital decente – solo hay que tomar una foto del documento cuidando que no este chueca y de preferencia hay que pasarla después por Photoshop o algún otro editor para mejorar el contraste, la nitidez y tal vez eliminar la proyección de color causada por los problemas en la iluminación.
Algunas herramientas para convertir un escan en texto se encuentran en NewOCR o OnlineOCR, está última herramienta es gratuita hasta cierto grado, ya que para realizar conversiones más frecuentes o de documentos múltiples, hay que pagar la membresía.
De entrada estas herramientas aceptan varios formatos gráficos comunes, como JPG, BMP, TIF y GIF, así como los documentos PDF inclusive multipáginas y los convierten en formatos de salida como Microsoft Word, PDF, RTF, texto plano, HTML y más. Aparte de texto plano reconocen también elementos de diagramación como tablas y columnas.
Esas aplicaciones en línea reconocen y convierten archivos de texto en los idiomas más populares del mundo, como español e inglés.
En Cometdocs aparte de hacer las conversiones de imagen a texto, se pueden convertir documentos de texto de un formato a otro, como de PDF a Word o a HTML. PdftoWord es otra herramienta parecida e igualmente gratuita.
Publicado en Herramienta web, Texto, tipografía y fuentes | Etiquetado capacitación, formatos, productividad | Deja un comentario
Como saber quien visita la página web
Publicado el 2011/06/05 por yeti.mx
Para quienes viven en el Distrito Federal o cualquier otra ciudad grande, el tráfico es siempre un fenómeno negativo e indeseable. Pero para un webmaster esa palabra tiene otro significado con asociaciones positivas – mucho tráfico significa también muchas visitas en el sitio web, lo que se traduce a posibilidades de éxito en internet – más ventas, más ingresos de la publicidad, más prestigio y otros beneficios.
Para saber como va el tráfico, cuantas personas entran en una página web, que buscan ahí, cuanto tiempo dura su visita etc. hay que usar una utilería que permite medir y analizar el comportamiento de los visitantes.
Para empezar, se pueden eliminar los clásicos contadores, que estaban muy de moda hace 15 años y que ahora se vuelven difíciles de encontrar en una página profesional que tenga el típico indicador con la apariencia de un contador de kilometraje de un coche. Ese tipo de utilerías que no dicen a uno nada más que el numero de veces que se descargó la página que lo contiene, es demasiado sencillo para dar una aduecada retroalimentación a un webmaster contemporáneo.
En lugar de esto, es mejor usar algún sistema más sofisticado de estadísticas para analizar el tráfico en los sitios web. Uno de los más comunes y más fáciles de implementar es un tipo de analizador de tráfico como Awstats, que frecuentemente viene incluido en varios planes de hospedaje. Eso significa que el webmaster no necesita instalar nada ni hacer nada en particular, simplemente al registrarse en el administrador del sitio puede tener acceso a varios informes de análisis de tráfico web. Estos informes se presentan de manera visual, en forma de barras con datos acerca de cuantas veces algún visitante ingreso a la página web, ya sea humano o algún robot navegando en la red.
Pero este sistema fue creado en principio para ser usado por los programadores y administradores de servidores, por lo cual no incluye algunos datos que son de mucha utilidad para el negocio en línea y mercadotecnía. Para obtener este tipo de información es mejor usar alguna herramienta de análisis de tráfico web como Statcounter o últimamente y cada vez con más creciente popularidad Google Analytics. Ambos son servicios gratuitos de estadísticas para sitios web funcionando por medio de un pequeño segmento de código JavaScript que uno tiene que copiar y pegar en el código de su página web para que el servidor pueda recibir y almacenar los datos.
Estos datos contienen información acerca de muchos aspectos de tráfico en las páginas web, como por ejemplo cuantas personas visitaron la páginas en varios periodos de tiempo, desglosados por meses, dias y hasta horas, donde viven estas personas y de donde llegarón – de que otra página o sitio o que palabras o frases buscaron en los motores de búsqueda, si era su primera visita o ya habían vistado este sitio con anterioridad.
A través de estos sistemas de inteligencia se puede investigar cuanto duran las visitas, que páginas del sitio son las más populares, que archivos se descargaron más veces y a donde van los visitantes cuando salen de este sitio.
Aparte de este tipo de información que es bastante importante para razones comerciales, hay también acceso a datos más técnicos como los relacionados con sistemas operativos que usaron los visitantes, sus navegadores, resolución de la pantalla, presencia de tecnologías como JavaScript, Flash y demás. Gracias al monitoreo de esta información, un webmaster puede mejorar el diseño de sus páginas web, para que sean más accesibles a un rango más amplio de visitantes y usuarios con diferentes condiciones y dispositivos.
Como definir el tamaño correcto de la interlínea en páginas web
Publicado el 2011/06/03 por yeti.mx
Una de las principales características de tipografía que determina la legibilidad del texto es el espacio entre las líneas del mismo. Técnicamente se llama interlineado o interlínea, en las aplicaciones que usan el idioma inglés leading (nota: esa palabra es frecuentemente pronunciada de manera incorrecta liding como en leader, mientras se debe decir leding, como en cabeza head, ya que esa palabra deriva de lead que en inglés significa plomo y antes se usaba precisamente plomo para separar las líneas en el proceso de composición mecánica).
Si el interlineado es demasiado pequeño, el texto se ve demasiado compacto y en lugar de invitar a leerlo, va a desanimar al lector. Si es demasiado grande, el texto ocupa mucho espacio, e igualmente resulta difícil de leer. Por esa razón, hay que cuidar que el interlineado de las páginas web sea adecuado y facilite la lectura, sobre todo porque el proceso para lograrlo no es ni tardado ni complicado, se resuelve básicamente con una propiedad de CSS (line-height), el chiste es saber qué valor asignar a esta propiedad.
En el diseño editorial existen reglas establecidas que ayudan a especificar cual será el tamaño correcto de la interlínea determinado en puntos tipográficos u otra unidad de medición que se usa en el ambiente de impresión. Pero en el caso del diseño de páginas web, el asunto es algo diferente, ya que el texto nunca está fijo sino que se adapta al contexto que puede depender de varias condiciones como: el tamaño o resolución de la pantalla, el navegador, la disponibilidad de la fuente en el sistema operativo y muchas más.
Para determinar cual proporción del interlineado es más adecuada para un tamaño especifico de fuente y anchura de su contenedor puede uno usar una herramienta gratuita en línea Perfect Typography (la tipografía perfecta). El objetivo de usar esta herramienta es determinar los valores óptimos para las propiedades de CSS: width (anchura), font-size (tamaño de letra) y line-height (interlineado).
Ahí hay que proporcionar valores para por lo menos uno de los dos parámetros. Cuando uno introduce ambos valores, el resultado que regresa el sistema es la óptima relación entre el tamaño de fuente y la interlínea para la anchura especificada. En caso de que el tamaño de letra sea demasiado grande para el ancho del contenedor, el sistema va a hacer una propuesta de cambiarla junto con una sugerencia acerca de cuanto se debe reducir o aumentar este valor. Igualmente para un solo valor introducido, el sistema proporcionará los mejores valores para las tres propiedades antes mencionadas.
Cabe notar que el tamaño del texto y de su contenedor se determina en valores absolutos usando píxeles como unidad principal, mientras que el tamaño de la interlínea estará sugerido en la unidad de em, que es proporcional.
Publicado en Texto, tipografía y fuentes | Etiquetado capacitación, diseño, web | Deja un comentario
Como diseñar páginas web sin problemas de lectura
Publicado el 2011/06/01 por yeti.mx
Aproximadamente del 5 al 10% de la población mundial total sufre de un defecto genético llamado daltonismo, la gran mayoría de este porcentaje está constituido por hombres. Este padecimiento consiste en la imposibilidad de las personas que lo poseen para distinguir algunos colores, en su forma más común, confunden el color rojo y el verde, aunque algunos tienen problemas con otros colores también.
Esto implica que cuando uno escoge una paleta de colores para diseñar un sitio o una página web debería tomar en cuenta que más o menos uno de cada quince de sus visitantes podrá tener problemas al leer si los colores del texto y del fondo de la página los ve idénticos, no podrá navegar si no puede distinguir los hipervínculos del texto normal, ya que la única manera de identificarlos será inaccesible para el debido a la confusión de colores.
Para asegurarnos de que la paleta de colores que uno usa en una página web este bien seleccionada y no cause problemas de lectura a las personas afectadas por el daltonismo, uno puede revisar su diseño con uno de los simuladores gratuitos, que permiten ver el sitio de la manera como lo verían las personas daltónicas.
Uno de los simuladores se llama Vischeck y permite realizar un análisis tanto de imágenes como de páginas web en cuanto al uso de colores que suelen ser confundidos por los que tienen problemas en distinguirlos. Es suficiente con entrar a está pagina, seleccionar la opción de Vischeck y proporcionar la dirección URL de una página web, luego seleccionar el tipo de daltonismo que uno quiere revisar y este simulador se encargará de crear y presentar una versión de la página con ajustes de color que intente mostrar como lo verían los daltónicos. Ahí uno puede notar si algunas partes de su diseño resultan difíciles de leer o son completamente ilegibles, lo cual significaría que existe la necesidad de pensar en reajustar los colores. Mientras los colores en CSS y HTML son relativamente fáciles de sustituir por medio de intercambio de valores hexadecimales, las imágenes pueden causar más problemas – para eso hay en el mismo sitio una herramienta llamada Daltonize, que permite subir las imágenes y realizar los ajustes necesarios en línea.
Los usuarios de Photoshop pueden también revisar las imágenes o fotos de las pantallas de páginas web utilizando el menú View –> Proof Setup y seleccionando en la parte inferior uno de los tipos del daltonismo.
Otro problema relacionado con este, que no afecta solo a los daltónicos sino también a un rango mucho más amplio de personas con problemas de visión, es el contraste insuficiente entre los elementos de una página web. Cuando este problema existe, el sitio puede resultar ilegible e inusable para muchos posibles clientes y prospectos, así que vale la pena asegurarse de que todo el mundo pueda sin muchas complicaciones leer lo que uno quiere decir y saber a ciencia cierta cual es la zona activa de un vínculo para dar click. Por cierto, las recomendaciones de accesibilidad de W3C dicen que nunca se deben de distinguir los vínculos de una pagina basándose solamente en el color, siempre se debe añadir a las ligas algún elemento gráfico más, por ejemplo un subrayado, un marco o cambiar el tamaño.
Una herramienta que permite verificar el contraste adecuado en las páginas web se encuentra en Checkmycolours y funciona analizando los códigos y luego de manera clara desglosa posibles problemas en la relación entre los colores de fondo y contenido para cada elemento de HTML y las propiedades de CSS que están en conflicto.
Otra serie de herramientas interesante se encuentra en Juicystudio, donde uno puede revisar la calidad de su diseño en cuanto al adecuado uso de colores, su buen contraste, legibilidad, luminosidad, brillo y demás parámetros. Estas herramientas están disponibles en línea de manera gratuita y también como extensiones para navegadores y programas para descargar, igualmente gratis.
Donde conseguir un dominio gratuito
Publicado el 2011/05/30 por yeti.mx
Aunque ahora ya no es tan difí­cil ni costoso el hecho de tener su propio dominio web, debido a que los precios bajaron significativamente y uno puede pagar este servicio sin tener que usar la tarjeta de crédito, a veces resulta necesario o útil poder obtener un dominio gratis. Si uno está realizando por ejemplo páginas web para organizaciones caritativas o grupos musicales que no tienen mucho presupuesto o simplemente haciendo pruebas con su primer sitio, puede optar por no pagar nada y apartarse entonces un dominio web gratuito.
En este caso, una de las opciones disponibles sería registrar el dominio en alguno de los países o territorios que los regalan. Los dos dominios regalados más comunes son de Tokelau y de las Islas Cocos, ambos son países del Océano Pacífico que regalan dominios para diferentes páginas web, inclusive las comerciales.
El procedimiento para registrar el dominio gratuito es relativamente sencillo y cuenta con instrucciones en español. Para empezar es recomendable tener ya un hospedaje (hosting) con una dirección web larga – esa se obtiene al abrir una cuenta del servicio de hospedaje gratuito o al comprar uno en un servidor comercial. Casí siempre está dirección va a ser compuesta por palabras múltiples, difíciles de memorizar y demasiado largas para poner sobre una tarjeta de presentación u otro material de publicidad. Por está razón se usan dominios que de costumbre son cortos y se hacen más fáciles de manejar. En el caso del dominio gratuito, es suficiente entrar en la página Dot.tk para obtener el dominio gratuito .tk de Tokelau o en Co.cc para el dominio .cc de las Islas Cocos y proporcionar la dirección larga para crear el vínculo o redirección. De está manera cuando un visitante teclee en la barra de dirección de su navegador por ejemplo www.tudominio.tk se desplegará el contenido hospedado en www.nombre-de-tu-hospedaje.com/clientes/12345empresa o algo por el estilo. Esto funciona también en conjunto con páginas de redes sociales y permite hacer más cortas las direcciones de páginas web de Facebook o Twitter.
Como en casí todo lo que es gratuito o regalado hay algunas restricciones, aparte de los más obvios como falta de permiso para poner contenidos ilegales u ofensivos, en el dominio de Tokelau hay que cumplir con cierto número de visitas por mes. Si uno no tiene suficiente tráfico tiene que pagar por el uso de este dominio, aunque en general no cuesta mucho trabajo tener un visitante cada día y seguir disfrutando el servicio gratuito. Y en el dominio de las Islas Cocos la restricción principal es que de manera gratuita uno puede obtener solo dos dominios.
Otra opción interesante que permite hacer las largas direcciones más cortas, es el servicio de Go.to (“Ir a” en inglés), donde uno puede registrar sus nombres nuevos o rutas de páginas web, redireccionando para e-mail y redes sociales.
Ya cuando el proyecto está más maduro y cuenta con un presupuesto, uno puede comprar un dominio de nivel superior para su país de resistencia, lo que en general se ve más profesional y también es más intuitivo y fácil de encontrar por los clientes, ya que la mayoría de la gente que vive en México buscará una empresa con dominio de este país y no de una isla por otro lado del globo terráqueo. En caso de México, los dominios .mx y com.mx se pueden adquirir por medio de un registrador de dominios (registrar en inglés), como Nic.mx o Raxa. Ambos dominios, el gratuito y el comprado, se pueden usar luego de manera simultanea.
Publicado en Hospedaje y dominios | Etiquetado formatos, gratis, web | Deja un comentario
Como evaluar el éxito de páginas web en motores de búsqueda
Publicado el 2011/05/28 por yeti.mx
Para saber como están viendo los buscadores una página web, se pueden solicitar informes a uno de los sitios que analizan los proyectos web y estos sitios regresan la información detallada acerca de sus puntos fuertes y débiles de la página en cuestión según las reglas de posicionamiento SEO.
Una revisión gratuita, acompañada de muchos tips acerca de como mejorar SEO, uno puede obtener desde la página Woorank. Es suficiente con proporcionar la dirección web de su página web y esperar unos momentos, para ver un informe gratuito junto con la calificación (100 puntos es la mejor nota). En el informe viene desglosada la razón de la calificación, especificando muchos elementos de un sitio web que toman en cuenta los motores de búsqueda junto con la explicación de lo que está bien y lo que está mal hecho. Este tipo de revisión integral es difícil de obtener por otro lado o simplemente sería tardado compilar esta cantidad de información desde servicios dispersos. Aquí por medio de un solo click, puede uno tener el análisis semántico de su código HTML, reseña de los elementos meta, palabras y expresiones claves, presentación de vínculos y páginas relacionadas y mucho más. Para problemas detectados que pueden afectar SEO de manera negativa, el sitio proporciona posibles soluciones (hay que dar click sobre el cuadro azul con el símbolo de más al lado de cada punto sobre el cual uno quiere conocer más detalles). Para los que obtuvieron buen resultado y calificación alta, hay opción de agregar un widget al código de su página web, que se desplegara como una imagen con el número del ranking obtenido, por si alguien quisiera presumir este tipo de reconocimiento de parte de un algoritmo.
Otro sitio con un sistema investigador parecido al antes mencionado se llama Websitegrader (Calificador de páginas web) y permite, aparte de realizar un análisis del sitio web, hacer también comparación con otros sitios que están compitiendo con el sitio en cuestión. Esta herramienta SEO igualmente como la anterior genera un informe detallado sobre posibles problemas, sugiriendo tips para solucionarlos y parece enfocarse en redes sociales y sobre todo blogs – inclusive cuenta con un analizador especial para los blogs (llamado BlogGrader).
Una utilería más de este tipo se encuentra en Xinureturns y de manera parecida a las dos anteriores, al proporcionarle la dirección de una página web regresará un informe acerca del desempeño de esta, presentando los datos en una diagramación muy clara y bien organizada visualmente.
Todos estos resultados no pretenden ser muy exactos y uno puede darse cuenta de que hay diferencias a veces muy notables entre los mismos parámetros según cada uno de estos tres servicios. La idea no es confiar ciegamente en todo lo que dicen estos informes, sino tomar sus indicaciones y sugerencias como guías generales o fuentes de tips para aprender como mejorar el posicionamiento SEO de una página web.
Publicado en Análisis y posicionamiento SEO | Etiquetado capacitación, productividad, web | Deja un comentario
Publicado el 2011/05/26 por yeti.mx
El color, siendo uno de los elementos más importantes del diseño web, puede en muchas ocasiones determinar el éxito o el fracaso de una página. Un visitante que entra en un sitio llevado por un motor de búsqueda al tratar de encontrar alguna información, más fácilmente se quedará leyendo y navegando en una página cuyos colores son armoniosos y bien seleccionados, que en una donde la paleta de colores parece armada sin pensar, al azar, creando un diseño que sufre de un choque de tonos, mal contraste que da como resultado una pobre legibilidad y es desagradable a la vista.
Para una persona sin entrenamiento en diseño gráfico ni conocimientos en teoría del color, puede resultar difícil crear y aplicar una consistente y armoniosa paleta de colores. En este caso vale la pena apoyarse de una biblioteca con muestras armónicas de combinaciones de colores o de algunas de las herramientas en línea que permiten crear esquemas de color para diseño web.
La solución más sencilla es acudir a la página Color Combos donde se muestran varias paletas preestablecidas de color para páginas web. Ahí puede uno revisarlas según diferentes criterios, como por ejemplo color principal o realizar búsquedas también por colores o palabras claves. En la sección llamada Combo Tester se pueden realizar más experimentos y pruebas con varios colores, modificándolos y simulando como se verían diferentes combinaciones en el navegador.
Otro sitio parecido al anterior es Kuler, donde una comunidad crea y comparte esquemas de color. Este servicio de Adobe es gratuito (con más utilidades disponibles para los usuarios registrados) y permite revisar rápido variaciones de color, que pueden servir de inspiración o para ideas rápidas de versiones múltiples, útiles inclusive para diseñadores experimentados en selección de color. La ventaja de esta tecnología es su integración con otras aplicaciones de Adobe, como Photoshop, Flash o Fireworks y cuenta con utilerías que permiten crear combinaciones de colores partiendo de un solo color o de una imagen (fotografía o gráfico).
Color Scheme Designer es un poderoso creador de combinaciones de colores. Cuenta con muchas opciones y hay varias maneras de utilizarlas. Un posible flujo de trabajo podría estar compuesto por la siguiente secuencia de pasos: En la esquina derecha inferior del círculo cromático uno puede introducir el código hexadecimal del color principal en el diseño de su página web y luego seleccionar una de las posibles combinaciones de colores complementarios presionando alguno de los botones redondos por encima del círculo cromático. Del lado derecho se muestran los colores de la selección realizada y se pueden visualizar como una serie de cuadros (por defecto) o como páginas web simuladas (con botones Light y Dark Page Example colocados abajo). Cuando uno está listo y la combinación de colores está aprobada, se le puede descargar en formato HTML con CSS, como paleta de colores de Photoshop, Gimp o uno de los demás formatos (todos están en el menú Export).
Publicado en Color, Herramienta web | Etiquetado diseño, formatos, productividad | Deja un comentario
Como pronunciar nombres en inglés de tecnologías web
Publicado el 2011/05/24 por yeti.mx
¿Como se pronuncia Google, Skype, MySQL etc.? – esta es una pregunta muy frecuente, a la cual se puede fácilmente encontrar respuesta en internet. Hay varios sitios y páginas web como Howjsay, que funcionan con una interpretación automatizada de la palabra o frases en inglés que se introducen tecleándolas.
Pero lo que pasa es, que para las preguntas clásicas de este tipo “¿como se pronuncia MySQL?” o “¿como se pronuncia GIF?” o en general, como se pronuncian varias palabras comunes del idioma inglés, en muchas ocasiones no hay solo una respuesta correcta. Eso se debe a que el idioma inglés en su versión británica puede ser muy diferente de la versión estadounidense o australiana, sobre todo si se trata de la pronunciación. Lo mismo sucede en español ya que una persona de España tiene pronunciación distinta a la de México o de Argentina y el nombre del formato gráfico GIF se puede oír con G pronunciada como en Guillermo, Gilberto o Gina. Casi todas las palabras nuevas relacionadas a las tecnologías web que han sido inventadas en los últimos años, son frecuentemente creadas de forma espontánea y popularizadas en internet antes de que cualquier tipo de autoridad tenga la oportunidad de codificar su pronunciación correcta.
Lo anterior es ilustrado en debates dentro de numerosos foros web, donde la gente está revelando sus versiones de pronunciación, frecuentemente muy diferentes, dependiendo de donde vienen y que costumbres o nivel de educación tienen. Por esta razón, en la página Forvo se pueden escuchar varias palabras pronunciadas con diferentes acentos tanto de hombres como de mujeres, no solo en inglés sino en diferentes idiomas del mundo (inclusive lenguas indígenas como el nahuatl). La ubicación de los autores de cada acento esta gráficamente representada en el mapa y el resultado de la pronunciación se puede oír en línea o descargar. En esta página puede uno perfectamente darse cuenta que MySQL tan solo en un país como Estados Unidos se pronuncia de diferentes maneras, como mai-es-qiu-el y como mai-si-quel.
Aunque los ejemplos mencionados arriba intentan mostrar que no existe una sola pronunciación correcta (sobre todo si se trata de vocales y no de consonantes), hay unos errores muy comunes que son fáciles de eliminar y que pueden causar reacciones desde la ridiculez hasta incomprensión total. Por ejemplo ninguna persona que no sabe Español sabrá que es I-Be-Eme, mientras todo el mundo desde luego ubicará Ay-Bi-Em (IBM). Microsoft, se pronuncia en inglés como Maycrosoft y Photoshop suena mejor cuando el SH se emite como en Xola, ya que chop pronunciado como en Cholula significa en inglés chuleta y Photoshop dicho así suena chistoso.
Y en caso de más dudas o si no existe aún la palabra en base de datos de este sitio, un buen recurso para las cuestiones relacionadas con los idiomas es Wordreference donde aparte de diccionarios multilingües existe un amplio foro con numerosas respuestas a las dudas que puedan surgir.
Publicado en Cursos, capacitación e idiomas, Herramienta web, Multimedia y Flash | Etiquetado capacitación, web | Deja un comentario
Publicado el 2011/05/22 por yeti.mx
En ocasiones uno tiene una imagen gráfica con alguna tipografía especifica y necesita saber como se llama la fuente o el tipo de letra que se esta usando para crear el arte en cuestión. Esta imagen puede ser por ejemplo un logotipo en baja resolución entregado por el cliente o una fotografía de alguna publicidad con palabras formadas de letras caracterí­sticas cuyo nombre hay que investigar.
Existen varias herramientas en línea que ayudan a cumplir con esta tarea cotejando una imagen con información de base de datos acerca de tipografía. La primera, What font is, es una utilería que ayuda a reconocer fuentes por medio de preguntas. Funciona en tres sencillos pasos, para empezar hay que cargar un archivo o indicar la dirección web de la imagen que contiene la palabra o palabras escritas en la fuente cuyo nombre se busca cuidando que el texto sea de solo una línea y en formato jpg. El segundo paso consta en ayudar al sistema a reconocer las letras, tecleando las que el no supo distinguir. Y por fin, el tercer paso, es revisar la lista de sugerencias de nombres de fuentes con sus imágenes demo, así como indicaciones de donde descargar el tipo de letra que es idéntica o la más parecida a la que uno esta buscando. Otra utilería que ayuda a reconocer fuentes mediante escaneo o fotografía digital y que funciona de manera parecida a la anterior es What The Font.
Para obtener mejores resultados en ambos de los buscadores de tipografía, es buena idea retocar el texto en Photoshop u otro editor para mejorar la legibilidad. Se trata sobre todo de eliminar elementos más confusos, corregir contraste, asegurar que las letras no se toquen ni se encimen y si se puede, asegurar el tamaño más grande posible de la letra- gracias a esto, el sistema automatizado va a poder más facilmente encontrar fuentes semejantes.
Identifont es otra página web de gran ayuda que se dedica a buscar nombres de fuentes, pero su manera de funcionar es diferente a la de las anteriores, ya que no requiere subir ninguna imagen escaneada, sino que inicia el proceso de la búsqueda por medio de preguntas. Esto funciona así: primero aparece una pregunta acerca de alguna característica de la fuente con sus posibles respuestas. Cada una de las respuestas da la mejor descripción (en idioma inglés) de dicha característica, acompañada por una imagen demo de una letra. El usuario debe seleccionar la que es más parecida a la fuente que está buscando y de esta manera pasará a la siguiente pregunta, relacionada con otra característica de la tipografía. En caso de no saber contestar la pregunta, hay que seleccionar la opción not sure (no estoy seguro) con el signo de interrogación. Al final de una secuencia de preguntas, viene la visualización de opciones de fuentes que cumplen con las categorías que indicaron las respuestas del usuario.
Este último sitio web tiene también interesantes páginas con buscadores de fuentes parecidas (la pestaña que dice Fonts by similarity) y símbolos (Picture fonts).
Publicado en Herramienta web, Texto, tipografía y fuentes | Etiquetado capacitación, diseño, formatos | Deja un comentario
Buscadores especializados en imágenes
Publicado el 2011/05/20 por yeti.mx
En muchas situaciones resulta necesario buscar imágenes pero no según las palabras que forman su título o descripción, sino según lo que representan. Para eso no se pueden aplicar los motores de búsqueda tradicionales y hay que recurrir al uso de herramientas más especializadas. El buscador de imágenes llamado TinEye es muy útil para ubicar en la web las copias exactas o mutaciones de la imagen en cuestión. Esta herramienta sabe encontrar imágenes aunque estas hayan sido modificadas o cambiadas en cuanto a su tamaño, dimensiones o formato, incluso si pasaron por tratamientos tipo reencuadrar, girar o ajuste de color.
¿Qué usos prácticos tendría este buscador para los diseñadores web? Se le puede aplicar en muchas tareas, una de las más comunes y tí­picas sería usarlo para buscar si existen versiones más grandes de la imagen que uno tiene como miniatura.
Tanto diseñadores como fotógrafos pueden rastrear la web para revisar si su obra no ha sido fusilada o en general usada en alguna página web sin su permiso. Por otro lado un diseñador puede revisar de donde vienen las fotos o gráficos proporcionados por el cliente para asegurarse de que estos materiales se pueden usar sin correr el riesgo de ser acusado de piratería.
Existen varias maneras de proporcionarle las imagenes al buscador, cargándoselas directamente de su máquina, mostrandoselas en alguna dirección web (URL) o teniendo instalado algún complemento (plug-in) en el navegador.
Este servicio es gratuito aunque limita a los usuarios a 50 búsquedas por día o 150 semanales, si uno necesita realizar más búsquedas, puede comprar un acceso a la versión comercial e ilimitada.
Mientras TinEye se enfoca en encontrar imágenes idénticas, para buscar imágenes parecidas o relacionadas con uno se puede utilizar Pixolu o Gazopa. Ambos buscadores rastrean las páginas web para encontrar imágenes parecidas según criterios múltiples a la que uno está proporcionando. Está funcionalidad puede resultar muy útil cuando uno está por ejemplo diseñando un logotipo y quiere comparar su idea con otras o simplemente revisar si no esta cometiendo inconscientemente un plagio. Los resultados de búsqueda también forman una buena fuente de inspiración o ayudan a encontrar imágenes perdidas u olvidadas.
Las imágenes, sobro todo en el caso del segundo de los motores de búsqueda, se pueden proporcionar de diferentes maneras, inclusive dibujandolas directamente en el navegador – una rápida y cómoda técnica para buscar símbolos, íconos y pictogramas.
Publicado en Herramienta web, Imágenes | Etiquetado fotografía, productividad, web | Deja un comentario
Donde descargar símbolos y fuentes gratuitas para páginas web
Publicado el 2011/05/18 por yeti.mx
Entre varios sitios que ofrecen las fuentes para descarga gratuita sobresalen dos, debido a que cada uno de ellos cuenta con una colección extensa de fuentes creativas y de alta calidad y que sobre todo permiten recorrer los recursos de manera práctica y cómoda. En Dafont y Abstractfonts se pueden revisar las fuentes organizadas por categorías de tipografía, temas, alfabeto, popularidad, antigüedad o mucho más. Para facilitar la selección se puede utilizar el texto personalizado, eso significa que al teclear algún texto en el campo marcado como custom preview, uno puede ver el demo de cada fuente con las palabras de su preferencia en lugar de los nombres de fuentes como es costumbre en la mayoría de los otros sitios de este tipo. También se puede ver el mapa de caracteres de cada fuente, lo que permite verificar si las letras tienen acentos, algunos símbolos adicionales u otros caracteres especiales. En el primero de los sitios recomendados se puede activar la opción de mostrar solamente fuentes que tienen acentos, lo que es muy importante para los que trabajan con textos en español u otros idiomas no solo inglés.
La sección llamada Dingbats contiene fuentes que en lugar de letras y tipografía están compuestas por varios tipos de símbolos, logotipos y hasta ilustraciones, lo que hace de esa página un excelente recurso para descargar gráficos sobre todo tipo de temas. Estas fuentes son más bien imágenes vectoriales, ya que al importarlas a algún editor tipo Illustrator, Corel o Inkscape uno puede convertirlas a curvas y transformar los nodos a su gusto.
Pero este tipo de fuentes requieren ser descargadas e instaladas en el sistema operativo, lo que implica que para ser usadas en el ambiente web uno tendría que convertirlas en imágen tipo mapa de bits (jpg o gif) o usar algún tipo de formato vectorial tipo flash o SVG. Ninguna de las dos opciones está perfecta y ambas tienen más desventajas que ventajas.
La esperada alternativa es utilizar fuentes web que el navegador descarga para poder desplegar el texto con la tipografía más sofisticada que hasta hace poco era imposible de realizar. Ahora ya no es así, una de las soluciones que ofrece Google de manera gratuita es el uso de una de sus APIs: sus fuentes para web es una colección de fuentes muy fáciles de usar que funcionan en la mayoría de los navegadores modernos.
Otra opción es aprovechar la introducción de la propiedad @font-face en CSS3, la cual permite utilizar fuentes para web descargables del servidor de usuario (colocadas simplemente en una carpeta así como se colocan imágenes, videos u otros elementos de contenido de la página web) o de los servidores comerciales que venden este servicio que a cada momento se hace más popular. En está página uno puede ver y descargar algunas de las mejores fuentes gratuitas para insertar en las páginas web.
Publicado en Texto, tipografía y fuentes | Etiquetado diseño, formatos, gratis | Deja un comentario
Texturas gratuitas para fondos de páginas web
Publicado el 2011/05/16 por yeti.mx
Los fondos de las páginas web pueden ser de dos tipos – colores uniformes o imágenes (y si se toman en cuenta las nuevas propiedades de CSS3 también, desde hace tiempo, degradados).
Las imágenes de fondo por defecto se visualizan rellenando todo el espacio disponible, sin importar la resolución de la pantalla o el tamaño del contenido bajo el cual éste fondo está insertado. Este efecto permite utilizar imágenes muy pequeñas y rápidas de descargar, que se repiten cuantas veces sea necesario según el área a llenar, pero al mismo tiempo, eso puede causar un problema de repetición demasiado obvio, cuando las orillas de la imagen se hacen evidentes, lo cual no se ve nada estético ni elegante.
Para evitar este fenómeno indeseable se utilizan imágenes realizadas con la técnica seamless tiles, lo que significa que aunque estos gráficos siguen siendo azulejos cuadrados, sus bordes no serán sobresalientes o simplemente no se van a ver.
Los fondos de este tipo se pueden crear con algún editor gráfico como Photoshop, se pueden descargar de una de las numerosas páginas web que los comparten de manera gratuita o se pueden crear en línea con alguno de los generadores que existen.
Dinpattern o Pixelpatterns son ejemplos de páginas con galerías de imágenes de fondos gratuitos, de muy buena calidad y listos para download. En Bettertextures también hay varias imágenes listas que se pueden organizar por colores o por tipo de textura.
Si uno necesita algo más particular, puede revisar las opciones que ofrece la página Grsites – ahí se pueden crear paso a paso fondos personalizados con colores, degradados, motivos (patrones) y más. La interface es bastante intuitiva y permite crear fondos de texturas abstractas a medida, para tener acceso a está opción hay que entrar en una de las secciones llamadas “maker” y seguir los pasos indicados.
La herramienta Tilemachine permite a uno crear sus propios fondos a través de realizar dibujos que instantáneamente se visualizan de manera múltiple, simulando como se verian los fondos en las páginas HTML. Este generador es muy fácil de usar, bastante divertido y facilita crear en muy poco tiempo impactantes dibujos para los fondos.
Una vez terminada la imagen de fondo o seleccionada para descargar hay que añadirla al código fuente para que se despliegue. Hay varias técnicas para hacerlo, pero la más común y recomendada sería la de ubicar en la hoja de estilos CSS o en la cabecera del documento la regla de CSS que controla el elemento body y añadir entre las llaves la propiedad background-image: url(fondo.jpg). De la misma manera se puede añadir el fondo a una tabla, celda o división de la página web.
Publicado en Herramienta web, Imágenes | Etiquetado capacitación, diseño, web | Deja un comentario
Referencias y especificaciones de HTML y CSS en español
Publicado el 2011/05/14 por yeti.mx
Existen varios lugares para obtener respuesta en caso de tener dudas acerca de cómo funcionan algunos de los elementos HTML particulares, que atributos pueden llevar o todas las propiedades de CSS y sus valores.
Para empezar existen numerosos libros con referencias para todos los niveles de conocimiento desde principiantes, profesionistas y hasta expertos. Los libros forman probablemente la mejor fuente la información bien organizada, fidedigna y también cómoda de usar, aunque el ciclo editorial de un libro, sobre todo si requiere traducción al español, es el motivo por el cual no siempre es la fuente más actualizada. También hay que decir que las versiones en español suelen tener a veces un pobre nivel de traducción, sobre todo inconsistencias en los tecnicismos ingleses utilizados en diferentes países hispanohablantes, lo que causa problemas de homologación y en cotejar las versiones españolas con referencias, tutoriales, libros y especificaciones originales.
También por supuesto los libros son costosos, así que no siempre puede uno comprarse todas las referencias que necesita, en este caso se tienen que buscar las especificaciones en internet. Hay varias páginas web que ofrecen este tipo de contenido, otra vez las versiones en inglés son mucho más numerosas y exactas, aunque se pueden encontrar recursos en español de buena calidad.
w3.org es la fuente principal de las especificaciones de HTML y CSS en español, inglés y otros idiomas, aunque estas especificaciones son muy técnicas, algo abstractas y escritas no solamente para diseñadores web, sino inclusive para los desarrolladores de las aplicaciones, así que no siempre puede uno fácilmente encontrar la respuesta que está buscando. Para ver como son estos documentos, en esta dirección se encuentra la especificación completa de CSS2 en español, traducida desde los documentos originales de w3.
w3schools es una de las mejores referencias para diseño web, con especificaciones completas de HMTL, CSS, JavaScript y otros códigos, donde uno puede consultar muchas de las dudas que surgen en el proceso de diseño. No tiene versión en español, pero la versión en inglés que se muestra ahí es sencilla, clara y permite entender las explicaciones, tal vez solo con la ayuda de un diccionario.
Si se requiere una referencia más concisa, portátil y que se pueda fácilmente imprimir, hay varias versiones disponibles en la red, que se llaman en inglés “cheatsheat” – basta buscar esta palabra en Google con el nombre del código que uno quiere, para obtener numerosos resultados de este tipo de apuntes compilados en una o dos hojas tamaño carta.
Cabe mencionar que los usuarios de Adobe Dreamweaver cuentan con los manuales de referencia integrados en el panel de Resultados (en el menú Ventana). Estas especificaciones son cortas y en inglés, pero siempre están a la mano y son fácilmente accesibles, útiles sobre todo cuando no hay conexión a internet.
Publicado en Cursos, capacitación e idiomas, Referencia | Etiquetado capacitación, código, web | Deja un comentario
Como regresar en el tiempo para ver páginas web que ya no existen
Publicado el 2011/05/12 por yeti.mx
Aunque los recursos de internet global hoy en día son ya enormes y se actualizan sin cesar a cada instante y a gran velocidad, existe algo difícil de imaginar – un archivo de internet. Este archivo o fichero es un servicio gratuito con la funcionalidad de una biblioteca digital gigantesca, que funciona un poco como los motores de búsqueda, rastreando la red e indexando todas las páginas que sus robots encuentran. Pero es diferente a los buscadores en este aspecto que en lugar de regresar al usuario los resultados más relevantes de manera inmediata, este servicio los agrega a sus poderosos archiveros contemplando almacenar lo más que se puede, para que luego un usuario pueda consultar diferentes etapas en el desarrollo de varios sitios web así como obtener información de páginas que ya dejaron de existir o ya no están en línea.
Al entrar en el sitio de Internet archive uno tiene varias opciones para realizar consultas sobre muchos temas y tener acceso a los vastos caudales de información digitalizada como por ejemplo películas, videos, libros, imágenes, música, incluso aplicaciones y demás. Todo eso es por supuesto gratuito y ahora libre de derechos para consultar, o sea ver por ejemplo los conciertos digitalizados de varios cantantes o bandas es totalmente legal en este sitio.
Pero la más interesante de sus funciones es la llamada “Wayback machine” cuyo acceso se encuentra en la parte superior central de la página de inicio. Al introducir ahí una dirección de algún sitio o página web, uno obtiene un listado de fechas en las cuales los rastreadores de este archivero de internet grabaron el estado presente de cada sitio en varias épocas de su existencia. En el momento de escribir esta información, www (world wide web) tiene 18 años y el archivero almacena 150 billones de páginas, lo que basta para que uno se imagine la cantidad de información disponible a su alcance.
Para los diseñadores web sería de gran interés esta funcionalidad ya que permite revisar el historial de un prospecto o cliente y también de manera más universal conocer la historia de la web, visualizando cómo se veían las páginas meses o años atrás. Así uno puede observar varias modas y tendencias según las cuales cambiaba la presentación de sitios como Yahoo o el Universal – ahí se puede notar muy bien como la introducción de tecnologías tipo CSS o Ajax impactaba la apariencia de los contenidos, la usabilidad y la experiencia del usuario; aparte es una experiencia bastante divertida navegar el internet en el sentido contrario del tiempo.
Publicado en Herramienta web | Etiquetado diseño, gratis, web | Deja un comentario
Galerías de portafolios de diseñadores web
Publicado el 2011/05/10 por yeti.mx
Existen muchas páginas y sitios web que compilan la última moda y tendencias en diseño web. He aquí tres ejemplos de sitios que son actualmente muy populares, donde uno puede buscar inspiración o simplemente echar un vistazo para ver que hacen y a que se dedican otros diseñadores.
Sortfolio es una galería de portafolios de diseñadores web. Ahí, presionando las flechas o los botones en forma de pelotas grises, puede uno revisar de manera rápida ejemplos de sus diseños y si le llamó la atención alguno por su estilo, dándole click puede entrar para conocer más detalles. También existe, desde arriba de la página, la opción de organizar los portafolios según la ciudad sede de las agencias de diseño o según el rango de precios en cuanto se cotiza hacer una página web. Si uno quiere revisar como se presentan los diseñadores de México la ruta es “Any city -> List all cities (abajo de la lista de las ciudades norteamericanas) -> Other countries (hasta abajo de la página de los países del mundo) y por fin -> México”.
Behance es otro tipo de galería de portafolios combinada con cierta funcionalidad de redes sociales para creativos. El sitio no está solamente enfocado al diseño de páginas web, sino también a otras ramas de las artes visuales como fotografía, ilustración, diseño editorial y demás. Ahí puede uno construir y subir su portafolio digital sin tener muchos conocimientos de como diseñar páginas web con varias opciones para promocionar su trabajo creativo y ganar dinero. También hay opciones de vinculación laboral entre profesionistas de varias especialidades relacionadas con el diseño, o sea buscar y encontrar trabajo en el campo del diseño, intercambio de servicios y conocimientos para apoyo mutuo ademas de ayudar a mantener relaciones de este tipo entre colegas.
Dribble es un ejemplo más de comunidad creativa para diseñadores con estilo facebook o más bien un twitter visual. Su manera de funcionar es que los diseñadores enseñen pequeñas imágenes o muestras fugaces de los proyectos que están desarrollando en ese momento. Ahí hay ciertas restricciones acerca de como uno puede participar y compartir sus ideas, en pocas palabras todo el mundo se puede inscribir pero solo algunos estarán aceptados por la comunidad y podrán presentar sus avances, dependiendo por supuesto de la calidad de sus propuestas de diseño.
Los tres sitios son gratuitos, por lo menos en sus versiones básicas las cuales son totalmente funcionales, uno tiene que pagar únicamente si quiere que su portafolio tenga una presentación más destacada. Solo el último sitio de los tres presentados es más elitista y no permite tan fácilmente entrar a cualquiera.
Publicado en Diseño gráfico, Referencia | Etiquetado diseño, gratis, web | Deja un comentario
Experimento lingüistico
Un intento de escribir sobre diseño y capacitación en español como idioma extranjero.
capacitación código diseño formatos fotografía gratis productividad programa web

References: resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución