Flip Nodes and Notes-#5

[cs_content][cs_section parallax=”false” style=”margin: 0px;padding: 5px 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=”30 days of Meaning∞Making” title_color=”” text_color=”” graphic=”icon” graphic_size=”90px” graphic_shape=”circle” graphic_color=”#ffffff” graphic_bg_color=”#733047″ align_h=”center” align_v=”top” side_graphic_spacing=”20px” max_width=”none” graphic_icon=”code”]30 experiments in 30 days! Using coding and poetry to investigate the intersections of emerging technologies and ancient pedagogies; aimed at creating the tools that are most effective in understanding and communicating our ideas.[/x_feature_box][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” style=”margin: 0px;padding: 5px 0px 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=”h4″ looks_like=”h4″ accent=”false” class=”cs-ta-center”]In which the nodes flip and become notes[/x_custom_headline][x_line style=”border-top-width: 1px;”][cs_text class=”cs-ta-center”]Todays experiment is building from yesterdays, in which I showed how we could write or paste text into a google sheets, and then using javascript, auto-magically populate a webpage with that information. You can watch a quick video of the process below.[/cs_text][x_raw_content]

thirtyThirtyFore from Daniel Silber-Baker on Vimeo.

[/x_raw_content][/cs_column][/cs_row][/cs_section][cs_section parallax=”false” style=”margin: 0px;padding: 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=”h2″ looks_like=”h3″ accent=”false”]Making it a Tool for (re)Creation[/x_custom_headline][x_line style=”border-top-width: 1px;”][/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/3″ style=”padding: 0px;”][cs_text]For today’s experiment I styled the data coming through google sheets, so that they are shaped more like the nodes I like to organize my information in.[/cs_text][/cs_column][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”2/3″ style=”padding: 0px;”][x_image type=”none” src=”http://www.danielsilber-baker.com/wp-content/uploads/2016/04/30for30_5.png” alt=”” link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””][/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/3″ style=”padding: 0px;”][cs_text]I also used what I learned from the very first experiment, to make the information nodes draggable so that the user can move, re-arrange, and re-organize the nodes.[/cs_text][/cs_column][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”2/3″ style=”padding: 0px;”][x_image type=”none” src=”http://www.danielsilber-baker.com/wp-content/uploads/2016/04/Screen-Shot-2016-06-28-at-1.14.03-PM-1.png” alt=”” link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””][/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/3″ style=”padding: 0px;”][cs_text]Finally (for today), I made it so that each node has a corresponding button that will toggle a text box where you can type notes, or dreams, or connections about that node. Then you can toggle the nodes/notes open and closed as you continue developing ideas.[/cs_text][/cs_column][cs_column fade=”false” fade_animation=”in” fade_animation_offset=”45px” fade_duration=”750″ type=”2/3″ style=”padding: 0px;”][x_image type=”none” src=”http://www.danielsilber-baker.com/wp-content/uploads/2016/04/Screen-Shot-2016-06-28-at-8.03.29-PM.png” alt=”” link=”false” href=”#” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””][/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_custom_headline level=”h4″ looks_like=”h4″ accent=”false” class=”cs-ta-center”]You can see a video of todays experiment and the new functionalities in the video below, or click on the button to try it yourself on the web![/x_custom_headline][x_line style=”border-top-width: 1px;”][x_button size=”global” block=”true” circle=”false” icon_only=”false” href=”http://danielsilber-baker.com/thirtyThirtyFore/” title=”” target=”” info=”none” info_place=”top” info_trigger=”hover” info_content=””]Try it yourself[/x_button][x_gap size=”50px”][x_raw_content]

30for30_5_notesNodes from Daniel Silber-Baker on Vimeo.

[/x_raw_content][/cs_column][/cs_row][/cs_section][/cs_content]