Welcome to TiddlyWiki created by Jeremy Ruston; Copyright © 2004-2007 Jeremy Ruston, Copyright © 2007-2011 UnaMesa Association
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}
h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}
.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}
.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}
.tabSelected {color:[[ColorPalette::PrimaryDark]];
background:[[ColorPalette::TertiaryPale]];
border-left:1px solid [[ColorPalette::TertiaryLight]];
border-top:1px solid [[ColorPalette::TertiaryLight]];
border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}
#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}
.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}
.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}
#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}
.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}
.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}
.tiddler .defaultCommand {font-weight:bold;}
.shadow .title {color:[[ColorPalette::TertiaryDark]];}
.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}
.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}
.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}
.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}
.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}
.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}
.imageLink, #displayArea .imageLink {background:transparent;}
.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}
.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}
.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}
.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}
.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}
.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}
#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:alpha(opacity=60);}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}
body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}
hr {height:1px;}
a {text-decoration:none;}
dt {font-weight:bold;}
ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}
.txtOptionInput {width:11em;}
#contentWrapper .chkOptionInput {border:0;}
.externalLink {text-decoration:underline;}
.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}
.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}
/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}
#mainMenu .tiddlyLinkExisting,
#mainMenu .tiddlyLinkNonExisting,
#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}
.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0; top:0;}
.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}
#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}
#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}
.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}
#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}
.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}
.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}
.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}
#contentWrapper {display:block;}
#splashScreen {display:none;}
#displayArea {margin:1em 17em 0 14em;}
.toolbar {text-align:right; font-size:.9em;}
.tiddler {padding:1em 1em 0;}
.missing .viewer,.missing .title {font-style:italic;}
.title {font-size:1.6em; font-weight:bold;}
.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}
.tiddler .button {padding:0.2em 0.4em;}
.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}
.footer {font-size:.9em;}
.footer li {display:inline;}
.annotation {padding:0.5em; margin:0.5em;}
* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}
.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0 3px 0 3px;}
.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}
.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0; padding-bottom:0;}
.fieldsetFix {border:0; padding:0; margin:1px 0px;}
.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}
* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}
.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->
To get started with this blank [[TiddlyWiki]], you'll need to modify the following tiddlers:
* [[SiteTitle]] & [[SiteSubtitle]]: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* [[MainMenu]]: The menu (usually on the left)
* [[DefaultTiddlers]]: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These [[InterfaceOptions]] for customising [[TiddlyWiki]] are saved in your browser
Your username for signing your edits. Write it as a [[WikiWord]] (eg [[JoeBloggs]])
<<option txtUserName>>
<<option chkSaveBackups>> [[SaveBackups]]
<<option chkAutoSave>> [[AutoSave]]
<<option chkRegExpSearch>> [[RegExpSearch]]
<<option chkCaseSensitiveSearch>> [[CaseSensitiveSearch]]
<<option chkAnimate>> [[EnableAnimations]]
----
Also see [[AdvancedOptions]]
The 26 digital photographs of letter forms were taken at the Penn State Abington campus. I chose plants as the source because they can, based on their appearance, communicate how they are feeling. While completing the project, I applied the exercises that taught me how to upload images into Flickr, create a slideshow in WordPress and schedule its post in the blog. I think that batching the images to be a useful tool for gathering the ones for uploading. And I like having the ability to link the blog page to my e-portfolio personal website at Penn State using Tiddlywiki.
[[Please visit my blog. | http://norachristians.wordpress.com/2012/01/20/59/]]
Through individual and collaborative activity, I completed my work in designing the homepage and two of the three concrete poetry web pages. The Hello World, Marinetti and CSS Layout exercises were very helpful in completing this project for they gave instructions on how to create html code, links to other web pages, file and folder structure, styling with transforms, and the index page layout. This information enabled the randomly chosen words to be designed according to my sketches. The homepage is a two column liquid layout. It has a header, footer, left navigational area and a container. I like having the knowledge gained in creating the thumbnail images, which requires the use of a float, to link to the artists concrete poems. Before it was sent to be placed in a website, I learned that only one CSS file is needed for this project because the site is not very complicated.
I chose to design the admonition-propitious concrete poem using a book and gavel to illustrate the intention of parents in raising their children. They admonish children to act according to written laws so that they will be individuals who are propitious, or well spoken of. The phrase "choose the path that leads uphill" has a link to a poem by Dick Barnes, titled "Example and Admonition". The word "propitious" also has a link to the propitious-surcharge concrete poem. When a style transform was used to create a line in the book, the code was found to be very long. So, instead, the book was created in Illustrator.
A synonym for the word surcharge is the word burden. I chose to combine the words admonition and surcharge into this design because, together, they coincide with a poem by Rudyard Kipling's "The White Man's Burden". And it is the only poem that I could find with the word “burden” in the title. A style transform was applied to curve the word surcharge as well as links on the letters that are consonants to the propitious-surcharge concrete poem. The vowels in surcharge are linked to Kipling's poem. And to link this web page to the admonition-propitious concrete poem, a link was created on the word admonition. I had difficulty changing the appearance of a link towards an element, but learned to place the different style link in the head of the document and apply the class to the specific element in the div.
[[Please view and interact with the concrete poetry project at Professor William Cromar's website. | http://www.personal.psu.edu/wrc11/concrete_poetry_project_2012/index.html]]
[[Please view and interact with the concrete poetry project at Nora Christians' website. | http://www.norachristians.com/art315/concrete_poetry/concrete_poetry_project_2012/index.html]]
[[Please visit my blog | http://norachristians.wordpress.com/2012/03/30/concrete-poetry/]]
Having completed the chapter 15 assignment, I feel confident that I can create a web page. I believe that Dreamweaver is a good tool to use to examine the code, open and edit jpeg images, format type and create hyperlinks.
[[Please view my first web page | http://www.norachristians.com/art315/chapter_15/helloworld.html]]
By completing chapter 16, I understand how to define a site in Dreamweaver. Although I had difficulty in learning how to upload the site to a remote server, I now understand how to transfer the site and have an understanding of how to develop folder and file structures within it. For instance, I know now that the index file is what the browser looks for, needs to be outside of a subdirectory and needs to be referenced as up one level when creating links from other pages.
[[Please view my first little web site with a subdirectory | http://www.norachristians.com/art315/chapter_16/]]
Having completed the exercises in chapter 3, I have the ability to create a 2-column page with span tags. The span tags allow me to embed videos. And the div tags allow the videos to stay in place if the window is resized. I enjoyed this exercise because the combination of linking the videos from one page to another allows for a flow of content to be applied to different pages with related information. I chose to use omega 3 fish oil as the subject of the first video and the next videos to show the benefits of the product.
I found that uploading the chapter_3 site to the remote server to be difficult. The original index file was overwritten with the Chapter_3 index file. And this caused me to have to upload the index file that I saved on my flashdrive to replace the one that was lost.
[[Please view my omega-3 video mash | http://www.norachristians.com/art315/chapter_3/index.html]]
Changing text and creating rollovers with the mouse were learned to add action with scripting languages. These two chapter exercises, chapter 5 and 6, instilled in me the importance of file management and site structure and that any changes to a file automatically effects the site. My having studied about servers and creating and uploading sites to remote folders has increased my understanding of creating a webpage with adding scripting language. My blog further describes how creating a parody using Dreamweaver increased my understanding of adding javascript.
[[Please interact with my parody of The Daily Beast's Business page | http://www.norachristians.com/art315/chapter_05-06/index.html]]
[[Please visit my blog about this parody | http://norachristians.wordpress.com/category/2-3-parody/]]
This is a page from the illustrated poem Dunes by F.T. Marinetti, an artist of the Italian Futuristic school. It was set using CSS in 2012. The goal of this exercise was to create a CSS forgery. Before I first created the borders and parentheses, I learned that tracing the image using html code is very beneficial in increaseing the accuracy of the copy. During this first step, I gained a greater understanding of the structure of html code, the importance of keeping order while using divs, id's, spans, and classes and the reasoning for the use of cascading styling sheets. To adjust the size of the parentheses, a transform scale was included in a span of the html code. I also found that the use of the properties of the selector type alleviated the difficulty that I experienced in adusting the space between the words and lines. After completing the exercise, I noticed that the line above the bottom parentheses is not located accurately and that it will need to be adjusted.
I enjoy knowing how to create a layout of an illustrated poem. Having completed this exercise, I am becoming more experienced with applying floats and know the terms to use to create a layout such as container, content and clear. And I learned how to apply the information from the html and CSS files to the html and CSS layout files. I had difficulty in aligning the page with the contents. But this problem was solved after adjusting the width and height values of the page in CSS. The drawing now fits well on the page. I like having the knowledge that I need to create a link between a thumbnail image and its file. By using the point to file tool, I will be able to have the public view a larger version of the original illustrated poem in a browser window. And I like knowing how to think about choosing coinciding colors to make the webpage more appealing for the public. Regarding the footer, I will need to change the name of authorship to my own and include more information about the exercise that is in the wiki.
[[Please view my CSS Layout | http://www.norachristians.com/art315/css_layout/index.html]]
The Chapter 17 Stylesheets exercise is completed to understand how to modify the default style of the html code. It also teaches how to create a style in the style panel in the html file. Doing so causes the code to appear in the head of the html file. The chapter also teaches how to create an external style sheet. The purpose of doing so allows for styles to be applied to different parts of the webpage. I learned how to link the css file to the html file and that the style is stored in the css file rather than in the head tag of the html file. I now understand that the css file can be linked to more than one html file rather than creating one css file for each html file. I also learned how to use a span tag. I know now that it is to apply a style to just one part of the webpage. I need to remember to create a paragraph tag for the text that follows the text inside of the span tag.
[[please view my webpage that uses style sheets, separating form from content | http://www.norachristians.com/art315/marinetti/chapter_17/index.html]]
This is a page from the illustrated poem Dunes by F.T. Marinetti, an artist of the Italian Futuristic school. It was set using CSS in 2012. While first creating the borders and parentheses, I found that tracing the image using html code is very beneficial in determining the accuracy. During this first step, I gained a greater understanding of the structure of html code such as the importance of keeping order using divs, id's, spans, and classes and the reasoning for use of cascading styling sheets. To adjust the size of the parentheses, a transform scale was included in a span of the html code. I also found that the use of the properties of the selector type alleviated the difficulty that I experienced in adusting the space between the words and lines.
[[Please view my results of the Marinetti exercise | http://www.norachristians.com/art315/marinetti/index.html]]
I am glad that I completed this project because I learned how to animate the parts of an image and create interactivity through use of buttons. The sewing machine was more of a challenge to animate than I had at first realized. The images of the knob, wheel, horizontal and vertical moving parts as well as the screw needed to be separated from the base. This was completed in Photoshop and imported into Flash. Each moving part is part of a movie clip that has its own timeline and is brought onto the stage on separate layers. I understand the use of keyframes and tweens that are needed to animate the images in a timeline. But I had difficulty in realizing the necessity in making a name for each movie clip instance and referencing the movie clip in with the actionscript.
The interactivity of the buttons were also a challenge to create. Each button has its own timeline, movie clip and instance name. But the difficulty was in the creation of the actionscript for them. I learned that without the actionscript, the timelines cause the animation to run continuously. When it came time to writing the actionscript, I understood the need for naming the instances in the movie clips. For the start button to function as the button that causes the rig to move up and down, an event listener such as a mouse click is needed and the function is now needed to be included in the actionscript and applied towards the instance name and the mouse event name.
After having learned how to start and stop the rig_mc and the animation_mc, I needed to find out how to hide the blurred wheel. I didn't understand at first how to apply the alpha property until its purpose was explained and how to include it in the code.
[[Please interact with my art machine | http://www.norachristians.com/art315/project_3.swf]]
This flipbook is about what occurs during the seasons of the year. The tree remains constant.
This exercise is the first in the area of animation that I have completed. After reviewing the work, I realized that I need to work on the timing of some of the frames such as the introduction of the birds and increasing the number of frames that they are included in.
[[Please view my first little flipbook animation | http://www.benettonplay.com/toys/flipbookdeluxe/player.php?id=382527]]
This is the first animation that I have completed with the Flash program. In the last two exercises, I found that the result required that a copy of the circle be placed on top of the left and right circles. And I learned that by having more keyframes in the timeline, the circle will move faster.
[[Please view my bouncing ball animation | http://www.norachristians.com/art315/chapter_18_ex4_bouncing_ball.swf]]
The purpose for my completing chapter 19 is to learn the pacing aspect of animations. My experience in creating this fadeout animation includes the use of movieclips and the library to store symbols. I know now that a symbol can have its own timeline and that this enables me to apply a tween shape and trade it with the circle on the stage of the document timeline that has a classic tween. This will enable me to apply different movements to the same element. On the document timeline, the circle gets bigger, moves off of the stage and fades due to the classic tween and number of the keyframes. And on the movie clip timeline, the symbol, shape tween, and number of keyframes allow for the circle to change shape from being a circle to a square and back to being a circle at a faster pace.
I had difficulty with exercise 5 when the instructions said to create the animation circle. When I tested the movie, the circles faded off of the stage at an angle. I found out that I needed to position the animation circle in the same location as the circle on the document timeline. After completing this exercise, I feel that I have the ability to apply varied paces towards different shaped elements on a document timeline.
[[Please view fadeout animation | http://www.norachristians.com/art315/chapter_19.swf]]
By following the exercises in Chapter 20, I am able to provide interactivity for the viewer of animations. In the first exercise, I made the circles, then created two layers in the document to make them function as buttons to click on and cause the movement of the animation to start and stop. For this to occur, I need to understand how actionscript code writing controls the buttons. I need to remember that capitalization and structure are very important. If they are not correct, the code will not work. And to have notes in the action panel that describe the purpose of a code will make the panel organized and make my analyzing of it easier.
[[Please view my interactive animation | http://www.norachristians.com/art315/chapter_20.swf]]
I chose a watercolor painting as the object for the video project. The video contains images of brush strokes and the texture of the paper to show the style of the artist in detail. To obtain the images, I wanted to use a video camera. But my use of a flip camera resulted in blurry images and shaky pans even with the camera attached to a tripod. A digital camera was suggested to be used instead to obtain the same video effects.
In creating the video, I searched for music that complemented the subject. The music is softer and slower in the beginning. My thoughts during this time were that lily pads are less active than that of flowers that bloom. So, I placed clips of mostly lily pads in this area of the timeline. As the music became stronger and quicker, I brought in clips of the lilies onto the timeline.
I like having completed this project. I learned how to scale the images across a timeline. Doing so was difficult at first for I found that scaling the images and timing the footage so that it coincides with the timing of the music to be tricky.
[[Please view my first audio video | http://vimeo.com/41441180]]
[[Please visit my blog | http://norachristians.wordpress.com/]]
[[Please view my first audio video in Quicktime | http://www.norachristians.com/art315/waterlilies.mp4]]
Hello. This is my e-portfolio.
[[please visit my blog.| http://norachristians.wordpress.com/]]
[[Intro]]
''HTML Exercises''
[[2.1 Hello World]]
[[2.2 Video Mash]]
[[2.3 Parody]]
[[2.4 CSS: Marinetti]]
[[2.4 CSS: Layout]]
''Flash Exercises''
[[3.1 Bouncing Ball]]
[[3.2 Fadeout]]
[[3.3 Interaction]]
''Projects''
[[1 Alphabet Blog]]
[[2 Concrete Poetry]]
[[3 Art Machine]]
[[4 Make it Interesting]]
[[My blog | http://norachristians.wordpress.com/]]
My portfolio for the new media course.