Ley de Murphy en el Diseño Web

  1. Siempre que las cosas parezcan ir bien es que has pasado por alto algo.
  2. Siempre encuentras algún fallo en el último lugar que se te ocurre mirar y cuando los encuentras aparecerán en alguna otra parte.
  3. No encontrarás el fallo más molesto hasta que estés viajando desde el trabajo hacia tu casa.
  4. El 90 % del tiempo de desarrollo es corrección de fallos.
  5. Un sitio web siempre está “en construcción”.
  6. El sitio web siempre se caerá justo antes de hacer el respaldo.
  7. No programes unas vacaciones que comiencen justo después de una lanzamiento de versión.
  8. Todo proyecto llevará al menos el doble del tiempo que se espera incluso si desde el comienzo esperas que lleve el doble de tiempo.
  9. Ese maravilloso tono de verde en la portátil de tu casa lucirá HORRIBLE en la PC de tu trabajo
  10. Si todo luce bien en IE entonces lucirá horrible en FF y viceversa
  11. Es imposible hacerlo bien desde el principio
Ley de Murphy en el Diseño Web

CSS3 Generator: generador de cajas en CSS3

Navegando por la internet me encontre con esta nueva aplicación la cual sirve para crear cajas de forma sencilla, obteniendo el código necesario para incluirlo en nuestra página web.
CSS3 Generator es una sencilla aplicación online que permite a desarrolladores menos experimentados o con falta de tiempo, disponer de parte de la potencia de CSS3 en su web, sin necesidad de conocimientos avanzados acerca de esta nueva especificación.

CSS3 Generator es un editor de cajas al que es posible modificar visualmente aspectos como bordes, sombra, color y transparencia, y cuyo resultado podremos ir viendo en tiempo real.

El manejo de CSS3 Generator no presenta dificultades. Una vez finalizado el trabajo y seleccionado «get the code» obtendremos el código para incluirlo en un sitio web.

Interesados pueden acceder a CSS3 Generator desde www.css3.me.

CSS3 Generator: generador de cajas en CSS3

Como validar formularios con Jquery

Todos los que nos dedicamos al desarrollo o diseño web, en algún momento dado se nos ha presentado la necesidad de validar algún formulario y pues tenemos que recurrir a diferentes opciones para hacerlo ya sea del lado del servidor o de lado del navegador según sea el caso, el día de hoy les voy a comentar una forma que para mi me a funcionado y que nos puede ahorrar muchos dolores de cabeza.

Para este caso estoy utilizando el ya famoso Framework Jquery junto con un Plugin llamado jQuery.Validate.

En mi caso tenía que validar una serie de radio buttons de mi formulario y con solo el nombre de mi Formulario pude lograrlo, a continuación paso a explicar a groso modo como lo logre, simplemente agregue entre las etiquetas <head></head> este codigo, como podran darse cuenta lo unico que hice fue declarar el nombre de mi formulario el cual se llama #miFormulario y le agregue la funion validate(), eso fue todo ya que basicamente todo lo que este dentro del formulario lo va a validar agregando la siguiente clase class=»required», como podran ver es muy facil de implementar este plugin.


<script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
 <script>
 $(document).ready(function(){
 $("#miFormulario").validate();
 });
 </script>

Un ejemplo completo de como lo pueden implementar sería el siguiente:


<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
 <script>
 $(document).ready(function(){
 $("#miFormulario").validate();
 });
 </script>

</head>
<body>

 <form id="miFormulario" method="get" action="">
 <fieldset>
 <legend>Un simple formulario de comentarios validado y con mensajes predise&ntilde;ados</legend>
 <p>
 <label for="cnombre">Nombre</label>
 <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
 </p>
 <p>
 <label for="cemail">E-Mail</label>
 <em>*</em><input id="cemail" name="email" size="25"  class="required email"  />
 </p>
 <p>
 <label for="curl">URL</label>
 <em>  </em><input id="curl" name="url" size="25"  value="" />
 </p>
 <p>
 <label for="ccomentario">Tu comentario</label>
 <em>*</em><textarea id="ccomentario" name="comentario" cols="22"  class="required"></textarea>
 </p>

 <p>
 <input type="submit" value="Enviar"/>
 </p>
 </fieldset>
 </form>
</body>
</html>

El exito de este plugin radica en la clase que se manda llamar para validar, si ponen un poco de atención, en el input de Email utilizo la clase «required email», con lo cual el tipo de validación que hace va ser de tipo Correo electrónico donde tiene que hacer uso de @ y de un dominio valido, con esto ya estamos del otro lado caray ya que no, nos tendremos que preocupor acerca de este tipo de cosas así como esta clase existen algunas otras especificas dependiendo del tipo de campo que necesitemos validar:

  1. required: «This field is required.»
  2. remote: «Please fix this field.»
  3. email: «Please enter a valid email address.»
  4. url: «Please enter a valid URL.»
  5. date: «Please enter a valid date.»
  6. dateISO: «Please enter a valid date (ISO).»
  7. number: «Please enter a valid number.»
  8. digits: «Please enter only digits.»
  9. creditcard: «Please enter a valid credit card number.»
  10. equalTo: «Please enter the same value again.»
  11. accept: «Please enter a value with a valid extension.»

Dentro de la pagina de Jquery pueden ver muchas otras formas de implementar este Plugin yo simplemente les estoy mostrando una forma rápida y fácil, aparte ya sabes que cada proyecto es diferente les dejo el link a la página del plugin y espero les sirva tanto como a mi.

http://docs.jquery.com/Plugins/Validation/validate

Saludos

Como validar formularios con Jquery

Cuatro pistas visuales que ayudan a distinguir un sitio web real de uno fraudulento

En el mundo del malware, es cada vez más común el armado de sitios «parecidos» a los reales pero diseñados para robar las claves y nombres de usuarios desprevenidos de sitios de ecommerce o de e-banking. ¿Es por eso que es importante aprender a distinguir visualmente un sitio real de uno falso. Tim Callan -Vicepresidente de Marketing de Productos SSL, de la compañía especializada en seguridad y sitios de comercio electrónico VeriSign, ofrece las siguientes pistas:

En el mundo del malware, es cada vez más común el armado de sitios «parecidos» a los reales pero diseñados para robar las claves y nombres de usuarios desprevenidos de sitios de ecommerce o de e-banking.

Es por eso que es importante aprender a distinguir visualmente un sitio real de uno falso. Tim Callan -Vicepresidente de Marketing de Productos SSL, de la compañía especializada en seguridad y sitios de comercio electrónico VeriSign, ofrece las siguientes pistas:

1. Barra de dirección verde: Busque la barra de dirección verde y el nombre de la empresa destacado en verde en la parte superior del navegador. Esos indicadores significan que este sitio pasó por una amplia autenticación de identidad, de manera que usted puede confiar que éste es el sitio que usted piensa ser.

2. https:// Si la dirección del sitio Web empieza con https://, esto significa que las informaciones que usted comparte están encriptadas contra espías en Internet. Nunca inserte los números de su tarjeta de crédito o informaciones personalmente identificables, como su número del Registro de Persona Física en cualquier página que no empiece con https.

3. Marcas de confiabilidad: Las populares marcas de confiabilidad pueden indicar cosas importantes sobre un negocio online. Las más importantes marcas de confiabilidad incluyen el Sello de Seguridad VeriSign (seguridad online e identidad de sitio verificada), TRUSTe (privacidad de datos de cliente), y la «Better Business Bureau» (prácticas de negocios), RatePoint (clasificaciones/reseñas del proveedor).

4. Verifique la dirección Web: Muchos sitios fraudulentos emplean deliberadamente direcciones que son equivocadas o ambiguas para engañar víctimas inocentes, haciéndolas pensar que están en determinado sitio, y en verdad no están. Sospeche de cualquier sitio con dominio desconocido que contenga el nombre de un sitio famoso en la última parte de una dirección de Web. Por ejemplo, si su banco favorito está localizado en http://www.mibancofavorito.com, entonces usted debe sospechar bastante de un sitio como http://www.algunotrodominio.com/mibancofavorito.

Visto en: Neomundo

Cuatro pistas visuales que ayudan a distinguir un sitio web real de uno fraudulento

30 Útiles tutoriales de diseño abstracto en photoshop

Hola a todos revisando las estadísticas del sitio veo que les agradan mucho los tutoriales para crear efectos ya sea para algún wallpaper o simplemente por querer aprender a hacer algo nuevo, encontré entre mis bookmarks esta liga al sitio de Noupe la cual la comparto con todos ustedes pero les sirva tanto como me sirvió a mí.

Windows Vista Aurora Efecto Tutorial Photoshop
Este tutorial enseña a crear el efecto de Windows Vista aurora lo mejor es que te lleva paso a paso para que lo termines.


La creación de un fondo de tipo Mac en Photoshop
En este tutorial, aprenderás cómo crear un fondo de escritorio al estilo Mac.

Leopard Aurora Borealis Tutorial de Photoshop
Hablando acerca de los efectos populares, aquí hay un buen fondo de pantalla de Mac OSX Leopard, este tutorial es de DesignNerd.

Firma Fondos
Este tutorial los guía para la creación de esta imagen abstracta que comúnmente se puede ver en las firmas de los foro.

Estos y algunos otros efectos interesantes los encontraran en Noupe.

Excelente fin de semana a todos.

30 Útiles tutoriales de diseño abstracto en photoshop

105 Links para Diseñadores Web

Fuentes
Tips y Tutoriales
Sitios de inspiracion
Herramientas Color
Otros Sitios Buenos
Iconos
Themes
Imagenes, pics y logos

Visto en: xyberneticos

Le agregue unos cuantos links a la lista que tenían, espero les sirvan.

Saludos

105 Links para Diseñadores Web

Silverlight Tour Workshop en Español.

El Silverlight Tour Workshop es un curso de tres días de alta profundidad técnica acerca de Silverlight 3 y Silverlight 4 Beta. El curso se imparte en varios idiomas en diferentes países en todo el Mundo y está actualizado a la versión Beta de Silverlight 4.

Incluye:

  • Tres días intensos de entrenamiento con Silverlight 3 y Silverlight 4 Beta
  • Arquitectura de Soluciones con Silverlight
  • Comunicación con el Servidor
  • Creación dinámica de contenido XAML
  • Comunicación con el DOM
  • Aplicaciones Fuera del Navegador y el nuevo modelo de ejecución en SL4B
  • Diccionarios Merged y Estilos Based-On
  • Validación de Datos utilizando el Modelo de Controles
  • Framework de Navegación
  • Utilización de XML Binario
  • Utilización de la nueva API de Bitmaps
  • Pixel Shaders
  • Comportamientos
  • Blend 3
  • Impresión
  • Acceso al Portapapeles
  • Contenido HTML
  • Utilización de Web Cam y Micrófono
  • Nuevo Modelo de Drag and Drop
  • Nuevo Modelo de Confianza
  • PopUps para Notificaciones
  • Estilos Implícitos
  • Ensamblados compartidos entre .NET Framework 4 Beta y Silverlight 4 Beta
  • …y más
  • Material totalmente en Español

Para ver el temario completo del curso haz clic aquí.

Horario

  • El curso se imparte de 08:00 a 18:00 horas los tres días
  • La comida y coffee break están incluidos (no aplica en cursos privados)

Requisitos técnicos

  • Experiencia con .NET y el lenguaje C#
  • Experiencia en la construcción de aplicaciones Web en general

Registro

Costo

  • El costo del curso depende del país. Lo puedes revisar en esta página
  • ¿Descuento por volumen? Contáctanos para más información.
Agenda Latinoamerica y España:
  • Silverlight Tour – Ciudad de México (20Ene – 22Ene)
  • Silverlight Tour – Guadalajara, Jal. (08Feb – 10Feb)
  • Silverlight Tour – Monterrey, N.L. (11Feb-13Feb)
  • Silverlight Tour – Valencia, España (03Mar – 05Mar)
  • Silverlight Tour – Lima, Perú (24Mar-26Mar)
  • Silverlight Tour – Santiago de Chile (20Abr – 22Abr)
  • Silverlight Tour – Buenos Aires, Argentina (04May-06May)

Espero les sirva esta información y los que puedan ir aprovechen al máximo esta gran oportunidad.

Silverlight Tour Workshop en Español.

7 Servicios para tener tu empresa en internet gratis

Tu empresa puede tener presencia en internet de forma fácil, rápida y gratuita con Office Live Small Business. No se requieren conocimientos técnicos o de diseño, ni descargar software o invertir en infraestructura.

Office Live Small Business proporciona a su compañía todo lo que necesita para crear un sitio web profesional de forma gratuita, incluyendo herramientas de administración y diseño de sitios web fáciles de usar, así como 100 cuentas de correo electrónico. También ofrece un conjunto gratuito de aplicaciones empresariales profesionales que le permitirán administrar clientes, proyectos y documentos, así como compartir información fácilmente con empleados, clientes, proveedores y distribuidores. Office Live Small Business se ocupa de todo lo necesario gracias a sus funciones mejoradas de seguridad, administración y mantenimiento.

Estos 7 servicios los encontrará gratis al usar Office Live Small Business:

  1. Sitio web
    Cree un sitio web gratuito de aspecto profesional con una amplia variedad de  plantillas y herramientas de diseño fáciles de usar.
  2. Hospedaje web
    Obtenga un hospedaje web de confianza comenzando con 500 MB de almacenamiento gratuito.
  3. Redirección de dominio
    Si ya dispone de un dominio, rediríjalo fácilmente para usarlo con nuestro diseño, hospedaje y servicios de correo electrónico para sitios web.
  4. Redirección de dominio
    Si ya dispone de un dominio, rediríjalo fácilmente para usarlo con nuestro diseño, hospedaje y servicios de correo electrónico para sitios web.
  5. Cuentas de correo electrónico
    Otorgue un aspecto profesional a su empresa con 100 cuentas de correo electrónico que concuerden con su nombre de dominio, con 5 GB de almacenamiento por cuenta y capacidad de acceso móvil.
  6. Almacenamiento y uso compartido de documentos en línea
    Comparta y obtenga acceso a documentos en línea en cualquier momento y lugar con Office Live Workspace.
  7. Soporte técnico
    Soporte técnico por correo electrónico y una amplia comunidad con artículos, tutoriales, foros y blogs.
  8. Administrador de contactos
    Administre sus oportunidades de ventas e información de contactos y realice un seguimiento de las interacciones con los clientes.

Más información: Office Live Small Business

7 Servicios para tener tu empresa en internet gratis

40 Fantasticos Wallpapers: Cambia tu aburrido fondo de escritorio!

Desde la página de Noupe nos traen una recopilación de 40 wallpapers con una excelente calidad gráfica, si ya estas aburrido de tu imagen que tienen en el fondo de tu escritorio seguro alguno de estos diseños te agradará, espero los disfruten.

Ver wallpapers

Algunos ejemplos de wallpapers:

Fuente: Noupe

40 Fantasticos Wallpapers: Cambia tu aburrido fondo de escritorio!

iPhone y la etiqueta Meta «Viewport»

Si desea que su contenido quede perfecto en un iPhone o iPod Touch debe utilizar la etiqueta Meta viewport.

 

Sin ella, la página puede parecer en miniatura. Ya había escuchado hablar de esa etiqueta pero no la había utilizado hasta ahora. Lo único que se tiene que hacer es agregar la siguiente linea entre las etiquetas meta de sus páginas.

 

<meta name="viewport" content="width=320, user-scalable=yes"> 

Si establece "user-scalable = no" entonces los usuarios no podran hacer uso del zoom  (acercar o alejar,) así que lo recomendable es dejar "user-scalable = yes" (a menos que la página que estén haciendo no este pensada para hacer zoom in).

Espero les sirva esta información saludos y Feliz año a todos.

iPhone y la etiqueta Meta «Viewport»