0

Summer Web Design Class Day 5

Posted by admin on July 24, 2014 in Summer 2014 |

1.  Creating a mobile site/app

We are going to spend the rest of our class focusing on mobile websites and apps!

Mobile sites and apps are designed to be viewed on mobile devices like smartphones and tablets.

Before we create an actual app, we are going to use a fun prototyping tool to create a rough draft of an app:

https://www.fluidui.com/- Open in Chrome

You can either re-create an app you really like or invent a totally new one!

2. Creating apps for Android with MIT’s AppInventor

Today we will use MIT App Inventor to create mobile apps.

Previously, you created mobile apps using a template in Dreamweaver CS6 and you focused on altering the CSS and HTML. With App Inventor, you will use a visual programming editor and will create apps that are a bit more complex than the simple mobile site we made with Dreamweaver. Also, unlike Dreamweaver, App Inventor can only be used to develop apps for Android devices, not for Apple.

We will test the apps you create on the test Droid phone I have and we will also use something new today- the Android emulator. The emulator is a “fake phone” on your computer that you can use to see how your app would look on a phone.

To begin, go here:

appinventor.mit.edu

Then click Invent

At this point you will need to log in using your Gmail information (username and password). If you don’t have a Gmail account you can use my school account.

We are going to do a tutorial together as a class.

Here is the tutorial we will follow:

http://appinventor.mit.edu/explore/content/hellopurr.html

Done?

Check out some more fun AppInventor tutorials you can follow to create another app.

What else to do?

Here is a big list of some helpful app tutorials. If you are interested in learning more about app development for Apple and/or Android, this list is a good place to start.

3.  What if you want to do this at home?

Here are some resources if you want to continue learning:

- Download Notepad++ to use as an HTML editor- http://notepad-plus-plus.org/

- Get other free programs for your computer- http://ninite.com/

- Free photo editor (advanced is similar to Photoshop)-http://pixlr.com/

- Create apps for free for Android devices (you will need a Gmail account)- http://appinventor.mit.edu/

- Check out this list of best resources for learning programming online for free.  Code.org is also a great place to go.  Also see MadeWithCode.com.

- Links to even more cool things-http://www.mhswebdesign.com/cool-stuff/ and http://www.mhswebdesign.com/after-school/

Questions? Feel free to email me at agoldsberry@gmail.com.

4.  Work on whatever you want!

Try some tutorials, add more in Notepad++ to one of your pages (check this out) or try this (both use CSS to position content on your page), work with FluidUI.com, etc.

0

Summer Web Design Class Day 4

Posted by admin on July 23, 2014 in Summer 2014 |

1.  CSS Styling

Let’s do some styling so we can change fonts and colors:

Copy and paste the following into Notepadd++

<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
<style type=”text/css”>
body
{
background-color:#d0e4fe;
background-image:url(dogs.gif);
background-repeat:repeat;
background-position:center;
}
h1
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:3em;
}
h2
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:2em;
}
p
{
font-family:Times New Roman;
font-size:1em;
}
</style>
</head>
<body>
<h1>Big Headline</h1>
<h2>Sub Headline (smaller)</h2>
<p>This is a paragraph.</p>
</body>
</html>

Let’s look at some colors:

http://www.colourco.de/

You can either use a color hex value or name

Another cool color chart

Let’s make our links more interesting!

Styling Links with CSS

The four links states are:

a:link – a normal, unvisited link

a:visited – a link the user has visited

a:hover – a link when the user mouses over it

a:active – a link the moment it is clicked

They MUST be in that order if you’re going to use all of those attributes.

Please copy and paste the following code in your internal stylesheet just before the </style> tag:

a:link
{
text-decoration:none;
color:purple;
}
a:visited
{
text-decoration:none;
color:blue;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
text-decoration:underline;
color:green;
}

Check out the different colors and when you see them- when you roll your mouse over a link, when you click on the link, what the link looks like after you have clicked on it, etc.

Try changing the colors.  Notice they are the color names, not hex values.  You can use either.  See a good color list here.

Try changing the text decoration from underline to none.

2.  Favicons

Finally, let’s add a favicon to our page.  Favicons are the tiny icons that appear on the top left next to a website’s name and URL.

First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width).  To do this open up your image with either Photoshop or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width.  If you want, click here to download the Mustang logo to use (it is a perfect square).

If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.

Again, pay attention to file name and file type.  Save your favicon as favicon.ico and save it in the same place as your index file (your folder on your desktop).

Now that you have created your favicon, step two is adding code to your webpage.

Add this to your head section:

<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>

Once you have done that, save your index file and refresh the browser.  Hopefully you will see your new favicon!

Fun with JQuery

JQuery plug-in’s are a simple way to add some cool functionality to your website.  JQuery is a JavaScript library.

Today we’re going to use a JQuery plug-in to create an interactive photo gallery slider.

What you will need for this lesson:

1- Files from me that include the images and practice code

2- Notepad++

3- A new folder on your computer called JQuery

To begin:

1- Create a folder called JQuery on your computer

2- Get the practice files from me and put them in your folder

3- Open Notepad++

4- Copy and paste the following code into Notepad++

<html>

<head>

<title>JQuery Practice!</title>

</head>

<body>

<p>This will be awesome!</p>

</body>

</html>

5- You can name this jquerypractice.html.  Be sure to save this file in the folder you just created.

We’re ready!

Now:

6- Go to http://www.woothemes.com/flexslider/

7- Copy and paste the code from Step 1 into your head section below the title tags.  This is the code for the slider style sheet and JavaScript.

8- Grab the code from Step 2 and paste it into your body section below the paragraph tags.  You will have to change the names of the images to the ones that you have in your folder.

9- Grab the code from Step 3 and paste it into your head section below your other scripts.

That’s it!

Now:

10- Challenge: either add more images or change the current images to something else

11- Challenge: modify the JQuery to change the slideshow- check out Step 4 and then go here

12- Don’t forget: change the title tag and “this will be awesome”

0

Summer Web Design Class Day 3

Posted by admin on July 22, 2014 in Summer 2014 |

1.  “Clap along if you feel like a room without a roof!”

Need some background noise?

2. More fun with JavaScript- what the heck is going on?

Want to try it on your own?

Open Notepad++

Begin a simple webpage:

<html>
<head>
<title>My annoying webpage</title>
</head>
<body>
<p>This is funny but it gets old fast!</p>
</body>
</html>

Save this as fart.html on your computer.

Click here and see if you can figure out how to add the code to your simple webpage to make it work.

3.  Want to use JS to make a game?

You have a half an hour to make a game!

You will work with a partner.

Go here to begin.

4.  More fun JS tutorials:

http://www.jsdares.com/ (games)

http://codecombat.com/play/level/rescue-mission

https://thimble.webmaker.org/project/59304/remix (robot game)

Build an iPhone game

More game tutorials

5.  Learning more- for free!

Let’s check out this list of best resources for learning programming online for free.  Code.org is also a great place to go.

6.  Hopscotch and Daisy the Dinosaur challenge with iPad

7.  Made with Code challenges

0

Summer Web Design Class Day 2

Posted by admin on July 21, 2014 in Summer 2014 |

Today we will continue to blog and then we will practice HTML and CSS!

1. Interactive Online Timeline with JavaScript

You will create an interactive timeline that will be posted on your class page

Here is my example:

Click on your name below to get started. You will be filling out your own Google spreadsheet to create this timeline.

The most important pieces of information you must fill out include:

- Start Date- the date of the event (example, 7/9/2013, date must be in this format)

- Headline- briefly say what this event is (example, My birthday)

- Text- short description of what the event is (example, I was born today!)

- Media- link to photo or video you are using

When you are done, let me know, and I will show you how to publish your timeline and get the code to post it on your webpage.

Andrew

Audrey

Bryce

Daniel

Drexel

Gavin

John

Kabir

Kevin

Rachel

Milo

2.  Mozilla Thimble exercises

Before we start building a webpage from scratch, let’s try some fun examples to get you used to looking at and editing website code:

https://webmaker.org/en-US

3.  Learn HTML & CSS

What are the parts of a web page?

a.  Start with the basics of building a website and follow these five steps.

b.  Pick apart and build a website for a company (Airbnb). Start here.

c. Do the Code Avenger web design challenge

d.  Let’s all help these kittens!

4.  Coding from Scratch

We will use Notepad++ as our code editor and will preview our webpage in Firefox.

Webpages are created using HTML and CSS. HTML and CSS tell a browser, like Chrome or Firefox, how a webpage should look and how to display its content.

Let’s just code:

Open up Notepad++

Copy and paste the following.  Please note: you must delete any quotation marks from what you paste and add them again.

<! DOCTYPE HTML>

<head>

<title>This is your page title</title>

</head>

<body>

All visible content goes here.

</body>

</html>

Save as index.html

Now we will add text, images, links, and other content.

0

Summer Web Design Class Day 1

Posted by admin on July 20, 2014 in Summer 2014 |

Welcome! This week you will have fun while learning how to create websites, mobile apps, and games!

Getting started:

- We will meet everyday this week 9am-12pm.

- You will have a laptop to use everyday this week. You will use the same one.

- Feel free to bring in a thumb drive to save your work. You can also email yourself the files.

- Feel free to bring in snacks and cold drinks.

- Dress cool each day- it can get warm in here! We do have access to cold water.

Cool video- did you know things you love are made with code?

Let’s begin!

1st- create a folder on your Desktop and call it your name.  This is the place where you will save all of your files for the week.

1.  How about sending an email to your “future self” on the last day of class? What would you say? What do you want to learn this week?

2.  Let’s take a look at some websites we like and mark them up

3.  We are going to use the iPad to create a video about ourselves.  For inspiration, check out the video my high school web design students created at the end of the year.

4.  Fun (maybe useless) sites for inspiration this week!

Find the invisible cow (the louder it is, the closer you are, keep moving your mouse around and clicking!)

Also try:

http://www.koalastothemax.com/

http://www.sanger.dk/

http://chrismckenzie.com/

http://cat-bounce.com/

http://www.ismycomputeron.com/

http://www.wwwdotcom.com/

http://hackertyper.com/

http://www.staggeringbeauty.com/

http://weavesilk.com/

http://the100meterscroll.com/

http://www.rainymood.com/

https://isitchristmas.com/

http://iamawesome.com/

http://www.patatap.com/

Wait- let’s look at the code behind some of these sites to see what’s going on

5. QR codes

QR (quick response) Codes- Have you seen these before or used them? Have you created them?

Everything that you never wanted to know about QR Codes on Wikipedia.

You are going to create a QR code today. Your QR code can link to a message or a website.  Try linking it to one of the websites listed above.

Make one now at this website http://createqrcode.appspot.com/ and we will test it out with the class phone and iPad using a bar code scan app.

Want to make a more interesting, colorful QR code? Try it here.

6. Blogging

What is a blog?

Today you will blog on our class website.

I have created a page for everyone. You will get a username and password to log in.

Your page is located here (Class Pages, Summer Web Design July 2014) at the top of our website.

Today you will add information to your page about yourself and a photo. You can include: where you’re from, languages you speak, food you like, interests, hobbies, activities, sports, talents, life philosophy, family, pets, etc.!

If you are stuck on what to say or do, check out the Class Pages tab at the top of this website to see what other students have done.

Try wigflip.com to make some cool graphics for your page.

Also try pixlr.com to add cool effects to your images.  Try Playful and Efficient.  Advanced is actually very similar to Photoshop.

You are using WordPress, a free content management system that is used by about one in every seven websites in the world! You can enter text and images and WordPress adds the code for you. If you know HTML and CSS, you are able to do the code yourself.

What else do you notice about WordPress?

Copyright © 2011-2014 MHS Web Design All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.2.4.1, from BuyNowShop.com.