AddThis - Share & Follow

A través de la página de AddThis podemos obtener Social Plugins, con los cuales, los usuarios podrán compartir nuestro contenido en las diferentes redes sociales, así como para mostrar los clásicos botones que redirigen a nuestros perfiles en dichas plataformas.

neo 2.0 - AddThis - Share & Follow - 1

Lo primero que debemos hacer, es ir a la página de AddThis, y seleccionar entre las diferentes opciones:

  • Share
  • Follow
  • Welcome
  • Trending
  • Analytics
  • Mobile

Selecciona la opción que necesites, se abrirá un nueva ventana flotante donde podrás registrarte, sin embargo, no es necesario si no deseas hacer un seguimiento (aunque si recomendable), aún así, si prefieres no realizar el registro bastará con hacer clic en el aspa de dicha ventana para cerrarla y obtener el código que deberás insertar en las páginas donde desees que aparezca el plugin.

Por ejemplo, para insertar el plugin Share, haz clic en el botón "Get Sharing Buttons", (se abre la ventana flotante de registro), selecciona el tipo de sitio:

neo 2.0 - AddThis - Share & Follow - 2

Ahora, selecciona el estilo que mejor se adapte a tu site:

neo 2.0 - AddThis - Share & Follow - 3

Por último, copia y pega el código en las páginas de tu site donde quieras que aparezca:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fb0a214521cc6da"></script>
<!-- AddThis Button END -->

Validación de campos de un formulario con SpryAssets

Si necesitamos validar los campos de un formulario antes de ser enviado, podemos hacer uso de los SpryAssets. Lo primero que debemos hacer es crear nuestro formulario de contacto o registro, como el siguiente:

neo 2.0 - Validación de campos de un formulario con SpryAssets - 1

A continuación aplicamos los diferentes Spry a los campos que deseamos validar:

neo 2.0 - Validación de campos de un formulario con SpryAssets - 2

Para ello, en Dreamweaver, seleccionamos los campos uno a uno y hacemos clic en "Insertar" > "Spry" y elegimos el tipo de campo a validar:

  • Campo de texto
  • Área de texto
  • Casilla de verificación
  • Selección
  • Contraseña
  • Confirmación
  • Grupo de opciones

Automáticamente, se habrá generado una llamada al script en nuestro documento antes de la etiqueta de cierre </head> como la siguiente, así como a su hoja de estilos CSS:

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

Y el siguiente script, al final de nuestro documento, antes de la etiqueta de cierre </body>:

<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("nombre", "none", {validateOn:["blur", "change"], minChars:1});
//-->
</script>

En función del tipo de spry que estemos empleando, podremos modificar sus propiedades en la ventana "Propiedades". Por ejemplo para un campo de texto:

  • Nombre del campo de validación
  • Tipo: podremos seleccionar entre las siguientes opciones:
    • Entero
    • Correo electrónico
    • Fecha
    • Hora
    • Tarjeta de crédito
    • Código Postal
    • Número de teléfono
    • Número de Seguridad Social
    • Moneda
    • Número real - Notación científica
    • Dirección IP
    • URL
    • Personalizado
  • Estado de la vista previa:
    • Inicial
    • Obligatorio
    • No se cumple el número de Car. mín.
    • Válido
  • Formato
  • Validar al:
    • onBlur
    • onChange
    • onSubmit
  • Patrón
  • Sugerencia
  • Car. mín.
  • Car. máx.
  • Valor mín.
  • Valor máx.
  • Obligatorio
  • Aplicar patrón

Una vez aplicados, podremos modificar los mensajes y estilos que nos servirán para indicar al usuario los campos que son obligatorios así como los mensajes de error.

Para modificar los mensajes de aviso que le aparecen al usuario al no completar un campo obligatorio o debido a un error, bastará con modificar el texto contenido entre las etiquetas <span></span> que ahora aparecerán envolviendo a cada input, por ejemplo para un campo de texto como "Nombre": <span class="textfieldRequiredMsg">Se necesita un valor.</span>

neo 2.0 - Validación de campos de un formulario con SpryAssets - 3

Puedes descargarte los archivos del ejemplo haciendo clic aquí.

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?