Week 01

welcome

Who am I
Who are you
Expectations for the semester
HTML Intro
Creative Statement

Media consumption: accessing, selecting, and engaging with various forms of media - news, social media, entertainment, and so on.

People consume media for information, education, or inspiration. Others consume media for entertainment, relaxation, or socialization.

Some people consume media actively, by analyzing, questioning, and evaluating the sources and messages (news). Others consume media passively, by accepting, and trusting, the sources and messages (films).

Name
Pronouns
Minor / Major
How you consume media?

Me:

Journalism

camilosalas.com
Zamilo (Instagram, et al)

Class Participation

By enrolling in this course and entering the classroom, each student makes the tacit commitment to participate in the class. Active class participation involves more than merely attending the online lectures and in-person labs. Students are expected to be actively involved in the class. They should take the initiative in discussion and projects, ask relevant questions, and contribute to the overall learning environment of the class.

It is your responsibility:

to prepare for class by having completed all assigned work
to actively participate in class discussion and activities
to take notes on discussions, presentations, and activities
to complete all course assignments, even if you are absent from a class meeting

In this lab we will learn:

HTML

Cropping and Resizing Images

Tonal Range

Depth of Field

Other Design Principles

Photomontage / Collage

Animated GIFs

Data Visualization

Illustrator

Photoshop

HTML 👩‍💻

What is HTML?

Head & Body
Titles & Paragraphs
Styles: Color, Font, Text, Alignments
+ Elements: Background, Links, Lines, Review.
Setup: Sublime Text

WikiHow: Write HTML Code 🔗 (from Part 2)

More on HTML

Example Index.html:

<!doctype html>

<html>

<head>

<title>Peanut Butter and Jelly Sandwich</title>

</head>

<body>

<h1 style="color:red; align:center;">How to Make a Peanut Butter and Jelly Sandwich </h1>

<br>

<h2>Ingredients:</h2>

<ul>

<li>Peanut Butter</li>

<li>Jelly</li>

<li>Bread</li>

</ul>

<br>

<p>Smear the peanut butter on the bread and put jelly on top. Then place a slice of bread on top. Cut it in half</p>

</body>

</html>

Based on the example index.html from the WikiHow tutorial (code above):

Add MEDP 150, your section number, and your name to the Document <title>, following this structure: "MEDP 150 Section 1 - Camilo Salas"
Replace the <h1> title with your name.
Replace the <h2> title with "Homeworks"
Replace Jelly, bread and butter with Homework #1, Homework #2 and Homework #3.
Replace the instructions inside <p> tags with a paragraph about yourself and what informs your work or research. Make sure to add which tools are you familiar with (now you can add Photoshop, Illustrator, and HTML to the list!)
Create a second page with Homework #1 (add title, <h1> title, photo, link back to index.html)

Example new index.html

<html>

<head>

<title>MEDP 150 Section 1 - Camilo Salas</title>

</head>

<body>

<h1 style="color:red; align:center;">Camilo Salas</h1>

<br>

<h2>Homeworks:</h2>

<ul>

<li><a href="homework1.html">Homework #1</a></li>

<li>Homework #2</li>

<li>Homework #3</li>

</ul>

<br>

<p>New York City-based Chilean multi-disciplinary Artist and Journalist. Since June 2023, I have been an MFA Student in the Integrated Media Arts program, at Hunter College. I currently run Panflute.nyc and teach at the Film & Media department of Hunter College. The tools I use the most are Photoshop, Premiere and lately, I've been researching Large Language Models and Object Recognition Software</p>

</body>
</html>

Example homework1.html

<html>

<head>

<title>MEDP 150 Section 1 - Camilo Salas</title>

</head>

<body>

<h1>Homework #1</h1>

<p>Homework #1</p>

<br>

</body>

</html>

Resources:

HTML Images (how-to): https://www.w3schools.com/html/html_images.asp

HTML Links (how-to): https://www.w3schools.com/html/html_links.asp

Read this website: https://www.wikihow.com/Write-HTML-Code (We will be using Sublime Text for editing HTML instead of Notepad.)
Read this website: http://www.htmldog.com/guides/htmlbeginner/ (Read the whole 8 sections, "Next page" is linked near the end of each page)
Watch this video: https://youtu.be/KuLYc6aT9ZU

Hunter’s Server: How to access your website remotely.

Video tutorial 🔗

Download and install Cyberduck
Download and install Sublime Text
Open the Cyberduck Application
Click the Open Connection button in the top left corner
In the first drop-down menu, select the option SFTP (SSH File TransferProtocol)
Next to server, type in fmundergrad.hunter.cuny.edu
The port number should be 22
Change the username to the login name you used to get on the computer in the lab, it should just be your last and first initial, ex: the professors is rmirandar
Enter your password that you used to log onto your computer in the lab
Check the box next to Add to Keychain
Click connect

You should now be remotely logged into your Hunter network account. From here, you can double-click on your “Sites” folder and continue to add .html files or image files to put more pages on your website.

Remember that you can store a maximum of 10 GB on your account. This is why it is important to bring a drive to every class.

To see how your website looks online, remember that your web address is http://fmundergrad.hunter.cuny.edu/~yourusername/medp150/index.html

To check how your html code looks locally, or offline:

Open your web browser
Go to the file menu on the top of the screen
Click on open file
Find the html file you want to check and click open

LAB WORK 🖼️

Creative Statement Exercise

On your index page write a personal creative statement and/or goals for the class.

A good Creative Statement supplements the visual information in a portfolio so that the reader/viewer can better understand the work.

Compose your statement with a sympathetic friend in mind, one who is genuinely interested in the work and wants to know the answers to questions that may come up when viewing it. To get started with the writing of a statement, begin by describing the type of creative work that you wish to do i.e. video - fictional narrative or social documentary, animation, video games, photography, interactive installation, illustration, data visualization… What do you want the reader to know about your work?

Some Do’s and Don’ts

● DO write a strong, compelling statement without art and media jargon.

● DON’T imitate the writing often used in art or film magazines. Avoid artspeak and overly flowery or pretentious language. If your statement is difficult to read, it will not be read.

● DO develop a strong first sentence. Explain clearly and precisely why you wish to be a media maker, what it means to you and what materials you may use. Or give us a story about something that moved you into making specific work. Draw the reader into your world.

● DON’T try to impress the reader with your extensive knowledge of art, film or media criticism or vocabulary.

● DO keep it as short as possible – 250 words, approximately 2 paragraphs. It is an introduction and a supplement to the visual information, not your life story.

● DO clearly express what you have or wish to accomplish.

● DO focus on topics that may not be apparent from viewing documentation of your work, such as, influences in your work: themes and issues. The techniques, materials used, or scale of the work can also be important information to include.

Your statement should stand on its own: so that the reader can imagine what your work looks like even if they haven’t seen it. Make the reader want to see your work.

Tips to help formulate a creative statement:

● Invite a friend to discuss your work and record the conversation. You can also take notes, but often the best phrases get lost in the heat of the moment. Make a note of what kind of questions come up during these sessions. Is there a pattern? If there is, it is definitely information needed in your statement.

● Have several friends who know your work, (especially those who are not artists or media makers) read your creative statement and respond. They may have good points to add or can catch phrases that don’t seem to make sense. Your non-artist friends will be best at finding the “art speak” which you may want to rewrite.

● Ask a strong writer to proofread your written materials to check for grammatical errors and those of syntax. They may also delete repetitive or extraneous phrases and may straightening out, twisted, run-on sentences.

Creative statements must be coherent and to the point to retain reader interest!

A creative statement is never finished for long. Like your resume, it will undergo revision frequently, as your work changes and as you find new ways of expressing what you are doing.

Uses:

● No longer than half a page.

● This statement contains the central idea of your work to catch the reader/listeners’ attention.

● Addresses the most pertinent information about the work, a particular series or media.

● Can be incorporated into the heading of a portfolio, grant application, etc.

● Used as reference for: promoting, describing, selling writing about your work by festivals, gallerists, curators, publicists, critics, journalists, etc.

● Can be the lead-in to a longer project description.

Examples Brief Creative Statement

Mark Ramos

Mark Ramos is a Brooklyn-based new media artist. Mark makes fragile post-colonial technology using web/software programming, physical computing (using computers to sense and react to the physical world), and digital sculpture/fabrication to create interactive work that facilitate encounters with our own uncertain digital futures. Mark is deeply committed to the ethos of open source: the free sharing of information and data + creative uses of technology.

Dina Kelberman

Early bio:

My work is about how everyone and everything is special, and so while specialness is not special, it is still pretty much the most exciting thing going. Much of my work comes out of my natural tendency to spend long hours collecting and organizing imagery from the internet, television, and other commonplace surroundings of my everyday life. I like to elevate the familiar and transform brief moments into infinite stretches of time.

I gravitate towards things that are simple, colorful, industrial, and mundane. I am interested in using materials that are easily accessible and familiar to the everyday person – anyone can and should make things that are perfectly natural to them and yet totally inexplicable to someone else. Humans are definitely a failure of an animal, but at least every single one of them is extremely weird. (Excerpt)

http://dinakelberman.com/ (click Who to read current bio)

Danielle Brathwaite Shirley

Artist living and working in Berlin. I create work that seeks to archive Black Trans Experience. I use technology to imagine our lives in environments that centre our bodies…. Those living, those that have passed and those that have been forgotten.

You think you came here to enjoy some art. You are mistaken. This is about you. How you feel is the medium I am working with. You may feel uncomfortable. You may feel represented. But you won’t feel forgotten.

https://www.daniellebrathwaiteshirley.com/

Video biography by computational artist Memo Akten

Homework 1: Getting Started with HTML

DUE: 9/6

Read: http://www.htmldog.com/guides/htmlbeginner/ (8 sections, "Next page" is linked near the end of each page)

View tutorial video: Introduction to HTML (approx. 9 minutes): https://youtu.be/KuLYc6aT9ZU

Sublime Text: Sublime Text is a shareware text and source code editor available for Windows, macOS, and Linux. It natively supports many programming languages and markup languages. Users can customize it with themes and expand its functionality with plugins, typically community-built and maintained under free software licenses.

Apply the concepts from the tutorials above to create an index page for your class site using your domain/server space via Hunter College.

Optional for anyone new to the Mac OS: Mac Tutorial for Beginners / Windows Users by Anson Alexander (39min)

Each student has a 10-gigabyte server space with the Department of Film & Media Studies.
Your server space has a folder titled “Sites” that is web-accessible, the professor's example URL is https://fmundergrad.hunter.cuny.edu/~mirandar/
Use your Sites folder to store your course portfolio. It is best practice to keep your Sites folder organized with future classes in mind. So, create a folder in the Sites folder titled “medp150” to present this course’s work.
In your medp150 folder create an initial page titled “index.html” this will serve as your homepage for the class.
On your index page write a personal creative statement and/or goals for the class. Do so by writing your name in <h1> tags and your creative statement in <p> tags. Create a link to a second page with heading and paragraph text.
Write some temporary content in the second page, make sure the second page links back to index.html (home page).

Reminder: Access Your Hunter Server Space Tutorial 🔗

Your sites folder is located inside your HOME folder. Create a folder called medp150 inside it.

Remember to use correct syntax when making files and folders or it won’t work in the real world outside.

Use no spaces, periods, slashes, or other code-breaking characters. Keep it simple and use names that make sense so you can follow what you have done at later times.

The sites folder, along with EVERYTHING in your HOME directory is on the server located elsewhere so is available from anywhere online.

This is how your website will be accessible to the world when you use the external file path which will be: http://fmundergrad.hunter.cuny.edu/~yourusername/medp150/index.html

Page updated

Google Sites

Report abuse