Mobile App Design : Fall: May 2020

Friday, May 29, 2020

Video about aligning buttons in stack views

If your stack views look like this ...

.. this video will show you how to align the buttons and make them look nicer.

https://youtu.be/FYzlr5d9NR0

Student Pickups

They have assigned our class a time on Thursday, June 4 from 11:45 am – 12:45 pm for what they are calling "student pickups." This is a time when students can return items that belong in the classroom or pick up their items that were left in the classroom.

This mostly applies to classes where students have items such as tools or uniforms that need to be returned or retrieved. This does not really apply much to our class.

I do have one item that I would like to return to you eventually, and that is your printed poster. If you have an art portfolio, you may want to put the printed poster into your portfolio. Since you paid money (even if it's only 76 cents), I think you should get to keep the poster. However, I don't think it is critical to return the poster to you next week. I prefer to wait until they open things up a little bit, and maybe I can return the poster to you in person.

If you would like to have your poster next Thursday, June 4, then let me know. I will only bring your poster if you let me know beforehand that you want me to bring it. These are the rules: You will drive up in the bus circle, you cannot come on the bus, you will not get out of your car, you will wear a mask, you will open your window and I will hand you your poster.

Extra Credit Surveys

I told you the school might conduct their own end-of-year survey, and here it is. We've been authorized to give you extra credit for taking this survey. You'll have to enter your name and email on the survey in order to get the extra credit.

It is not clear (to me) whether you need to log in using your metroed.net email address. So if you have a problem logging in to the survey, let me know.

(It turns out the school already sent an email about this, and you may have filled out the survey already. If you already filled out the survey, there's no need to fill it out again.)

Please complete the one more appropriate survey for you below.

→ 11th Grade Survey

→ 12th Grade Survey

Virtual Open House Starts Today

Anyone who is logged in from their metroed.net email address can vote for the best logo and poster in the Mobile Apps Class.

http://mobileapps1920.svctestudents.org/contest/

Voting is open now and will close on Tuesday. We will announce the winners on Wednesday. Please let me know if you experience any problems with the web site or voting.

Wednesday, May 27, 2020

Logo and Poster Contest

I uploaded your logos here: http://mobileapps1920.svctestudents.org/logos/

I uploaded your posters here: http://mobileapps1920.svctestudents.org/posters/

Please let me know if you have any problems viewing the logos and posters.

I will probably open this contest to anyone from the school to vote on Monday and Tuesday next week. You'll vote on a Google Form which I have not put together yet.

Your Future Plans

Let me know what you plan to do after this course and this semester is over. Some of you are graduating. Congratulations! Even if you do not get the traditional ceremony, you've still achieved something and you are about to start out on the next phase of your life and career.

If you are a junior, you still have a year to go, and who knows what it holds? It could involve coming back here to SVCTE to take a different course.

One of my students who took my class last year when he was a junior won an award at the end of last year. This year, as a senior, he came back and took the electrical maintenance class, which is totally different. He also won an award in that class! People who know know electrical maintenance can make $80,000 right out of high shcool. I don't know what he intends to do with his life.

Write me an email, this week, next week, during the summer, or when you get a chance, and let me know what will you be doing.

College. Where do you intend to go to college? You wrote this up at the beginning of the year, but your plans might have changed. Will you go to community college? Will you take a summer class? Have you already been accepted to a community college or four-year university?

Career. What do you think about going into computer programming or web design as a career? Do you think you might go into another field entirely?

Stay in touch. Let me know next fall, next year, what happened to you. Let me know if you need a letter of recommendation. Update your LinkedIn profile with your current status. My email here at the school is mbrautigam@metroed.net. I'm also on Facebook, Twitter, LinkedIn, and Reddit.

Monday, May 25, 2020

May 26–29: What Next?

What next?

iPhone App

If you are making an iPhone app, and you are almost finished, it's time to think about putting together the materials you'll need to submit your app to the App Store. I've posted articles, lists, and videos for you to take a look at.

One thing you'll certainly need is an app icon. So do that if you haven't done so already. Make all the different sizes, and install them into the right places in the assets folder.

If you are making an iPhone app, think about recreating it as a web app. You already have all the images, sounds, and data it takes to make your app, so go ahead and make an HTML version of it. By making a web app, you'll

gain extra practice using HTML to make a web app, and
post an app that could be used by Android users as well as Apple users.

Web App

If you are making a web app, think back to when we were using Swift and storyboards and think about how you might be able to make an iOS app if we were back in the classroom, if you obtained a Mac, or if you took another class in college. Think about what features you could add that aren't available on the web, such as camera, gyroscope, accelerometer, etc.

Portfolio

You can add your web app directly into your portfolio and people can run it there.

You can't run your iOS app on the web, but you could take screen shots and write up your app on a new page in your portfolio.

Final Project and Grades

Your final project is due this coming Friday, May 29. I'm not sure if there will still be time for a redo next week if necessary, so make sure to get me an update by Friday, May 29.

There is a blog post with your final grade for both SVCTE and Mission College credit. Your grade can go either up or down this week depending on how much work you continue to turn in or not turn in.

Letters of Competency

I have not signed the LOCs yet, but I have calculated the numbers. 5 people in the afternoon class are getting all 4's across the board. 7 people are getting some lower numbers. I used more assignments in the calculations, such as the Apple in SVG for your math number and the Apple in Adobe for Adobe skills number. Take a look at the article for more information.

Canvas

There is a discussion forum for you to use. Ask and answer questions.

Summer School

You could take a programming course at a community college this summer. See the blog post.

Submit to the Apple App Store

Here are some links that discuss how to submit your iOS app to the Apple App Store. If you are making an iOS app, you'll need to look at these instructions.

Note: submitting to the App Store requires that you have a paid developer account, not just the free one. The paid account costs $99 per year. Ouch! The school has an account that we might be able to use to submit your app.

Apple instructions (why are there two?)

More good resources

Code With Chris, an excellent video
This page has an excellent bullet list of what all you need to gather. Use this as your to-do list or checklist.
This ultimate guide is long, but comprehensive.
This one looks very technical, maybe too complicated.
Finally, this article suggests that you may need to upgrade to a version of Xcode that supports iOS 13. If you are using an older Mac or an older OS or an older version of Xcode, you maybe forced to upgrade before you can submit your app.

Take a look at these articles and start gathering the materials you'll need, such as:

An app icon
Screen shots
A writeup of what your app does

College Summer School Classes

Take summer school classes at these community colleges. For computer programming, I recommended them in this order of preference. All the classes this summer will be online, so it doesn't matter whether you take a class at a school far away or a school nearby. You will need to have a computer and internet that you can rely on. Summer school courses are fast-paced. You'll complete a whole semester (or quarter) of work in only six to eight weeks.

Schools on the quarter system have classes that start later and last 10 to 12 weeks. Schools on the semester system start earlier and have classes that last 16 weeks.

Rank	School	Comments	Start Date
1	Foothill	Best, Quarters	June 29
2	Mission	Semesters	June 8
3	West Valley	Semesters	June 8
4	Ohlone	Semesters	June 15
5	De Anza	Quarters	June 29
6	San Jose City	Semesters	June 15
7	Evergreen	Worst	No CS classes

All these schools (except Evergreen) offer the same staple of classes:

C++
Java
Python (I don't recommend taking Python during the summer.)
Evergreen does not offer any CS classes during the summer and not much the rest of the year, either.

In addition, there are a few oddball classes you can take during the summer:

West Valley - Advanced Python
De Anza - Introduction to Linux
De Anza - Assembly Language (but it's full already)
Foothill - Intermediate C++, Java, and Python
Foothill - Introduction to Linux
Ohlone - Assembly Language
Ohlone - Statistical Software
Ohlone - Introduction to Linux
Ohlone - Intermediate Java

Sunday, May 24, 2020

PM Grades as of May 21

SVCTE grade. Your SVCTE grade is the higher of your grade in IC today or your grade on March 20.

Mission College credit. Your Mission College grade is your grade in IC today. You get the Mission College credit if your Mission score is >80% and you turned in a final project. If your Mission College % is >80 and you did not get credit, then you need to turn in a final project. I may be able to change your grade.

ID	SVCTE %	Grade	Mission %	College Credit
115	100.72	A+	100.72	+
043	99.30	A+	99.30	+
955	98.98	A+	98.98	+
212	96.26	A	96.26	+
956	95.90	A	92.18	+
135	95.15	A	70.05	NO
816	92.50	A-	92.50	+
902	87.87	B+	71.60	NO
546	87.27	B+	85.61	+
544	79.50	C+	66.41	NO
093	74.50	C	67.67	NO
513	72.98	C-	57.78	NO

Friday, May 22, 2020

News Friday May 22

Awards Ceremony Tonight

There will be an awards ceremony tonight (Friday May 22) at 6:00 pm. The Mobile Apps course nominated Chris Lo, Vivian Le, Cristina Arriaga Quintero, and Leanne Mejia to receive awards with small scholarships.

MetroED YouTube Channel: https://metroed.us/2zpOzxp
MetroED Facebook Page: https://metroed.us/2yphkK0
SVCTE Facebook Page: https://metroed.us/2ZutJra

COVID Project

Lillian Ngo made a cool poster that I posted with the rest of the COVID projects here: http://mobileapps1920.svctestudents.org/projects/

Memorial Day Calendar

Monday, May 25 is the Memorial Day holiday. We will not hold our usual PM class session that day, even though it is on the calendar and you may receive an email or a reminder. However, I hope we can have our usual PM class session on Tuesday instead. All other class sessions will take place as scheduled:

AM class = Tuesday and Thursday at 8:00 am
PM class = (Tuesday and) Wednesday at 12:30 pm

If you cannot attend a class session due to a conflict, please let me know ahead of time. You may attend the other class's session to make sure you don't miss any important information.

Assignments and Grades

The situation continues in flux and confusing, but my latest understanding is that Infinite Campus is locked. While we can continue to change grades as you complete your projects, we will enter the grades with a form instead of through IC. I will make an announcement next week if this changes.

Some of you already turned in work after the deadline yesterday, and I am unable to enter your work into IC. So be patient, and any work you do (or do not do) will be reflected eventually in your final grade.

Mission College Credit

I added an assignment at the end of Infinite Campus to indicate your status with respect to the Mission College credit. This assignment is weighted so that it is only worth one point, but it indicates your current status. To get the college credit:

Your current IC grade as of May 21 must be 80% or higher.
You must complete the final project, in the form of a 90% checkpoint or the Personality Quiz.

Meaning of the numbers:

100 means you turned in a Checkpoint 3 that is 90% finished and super quality.
80 means you finished the Personality Quiz only.
In between means you did some combination or your checkpoint is not 90% finished.
0 (zero) means your grade is < 80 overall, OR
0 (zero) means you did not do the Personality Quiz or any progress toward the final project.

You can still continue to work on your project next week.

Wednesday, May 20, 2020

Fitting Web Page on Small Screen, Part 2

Video: https://youtu.be/zaBQrskMDDo

This video is about taking a page that has input fields, like the BMI calculator, and making them look nicer on a small screen. Uses media queries, which let you change the layout of an HTML page based on window width.

Sketches and Prototypes using InVision

Some of you missed the class session where we learned InVision. This 15- minute video might help you get started. (It's not among the best of my videos.)

InVision lets you make a digital sketch of your final app. Then you can combine the sketches into a working prototype that simulates how your final app will work.

Video: https://youtu.be/mF-pXltqyIA

InVision web site: https://www.invisionapp.com

Tuesday, May 19, 2020

Poster and Logo Contest

We usually have an open house the last week of school where we ask other classes to visit us and vote for the best poster and logo. You've seen all the logos and posters around the classroom. We can't do that in person this year, but maybe we can do it in a virtual fashion, by posting all your posters and logos online. Also, we could vote for the best portfolio, since they are also online.

If we do this, I would like to do it on Friday, May 29. Since it is virtual, it doesn't really matter what day we do it.

We can talk about this in hangout.

Grading again (sigh)

I agree that the grading is totally confusing but don't let it get you down. The grades I posted on the blog are real, even if they look different from what it says in Infinite Campus.

I will post your grades to the computer system on Thursday at 3:30 pm. After that, I will still change your grade on a paper form to reflect your final project. So if you finish the final project, your grade will probably go up, and if you don't finish it, it will probably go down. I talked to the administrator and they expect to get a lot of grade changes on paper, both up and down. So they are not discouraging us from updating your grades right up until the last minute on June 1.

You have 3 things to think about at this point:

a. What grade will I get in the class?

This grade will go on your high school transcripts.
No one is getting an F in the class.
One person may be getting a D in the class. You can see that in the list of grades.
D is a passing grade for high school credit.

b. Will I get college credit?

You need at least a B grade according to Infinite Campus, which has the correct grade for your college course (but not for the high school course).
You also need to finish the final project, even if you grade is A or B.
This is the confusing part - you have two grades, one for high school, and one for college, and they are different.

c. What will my LOC look like?

Most people who come to this school want the LOC so they can show an employer.
If you don't do the work, you will get poor marks on your LOC.
Then you won't want to show it to an employer because it will work against you.

Letter of Competency

If you get at least a C in the course (70%), you will receive a certificate with a letter of competency on the back. The certificate looks like a graduation diploma.

You can see a picture of the LOC (letter of competency) here:
http://mobileapps1920.svctestudents.org/materials/LOC2020-unofficial.jpg

The letter of competency allows me to rate your skills in 10 different areas. I rate you on the scale 1–4. The scale has these meanings:

Score	Meaning
1	Can only do this supervised, i.e. has no real skills in this area, D or F
2	Needs additional training, i.e. has been exposed but is still not doing well, C
3	Moderately skilled, i.e. has acquired skills in the class but has some things to learn, B or A
4	Can perform this skill independently, i.e. we can put you to work right now doing this, A+

I don't just think about you and put a number there. I actually calculate what is your independent performance in each of these areas. I calculate these numbers from your grades on various assignments we've done throughout the year. Here is an example of how I will probably calculate your scores.

You can see that I will weight your scores heavily based on how you performed during the school shutdown. Most tech companies in the area have employees working from home. If you didn't do your school work during the shutdown, this indicate that you would have done the same thing on a real job.

Skill	How I score
Basic Computer	All except a few will get full 4 points
Graphic Design	Logo Poster Portfolio
Web	Portfolio
Practical Math	Venn Diagram Basketball Apple Navigation Icons
Research & Vocabulary	Design Principles App Icon Sizes
Adobe Illustrator	Logo Poster Apple Navigation Icons
English	Usability Essay Assistive Devices Essay Women and Girls
Basic App Programming	Element Quiz Animal Sounds 4 Kids Color Mix
Advanced App Programming	Pizza Workflow Apple Pie Life Cycle Order of Events
Career Readiness	How worked during Shelter in place Whether you Cheated (I found some things on your computers)

Stanford Course on iOS Programming

Stanford is starting to publish their videos from their iPhone programming course from Spring 2020 that just finished.

https://www.youtube.com/playlist?list=PLpGHT1n4-mAtTj9oywMWoBx0dCGd51_yG&app=desktop

There are several main differences between their course and ours:

They will go into more detail about computer science like MVVM (Model-View-View-Model).
It sort of assumes you already know an object-oriented language like C++ or Java.
They get started much more quickly than we do ... their first app is more complicated than our first app and it uses animation, navigation controllers, and other advanced features.
They are using SwiftUI, which is Apple's new replacement for storyboards where you lay out your screens using code instead of graphically.

This is one of the best iOS programming courses around and the instructor is well known for teaching it.

Community College Application Workshop

Our upcoming workshop will review the community college application process. We understand that during these uncertain times, this process can be even more confusing. Please encourage any student that are interested in attending a California Community College but are unsure of the next steps to participate. Our MAPin Coaches are knowledgeable about the process during this unique time. Please see below schedule details for the Community College Application Workshop. We hope to see you and your students there!

Community College Application Workshop

Date: Wednesday, May 20th, 2020
Time: 4:00-4:45 pm
Zoom Link: https://cccconfer.zoom.us/meeting/register/tJcpcuyhqT0vG9STWrWdT9YSC4SUxggulQLe
Meeting ID: 934 5597 6510
Call in Number: 669-900-6833

MAPin will be offering additional live online workshops which will be scheduled in the near future. In addition, MAPin has FREE online resources available through StudentLingo. Students can register at studentlingo.com/svcp.

May 19 News

Disaster Relief Assistance for Immigrants

Starting through June 30, Santa Clara County residents can apply with Catholic Charities for Disaster Relief Assistance for Immigrants Program. The State of California is providing one-time disaster relief assistance to adult undocumented immigrant adults over the age of 18 who have been impacted by the COVID-19 pandemic. The program is for adults who are ineligible for other forms of federal unemployment or pandemic related assistance, such as the CARES act or unemployment benefits.

An undocumented adult who qualifies will receive $500 of direct cash assistance (maximum of $1000 per household). A household is defined as individuals who live, purchase, and prepare meals together. Assistance will be provided on a first come, first serve basis. Disaster relief application services and assistance are not guaranteed. A photo ID with a Santa Clara County address is required.

Applicants should call (866) 490-3899, Monday through Saturday from 8 a.m. to 8 p.m. More information can be found here. Share this information on Facebook.

The State of Youth During COVID-19: A Conversation with Students

The COVID-19 pandemic has been a source of stress, anxiety and uncertainty for many in our community. The County of Santa Clara’s Behavioral Health Services Department invites students and youth for a conversation with mental health advocates about wellbeing on Tuesday, May 19 from 3:45 p.m. to 5:00 p.m.

Participants will:

Hear from student panelists as they share personal accounts
Learn tips from clinicians who will discuss wellbeing
Learn about local mental health resources
Have Q&A and open dialogue with peers and mental health professionals

Sunday, May 17, 2020

May 18–22

Checkpoint 3

You must turn in Checkpoint 3 by this Thursday, May 21, at 3:30 pm. At that time, I will post your preliminary final grade in the course.

You will have time after May 21 to improve your project and turn in the "final final" version. Changing your grade will be possible but difficult. That is why I want you to turn in a Checkpoint 3 on Thursday, to make sure I have something I can grade.

Catch Up

Turn in all the projects that we determined are "easy."

Linked In account: Brenda, Daniel, Vincent L, Jason, Vincent N, Anthony.
http://mobilefall.blogspot.com/2020/05/may-1115.html

End of year survey: Vincent N
https://forms.gle/drqQz491aGaiYsZ76

Final project prototype sketches: Brenda, Daniel, Vincent L, Jason, Leanne, Vincent N, Damian, Anthony.
Draw on paper and send me a photo from your phone.
http://mobilefall.blogspot.com/2020/04/assignment-2-prototype-sketch.html

Send me an email from your metroed.net account: Vincent L, Vincent N, Anthony
http://mobilefall.blogspot.com/2020/03/metro-ed-email-accounts.html
Assigned March 25, almost two months ago.

Modified Hangouts and Office Hours this week

Hangouts

We do the same material on Monday PM and Tuesday AM.
We also do the same material on Wednesday PM and Thursday AM.

If you have trouble getting to our scheduled hangout due to conflicts with your other classes, I can allow you to come to the other class's hangout.

Be careful to do what makes sense. You can't get credit for coming to Wednesday and Thursday because they cover the same material.

I will send all of you an invite to "our" hangout and the "other" hangout.

Office Hours

I will hold office hours MTW after the hangout for an hour or so, but not on Thursday

I can also have office hours Monday and Wednesday morning, Tuesday and Thursday afternoon, but hours are staggered because of other meeings. Everyone is welcome to come to any hangout or office hours.

I will send you an invite to the three extra office hours session.

Summary


Monday	Office Hours	10:00–11:00 am
Monday	PM Hangout	12:30 am–1:00 pm
Monday	Office Hours	After hangout until 3:30 pm
Tuesday	AM Hangout	8:00–9:30 am
Tuesday	Office Hours	After hangout until 11:00 am
Tuesday	Office Hours	12:30–3:30 pm

Wednesday	Office Hours	8:00–11:00 am
Wednesday	PM Hangout	12:30 am–1:00 pm
Wednesday	Office Hours	After hangout until 3:30 pm

Thursday	AM Hangout	8:00–9:30 am
Thursday	Office Hours	12:30–3:30 pm

Grades update

There has been a change in the due dates for grades.

I need to have all your work by 3:30 pm on Thursday, May 21. I need to enter your grades shortly after that. I can give no deadline extension.

There are mixed messages on how grades work.

Senior grades are due on May 22
Junior grades are due on June 1
State law says all grades are not due until June 3

You can see that this is a mess. This is how it is going to work.

I will post your current grade to the blog early this week. It will not have your name, but your ID number.
I am going to post your final grade "to the computer system" on May 21 (Thursday).
After that time, if you grade continues to go up, I can request your grade be changed upward by a paper form (yuck).

The bottom line is this:

Please turn in everything possible by Thursday, May 21 at 3:30 pm.
Then continue to work toward raising your grade before around June 1.
Don't sweat the deadlines, but do your best to work with me.

Even if you will graduate before June 1, your high school transcripts will not be issued until a little later, so there is still time to bring up your grades for a few days after your graduation.

Sorry about all the confusion. Don't freak out! I look forward to seeing your final projects.

Saturday, May 16, 2020

Making the keyboard disappear

When you make an iOS app (Swift/Xcode) that has a text field for the user to type into, you must make sure you test with the iOS keyboard (the software keyboard that pops up). In the Simulator program, select

Hardware –> Keyboard –> Connect Hardware Keyboard

and make sure it is turned OFF (no check mark).

Hardware Keyboard means the big keyboard on your computer.No Hardware Keyboard means use the little keyboard that pops up on the phone.

The Hardware Keyboard is good for testing that your app can read the contents of the text field. But you also need to test the UI (user interface) to make sure that it allows the user to do everything they want.

This video demonstrates the problem: https://youtu.be/TQjzu8y1F_s

You can use code like this to help fix it:

class WordsViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
        let tap: UITapGestureRecognizer = UITapGestureRecognizer(
            target: self, action: "dismissKeyboard")
        view.addGestureRecognizer(tap)
    }
    
    @objc func dismissKeyboard() {
        // Causes the view (or one of its embedded text fields) 
        // to resign the first responder status.
        view.endEditing(true)
    }
}

Wednesday, May 13, 2020

Flash Cards in HTML

How to make a flash card type app in HTML and JavaScript. This app uses hashes on the end of the URL to indicate which card to go to. It also swaps out both a caption and an image. This is based on the Element Quiz app we worked on previously.

Video: https://youtu.be/mhvSu76ewoA
(About 20 minutes)

Zip file with all code: http://mobileapps1920.svctestudents.org/materials/Elements_Hash_SVG.zip
(On the materials site)

Tuesday, May 12, 2020

Office Hours

Day	Start	End
Monday	After PM Hangout	Until 3:30 pm
Tuesday	After AM Hangout	Until 11:00 am
Wednesday	After PM Hangout	Until 3:30 pm
Thursday	After AM Hangout	Until 11:00 am
Other times	By appointment*

*I need to set up a chat in Google

Monday, May 11, 2020

May 11–15

Assignment 1: Final Checkpoint 2

See the blog post for details.

Assignment 2: Canvas

Post at least three times on Canvas, asking and answering questions.
Topic this week: What problems are you encountering and how are you solving them?

Assignment 3: Linked In

Go to the Linked In web site
Create an account
Search for me
Invite me to connect

Linked In tips:

Use your permanent email, not your school account or metroed.net account, which may expire.
Use a professional email, such as first initial last name, first name last initial, first name last name, etc.

Try to avoid numbers if possible, but if you must, use meaningful numbers, not arbitrary or random ones.
A professional email should not have anything questionable in it, such as profanity.
A professional email should not say anything about gaming in it.
You can easily create a new gmail account with professional standards.
If you have questions about whether a particular email is appropriate, ask me first.

Final Checkpoint 2

Final Project Calendar

Checkpoint	Due Date
Checkpoint 1	Sunday May 10
Checkpoint 2	Sunday May 17
Final Project Due	Friday May 22 at noon (changed)
Revisions	Friday May 29

Checkpoint 2

You need to start coding your final project. Your first checkpoint is due this week. By the end of this week (Sunday, May 17 at 11:59 pm), you need to turn in some code.

For the second checkpoint ...

Your app should be about 2/3 finished. You should be almost finished.
The entire storyboard, including any segues between scenes, unwind segues, navigation controllers, and tab controllers.

If doing an HTML project, you'll want every basic HTML page along with any links necessary between the pages.

Any assets that need to go into your app, such as internal icons for the various screens.

You may use placeholders for graphics and audio that aren't finished yet.

Show me all your data (perhaps in Google Docs or Google Sheets).

A list of birds and their characteristics
A list of words (all languages)
A list of colors (all languages, etc.)

How are you going to represent the data?

In Swift, there could be structs or classes for the data.
In JavaScript, there could be arrays that hold the data.

Ask questions on Canvas if you are confused.

Future checkpoints

The final project is due on Friday, May 22 at noon. Absolute deadline.

Responsive Design

How you can make your HTML web app fit on a phone screen.

https://youtu.be/GahjrqJdpGY

Sunday, May 10, 2020

Folder and Project Organization

Some suggestions how to organize your files and folders for any HTML web project.

Note: Xcode keeps your files organized into folders in its own way, but you still might want to pay attention to the way you organize your Adobe Illustrator drawing and other media files. So you still might find the second half of this video useful.

https://youtu.be/eG_-G3OajLo

10 Things That Take Zero Talent

There's More To Life Than Being Happy

TED talk, 2017

12 Year Old Invents COVID Prevention Device

12-year-old Bay Area boy invents 3-D printed device to limit spread of COVID-19, sells hundreds online

https://www.ktvu.com/news/12-year-old-bay-area-boy-invents-3-d-printed-device-to-limit-spread-of-covid-19-sells-hundreds-online

Saturday, May 9, 2020

Xcode Project Settings

Some of you are turning in projects that I cannot run. Because in the classroom we are using Xcode 11.2.1, it does not understand iOS 13. So you have to set your target to iOS 12. When you do this, you may get some errors that you can fix. So here are some guidelines:

When you create a new project, remember do NOT use ~~SwiftUI~~. Make sure to select Storyboard instead.
Set your target to iOS 12.4 at the latest. Do not use ~~iOS 13~~.
After you change your target to iOS 12.4, you'll get a bunch (around 11) errors having to do with Scenes. iOS 12 does not support Scenes. So you can run the "Fix" on each error. If you run "Fix" on the methods, you'll have to do 11 fixes. But if you run "Fix" on the classes, there are only 3 classes that you'll have to fix.

CSS Styles for Tab Bar Navigation

Someone asked how to put styles on the tab bars from a previous video. This shows how to put borders around your tabs, borders between your tabs, and background colors on the tabs.

https://youtu.be/Rp4Kb6ZbDHY

Element Quiz HTML App

We all made an Element Quiz app using Xcode and Swift. Some have asked how to recreate the screen-to-screen navigation in HTML. This video shows you how. About 20 minutes long.

https://youtu.be/kyrHTjUt5iY

Friday, May 8, 2020

Thinking About Design

These articles about design may help give you ideas how to make your final app better or make a better icon for your app. These articles are easy to read and some have fun graphics. This is not an assignment: it is just for your education.

Logos

1. Paul Rand's Greatest Hits
2. Paul Rand and the Stories Behind the World's Most Famous Logos

3. 50 Creative Negative Space Logo Designs
4. Designer Challenges Himself to Create Logos with Hidden Meanings

Fonts

5. The Top 12 Easy to Read Fonts

Mobile Design Principles

6. The Five Principles of User-Centered Mobile Design
7. How To Build A Mobile App That Engages Users

Single Page Application

How to make a web app that has "sections" instead of pages. The app operates by making the various sections visible and invisible in response to changes in the hash in the URL.

The video: https://youtu.be/BrMY85a-V_g

I had some trouble with this video and I had to re-record the last four minutes. You'll notice a strange splice about four minutes before the end, where everything suddenly changes color.

For text, I just coped some paragraphs out of Wikipedia. The JavaScript code looks like this:

    function showSection(e) {
        if (document.location.hash == "#red") {
            get("red").style.display = "block";
            get("green").style.display = "none";
            get("yellow").style.display = "none";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "pink";
        }
        else if (document.location.hash == "#green") {
            get("red").style.display = "none";
            get("green").style.display = "block";
            get("yellow").style.display = "none";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "honeydew";
        }
        else if (document.location.hash == "#yellow") {
            get("red").style.display = "none";
            get("green").style.display = "none";
            get("yellow").style.display = "block";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "#ffc";
        }
        else {
            get("red").style.display = "block";
            get("green").style.display = "none";
            get("yellow").style.display = "none";
            document.getElementsByTagName('body')[0].style.
                backgroundColor = "pink";
        }
    }

Wednesday, May 6, 2020

Tab Bar in HTML

The video: https://youtu.be/p_VaPsLpyLw

First, I made these three SVG files that I can use for icons.

triangle.svg

<svg width='60' height='60' viewBox='0 0 60 60'
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink= "http://www.w3.org/1999/xlink">

    <polygon points='30 5 55 55 5 55 z' fill='green' />
</svg>

circle.svg

<svg width='60' height='60' viewBox='0 0 60 60'
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink= "http://www.w3.org/1999/xlink">

    <circle cx='30' cy='30' r='25' fill='red' />
</svg>

square.svg

<svg width='60' height='60' viewBox='0 0 60 60'
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink= "http://www.w3.org/1999/xlink">

    <polygon points='5 5 55 5 55 55 5 55 z' fill='yellow' />
</svg>

Then I made this HTML code for the three tabs. Note that the HTML files are red.html, green.html, and yellow.html.

    <div id='tabs'>
      <a href='red.html'>
        <figure>
          <img src='circle.svg' alt='red' />
          <figcaption>Red</figcaption>
        </figure></a>

      <a href='yellow.html'>
        <figure>
          <img src='square.svg' alt='yellow' />
          <figcaption>Yellow</figcaption>
        </figure></a>

      <a href='green.html'>
        <figure>
          <img src='triangle.svg' alt='green' />
          <figcaption>Green</figcaption>
        </figure></a>
    </div>

Of course, the trick is to apply the right styles to all of this.

Note that the tabs are in a DIV and each tab is in a FIGURE. We can put styles on the DIV and the FIGUREs to make it the way we want.

You can position the tabs using ABSOLUTE or FIXED to keep them at the top or bottom of the screen. But you'll need to make some allowances for the rest of the page content to keep it below the tabs (if the tabs are at the top of the page) or above the tabs (if the tabs are at the bottom).

I made some styles like this, and I put them in a file called tabs.css. These styles put the tabs at the bottom of the page. If you want the tabs at the top, change bottom: 0; to top: 0; and margin-bottom: 4em; to margin-top: 4em;

        a { text-decoration: none; }
        div#tabs { width: 100%; background-color: lightgray; 
            position: fixed;
            bottom: 0; right: 0; left: 0;
            padding: 4px 0;
        }
        div#tabs figure { display: inline-block; width: 32%; margin: 0; 
            text-align: center;
            font-family: sans-serif; font-size: 12px; 
        }
        div#tabs figure img { height: 24px; }
        div#content { margin-bottom: 4em; }

Monday, May 4, 2020

May 4–8

Assignment 1: Canvas Discussion Forum

What is your progress so far on the final app?
What are you having problems with?
Do you need help installing Xcode or Adobe on your Mac?
Do you need help installing Brackets and Chrome or Firefox to get started with web coding?
What would you like a video tutorial to help you with?

Assignment 2: Digital Prototype

Use InVision to create a working prototype of your final app. This is more than just the wireframe we started making last week. We will discuss this in Google Hangouts.

Assignment 3: Final Checkpoint 1

Turn in your code and data so far. See the assignment for more details.

Assignment 4: End of Year Survey

This should take 5 minutes or so.

Assignment 5: Google Hangouts

Show up for Hangouts two times this week.
AM class 8:00 am Tuesday and Thursday.
PM class 12:30 pm Monday and Wednesday.

Digital Prototype

OK, you've learned how to create a wireframe using InVision.

Now, you'll learn how to create a working prototype of your app as it will look running on a phone. It's very easy.

Your assignment is to making a working mockup up your final app using InVision and share it with me at mbrautigam@metroed.net. If your final app has a lot of screens (or HTML pages), you can mockup just part of it, but only if your app has more than, say, six screens.

This assignment is due on Sunday, May 10 at 11:59 pm.

Comparison of Prototyping Programs

Terms

Wireframe = draw a low-fidelity sketch using a graphics program or pencil
Digital prototype = a model with working navigation but no real data

InVision

EAB (Employer Advisory Board) want this one
Wireframing and Prototyping are separate and do not connect
Prototyping requires that you import graphics from outside
Use on the web / cloud

Fluid UI

Easy to use
Prototyping and wireframing are done together
Use on the web / cloud

Balsamiq

Easy to use
Wireframing only
No prototyping
Use on the web / cloud

Axure

Download the program on Mac, Windows
Not easy to learn
Expensive
30-day free trial

Adobe XD (Experience Design)

Part of Adobe
Download the program on Mac, Windows
Runs on iPad?
I don’t know anyone who actually uses it

Sketch

Download the program on Mac
Runs only on Mac?

Others

https://medium.theuxblog.com/11-best-prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47

Final Project Checkpoint 1

Final Project Process

Checkpoint	Due Date
Checkpoint 1	Sunday May 10
Checkpoint 2	Sunday May 17
Final Project Due	~~Sunday May 24~~ Friday May 22 at noon
Revisions	Friday May 29

Checkpoint 1

You need to start coding your final project. Your first checkpoint is due this week. By the end of this week (Sunday, May 10 at 11:59 pm), you need to turn in some code.

For the first checkpoint, try to complete the following:

The entire storyboard, including any segues between scenes.

If doing an HTML project, you'll want every basic HTML page along with any links necessary between the pages.

Any assets that need to go into your app, such as internal icons for the various screens.
Start collecting all your data (perhaps in Google Docs or Google Sheets) and think about how you are going to represent the data.

In Swift, there could be structs or classes for the data.
In JavaScript, there could be arrays that hold the data.

Future checkpoints

You'll turn in another checkpoint next week, then the final the week after that. After I've reviewed your final project, you'll have an opportunity to make any necessary changes and get it read to submit to the app store.

End of Year Survey

Please fill out this short survey

https://forms.gle/drqQz491aGaiYsZ76