Category Archives: Homework

01 Shared Capacities

Posted on by

Shared capacities exercised in this course:

CRITICAL ANALYSIS

Students will be able to:

  • Effectively assess implicit or explicit claims, attending to factors such as possibilities, limitations, and flaws; and
  • Effectively attend to factors such as evidence and context as appropriate when articulating ideas or arguments.

COMMUNICATION

Students will be able to:

  • Produce effective written communications that are appropriate for context and audience; and
  • Produce effective oral communications that are appropriate for context and audience.

RESEARCH LITERACY

Students will be able to:

  • Define an appropriate scope of information needed to respond to a research question; and
  • Deploy appropriate research methods and technologies in a manner consistent with relevant norms; and
  • Evaluate information sources critically.

 

AUTHORSHIP

Students will be able to:

  • Develop works (in any medium) with an original voice or perspective; and
  • Articulate how their work fits into intellectual or artistic contexts (considering production and/or reception).

CREATIVE MAKING

Students will be able to:

  • Generate original work that employs visual, musical, performance, or other creative practices; and
  • Demonstrate reflection upon the iterative process of creating this work.

CROSS-DISCIPLINARY THINKING

Students will be able to:

  • Understand concepts, theories, experiences, and/or methods from multiple disciplinary perspectives or fields of study; and
  • Combine diverse modes of inquiry to produce meaningful work.

FLEXIBILITY AND RESILIENCY

Students will be able to:

  • Take appropriate risks, rebound from setbacks, and persevere to complete a given course of action; and
  • Adapt to new situations through a process of continual development.

WORKING IN COMPLEX SYSTEMS

Students will be able to:

  • Successfully navigate multiple projects or responsibilities (e.g., manage time, organize tasks, meet deadlines, and adhere to requirements and standards for completing); and
  • Understand and work across institutional boundaries.

ETHICAL REASONING

Students will be able to:

  • Analyze how social, economic, and/or political systems interact with individual or group identities or experiences within particular cultural and historical contexts; and
  • Articulate effective arguments in support of personal or collective values, judgments, or responsibilities by applying ethical concepts.

12 Scalable Vector Graphics (SVG)

Posted on by

Scalar Vector Graphics (SVG) is an XML language, where “X” stands for extensible. Unlike HTML, XML is more strict, and any errors may cause it to malfunction. Initially, the World Wide Web Consortium (W3C) attempted to update XHTML, but the inability to open websites due to mistakes proved to be a significant obstacle for XHTML 2.0. Consequently, HTML5 emerged as the standard that we still use today.

Just like HTML provides elements for defining headers, paragraphs, tables, and so on, SVG provides elements for squares, circles, ellipses, lines, polylines, polygons, and paths. These are the element names, and just like HTML, they are use the greater and less than symbols <circle cx="150" cy="150" r="80"/> where r is the radius of the circle. cx and cx the horizontal and vertical center position of the circle. As SVG is part of the Document object model DOM, it is possible to fill and stroke shapes using inline CSS, the same way you would using it in HTML. A 180 pixel square with a black stroke and red fill: <rect x="100" height="150" y="100" width="150" style="stroke: black; fill: red;"/>

Like illustrator files, SVG documents can become quite complex, as there can be many such elements, which can be filled with gradients or rotated, with filter effects, animations, interactivity, JavaScript, and so on. Because I do not expect anyone to hand code anything but the simplest shapes, there are programs available, like Illustrator, or the free Illustrator alternative, Inkscape, both of which exports and save to the SVG format. You can then link to that like any other picture or cut and paste the code directly into the HTML document. A benefit of SVG is that it works seamlessly into the HTML document, and uses CSS for naming layers, elements, etc.

I can display the same illustrator file I created for canvas using SVG. Where canvas renders the file into a bitmap, SVG remain vector, meaning it can scale without losing resolution.


09 Call to Action

Posted on by

A call to action can bring success to your web presence. If you use the right words, you can inspire your audience to take action — like download your resume, or project, etc. If it does not stand out, your audience may not notice it.

What is a call to action?

A call to action (or CTA) is a prompt designed to inspire the target audience of a marketing campaign to take a desired action. It encourages people to click on a link, leave a social media comment, visit an online store, make a purchase, etc. It can be a Text link, a Button, or even plain text without a link. “Buy Now” or “Download Now” are typical examples of simple calls to action.

A good call to action triggers the user to do what you wish them to do. Users often need some direction as to what to do next. It is possible to use several call to actions to engage the user’s possible options. A call to action is not the menu system, which represents the site architecture.

A call to action uses short, strong, and persuasive language. It needs to call up a value proposition that is relevant and clear. It should entice the user, by provoking emotion or enthusiasm. A good call to action engages the audience with a narrative they already support and believe in, like exclusivity, as many people fear missing out. Last chance, limited lime, or urgent are used to get people to act.

A call to action is often the first thing you see, but it can be at the end of a story, for example. Wherever it appears, a call to action provides your reader with an actionable task.

It starts with a verb. Strong verbs that directly engage users for commerce are buy, now, shop, save, For a non profit, donate, volunteer, give, support. For a newsletter or activity, subscribe, join. There are many strong verbs, like learn more, see how, find out, click here, continue, etc. A Call to Action is usually very short, but it can run longer, too, such as “Subscribe today so you’ll never miss a post.”

A list of strong verbs for different calls.

  • Ecommerce: Buy, Shop, Order, Reserve, Save, Add to Cart, Pick, View
  • Non-profit: Donate, Commit, Volunteer, Adopt, Give, Support
  • Newsletter or community: Subscribe, Join, Sign Up, Refer,
  • Freebie giveaway: Download, Get, Grab, Claim, Take advantage of
  • General: Learn More, See More, See How, Start, Find Out, Check it Out, Click here, Continue, Swipe Up

The possibilities are endless.

Posted on by

< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">




Parsons 2017 Fall Web Design





how do I create a responsive three column responsive web page using css grid.  

To create a three-column responsive web page using CSS grid, you can follow these steps:

  1. Create the HTML structure:

<div class=“grid-container”>

  <div class=“grid-item”>Column 1</div>

  <div class=“grid-item”>Column 2</div>

  <div class=“grid-item”>Column 3</div>

</div>

  1. Add CSS to create the grid container and set the number of columns:

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 20px;

}

This will create a grid container with three columns of equal width and a gap of 20 pixels between them.

  1. Add CSS to make the grid responsive:

@media screen and (max-width: 768px) {

  .grid-container {

    grid-template-columns: 1fr;

  }

}

This will change the grid to a single column when the screen size is less than or equal to 768 pixels.

  1. Add CSS to style the grid items:

.grid-item {

  background-color: #fff;

  padding: 20px;

  text-align: center;

  font-size: 20px;

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);

}

This will add some basic styling to the grid items, including a white background, padding, center alignment, font size, and a box shadow.

Here’s the complete CSS code:

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 20px;

}

@media screen and (max-width: 768px) {

  .grid-container {

    grid-template-columns: 1fr;

  }

}

.grid-item {

  background-color: #fff;

  padding: 20px;

  text-align: center;

  font-size: 20px;

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);

}

Note that you can customize the CSS to suit your specific needs and design preferences.

Onno:

great! now create a portfolio web page for a design student looking for employment

Sure! Here’s an example of a portfolio web page for a design student looking for employment:

HTML code:

<!DOCTYPE html>

<html lang=“en”>

  <head>

    <meta charset=“UTF-8”>

    <title>Design Portfolio | Jane Doe</title>

    <link rel=“stylesheet” href=“style.css”>

  </head>

  <body>

    <header>

      <h1>Jane Doe</h1>

      <nav>

        <ul>

          <li><a href=“#about”>About</a></li>

          <li><a href=“#work”>Work</a></li>

          <li><a href=“#contact”>Contact</a></li>

        </ul>

      </nav>

    </header>

    <main>

      <section id=“about”>

        <h2>About Me</h2>

        <p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>

        <img src=“profile-pic.jpg” alt=“Jane Doe”>

      </section>

      <section id=“work”>

        <h2>My Work</h2>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <img src=“project1.jpg” alt=“Project 1”>

            <h3>Project 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“project2.jpg” alt=“Project 2”>

            <h3>Project 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“project3.jpg” alt=“Project 3”>

            <h3>Project 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

        </div>

      </section>

      <section id=“contact”>

        <h2>Contact Me</h2>

        <form action=“#” method=“post”>

          <label for=“name”>Name:</label>

          <input type=“text” id=“name” name=“name”>

          <label for=“email”>Email:</label>

          <input type=“email” id=“email” name=“email”>

          <label for=“message”>Message:</label>

          <textarea id=“message” name=“message”></textarea>

          <button type=“submit”>Send Message</button>

        </form>

      </section>

    </main>

    <footer>

      <p>&copy; 2023 Jane Doe</p>

    </footer>

  </body>

</html>

CSS code:

/* Global styles */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

body {

  font-family: Arial, sans-serif;

  font-size: 16px;

  line-height: 1.5;

}

h1, h2, h3 {

  font-family: ‘Montserrat’, sans-serif;

}

a {

  color: #333;

  text-decoration: none;

}

a

onno:

Can you use images from the web to make this attractive?

Sure! Here’s an updated HTML code for the portfolio web page, with image URLs from the web:

<!DOCTYPE html>

<html lang=“en”>

  <head>

    <meta charset=“UTF-8”>

    <title>Design Portfolio | Jane Doe</title>

    <link rel=“stylesheet” href=“style.css”>

  </head>

  <body>

    <header>

      <h1>Jane Doe</h1>

      <nav>

        <ul>

          <li><a href=“#about”>About</a></li>

          <li><a href=“#work”>Work</a></li>

          <li><a href=“#contact”>Contact</a></li>

        </ul>

      </nav>

    </header>

    <main>

      <section id=“about”>

        <h2>About Me</h2>

        <p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>

        <img src=“https://picsum.photos/400/400?random=1” alt=“Jane Doe”>

      </section>

      <section id=“work”>

        <h2>My Work</h2>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=2” alt=“Project 1”>

            <h3>Project 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=3” alt=“Project 2”>

            <h3>Project 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=4” alt=“Project 3”>

            <h3>Project 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

        </div>

      </section>

      <section id=“contact”>

        <h2>Contact Me</h2>

        <form action=“#” method=“post”>

          <label for=“name”>Name:</label>

          <input type=“text” id=“name” name=“name”>

          <label for=“email”>Email:</label>

          <input type=“email” id=“email” name=“email”>

          <label for=“message”>Message:</label>

          <textarea id=“message” name=“message”></textarea>

          <button type=“submit”>Send Message</button>

        </form>

      </section>

    </main>

    <footer>

      <p>&copy; 2023 Jane Doe</p>

    </footer>

  </body>

</html>

Note that the src attributes of the img elements now point to image URLs from the web, obtained using the Lorem Picsum service.

Onno:

No background picture to make eveything unified? How about design elements. Can we do it in 3 columns?

Sure! Here’s an updated HTML code for the portfolio web page with a background image, design elements, and a three-column layout using CSS Grid:

<!DOCTYPE html>

<html lang=“en”>

  <head>

    <meta charset=“UTF-8”>

    <title>Design Portfolio | Jane Doe</title>

    <link rel=“stylesheet” href=“style.css”>

  </head>

  <body>

    <header>

      <h1>Jane Doe</h1>

      <nav>

        <ul>

          <li><a href=“#about”>About</a></li>

          <li><a href=“#work”>Work</a></li>

          <li><a href=“#contact”>Contact</a></li>

        </ul>

      </nav>

    </header>

    <main>

      <section id=“about” class=“section”>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <h2>About Me</h2>

            <p>I am a recent graduate from XYZ University with a degree in Graphic Design. Throughout my studies, I have developed a strong passion for visual storytelling and creating unique designs that capture the essence of a brand. I am constantly seeking new challenges and opportunities to expand my skill set.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=1” alt=“Jane Doe”>

          </div>

        </div>

      </section>

      <section id=“work” class=“section”>

        <h2>My Work</h2>

        <div class=“grid-container”>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=2” alt=“Project 1”>

            <h3>Project 1</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=3” alt=“Project 2”>

            <h3>Project 2</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

          <div class=“grid-item”>

            <img src=“https://picsum.photos/400/400?random=4” alt=“Project 3”>

            <h3>Project 3</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod purus velit, a volutpat enim pellentesque ac.</p>

          </div>

        </div>

      </section>

      <section id=“contact” class=“section”>

        <h2>Contact Me</h2>

        <form action=“#” method=“post”>

          <label for=“name”>Name:</label>

          <input type=“text” id=“name” name=“name”>

          <label for=“email”>Email:</label>

          <input type=“email” id=“email” name=“email”>

          <label for=“message”>Message:</label>

          <textarea id=“message” name=“message”></textarea>

          <button type=“submit”>Send Message</button>

        </form>

      </section>

    </main>

    <footer>

      <p>&copy; 2023 Jane Doe</p>

    </footer>

  </body>

</html>

And

/* Reset default margin and padding */

* {

  margin: 0;

  padding: 0;

}

/* Set the background image */

body {

  background-image: url(“https://picsum.photos/1920/1080?random=5”);

  background-size: cover;

}

/* Style the header */

header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px;

}

h1 {

  font-size: 2.5rem;

  font-weight: bold;

  color: #fff;

}

nav ul {

  display: flex;

  list-style: none;

}

nav li {

  margin: 0 20px;

}

nav a {

  color: #fff;

  text-decoration: none;

  font-size: 1.2rem;

  font-weight: bold;

}

/* Style the main content */

main {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 50px 20px;

}

.section {

  width: 100%;

  margin-bottom: 50px;

}

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}

.grid-item {

  background-color: #fff;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

img {

  max-width: 100%;

  height: auto;

  margin-bottom: 20px;

  border-radius: 5px;

}

h2 {

  font-size: 2rem;

  font-weight: bold;

  color: #fff;

  margin-bottom: 20px;

}

h3 {

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 10px;

}

p {

  font-size: 1.2rem;

  line-height: 1.5;

  margin-bottom: 20px;

}

form label {

  font-size: 1.2rem;

  font-weight: bold;

  margin-bottom: 10px;

  display: block;

}

form input,

form textarea {

  padding: 10px;

  margin-bottom: 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

}

form button {

  background-color: #333;

  color: #fff;

  padding: 10px 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

  font-weight: bold;

  cursor: pointer;

  transition: background-color 0.2s ease-in-out;

}

form button:hover {

  background-color: #555;

}

This should style the HTML code I provided earlier and create a visually appealing portfolio web page with the requested design elements.

Onno:

Nw could you make it responsive so it looks good on a smart phone?

Sure! Here’s the updated CSS code with media queries to make the portfolio web page responsive for smaller screens such as smartphones:

/* Reset default margin and padding */

* {

  margin: 0;

  padding: 0;

}

/* Set the background image */

body {

  background-image: url(“https://picsum.photos/1920/1080?random=5”);

  background-size: cover;

}

/* Style the header */

header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px;

}

h1 {

  font-size: 2.5rem;

  font-weight: bold;

  color: #fff;

}

nav ul {

  display: flex;

  list-style: none;

}

nav li {

  margin: 0 20px;

}

nav a {

  color: #fff;

  text-decoration: none;

  font-size: 1.2rem;

  font-weight: bold;

}

/* Style the main content */

main {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 50px 20px;

}

.section {

  width: 100%;

  margin-bottom: 50px;

}

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

}

.grid-item {

  background-color: #fff;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

}

img {

  max-width: 100%;

  height: auto;

  margin-bottom: 20px;

  border-radius: 5px;

}

h2 {

  font-size: 2rem;

  font-weight: bold;

  color: #fff;

  margin-bottom: 20px;

}

h3 {

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 10px;

}

p {

  font-size: 1.2rem;

  line-height: 1.5;

  margin-bottom: 20px;

}

form label {

  font-size: 1.2rem;

  font-weight: bold;

  margin-bottom: 10px;

  display: block;

}

form input,

form textarea {

  padding: 10px;

  margin-bottom: 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

}

form button {

  background-color: #333;

  color: #fff;

  padding: 10px 20px;

  border-radius: 5px;

  border: none;

  font-size: 1.2rem;

  font-weight: bold;

  cursor: pointer;

  transition: background-color 0.2s ease-in-out;

}

form button:hover {

  background-color: #555;

}

/* Media queries for smaller screens */

@media screen and (max-width: 768px) {

  header {

    flex-direction: column;

    align-items: center;

  }

  nav ul {

    margin-top: 20px;

  }

  .grid-container {

    grid-template-columns: repeat(1, 1fr);

  }

  

  .grid-item {

    margin-bottom: 30px;

  }

  h1 {

    font-size: 2rem;

    text-align: center;

  }

  h2 {

    font-size: 1.5rem;

  }

  h3 {

    font-size: 1.2rem;

  }

  p {


Site Links

Posted on by

Recorded Lectures

Posted on by

Lectures are recoded and will remain up for 30 days. Copy the pass code and click the link. You may wish to download the lecture if you think you will refer back to it, or if you were absent that day. 30 days goes by quickly and only the last three or four lectures are available. If you wish to refer back to the material covered in the first two lectures, there is a makeup lecture available.

I will not save any lectures after the 5th, because only these lectures contain the fundamental issues you need to be familiar with to understand everything else.

Week 5:

Recorded: Week 5 Passcode: $gQpG!M9m5

Week 4:

Recorded: Week 4 Passcode: M8La8GnxQ*

Week 3:

Recorded: Week 3 Passcode: Je89xVCS=u

Week 2:

Recorded: Week 2 Passcode: s##2PqB8bv

12 Homework

Posted on by
Reply

Homework for the Final

  1. Finish your website.
  2. Test it.

Homework for the Unit

  1. Create a page featuring multimedia, including canvas and video.
  2. Ideally, you are able to incorporate canvas and video in the final, but the final does not have to include multimedia.
  3. A link to the multimedia page has to be on the work-sheet.

11 Homework

Posted on by
Reply

Homework for the Final

  1. Develop and document the information architecture of the finished site in your work-sheet.
  2. As You develop the navigation, create it as a PHP include.
  3. Test it.

Homework for the Unit

  • Replace the navigation of your final with a PHP include.
  • create a JavaScript/jQuery script for use in your final website.

10 Homework

Posted on by
Reply

Homework for the Final

  1. Your worksheet needs to reflect your final project, and it is due today (the work-sheet, not the final, with research, wireframe, comp and user experience profiles, including links where necessary).
  2. Create a mockup and develop a look that sells your project. This can build upon the CSS3 assignment from last week.
  3. Translate the structure of the comp into a wireframe
  4. Develop coherent user experience profiles.

Homework for the Unit

  • Using these new CSS3 properties, create an animatics or animated page that sells your project.
  • It’s possible to animate the elements created in the previous homework.
  • Make sure that you use at least two transforms, transitions and an animation.
  • Ideally you animate everything by hand, but I will understand if you use Adobe Edge.
  • A link to this promotional material has to be on the work-sheet.

09 Homework

Posted on by
Reply

Homework for the Final

  1. You should know what you are selling on the final web site, have done the research, developed the brand and have given the target audience some thought. All of this needs to be documented in the worksheet.
  2. Develop a potential user portfolio and flush out what they would want. Guesstimate their potential browsing habits. Provide an idealized user profile in the worksheet.
  3. As you plan your web site, read through the peer review questions. Let these questions help you in developing your website, as this is the criteria by which the final will be evaluated.
  4. Develop a photoshop comp of the opening page that incorporates both the evaluation criteria of the review questions and the many of the CSS3 techniques covered today. Now that you have an idea of what CSS3 can do, do it!

Homework for the Unit

  1. Use these new CSS3 properties to pull together a collateral piece for your project. It can be a sales poster, an online brochure, or any other kind of promotional material using at least five techniques discussed in class. Include blends, multiple background images, rounded corners, shadows, transparency, etc.

    Visit this Design Festival article to get you started.