Download - Mdst3703 2013-09-05-studio2
![Page 1: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/1.jpg)
Studio 2: HTML
Prof. AlvaradoMDST 3703
5 September 2013
![Page 2: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/2.jpg)
Business
• Blogging – after class, and before the weekend, write a reflective post about the week– Does everyone know what a post is?
• Don’t let this sit . . . Do it before you begin next week’s readings
![Page 3: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/3.jpg)
Marshall McLuhan
![Page 4: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/4.jpg)
![Page 5: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/5.jpg)
McLuhan, The Medium is the Massage
![Page 6: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/6.jpg)
McLuhan, The Medium is the Massage
![Page 7: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/7.jpg)
McLuhan, The Medium is the Massage
![Page 8: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/8.jpg)
Review
![Page 9: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/9.jpg)
Plato
• Plato’s cave is an allegory of knowledge– Describes on the role of media and imitation in the
formation of knowledge• Plato posits a hierarchy of imitation and media forms– The Forms “First order things” Artistic
representations of things• Plato devalues art and poetry for being at the
bottom of this hierarchy– He values geometry and philosophy as having access to
the Forms
![Page 10: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/10.jpg)
Plato
• As an allegory of media, the following identities seem to hold– Shadows = art and poetry– Puppeteers = artists and poets– Puppets = ? (part of the shadows’
apparatus)• In contemporary terms, the shadows can be
identified with mass media– TV, radio, film, social media, etc.
![Page 11: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/11.jpg)
The allegory of the cave lives on in Marxist critiques of society. Reality is production, and the shadows are ideology and religion.
But the philosopher Karl Popper blames totalitarianism on Plato’s cave.
1967
![Page 12: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/12.jpg)
Aristotle
• In the Poetics, Aristotle takes a less dim view of art and poetry– We learn through imitation; imitation is
fundamental to being human– Different art forms convey different kinds of
meaning• Tragedy (a form of drama) represents a
particular kind of human action
![Page 13: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/13.jpg)
Note the preservation of the abstract over the visual
Aristotle’s reformulates Plato’s distinction
![Page 14: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/14.jpg)
Where do digital media developers fit into the allegory of the cave?
What kinds of imitation do we produce?
![Page 15: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/15.jpg)
Shadows = art and poetry = INTERFACEPuppeteers = artists and poets = CODERPuppets =
= CODE
![Page 16: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/16.jpg)
Studio
Break up into groups
![Page 17: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/17.jpg)
Exercise 1: Enhance JEdit
• To get your File System Browser on the side of your editor:– Utilities > File System Browser > Dock at Left
• To add plugins:– Plugins > Plugin Manager > Install– Choose SideKick and XML– May have to pick a different serve by clicking on
“Download Options…” at the bottom • To turn word wrapping on or off:– Utilities > Buffer Options > Word Wrap
![Page 18: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/18.jpg)
Exercise 2: Create a directory for today’s work
• You can create directories in JEdit by clicking on a folder in the top file browser window and selecting “New Folder” from the context menu
• In your home directory, create the following directories under “public_html”– MDST3703– MDST303/09-05
• In the directory for today, create a page– poetics.html
![Page 19: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/19.jpg)
Exercise 3: Create an empty HTML Page
<html><head>
<title>The Poetics</title></head><body>
</body></html>
![Page 20: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/20.jpg)
ElementsTags
Attributes
![Page 21: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/21.jpg)
XML
• Stands for “eXtensible Markup Language”– The language in which XHMTL is written
• Basic rules– Elements are signified by tags: start tags, end tags,
and singleton tags– Tags are signified by angle brackets– Attributes are signified by key/value pairs in the
start tag<elementname key=“value”> … </elementname>
![Page 22: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/22.jpg)
Basic HTML Elements
HTML HEAD
TITLEBODY
H1, H2, H3 …PIMGUL/OL
LITABLE
TRTD
See http://www.w3schools.com/html
NOTE: By convention, I use capitals to name elements, even though tag names are always lower case
![Page 23: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/23.jpg)
Exercise 4: Create a chapter of the Poetics
• Go to the resource listed on today’s blog page• View the source of the page and cut the text
corresponding to your chapter– Each person grab the chapter associated with your
number (which will be given to you)• Paste the text into the file you just created
(poetics.html)
![Page 24: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/24.jpg)
Exercise 5: Add some style
• Create a STYLE element inside the HEAD element, after the TITLE element
• Add the attribute type=“text/css”• Inside of the element, put the following:p {
font-family: Serif; font-size: 14pt; width: 6in;
}
![Page 25: Mdst3703 2013-09-05-studio2](https://reader035.vdocuments.mx/reader035/viewer/2022070302/547d1d0ab4af9f9b158b53af/html5/thumbnails/25.jpg)
CSS
• Cascading Style Sheets• Allows you to control fonts, colors, sizes,
layout, etc. • Format:
selector {key: value;key: value;
}