by Lindsey Serio

In Fab Lab Camp this week we covered a subject that we haven’t covered in quite a while: Web Design. We gave students a 3 hour introduction to the basics of html completely from scratch (no help from wordpress or anything else, just bare coding) and they caught on super quick! Here’s an overview:

We started with a basic example of the “bones” of the code to show them:

<html>
<head>
<title> SUP PEOPLE </title>
<body>
<strong> SIT AT THE COMPUTER WITH YOUR INKSCAPE/BLENDER FILES </strong>
<body>
</html>

We talked about how if you take the <strong> tags out, the text changes back to an unbolded font.

The kids then opened Notepad++ on the desktop and saved their file. We teach our students to save their file before doing anything else so that they can save time by just pressing the save button later and because it’s standard practice to keep them from losing their work. We let the students name the file whatever they want.

fablabwebdesign3resize

Then we talked about tags and how all html is built with things called tags. Apparently tags are also called angle brackets which I never knew! The kids then typed the following tags into their html file:

<html>
</html>

They opened their html file in Chrome to find that it was blank. One student noticed that the tab at the top of the browser was named their file name. We realized that tags are the parts of the html that builds the file but doesn’t actually show on the website page.  We then opened Notepad ++ again, put the cursor on the end of line 1 and inserted the body tag, which holds inside it the text and images for the website, anything that doesnt dictate the style of the website (which we will get into later).

<html> <- this is the Outermost Tag because it is the first tag.
<body> <- this is the Inside Html Tag becasue it is after the beginning tag, the Ourermost tag and before the end tag.
</body>
</html>

HTML is build like a sandwich, with the html tags as the bread and the images, colors, etc as the sandwich. The class would build more sandwiches inside this sandwich over and over to build their website. Back in Notepad ++ we built more code:

<html>
<body>
Hello World!
</body>
</html>

We saved and refreshed our file to find that the text appeared on the website when we inserted it inside the body tags. We then inserted what are called “P” tags:

<p>Hello World!</p>
<p>Hello Again!</p>

Next it was time to add color:

<p style = “color: purple”> Hello World! </p>

This turned the words “Hello World!” purple.

fablabwebdesign6resize

Then we changed the background color:

<body style = “background-color: yellow”>

We refreshed to find the entire background of the page was yellow. It was hard to look at! Then it was on to a google safe search for any two images that were then saved to the student’s folder. Back in Notepad++ we put the image in our website by using the IMG tag while specifying where the computer should find the image by referencing the images file name:

<p>Hello Again!</p>
<img src = “grumpycat.jpg”>

We then dived into what we can do to manipulate the image. First we made the image the background on the web page:

<body style = “background-image: url (grumpycat.jpg)”

Some students saved png files which changes the file type from grumpycat.jpg to grumycat.png. The code above tiled the image across the web page. Someone introduced the idea of resizing the image to fill the whole web page. We worked on that with the following code:

<body style = “background-image: url (grumpycat.jpg) ; background-size: 100%>

fablabwebdesign8resize

This made once HUGE image of grumpy cat filling up the whole screen! The kids loved it. Next, we went over how to add a link to your website:

<a href = http://makersfactory.com”> This is a link. </a>

This tag is called a hyperlink reference. It references  a link on another site. “This is a link” is what actually showed on our web page. Students linked everything from gmail.com to toocute.com in their web pages.

Then we decided that the font was really hard to read so we coded the font background to be white:

<style>
# box { background – color: white; }
</style>

At this point we moved from working in the P tags to working in the Style tags. Andy explained that anything in the style tags will change everything in the website and is better for organization and faster than changing all the p tags to reflect style changes. Then we changed the P tags to reference the box code:

<p> <div id = “box” > Hello Again! </span> </p>

If we used the div tag the white space extened all the way to the end of the web page where there was no text, so we swiped it out with a span tag.

<p> <span id= “box”> Hello Again! </span></p>

Finally, we added round corners to the font backgrounds to make it look cooler:

#box{background-color: white; border-radius: 5px; padding: 5 px;}

Finally, we changed the font size:

<p> {font-size: 18pt;} 

And centered our text:

P{font-size:18pt ; text-align: center;}

Some students put their image code in the P tags to center the images. Then they had fun changing everything we had taught them in their style section to different colors, sizes and alignments to really make their website their own!

fablabwebdesign7resize

Why Coding Matters.

November 2, 2013

by Andy Stoller

I don’t think there’s anyone left who honestly thinks that computers are still just a “fad;” Ken Olson, president of the now-defunct company Digital Equipment Corp said, in 1977, “There is no reason anyone in the right state of mind will want a computer in their home.”

What Ken lacked in foresight, he made up in chutzpah, but I think the millions upon millions of people who have computers in their homes, their cars, and in their pockets may take issue with being called insane. These days a statement like that would draw quite a few puzzled looks.

So now that we can all agree that computers are pretty much here to stay, and since we’re starting to think of putting them in eyeglasses and sub-dermal implants and who-knows-what-else, I start to wonder why so many people are ignorant when it comes to really taking control of computers.

I mean, everyone knows how to download and play computer games, or send emails and chat with their friends, but when’s the last time you really told it what to do? When have you wanted a computer to do something and reallymade it happen, instead of handing it off to an expert or using someone else’s solution?

The promise of learning computer programming is not the attractive lifestyle of sitting in a tiny cubicle clickety-clacking away in front of a computer screen, or a promise of fame and riches as the CEO of a billion-dollar tech startup.

The promise of computer programming is a promise of agency and control. With these skills, you can be assured that no matter where technology is headed, you’ll have a hand on the steering wheel. It promises that no matter who you buy your computerized tennis shoes from, you’ll be the one who gets to decide how they work.

It’s likely to be a life-long process of learning, as old technology is replaced and improved upon, and each iteration abandoned; but you’ll be able to keep up, knowing that you are not a passive subject, but an active participant in the tech revolutions of the future.

Check out our new programming class starting up this Wednesday, November 6th from 3:30-5pm for ages 9+.

DETAILS:ETE_LOGO
Day: October 16th is our first Kick-off meeting
Place: MakersFactory space in downtown Santa Cruz, 877 Cedar Street, Suite #122
Time: 6:30-8pm
Cost: FREE! Includes light supper!
Sign-Up: Email krissie@makersfactory.com to reserve your spot today. Space is limited.

The Engaging Technology in Education meetup is a forum to bring local Santa Cruz County educators together to discuss technology in education, and not just how to use technology in education, but use it effectively, putting it to work in ways that enriches the learning process through unique and powerful experiences.

Started by the MakersFactory in downtown Santa Cruz, we’re looking to connect with administrators, teachers, home school parents, researchers and enrichment coordinators from private and public institutions, big and small. We hope that by bringing together a diverse group of educators we’ll be able to share technological challenges, needs and experiences; find better resources for classrooms; develop best practices and make our local educational offerings more powerful and compelling through the intelligent implementation of computers, hands-on activities, games, maker inventions and modern manufacturing practices (like 3D printing).

Topics will include: “The Gamification of Education”, “Flipping Classrooms”, “Publishing Student Work”, “Setting up a Fab Lab at Your School”, and “How to Integrate Multimedia Sources to Support the Common Core” and much more!

Why is MakersFactory hosting an educational meet up?

Since its formation two years ago, MakersFactory has been at the forefront of technological innovations, bringing 3D printing, laser cutting, animation, 3D scanning, 2D design, 3D modeling and rapid prototyping to Santa Cruz county. With such advanced machinery, however, came the need for educational offerings to teach the public how to operate the new equipment. We quickly discovered that one of the most receptive audiences happened to be students aged 8-12 so we changed our business model and began a quest to discover the best hands-on, interactive, fun and educational lessons to bring to our camps, classes and workshops.

Word spread about our robotics, electronics, programming, animation, modeling and game-making classes and soon various schools were contacting us about bringing enrichment programs to their sites. We began these partnerships to meet immediate educational demands but also wanted the opportunity to step back and discover together a comprehensive vision to unify our community and meet the rigorous demands of the 21st century. We think this gathering can help us accomplish that goal. Together we can learn from each other’s mistakes and successes and be more agile in meeting the educational needs of all our students. If you share our passion, join us for some cutting-edge brainstorming at the Engaging Technology in Education Meetup, every third Wednesday of the month.

First Friday 4 The Girls

September 27, 2013

It’s time for another evening together to celebrate that sweet spot where art and technology merge. For Santa Cruz’s next First Friday on October 4th, we’ll be featuring award-winning art educator Kathleen Crocetti, a local community mosaic muralist (her students’ work is displayed on numerous Santa Cruz bridges) and creator of the fashionTEEN event. The […]

Read the full article →

High-Tech + Hands-On = Saturday Workshops

September 27, 2013

Saturdays just got a whole lot more fun. And by fun, we mean interactive, collaborative, educational, hands-on activity-based fun using the latest technology. Activities like “Interactive Animation using Scratch and PicoBoard” (this Saturday’s class) or “Introduction to 3D Animation” using Blender (next Saturday). Workshops that will blow your mind they’re so riveting! Workshops that are […]

Read the full article →

The Magic of Minecraft

April 17, 2013

You know your kids love it, but what’s really behind their fascination with Minecraft? Joe explains a little about the magic he saw during his spring Minecraft camp: Minecraft Hey folks!  This is Joe Allington, and I’m a teacher, technician, and designer at MakersFactory.  A week ago, I led one of the first two sessions […]

Read the full article →

MFY: Featured Works

December 19, 2012

Among the busy events we have been putting on, we managed to snap some photos of some of our holiday themed projects. We put some filters on the images this time to make it easier to see the detailed outlines of each laser cut project.      

Read the full article →

MFY: Featured Works

December 6, 2012

It’s a busy week here at MakersFactory. We are getting ready for DIY First Friday tomorrow. Since we turned one year old in November we will be showcasing Bathsheba Grossman, who has been with us since the beginning. We are also happy to announce that we have some of Bathseba’s items for sale in our […]

Read the full article →

MFY : Featured Works

November 28, 2012

So how small can we print on the extrusion printer? Obviously, the subject would have to be zombies. Turns out we can print pretty dang small!    And have you checked out our new samples? We can now make objects in high detail acrylic, full color, aluminum, nylon and stainless steel!  

Read the full article →

MFY: Featured Works

November 21, 2012

This week Jurgen has been working on building a lamp. We printed the shade for him on our 650 powder printer. Look for future pictures of the finished piece!    

Read the full article →