Authentic Jobs es una bolsa de trabajo de diseño/desarrollo web de larga duración, respetada y exitosa. Estoy seguro de que gran parte de ese éxito se debe al diseño hermoso, minimalista y reflexivo del propietario Cameron Moll. También hay un generoso programa de afiliados, cuyas pantallas comparten la interfaz de usuario bien pensada del resto del sitio. Eche un vistazo a continuación a la pantalla de afiliados aprobados:
Pensé que esta era una forma inteligente de manejar la entrega de gráficos y fragmentos de código a usuarios que pueden no ser nerds de HTML, pero que probablemente sepan lo suficiente como para copiar y pegar. Esta es la pantalla para la que haré una demostración, usando jQuery para la funcionalidad.
Ver ejemplo de descarga de demostración
Al crear el programa de afiliados para Are My Sites Up, quería ofrecer esencialmente lo mismo: copiar y pegar código y una selección de gráficos alojados. Tomé mucho prestado del sistema de Trabajos Auténticos. Entonces, para este ejemplo, combinaré la funcionalidad que escribí para el sistema AMSU con un estilo similar a la página de trabajos auténticos.
Esquemas
Funcionalidad:
- Tres elementos principales: Selector de tamaño, Caja de código, Área de ejemplo
- El valor predeterminado es un gráfico de 125 × 125, con código y ejemplo para que coincida
- Cuando se elige una nueva selección de la Selector de tamaño, el Caja de código y Área de ejemplo actualice dinámicamente para mostrar el nuevo código y el nuevo ejemplo.
El marcado HTML
Deberíamos detenernos y pensar un poco sobre lo que realmente “cambia” cuando se elige una nueva selección del menú desplegable. El código cambia, pero lo único que cambia es el nombre del archivo del gráfico elegido. Luego, el área de “ejemplo” es literalmente exactamente igual que el código, solo que es un código real que necesitamos representar, no mostrarlo en un área de texto. Entonces, la única información que necesitamos para actualizar dinámicamente ambas áreas es el nombre del archivo. Entonces, seamos inteligentes e incluyamos esta valiosa información en el marcado asociado con cada elemento
<fieldset>
<legend>Choose</legend>
<form action="#" class="code-selector">
<div>
<label for="type-size">Graphic Size: </label>
<select name="type-size" id="type-size">
<option selected="selected" rel="AMSU_Ad_125x125v2.png">125 x 125</option>
<option rel="AMSU_Ad_300x250v2.png">300 x 250</option>
<option rel="AMSU_Ad_465v2.png">465 x 55</option>
<option rel="AMSU_Ad_768x90v2.png">768 x 90</option>
<option rel="AMSU_Ad_120x240.png">120 x 240</option>
<option rel="AMSU_Ad_318x54.png">318 x 54</option>
<option rel="AMSU_Ad_50x50.png">50 x 50</option>
</select>
</div>
<div>
<label for="code-example">Code: </label>
<textarea rows="10" cols="25" id="code-box"><a href="http://aremysitesup.com/aff/xxxxx"><img src="https://css-tricks.com/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a></textarea>
<p class="note">Just copy and paste the above text into your website. Your affiliate code has already been included!</p>
</div>
</form>
<label>Example: </label>
<div class="example-area" id="graphic-example-area">
<a href="http://aremysitesup.com/aff/xxxxx"><img src="https://css-tricks.com/amsu/AMSU_Ad_125x125v2.png" alt="Are My Sites Up?" /></a>
</div>
<p class="note">Example graphic may be scaled down above, but won't be placed on your own page.</p>
</fieldset>El CSS
No hay nada muy importante/interesante en el CSS, y lo incluyo aquí más o menos por el nombre de este sitio =). Tal vez algunas cosas a tener en cuenta… Todo el diseño interno se logra más o menos haciendo que esas etiquetas se bloqueen niveladas y flotándolas hacia la izquierda con un ancho establecido. El marco exterior está hecho con la combinación clásica de campo/leyenda, que es bastante agradable y semánticamente apropiada, ya que técnicamente es una forma.
* { margin: 0; padding: 0; }
body { background: #eee; font: 12px Georgia, Serif; color: #2d2d2d; }
#page-wrap { width: 600px; margin: 20px auto; }
a img { border: 0; }
h3 { font-size: 24px; font-weight: normal; margin: 0 0 25px 0; }
fieldset { border: 1px solid #666; padding: 15px; }
legend { border: 1px solid #666; text-transform: uppercase; padding: 2px 6px; }
.code-selector div { clear: both; margin: 0 0 25px 0; }
label { font-size: 14px; display: block; width: 120px; float: left; text-align: right; padding: 2px 6px; }
.code-selector select { border: 1px solid #666; padding: 2px 2px 2px 6px; }
.code-selector option { padding: 0 12px; }
.code-selector textarea { border: 1px solid #7d7858; padding: 10px; width: 375px; height: 80px; }
.note { font-size: 11px; width: 300px; margin: 0 0 0 130px; color: #666; }
.example-area { margin-left: 130px; width: 375px; text-align: center; border: 1px solid #7d7858; padding: 10px; }
.example-area img { max-width: 100%; }Esa última línea allí abajo asegura que los gráficos más anchos que el área de ejemplo se reduzcan para caber dentro del Área de ejemplo. Si esto es una misión crítica, tenga en cuenta que el ancho máximo no funciona en navegadores más antiguos y es posible que deba idear una técnica alternativa.
El JavaScript de jQuery
Voy a mostrar el código a continuación en contexto completo, desde incluir la biblioteca jQuery en la página hasta el código en sí. Hago esto porque creo que a veces las personas se confunden al ver fragmentos de código mostrados y no entienden a dónde van esos fragmentos o cómo usarlos. En un entorno “real”, por supuesto, sería más inteligente mover el código real a un archivo de referencia externo en lugar de tenerlo en su HTML como este.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>
<script type="text/javascript">
$(function() {
$("#type-size").change(function() {
var graphicFileName = $("#type-size option:selected").attr("rel");
var newCode="<a href="http://aremysitesup.com/aff/xxxxx"><img src="https://css-tricks.com/amsu/" + graphicFileName + '" alt="Are My Sites Up?" /></a>';
$("#code-box").text(newCode);
$("#graphic-example-area").html(newCode);
});
});
</script>La palabra más importante de arriba es cambio, que es una función nativa de jQuery que se activará cuando se realice una nueva selección en nuestro cuadro desplegable. Cuando esto sucede, podemos afirmar qué opción se seleccionó utilizando el selector :selected en jQuery. Hacemos esto en la primera línea de la función de cambio y establecemos una variable que extrae el atributo rel de los elementos que establecemos inteligentemente en el nuevo nombre de archivo del gráfico.
Lo siguiente que hacemos es crear una nueva cadena, que es literalmente el nuevo código HTML. Esta cuerda cumplirá una doble función. Lo reemplazaremos como texto dentro del área de texto, y lo reemplazaremos como html en el área de ejemplo. Hermoso, tenemos un nuevo código que se puede copiar y pegar, y garantizamos que funcionará porque se usa exactamente el mismo código para mostrar el gráfico a continuación.
Accesibilidad
Tal como está, esto será solo funciona si JavaScript está habilitado. Un usuario que no sea JS vería el código y el ejemplo de 125 × 125, pero no sucedería nada cuando selecciona un nuevo elemento. Así que creo que les dejaré esto a ustedes para que participen con la mejor solución de accesibilidad.
Creo que esto es lo que yo haría:
- Ponga un botón de enviar en el formulario (ocultar con JS)
- Haga que el formulario se envíe a sí mismo (a través de la URL de acción) como POST
- Al cargar la página, verifique las variables POST, en las que podría ver qué opción se seleccionó.
- Dependiendo de la opción seleccionada, muestre el código/ejemplo apropiado.
Ver ejemplo de descarga de demostración