Black Friday Sale on Adobe

Adobe Black Friday Sale Nov. 16-23

Theobromine Molecule

Today's assignment is to draw this Theobromine (chocolate) molecule in SVG.

Draw the colored image on the left. The line diagrams on the right are just to help you understand what the atoms are. There is nothing here you don't know how to do yet.

I suggest doing it like this:

1. Create a new blank file in Brackets and name it "theobromine.svg" or "chocolate.svg".
• OR duplicate your existing benzene.svg file and rename it to theobromine.svg.
2. If starting with a new blank file, put in the SVG template, as described elsewhere on this blog. 
3. Change the width, height, and viewbox to a square of suitable size. I suggest at least 400 x 400. You could do 600 x 600, 800 x 800, or even 1000 x 1000 or 1024 x 1024.
4. Add the hexagon side first. Use the polygon vertex calculator. You'll need both spheres and lines. When the hexagon side is done, group the lines and spheres together.
5. Add the pentagon side next. Use the polygon vertex calculator. Again, you'll need to resize, rotate, and translate it until it maches up one edge of the hexagon. Put the hexagon in a group.
6. Add the extra line to make double bonds where required.
7. Add the extra atoms hanging off the hexagon and the pentagon. 
8. Make the circles blue or purple (nitrogen), red (oxygen), dark gray (carbon), and light gray (hydrogen). 
9. Note that the hydrogen circles are a little smaller. 
10. Put the entire molecule in a group so you can put another transformation on it.

Requirements:

1. The poster must have a caption that says Theobromine or Chocolate (or both). 
2. The whole molecule should be nicely centered on the poster, the caption centered, and the molecule sized to look nice with suitable margins around the edges.
3. All the spheres and lines must have the appropriate gradients.
4. Use a suitable background color if you like. 
5. The poster should be suitable for use as a scientific drawing in a textbook or on a web site. This means you should not really take artistic license such as weird backgrounds, movement, weird colors. Stick to the standard.
6. You should put your name in the poster. It should probably be in the lower left or right corner, and small. 
7. Also be sure to put a comment in the code that has your name and today's date.

Resubmit for Better Grade

Written Assignments

You can upgrade written assignments at any time by turning in a new printed copy with the old version (or versions) attached behind.

The reason for this is that we want you to have every opportunity to improve your English skills.

Web and Programming Assignments

Don't bother turning in a technical assignment if you got 80% (usually 8 points) or more on it. I can revise your grade upward, but then I'll have to assess a late penalty.

The lesson is: turn in all your technical assignments on time.

Advice for buying a Mac

(Originally posted Tuesday, August 22, 2017)

---

You might be thinking about buying a Mac at home for doing work similar to what we do in class. I wrote this article a year ago with my general advice for buying a Mac:

http://hotfootspin.blogspot.com/2015/09/my-advice-for-buying-mac.html

For the purposes of this class, keep this additional advice in mind:

Get at least 8 GB of RAM.

The very small "Mac Book" from 2015 that has only one USB-C port is underpowered and  quite slow. The 2016 version is better. A Mac Book Air might be a better choice, especially if you can upgrade the RAM.

You'll need at least 256 GB of disk space if you want to install Xcode and possibly the Adobe suite (Photoshop and Illustrator). My laptop has 256 GB and it barely holds all my work. Adobe software is big.

Adobe software also costs a lot of money, but you can get a student discount of about $20 per month for a year, for a total of $240. If you're going to spend $1000 on a computer, you can afford to spend another $240 for Adobe if you really want to create some nice art.

You can get by with a refurbished Mac Mini in the $500 range if you already have a monitor, keyboard, and mouse you can attach to it.

Hungry

If you are hungry because you are not being fed at home or because there is no time for you to get lunch before you come here to SVCTE, please talk to me privately.

Goals of Graphic Design

Three goals of the graphic design process:

1. To communicate information effectively and efficiently.
• Examples: medical, scientific.
2. To persuade an audience to buy a product, use a serivce, believe a proposition, or feel a particular way.
• Examples: political, health, games.
3. To solve a problem.
• Examples: cloud storage, music streaming.

Palo Alto teen builds an app for finding odd jobs

A new iPhone app built by Gunn High School senior Anand Chandra banks on teens who want to do chores.

Chorely, which Chandra describes as a “community-based chore app,” connects residents who need chores done with youths looking for odd jobs.

http://www.mercurynews.com/2017/08/25/palo-alto-teens-app-takes-chore-out-of-finding-a-side-gig/

Serifs on letters

This YouTube video is entertaining and mesmerizing, and it will help you understand what we mean when we talk about serifs on letters.

Typing the Command Key (Cloverleaf) symbol

In an HTML document (web page), you can type the cloverleaf symbol by adding this string to your code:

⌘

It should look like this:

⌘

Make sure you include the ampersand, the hash (pound or sharp sign), and the semicolon at the end.

In a word processing document, such as Microsoft Word or Apple Pages, you need to go to the symbol insert function, and look for "point of interest" symbol. It is unfortunately not called the cloverleaf symbol, and you can't search for it within a word processing document that way.

In a pinch, you can always just search Google for cloverleaf symbol to get this information.

Templates for HTML code

Here is a template for the minimal complete HTML page. If your page doesn't have all these elements, you should edit your page to include all of them. When you start a new page, you can copy and paste this code to get started.

<!DOCTYPE html>
<html>
<head>
    <!--
    YOUR NAME HERE, date, project name, class, etc.
    -->
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width" /> 
    <title>My Web Page</title>
    <style type='text/css'>
    /* styles go here */

    </style>
</head>

<body>
    <h1>My Web Page</h1>
    <!-- page content will go here -->

    <script type='text/javascript'>
    // scripts will go here

    </script>
</body>
</html>

Here is the code for a bullet list:

<ul>
    <li>Mission College
    <li>Ohlone College
    <li>West Valley College
    <li>Foothill College
</ul>

Here is the code for a table:

<table>
    <tr>
        <th>Key</th>
        <th>Command</th>
    </tr>
    <tr>
        <td>Cmd-Space</td>
        <td>Spotlight</td>
    </tr>
    <tr>
        <td>Cmd-S</td>
        <td>Save</td>
    </tr>
</table>

Here is an excellent tutorial on HTML tables (thank you to the student who linked this to your page):

http://www.w3schools.com/html/html_tables.asp

Web site tricks

To get rid of the underline on links:

    a { text-decoration: none; }

To put more spacing between bullet points:

    li { margin-bottom: 0.5em; }

To change the color of a link:

    a { color: yellow; }

To change the color of a link that was visited previously:

    a:visited { color: orange; }

To change the color of a link only when you are hovering over it:

    a:hover { color: red; }

To underline a link only when you are hovering over it:

    a:hover { border-bottom: 1px solid red; }

To make a sans-serif font default for your page:

    body { font-family: sans-serif; }

Skills we teach at this school

Academic Skills. This includes the things we all know and love, like math, English, history, social studies, and science.

Life Skills. This includes things like getting to school on time, catching the bus, learning to balance a checkbook, writing a resume, writing a cover letter, talking in front of the class.

Employability. This includes things like collaboration, creativity, critical thinking, working with others, respect for others, obeying rules.

Technical Skills. These skills vary from class to class. In the Mobile Apps class, we will learn to type, to understand coding concepts, to write code (JavaScript and Swift), to write markup (HTML and SVG), to use industry standard products like text editors (TextWrangler, Brackets), integrated development environments (Xcode), and design tools (Photoshop, Illustrator, and Dreamweaver).

Keys to Success in Mobile Apps

Here are some keys to success in the Mobile Apps class (and in your career going forward). This is not intended to be a comprehensive list, but it is a good start based on the tasks we have been working on up until now.

1. Follow directions.
   • When turning in your assignments
   • When we are doing lab time together
   • Follow all the school rules regarding network and computer use.
   • Follow all the class rules regarding mobile device use.
2. Pay attention to the teacher.
   
3. Pay attention to details.
   • Angle brackets
   • Opening and closing tags
   • Self-closing tags
   • Colons
   • Semicolons
   • Spaces
4. Don't fall behind.
   • Turn in your assignments on they day they are due (usually the same day we start working on them, or the next day.)
   • Check your progress on Infinite Campus.
   • Complete some assignments like writing assignments at home using Google Docs if necessary.
5. Take responsibility for your own work.
   • Don't make others do your work for you.
   • Don't blame others when you have a problem that you can fix.
   • Use online tutorials, on your own time if necessary to catch up if you need a refresher.
6. Understand what we are doing.
• It is important not just to get all the details correct, but also to understand why we are doing it that way.

The Bell and Class Dismissal

When the bell rings, you must wait for me to dismiss you. I will not dismiss you until all books are turned in, all computers are put to sleep (or turned off), and everyone is in their seats.

There are more than 30 classes in this school, and some of them have to walk a very long distance to get the bus. Those of us here in the front building can be certain you will not be late for the bus, even if I keep you one, two, or even three minutes after class. It takes all the other students that long just to get to the front of the school from the back buildings.

Anyone not in their seat when the bell rings will be considered to have left class early without permission ... this is otherwise known as "cutting class" and it is not only against school rules, but it is against California law and you could be cited for truancy.

Besides all this, I will log your infraction in the Infinite Campus disciplinary log, you will be called to the assistant principal's office to discuss it, your parents will be informed, and your employability grade will suffer.