Educator Technology Wall

Web Project Peer Review

iulian — Fri, 10 May 2013 01:14:42 +0000

This post is for the ninth graders who finished their webpage using HTML and CSS during an introductory CS class scheduled once a week.
These are all the webpages submitted so far. You can click on each page to preview the project but your review needs to include the evaluation of the presentation as well.

Young designers List

Student Webpage Review and Evaluation

iulian — Sun, 28 Apr 2013 20:33:38 +0000

Peer review and evaluation 9A Flatiron

iulian — Sun, 28 Apr 2013 18:58:07 +0000

This post is for the ninth graders who finished their webpage using HTML and CSS during an introductory CS class scheduled once a week.
This post has all the webpages submitted so far. You can click on each page to preview the project but your review needs to include your evaluation of web pages presented in class.
Your task today is to listen to the presentations of the webpages in class and grade them on the attached sheet on edmodo. When you have finished grading them, turn in the file on your edmodo account.

Grade my webpage

iulian — Sun, 14 Apr 2013 20:17:56 +0000

This post is for the ninth graders who attempted to code a webpage using HTML and CSS during an introductory CS class scheduled once a week.
Your task today is to listen to the presentations of the webpages in class and grade them on the attached sheet on edmodo. When you have finished grading them, turn in the file on your edmodo account. Also, you can review each project by clicking on the links below.

Vicenzo’s webpage

Anastasia’s webpage

Ellen’s webpage

Janey’s webpage

Jamice’s webpage

Kaylah’s webpage

Athena and Raisa’s webpage

Dandre’s webpage

Luis’s webpage

Nora’s webpage

Jarrett’s webpage

Jewel’s webpage

Carmen’s webpage

Grace and Elena’s webpage

Jade’s webpage

Madison’s webpage

Logan’s webpage

Intro to Web Design and Development

iulian — Tue, 22 Jan 2013 02:09:28 +0000

This post is for the ninth graders at SOF. Next semester, we’ll start a new unit on Web Design and Development and you will have the opportunity to code for the web and build webpages and web apps using HTML ( HyperText Markup Language), CSS (Cascading Style Sheets) and JavaScript. This is the holy trinity of the web that’s used for building any website nowadays.

You will not use special software nor manipulate programs that does the work for you; you will create clean and consistent lines of code from scratch using open source programs. The code is free and available for you to play with.

That’s what many today’s tech giants did in their middle and early high-school years, play with the code in its various forms. For example, Mark Zuckerberg began writing software in his middle-school years in NY and his father would hire a guy to tutor him programming privately! Others like Steve Jobs and Bill Gates were very attracted to electronics and programing since an early age and at the age of 13, Bill Gates is reported to have been excused from Math classes to pursue his interest in learning and developing games using programming languages like BASIC.

HTML and CSS are not core programming languages but provide a nice foundation and easier intro into programming with JavaScript or any other programming language. HTML is responsible for the structure of the website while CSS helps with the presentation and the look of it. You can’t do one without the other, it’s like each represents the other half of a whole.

Respond to this post with comments and suggest topics that we can use with our code when building webpages. When we build the code we’ll also need to have interesting content so I’ll start with some ideas that cross my mind right this moment: building a social networking profile, building a personal webpage, creating an auto dealership of your favorite car, building web forms, login text fields, etc. Fell free to add yours below.

Recommended DOCTYPES for websites

iulian — Tue, 18 Sep 2012 01:43:04 +0000

When you author an HTML document, it is essential that you add a Doctype declaration or better said, the proper Doctype declaration. The latest doctype for HTML 5 is available for us to use now but if you use an old computer with old browsers it might not work properly. This is exactly what happened to some of my students in the school’s computer lab the other day. Alternatively, here are some other Doctype declarations recommended by W3C, the institution that develops protocols and standards for the web.

So, here are some common doctypes below. Choose one to put at the top of your webpage, just copy and paste it.

For HTML 4.01.

Strict

Transitional

For XHTML 1.0

Strict

Transitional

HTML 5

Design vs. code. How Not to Get Started in Web Design

iulian — Mon, 03 Sep 2012 15:22:30 +0000

If you’ve been seriously thinking about creating websites but are not sure where to start, then keep on reading. In this post I will share some ideas you should consider when picking a text editor for learning HTML, CSS and JavaScript. There are many paid and free resources available to you on the web. For example there is lynda.com, an online learning library with lots of tutorials for aspiring and seasoned web designers.

If you prefer to go to a face-to-face training, you can head to Noble Desktop in SoHo, their newly-redesigned website is http://nobledesktop.com. Or, if you want to use a book, there are some good books out there such as ‘Head First HTML with CSS & XHTML’ from o’Reilly but there are some others.

Regardless of where you start, you will first need to get your hands ‘dirty’ learning HTML and CSS using a text editor. And here’s my take on how not to dive into your new experience. Do not learn those technologies using a graphic text editor or a WYSIWYG (What You See Is What You Get) type of editor.

Many reputable places, including the first two mentioned in this post, offer plenty of resources on learning HTML and CSS using the graphic interface of Adobe Dreamweaver. They don’t specifically advise you to start your learning this way but they offer plenty of courses that rely on using the graphic interface of an editor and, hey, you are new and probably see no problem in following this path.

Don’t get fooled, while it might be even a little easier to use such a program you actually allow a third party interface in the process. That graphic text editor may provide you some help when designing but, hey, ONlY if you use this specific program. And would you want to master HTML and CSS but only if you use that program?

It is much better if you start learning the code using a simple text editor and once you get down on it, you can choose any text editor you like. When you learn how to code it doesn’t really matter which coding editor you use because they all have in common the same interface with similar features.

I believe everyone who attempts to leave a mark on the web should code because this is the only way to have 100% degree of control of your work. The era of designing with the visual interface editors such as:Dreamweaver or FrontPage is long gone.

Examples of text editors are: Notepad, NotePad++, for Windows, TextEdit, BBEdit, Textmate, Coda for Mac, Aptana Studio for both platforms, etc.

What you ‘like’ may bring more money for Facebook

iulian — Fri, 01 Jun 2012 20:00:55 +0000

Usually, I don’t pay attention to the advertising column on my Facebook page. I couldn’t care less about the ads, there can be anything there because I use Facebook to stay in touch with my friends, check out the news feed and photos. However, lately Facebook has introduced a new trick that makes me look there and acknowledge the presence of what is on this column.

In the ad column I can see know who ‘likes’ what and the ‘like’ button to like it myself. I was wondering if we realize that Facebook uses us for marketing purposes and we may not be fully aware of this. I ‘like’ the Facebook page of some companies so this means that these companies appear on my network pages endorsed by my ‘like’ in the ad section. Hmm…

Do you ‘like’ stuff on Facebook? Why do you ‘like’ it? People ‘like’ things for many reasons, sure. Some companies give out free stuff or useful info… But you need to know that what your friends ‘like’ will likely appear on the ad section of your pages. This way, you may be tempted to follow the crowd and ‘like’ it too.

On the other hand, this is tricky. Facebook aims at blurring the line between the marketing and the usual use of Facebook. The links and ‘likes’ we post on Facebook may be used for marketing purposes to generate more ad revenues for Facebook. The brilliant idea here, from the marketing perspective, is that there is no creative story involved but just an endorsement of a commercial product by you or your friends. And this can be more powerful than any traditional advertisement.

Is there a way to stop your ‘like’ from appearing on the ad section? Yes, there is. If you go to Privacy settings and then edit settings for ‘Adds, apps and websites’ you can see at the bottom ‘edit setting’ for ads. Then you would click ‘Edit social ads setting’ and here you can choose not to have your ‘likes’ appear in the sponsored ads column.

What are your thoughts about this? Do you feel OK with Facebook displaying your ‘likes’ in the ad column?

CSS posters? Go for it!

iulian — Mon, 30 Apr 2012 01:30:34 +0000

The images that you see here represent posters achieved entirely using lines of HTML and CSS code. You can craft such visuals directly in the browser with no need for a digital tool such as Photoshop, unless you want to create a mock version first.

The Web

Video killed the radio star

Teach by day,

design by night

Education

all

a matter

of building

bridges

Ralph Ellison

These are some not so complicated or complex examples but the idea is that you can do such thing with code. This is not a replacement for what you can achieve with the regular digital tools but it’s a new and interesting way to deal with visuals on the web. This is definitely a way to push things forward, experiment and play with CSS3 capabilities.

Disadvantages? You can’t compete with an image achieved in Photoshop and if coding is not your strength then it may not be an option.

Advantages? Well, you work directly in the browser and I’m sure the browser loads faster. Also you can achieve specific effects inside the image such as: changing color when hovering or some animation that otherwise you can’t produce. (unless you use Flash).
If you’re just starting out with CSS, then I highly recommend this type of play to learn the beauty of CSS and come up with something interesting and original. See below some examples, tutorials and advice form the web design community.

More Resources

Design Informer
Nicolas Gallagher
Boag World

How I got a computer virus from Google images

iulian — Sun, 11 Mar 2012 01:20:10 +0000

If you have a Windows based computer you probably had a computer virus before. This has happened recently in my computer lab in the school I work at. One of my students clicked on an image on Google images and her computer began acting slow. Suddenly, lots of notifications constantly were popping up in the status bar. “You have a Trojan virus”, ‘The computer is infected with a worm”, kept showing at the bottom of the screen. Additionally, there was this new icon on the desktop that looked like a shield with no name.
Phew…

So, then I started troubleshooting. The first step, as you may have guessed, was to run the antivirus software in the computer. But Symantec did not want to open at all. At the time, the antivirus was stopped from running by this virus. Instead, the other application with an icon like a shield offered to scan and diagnose my computer. As I clicked on it there were tons of virus notifications popping up and then a link that asked to activate the Full version. I also attempted to use the System Restore but it did not work, either.

So, then I quickly decided to reboot the computer and get into the safe mode of the computer using F8. From this point I managed to restore the computer to an earlier point using System restore and all problems were solved. Symantec completed a full scan and did not detected any virus while everything else worked like before. Wow!