MelSumner

Document Active Element (DAE) is a JavaScript bookmarklet intended to help you more easily identify where the activeElement is on your screen.

To use:

1. Add a new bookmark
2. in the "Name" field, type DAE
3. in the URL field, add the following code:

javascript:(function(){ document.activeElement.style.border = "1px solid red"; })();

morgyface

<?php 
// Custom contact form 7 retreat select
add_action( 'wpcf7_init', 'custom_retreat_select' );

function custom_retreat_select() {
    wpcf7_add_form_tag( 'retreat_select', 'custom_retreat_handler', array( 'name-attr' => true ) );
}

function custom_retreat_handler( $tag ) {
    $atts = array();

knarf18

Liste bonnes pratiques sous-titrage web

Bien que certains font l'effort de sous-titrer les vidéos qu'il mettent en ligne sur les différentes plates-formes de type youtube, viméo, je m’aperçois que souvent, le sous-titrage comporte des erreurs qui font que celui-ci devient presque inutile car difficilement lu par les principaux intéressés.

J'ai lu de nombreux articles, tutoriels mais souvent il existe des différences ou ce qui se trouve sur l'un n’apparaît pas sur l'autre.

L'idée est donc d'essayer de mettre en place une liste de bonnes pratiques pour essayer d'améliorer le sous-titrage sourds et malentendants (S-M, S-M-E) sur le web et aider les personnes de bonne volonté à le faire le mieux possible.

Pour l'instant cette liste est une base par rapport à mes multiples lectures à ce sujet qui parfois se contredisent donc elle est là pour être corrigée, améliorée, et que l'on y ajoute tout ce qui peut aider à l'amélioration des sous-titrages sur le web.

masseuro

/* Exemple avec un sprite d'icônes */
$icon: sprite-map("bg/icon/*.png",
	 $layout: smart
);
$icon2x: sprite-map("bg/icon2x/*.png",
	 $layout: smart
);

@mixin icon-sprite($sprite, $from: $base-font-size, $offset-x: 0, $offset-y: 0){
	@include _use-sprite($icon, $icon2x, $sprite, $from, $offset-x, $offset-y);

charleslouis

<?php

/**
 * [list_searcheable_acf list all the custom fields we want to include in our search query]
 * @return [array] [list of custom fields]
 */
function list_searcheable_acf(){
  $list_searcheable_acf = array("title", "sub_title", "excerpt_short", "excerpt_long", "xyz", "myACF");
  return $list_searcheable_acf;
}

pistachiomatt

// Stick all your icons in a subfolder in your images folder. Put retina versions in a subfolder of that called "@2x".
$sprites: sprite-map("NAME_OF_SUBFOLDER/*.png");
$sprites2x: sprite-map("NAME_OF_SUBFOLDER/@2x/*.png");

// stolen from 37signals
@mixin retina-media() {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {

wpscholar

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_my_styles' );

/**
 * Example callback function that demonstrates how to properly enqueue conditional stylesheets in WordPress for IE.
 * IE10 and up does not support conditional comments in standards mode.
 *
 * @uses wp_style_add_data() WordPress function to add the conditional data.
 * @link https://developer.wordpress.org/reference/functions/wp_style_add_data/

m4dz

/* Compass HiDPI sprite helper
 *
 * Pre-requisites :
 * - the hidpi sprite images needs to be in a folder near the standard one, and
 * named **<name>_hidpi** (e.g. **images/icons** and **images/icons_hidpi**)
 *
 * @author : MAD <ecrire@madsgraphics.com>
 */

// ****************************************************************************/

pierreburel

This gist demonstrates how to use Compass magic sprites in combination with HiDPI.

See how it's done

Credits: Icons © Adam Whitcroft

Oh and you may check Compass HDPI

magikcypress

Accessibilité des vidéos sur le web: les sous-titres

La nature du web est son universalité. Il doit être accessible à toutes les personnes handicapées.

Tim Berners Lee, Directeur du W3C et créateur du Web.

Liste de liens concernant le sous-titrage vidéo

Règles pour l'accessibilité des contenus Web (WCAG) 2.0