Animated Annotations Framework: “The Transformation of Silence”

[cs_content][cs_section parallax=”false” style=”margin: 0px;padding: 45px 0px;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h1″ looks_like=”h1″ accent=”false” class=”cs-ta-center”]Animated Annotations Framework[/x_custom_headline][x_feature_box title=”What It Is” title_color=”” text_color=”” graphic=”icon” graphic_size=”60px” graphic_shape=”hexagon” graphic_color=”#ffffff” graphic_bg_color=”#383332″ align_h=”center” align_v=”top” side_graphic_spacing=”20px” max_width=”none” graphic_icon=”clone”]Unparalleled Information access and exchange has reshaped our expectations and processes in regards to how we make meaning of the world. In particular, the interconnected and open nature of the web has greatly increased the dimensions, sources, comparisons, remixes, etc., that we process as information in our (re)making meaning of the world. Our tools and frameworks for these kind of multi-modal, contextual, productions of knowledge and meaning making, school based reading comprehension and critical engagement skills being the most primary site of these occurrences, however, are still largely one dimensional and simply text based. The Animated Annotations project, using Audre Lordes seminal piece “The Transformation of Silence into Language and Action,”attempts to remedy this by building in animated annotations which allow the designer of an interactive text module, to put the source material into conversation with other articles, authors, videos, sounds, interaction, and the rest of the contextual world that makes up the constellation of meaning in the piece. [/x_feature_box][x_video_embed no_container=”true” type=”16:9″]

animatedAnnotations.fear from Daniel Silber-Baker on Vimeo.

[/x_video_embed][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” style=”margin: 0px;padding: 45px 0px;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_feature_box title=”What it Does” title_color=”” text_color=”” graphic=”icon” graphic_size=”60px” graphic_shape=”hexagon” graphic_color=”#ffffff” graphic_bg_color=”#383332″ align_h=”center” align_v=”top” side_graphic_spacing=”20px” max_width=”none” graphic_icon=”clone”] The Animated Annotations framework lets designers add interactive and contextual material directly into passages of the text. Users can access each contextual module by clicking on the analogous passage, which will “flip” around to reveal its annotation module on the back. Alternately, as shown in this demo, ‘creators’ can choose an accordion animation, where the contextual module will reveal and hide itself in an accordion style instead of the default flip. [/x_feature_box][x_video_embed no_container=”true” type=”16:9″]

animatedAnnotations.accordian from Daniel Silber-Baker on Vimeo.

[/x_video_embed][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” style=”margin: 0px;padding: 0px 0px 5px;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_custom_headline level=”h2″ looks_like=”h3″ accent=”false”]Animated Annotation Types Include:[/x_custom_headline][x_feature_list][x_feature_box title=”Contextual primary source video of the author” title_color=”” text_color=”” graphic=”icon” graphic_size=”60px” graphic_shape=”hexagon” graphic_color=”#ffffff” graphic_bg_color=”#383332″ align_h=”left” align_v=”top” side_graphic_spacing=”20px” max_width=”none” child=”true” connector_width=”1px” connector_style=”dashed” connector_color=”#272727″ graphic_icon=”video-camera”]This is an Feature List Item that is part of an Feature List. Notice the connector between the three graphics to show that they are related.[/x_feature_box][x_feature_box title=”SVG animations of overall themes” title_color=”” text_color=”” graphic=”icon” graphic_size=”60px” graphic_shape=”hexagon” graphic_color=”#ffffff” graphic_bg_color=”#383332″ align_h=”left” align_v=”top” side_graphic_spacing=”20px” max_width=”none” child=”true” connector_width=”1px” connector_style=”dashed” connector_color=”#272727″ graphic_icon=”language”]This is an Feature List Item that is part of an Feature List. Notice the connector between the three graphics to show that they are related.[/x_feature_box][x_feature_box title=”User input text boxes for answering questions, taking notes, and many other modules aimed at participatory critical engagement” title_color=”” text_color=”” graphic=”icon” graphic_size=”60px” graphic_shape=”hexagon” graphic_color=”#ffffff” graphic_bg_color=”#383332″ align_h=”left” align_v=”top” side_graphic_spacing=”20px” max_width=”none” child=”true” connector_width=”1px” connector_style=”dashed” connector_color=”#272727″ graphic_icon=”edit”]This is an Feature List Item that is part of an Feature List. Notice the connector between the three graphics to show that they are related.[/x_feature_box][x_feature_box title=”A fully ‘paint’ style art space” title_color=”” text_color=”” graphic=”icon” graphic_size=”60px” graphic_shape=”hexagon” graphic_color=”#ffffff” graphic_bg_color=”#383332″ align_h=”left” align_v=”top” side_graphic_spacing=”20px” max_width=”none” child=”true” connector_width=”1px” connector_style=”dashed” connector_color=”#272727″ graphic_icon=”paint-brush”][x_feature_box title=”Interactive activities connected to the source material” title_color=”” text_color=”” graphic=”icon” graphic_size=”60px” graphic_shape=”hexagon” graphic_color=”#ffffff” graphic_bg_color=”#383332″ align_h=”left” align_v=”top” side_graphic_spacing=”20px” max_width=”none” child=”true” connector_width=”1px” connector_style=”dashed” connector_color=”#272727″ graphic_icon=”slideshare”][/x_feature_list][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” style=”margin: 0px;padding: 45px 0px;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_video_embed no_container=”true” type=”16:9″]

animatedAnnotations.svgDemo from Daniel Silber-Baker on Vimeo.

[/x_video_embed][/cs_column][/cs_row][/cs_section][cs_section bg_image=”http://www.danielsilber-baker.com/wp-content/uploads/2016/03/alorde3.png” parallax=”false” style=”margin: 0px;padding: 45px 0px;”][cs_row inner_container=”true” marginless_columns=”false” style=”margin: 0px auto;padding: 0px;”][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”1/1″ style=”padding: 0px;”][x_button type=”real” shape=”rounded” size=”large” block=”true” circle=”false” icon_only=”false” href=”http://danielsilber-baker.com/AnimatedAnnotations/” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””]Try Animated Annotations For Yourself[/x_button][/cs_column][/cs_row][/cs_section][/cs_content]