Friday, September 30, 2011

Graphic Based Website Phase 1: Flowchart

Hello Students,

One of the first phases to any successful website development is creating a flowchart. A flowchart is a visual organization tool to help you map out the many pages, content and flow of your site.

A flowchart is a type of diagram that represents and algorithm or process. By drawing boxes and connecting them with arrows we create a diagrammatic representation that shows step-by-step how a user would navigate our website.

There are many different types of flowcharts, and each type has its own language of boxes, arrows and other notation. The two most common types of flowchart elements are:
• A rectangular box, usually called an activity
• A diamond shaped box, usually denotes a decision

For our flow chart we will use mostly boxes, with connecting arrows to simulate the floor plan of our website.

You assignment is to create a flowchart for your next project, a graphic based website. This can be a mirror of your previous html project. Use Illustrator or Photoshop to draw out your flowchart, label it and make sure your website flow looks optimal.

Your flow chart should show:
Home Page
Contact Page
About Page
Etc...

Have fun!

- Mr. W

Wednesday, September 28, 2011

New Assignment: Make an animated Gif

Hello Students,

Making an animated Gif is super easy. You can make fun simple animations with ease, create one to add to your blog. Make sure you display the image at 100% or

How to make an animated Gif with Photoshop CS5:

  • Launch Photoshop
  • FILE / OPEN a new document at your desired size, I made mine at 200X180 Pixels. It's a good idea not to make Gif files too large, otherwise they can take along time to load over an internet connection.
  • Your animation can be a series of images, photos etc. You can hand draw each frame the animation also. The key is to set up separate layers that you will turn into frames of animation.





  • Go to the WINDOW / ANIMATION palette and set up your frames across the timeline. Drag the ends to begin and end a frame. Use the play button to watch the animation.






Go to FILE / SAVE FOR WEB AND DEVICES to export your animation as an animated Gif file. Make sure to set your looping options.



Open your Gif file in a web browser to test it. Here's my result:



- Mr. W

New Assignment - Pixel Art Icons

Students, you new assignment is to create 2 icons. I recommend using the pencil tool and paintbucket tool for this assignment. You can draw/trace your icon art from an image or create original art. Your artwork must be made with aliased pixels, so avoid any soft-edged tools like the paintbrush or any soft brush settings. The pencil tool is the best to use for this project, as it draws only hard-edged pixels.

Your assignment specifications:

  • You must draw the icon art using non-contiguous pixels (otherwise known as aliased pixels)
  • You must create 1 icon at 64X64 pixels
  • You must create 1 icon at 32x32 pixels


When you are complete you may post your results to your blog. Check out the icon art from last semester: This is due at end of class today...



Ok, Have fun!

- Mr. W

Tuesday, September 27, 2011

Understanding Pixels and Graphic File Formats

 Hello Students,

Having an understanding of pixels and file formats lets you know when to use certain types of formats depending on the image style and subject. This is important for web development where we want our images to look as good as they can with as small a file size as possible...

Alias vs Anti-Alias Pixels Explained:
In Photoshop and other bitmap/pixel based programs, Anti-Aliasing is used to give objects a smooth appearance when viewed on screen, it averages the pixel colors to create a smooth transition.

Aliasing is when graphics lack that smoothing, and we can see jagged edges to the object, or "Jaggies".



Contiguous vs Non-Contiguous:
It is important to understand the difference between contiguous and non-contiguous imagery, because different image compression formats are best used for certain types of images.

Contiguous images have subtle color changes from one pixel to another, such as photograph's, paintings, hand drawn sketches or any graphics with a lot of gradients. The JPEG compression codec is best for these kinds of images, that is why most digital camera's save images in the .JPG format.

Non-Contiguous Images have large areas of flat color, shapes and lines. These can be photo's that have been converted to 8-bits, or graphics drawn without anti-aliasing.



Graphic File Formats Explained:
There are a lot of great ways to get confused while using computers - and one of the best is figuring out graphics file formats. As with so many areas of computing, standards for graphic files are great because there are so many to choose from.

They're all different and incompatible, of course, but many programs can load and/or save a wide selection of file formats. By and large, you can tell what kind of file you've got by looking at the suffix - the letters, usually three, after the dot in the filename, otherwise known as the file extension.

Better graphics software actually looks at the file data to determine what kind of file it's dealing with, but Windows software is shamefully deficient in this regard; rename happyface.psd to happyface.jpg and it's likely that the file will become unreadable on any computer.

Below is a list of all (or almost all) graphic file formats... The ones we will use the most are JPG, GIF, PSD, AI and PNG....

ADI - AutoCAD's Device-Independent Binary Plotter Format, a vector format generated by AutoCAD.

AI - Adobe Illustrator's metafile format, which is actually a flavour of Encapsulated Postscript.

AWD - Microsoft Fax At Work format, a black-and-white (one bitplane) format for storing fax images.

BMP - This is the Microsoft Windows bitmap format, also used in OS/2. It's a fairly compact (compression is optional, but usually turned on) format for images up to 24 bit. BMP is the native bitmap format for the Windows environment.

CALS - Computer Aided Acquisition and Logistics Support Raster Format; a longwinded, seldom-seen military-spec two colour document storage format. Used in Pentagon archives, and that sort of thing.

CAM - Casio Camera, the native file format of Casio's QV-series digital cameras.

CGM - Computer Graphics Metafile, an American National Standards Institute/International Standards Organization metafile format for images of pretty much any kind.

CLP - This is the format you get when you save a file from the Windows 3.x Clipboard. It is very, very large, and very very, inefficient - and, what's more, you can only view a CLP file if you're in the same resolution as the person who made it, and are using the same number of colours. CLP is an image format that should never be allowed to touch a disk. Do not use it.

CT - The most popular of the Scitex image formats, Scitex Continuous Tone images are very large and intended for use with Scitex's professional film-printing units, which produce high-grade output for publication.

CUT - The orphaned 256 colour format used by the old Doctor Halo paint program.

DIB - This is an orphaned Windows image format. It stands for Device Independent Bitmap and was part of Microsoft's Great Plan for Windows 95; the DIB code in Win 95 is designed to simplify the creation of display drivers for new video cards by doing most of the grunt work in the operating system instead of in the driver. DIB never really took off.

DLG - Digital Line Graph, a vector format for storing geographical data.

EPS - Encapsulated Postscript is a flavour of Postscript (see below) which can be included in other documents - if your software supports it.

FPX - The FlashPix format, codeveloped by Hewlett-Packard, Kodak, Microsoft and LivePicture Corporation and now an open format administered by the Digital Imaging Group. Kodak uses it in all of their digital cameras from the DC200 onwards. Flashpix's chief claim to fame is that it stores images in multiple resolutions, so a huge, high resolution image can be quickly displayed in miniature on-screen and changes made rapidly to the displayed data only, saving the CPU-grinding full processing for whenever you actually view or output the high resolution version. Of course, this only works if your image editing program supports it, and is not useful for small images. FlashPix images can also be used for Web graphics, because the server only has to send the data being viewed (which seems to the browser like an ordinary JFIF), but since FlashPix doesn't support progressive display like JFIF or GIF or PNG, it hasn't achieved much popularity. FlashPix also has no zero-loss compression option - it either uses no compression at all, and makes a vast file, or uses medium-loss JPEG-type encoding. This makes it a clumsy format for professional use, since lossy compression is a no-no for image editing.

GIF - Graphics Interchange Format (the acronym's officially pronounced "JIF", by decree of the format's creator) is a very efficient, and still quite popular picture format. There are two "flavours" of GIF, the old 87 and the newer 89a. 89a adds several extra features like transparency (so background graphics can "show through" the GIF in places) and animation. GIF animations are a very - some would say excessively - popular form of Web multimedia, because they're small and display on all current graphical browsers without needing a special plug-in or taking up much CPU time.

Unfortunately, GIF pictures can only have 256 colours, or 256 shades of grey. 256 greys is photo quality so GIF is fine for any monochrome image, and 256 colour looks OK for many pictures, but it's no use for professional imaging.

GIF images can also be interlaced, so that you can see a low resolution version of the picture before downloading very much of it. GIF interlacing has four passes, which show one out of every eight lines, then another eighth of the image, then another quarter, then the remaining half. GIF is a data-stream type format, like JFIF, so you can view partially downloaded images whether or not they're interlaced - without interlacing, a 25% downloaded picture gives you the first 25% of the lines, starting at the top.

HRF - Hitachi Raster Format, an obscure, proprietary, one bitplane format used for storing scanner data.

IFF - This is Electronic Arts' Interchange File Format, and is the image format used by Amiga and Atari ST personal computers. There are multiple IFF formats, but by far the most popular are the image and sound file ones. A file with the .IFF suffix may, therefore, be a sound, not a picture - and it might be any one of a number of other types of data. IFF images may also, uncommonly, have the suffix .ILBM, for InterLeaved BitMap, or just .LBM on DOS-based systems.

IFF pictures are not at all efficient, spacewise, but they're fast to display, which was important for poor little Amigas with a 0.7 million instruction per second (MIPS) processor. With current PCs steaming along at hundreds and hundreds of MIPS, this no longer matters at all.

IFF is peculiar in that it has two odd variants - HAM and HAM8. HAM stands for Hold And Modify, and is a technique the original Amiga designers came up with for getting 4096 colours from hardware which, traditionally, can only display 32 at once. HAM8 is the updated version, which displays 262,144 colours on 256 colour hardware. No non-Amiga computer can display HAM images exactly as they're meant to be seen, but some conversion programs can display them as 256 or higher colour images. If your display program isn't smart enough to do this, it'll assume it's loading an ordinary 32 or 256 colour image and give you a distinctive multicoloured porridge on screen. There are some very strange IFF variants which use whole different palettes on every line; pray you never meet one.

All IFF images can be compressed or uncompressed; just about all are compressed. The compression, like the whole format, is built for speed, not efficiency, and so doesn't reduce the size much.

IMG - This is the format used by the old GEM Paint program; it only works in 256 shades of grey.

IMG - See "PIC".

IMJ - A proprietary variant of the JFIF format created by Pegasus Image Corporation.

JBG - Also suffixed JBIG, this is the Joint Bilevel Image Group's data compression and transmission format.
JBG is a way of sending one-bitplane document images so that a low resolution version arrives first, then extra data to "fill in" more and more detail. Not an image format as such - a JBG "file" is just a JBG data stream dumped to disk.

JFIF - The JPEG (Joint Photographic Experts Group) File Interchange Format, commonly called JPEG and with the filename suffix .JPG, can be the most efficient image storage method of all - at a price. First to the name. Everybody might call these images JPEG, but that just describes the type of compression used for the data; it doesn't describe how the compressed data is sorted and stored. Calling JFIF "JPEG" is like calling a Ford Falcon "internal combustion".

The idea of JPEG is that as it compresses the data it throws some of it away - technically, this is called "lossy compression". You can configure how lossy you want your JFIFs to be (well, you can if you're using even a slightly well written JFIF saver); 100% quality gives you almost exactly the same result as the original picture but also gives you a gigantic, uncompressible file. 10% quality takes up much less space but looks dodgy. You have to strike a balance.

JFIF can store up to 24 bit colour, so it's suitable for professional use, and it can do interlaced display like GIF (called "progressive" JFIF), which along with its small file sizes makes it the standard format for Web graphics. Like GIF, JFIF is a data-stream format - you can view images before you've got all of the data. Also like GIF, JFIF supports interlacing.

The JFIF format also supports CMYK (process colour - Cyan, Magenta, Yellow and blacK in a subtractive colour model, as against the additive Red, Green and Blue more commonly used) images, which makes it suitable for use in publishing applications. CMYK this support was added in a later version of the standard, though. This means that quite a few JFIF display applications, including Web browsers, do peculiar things when fed CMYK images. There's no reason to use CMYK JFIFs unless you're sending the image to a CMYK output device, which a monitor definitely isn't. Usually, CMYK ones get through because someone's converted a CMYK image of some other format, like TIFF, without changing the colour model.


JPG - See JFIF and SPF.

LBM - See IFF.

MacPaint (3k) - Usually suffixed .MAC, this is the format used by the ancient original black and white Macintosh paint program. Two colours only, 576x720 resolution only, thankfully rare.

MNG - The proposed Multiple Network Graphics (pronounced "ming") format is a multi-image extension of the existing PNG format - or it will be, if it ever makes it out of the design stage.

MSP - Microsoft Paint was the early PC answer to MacPaint, and its format is just as boring. Two colours only.

PCC - see PCX.

PCD - Kodak's PhotoCD was going to set the world alight, with happy snappers having their film scanned and the high-resolution images written to CD, to access via PC or special PhotoCD players. Amazingly, it turned out that nobody was very interested in viewing their photos on their TV, and PhotoCD flopped miserably in the consumer market. It survives as a somewhat popular professional image storage format; a genuine PhotoCD has a particular directory structure containing the images, stored in five resolutions. An ordinary PCD file can be read by any application that can read the format, but unless it's on a CD with the right structure, a PhotoCD player won't recognise it.

The PhotoCD storage process is proprietary to Kodak, who no longer sell the software to make full multi-resolution images.

PCX - The ZSoft Paint format, occasionally suffixed .PCC, is ancient but still fairly widely used, simply because everybody understands it. There are three common versions, 0, 2 and 5; 0 is the original two colour one (small but not useful), 2 only does 16 colours and is hence also of little interest to owners of rather old video cards, and 5 does 24 bit. All are large for what they do, but fast to load on elderly computers. PCX is the IBM equivalent of Amiga IFF. The size listed is for v5, at full 24 bit; v2 scored 216k and v0 48.1k.

PIC - A few proprietary (one company makes software that supports them, and nobody else does) image formats use this suffix. They are not interchangeable. Some programmers need a good slapping. PIC is most likely to be the 256 colour format of the old PC Paint program, but it might also be a Micrografx Draw! vector file, a Lotus vector file, a Pegasus Imaging Corporation image file or an image file for General Parametrics' Video Show Film Recorder.

PICT - Pict is the all-in-one Apple Quickdraw metaformat. It can include bitmapped or vector images, and can use different compression schemes.

PNG - The Portable Network Graphics format, pronounced "ping", was created as a free replacement for GIF, whose LZW compression is owned by Unisys and which can't be included in commercial software without paying license fees to the owners. It handles 1 to 48 bit images, and is a lossless, well-compressed format like GIF. It still isn't very popular, though.

PS - Adobe Systems' Postscript isn't an image format, per se - it's a page description language, originally conceived so computers could send very accurate page descriptions to the then-new high resolution laser printers. You can save black and white or even colour pictures as Postscript, but you'll end up with a very large file. Postscript is not a very efficient format, but its advantage is it's all plain text - you can modify a Postscript file with any text editor, if you know what you're doing.

PSD - Adobe Photoshop's native format, which stores all of its layer and selection and miscellaneous other image data.

RAS - This is SUN Raster format, the default image format for monster SUN workstations. Only lighhtly compressed and so a rather large format, but it supports up to 36 bit images.

RAW - This may be a Photoshop RAW file, which is a PSD file with no identifying header. Or it may be a minimally formatted image data dump - see PIC.

RGB - See "PIC".

RIX - The orphaned bitmap format of the old DOS ColoRIX paint program.

RLE - This is an antique CompuServe or Windows Run Length Encoded compressed image format, which only support 256 x 192 black and white images.

RTF - Microsoft's Rich Text Format, which is normally used as a well-understood cross-platform word processing document format, but which can store pictures as well as text. As image storage formats go, though, this one's as bloated as Postscript.

SPF - SPIFF, Still Picture Interchange File Format, the "official" International Standards Organisation Joint Photographic Experts Group (ISO JPEG) image format defined in the recent Part 3 extensions to the JPEG standard. SPIFF offers more features than the current JPEG standard and is backwards compatible (a JFIF decoder can understand most SPIFF images), but has not yet achieved much popularity. SPIFF files may also be suffixed .JPG.

TGA - The real name for this format is just plain "TGA" or "Truevision File Format", but a lot of people call it "Targa", after the Truevision video card that first used it. There's a lot of this name confusion in image file formats. It supports 1 to 32 bit images and professional features like an alpha (mask) channel, gamma settings and a built-in thumbnail image.

TIF - TIFF (to give the full acronym) stands for Tag Image File Format; many people say Tagged for the first word, which is technically incorrect but minimally important. TIFF was a large, unwieldy, 24 bit format until version 6 came out, which supported compression and made it less painful. Mind you, the fact that its compression was somewhat broken and might or might not be compatible with different programs on different computers somewhat reduced the bonus, and the further fact that the compression is LZW and thus owned and licensed out by Unisys (see GIF) is another pain. TIFF is, nonetheless, a very popular professional graphics format.

WMF - This is Windows Metafile format, which is an intermediate vector format for Windows programs to use when interchanging data and, generally speaking, should never be seen anywhere else.

WPG - This is the WordPerfect metafile format, used by WordPerfect software on various platforms. It supports bitmapped, vector and Encapsulated Postscript data.

Original
Gif High Quality

Gif Low Quality
JPG Low Quality

JPG High Quality
PNG-8 Low Quality

PNG-8 High Quality
PNG-24

Sunday, September 25, 2011

Introduction To Dreamweaver

Hello Students,

This week we begin our introduction to Dreamweaver, a powerful website creation program, often referred to as a WYSIWYG editor, as in "what you see is what you get". This program operates much like a simple graphic/text editing program and creates html code behind the scenes. We will begin by getting used to the interface and move on to creating rich graphic based websites.

With our previous assignment we created text files, change them to HTML and wrote text that we formatted with HTML tags, all by hand. Now we have a program that will write the HTML tags for us!



When we create websites, we refer to text, images and graphics as elements. The windows and menu's in DW are there to help edit, transform and stylize those elements.

Toolbar:
The toolbar contains shortcuts to preview (preview/test your page in a web browser) and display features. Here you can specify the title of your page. You can also switch between Code View, Design View and Split View.

Menu Bar:
Aside from containing the standard menu's for saving, editing, etc... the menu bar contains many of the commands available in other pallette's.

Insert Bar:
Shortcuts for importing/inserting different elements.

Properties Inspector:
Also called the Tag Inspector, shortcuts for formatting text, document settings such as colors, background images, alignment etc.

Document Window/Panels
Document window provides an explorer type window for setting up, organizing and creating website elements. File organization, file naming conventions and clean site creating is very important. Advanced functions are accessed through other panels, such as CSS (Cacading Style Sheets) settings.

Get familiar with DW's interface, test all the features you can find and share your discoveries with your neighbors.

Introduction To Dreamweaver Assignment:
Create a single HTML page with dreamweaver that shows the following elements:
  1. Email Link
  2. External Link
  3. Examples of all Header Sizes
  4. Colored Background
  5. Colored Text
  6. Paragraph Text Formatted Left, Center and Right alignment
  7. Ordered List
  8. Unordered List
  9. Embedded Image
When complete, zip your files and email to me at swilson@santacruz.k12.ca.us

- Mr.W

Thursday, September 22, 2011

Photoshop Skills Continued - 3D Pixel Stretch Effect

Hello Students,

Photoshop skills are incredibly important in web design. Being a strong designer is equally important as having strong programming, web and e-literacy skills. Soon we will be designing an entire website with Photoshop.

Your next assignment is to work through this tutorial:

Tutorial - 3D Pixel Stretch Effect

For Extra Credit, work through this tutorial to add texture to your 3D Pixel Stretch Image:

Tutorial - Add Visual Texture in 3 Easy Steps


When you are finished, please post your results to your blog...

 - Mr.W

Tuesday, September 20, 2011

PS Skills Continued: Advanced Selection Tools

Hello Students,

Today we continue our photoshop practice, the main tool in our CS5 arsenal.  It is important to understand and become familiar with the selection tools. Work through the tutorial below and then you can begin your this photoshop assignment, the juxtaposition assignment.

Photoshop Selection Tools Tutorial

Juxtaposition Collage
A collage is a work of art created by combining different imagery for different sources. Your assignment challenge is to create a collage from different photographic sources to convey the concept of Juxtaposition. Use the selection tools in photoshop to combine different images, you can use other tools like the eraser tool to blend two photo's together.

Details:

 - Your image must be created in Photoshop at a size of 10"X8" with a resolution of 72 DPI.
 - You must have a minimum of 6 objects you have cut out and composed.
 - Your design must adhere to the concept of Juxtaposition, the arrangement of conflicting elements, ideas or concepts. Such as a car driving on water, or football players in the antarctic, or penguins in outer space.

This assignment is due on thursday. When you are finished post your results to your blog.




Have fun!

- Mr.W

Friday, September 16, 2011

New Assignment - Photoshop Text Effects

Hello Students,

Your newest assignment is to create a Banner Graphic to customize your blog with one of the text effects below. Find out the image size of the banner at the top of your blog and choose one of the tutorials below to work through. For instance, the dimensions for the banner at the top of this blog is 368 Pixels Wide by 292 Pixels Tall. Create a new photoshop document with those dimensions and create one of the text effects for your own blog banner.

Due at end of day on Monday.

Text Effect: Gold


Text Effect: Jelly Style


Text Effect: Light and Shadow

 - SW

Wednesday, September 14, 2011

Introduction To Adobe Illustrator

Hello Students,

Today we will introduce Adobe Illustrator, how to use it's tools and what vector art is. I will demonstrate Illustrator, and then you will work through this tutorial:



When you become familiar with the interface amd the pen tool, download these images below and trace them with the pen tool and change their color. Post your results to your blog. 



- Mr.W

Tuesday, September 13, 2011

How To Set Up A Blogger Blog

How to set up a Blogger Blog

Despite all of the hype with "blogs" in recent years, a blog really isn't anything much more complicated than a means for publishing work on the web in an easy to read and easy to update format. Some blogs are very personal, resemembling a diary, while others seem more akin to newspaper or magazine journalism. For our class this term, you will keep a blog where I'll ask you to post several short writing responses this term. Most of these exercises will be just a few pages long and they should help you working on the longer writing projects this semester.One easy way to do this is with Blogger, a free and easy to use service. Here are the instructions for how to set up a blog with Blogger.

Step 1: Go to http://www.blogger.com and sign up for a blog

Again, it's an easy to use service, but let me give you a few pieces of advice on how to accomplish this:
  • At the start page for blogger, click on the orange arrow that says "create your blog now."
  • Blogger now is part of Google, so if you have a Google account (which allows for things like gmail) you should use that to set up your new blogger account. If you don't have a Google account, now is a pretty good chance to set one up. Otherwise, it is just a matter of following the instructions on this page.
  • Be sure to check the "terms of service" box; of course, you might actually want to read through it a bit first, though the rules are pretty standard for these sorts of services.
  • Save your username and password some place. In fact, I would encourage you to write it down some place. Don't lose this!
  • When you're done, click on the orange "continue" button, which will take you to another page. If you did something wrong or you supplied a username or password that doesn't work, Blogger will stop you from proceeding until you fix the error.
  • The "Blog Title" will be what appears in the title portion of your blog. I recommend you keep it something simple like "My English 328 Blog" or whatever you want.
  • For the address of your blog, I'd encourage you to use your username. So, in my case, the blogger blog address would be http://krause328.blogspot.com Unless you know what you're doing with ftp functions, you should use blogspot.com to host your blog.
  • The "word verification" section is a security set-up the blogger folks have; simply type in the word you see in the funky font into the provided box. Click "continue" when you're done.
  • You can choose any template you want for your blog, and you can also change the template later if you would like. Click continue when you're done.
  • After waiting a few moments, you should get a screen that says your blog has been created. Good for you! Click on the "start posting" arrow and get to work!

Step 2: Get posting!

  • The posting screen for blogger is pretty straight-forward. Give your entries a title, type in the appropriate window, and use the editing tools for your blog entry as you want. We'll talk about more advanced options for your posting later, but if you know any basic html, you can incorporate most of that code into your blog posts.
  • To post or "publish" your post, click the button at the bottom of the screen "Publish Post." If you start writing something but you don't want to post it until later, click where it says "Save as Draft."
  • When you publish your post, blogger will process the information and then, if everything worked (and it usually does), it will give you the option to "view blog." Take a look at it; you should notice a couple of things:
    • The address for your blog-- something like http://stevendkrause.blogspot.com-- is the address for your blog. Send this URI (web address) to me! I will link to your blog from the class web site.
    • Readers should be able to post a comment to your post by clicking on the "comments" link.

Step 3: Do some adjustments to your account

There are a number of different things you might want to do to make your blog a bit more useful. But here are a couple of things you really should do no matter what.
Blocking blog spam. I know, hard to believe, but yes, the world of spamming extends to blogs too. Fortunately, Blogger has a pretty decent security feature that will eliminate almost all spam posts from your blog. Here's what to do:
  • If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
  • From the "Dashboard" screen, click on the name of your blog.
  • Click on the tab "Settings."
  • Click on the link near the top of that page under the tabs labeled "Comments."
  • Set "Who Can Comment?" to "Only Registered Users." It isn't essential that you do this, but I'd recommend it.
  • A bit further down, set "Show word verification for comments?" to "Yes." This is a security feature that requires the comment poster to type a specific word that shows up as slightly distorted text in a window.
  • Select "Save Settings" at the bottom of the page.
Time zone. It'd be nice if the time was right on your blog, right? Here's how to do that:
  • If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
  • From the "Dashboard" screen, click on the name of your blog.
  • Click on the tab "Settings."
  • Click on the link near the top of that page under the tabs labeled "Formatting."
  • Under "Time Zone," select the right time zone (and if you're reading this as part of one of my classes, that'd be "Detroit." Duh.)
  • Select "Save Settings" at the bottom of the page.
Doing things to customize your blogger blog. There's lots of stuff you can do customize your blog. At a minimum, I'd recommend including some links to your classmates' blogs or other blogs you like to read, but there are a lot of other things you can do, too-- include pictures, lists of stuff you like, etc., etc.
  • If you aren't already logged in, log in to your Blogger account. You did remember your username and password, right?
  • From the "Dashboard" screen, click on the name of your blog.
  • Click on the tab "Template."
  • Make sure the "Page Elements" tab under this is selected, and click on "Add a Page Element." From here, simply follow the instructions. Be sure to save you page element additions and double-check that it worked.

Step 4: Repeat

This is all you need to do to set up your blogger interface (though, as you can see further down on this page, there are some other things you will probably want to try to do sooner than later). Easy, right?
To post to your blogger blog from now on, here's all you need to do:
  • Once again, go to http://www.blogger.com
  • Log in with your username and your password (you remembered your username and password, right?) DO NOT click on the "create your blog now" because that will just get you back to step 1.
  • After you log in, you should get to your blogger "dashboard," which has a link to your blog. Click the link to manage the blog or click on "New Post" to make a new post to the blog.

Trouble-shooting

"Hey, what should I do if it didn't work?!" Well, blogger really is pretty easy to use, and while it does sometimes have bugs that are of course not your fault, usually if your blog doesn't work, it is is because of something that you did (or didn't) do.
So the first thing you should do is re-trace the steps above: are you sure you did everything I outline here? Really? Are you positive?
If you're confident that you did everything right, here are a couple of other thoughts:
"I tried to enter in my blog address into a web broswer but it didn't work"
Then try this:
  • Log in to blogger, using your username and password that you used to sign up for blogger in the first place.
  • Get to your blogger "dashboard."
  • Click on the link to your blog.
  • Click on the tab at the top that says "view blog"
  • The web address (or URI) that appears in the window is the address to your blog. It will be something like http://something.blogspot.com Copy this information and paste it into an email message to me.
"I wrote my posts but nothing has shown up yet"
If this is the case, then you probably didn't "Publish" your entry yet but you did a "save as draft." Go back to it and push the "publish" button. This should bring up a window with a time-clock where Blogger indicates it is publishing your entry.

Thursday, September 8, 2011

HTML: Adding Color

Hello Students,

Todays Agenda:
HTML Demonstration, Background color, image, text color
Lab Time



HTML COLOR AND BACKGROUND TAGS
Adding color to your html files is easy. You can also use images for backgrounds as well.

Adding a background color is easy, add the bgcolor tag to your body tag. Pick a color from the chart above and type in the 6 digit hexadecimal code.
<body bgcolor="669933">

Adding a background image is easy too. Use the background tag to repeat an image across your background.
<body background="yourfilenamehere.jpg">

Check out these tags below to add color to text. Remember just wrap these tags around the text you want to modify.
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

Embedding images is easy too, but I will let you figure that one out on your own!  ;-)

Check out this website called HTML MADE EASY:


- Mr.Wilson

Wednesday, September 7, 2011

New Assignment: Mini Website

Hello Students,

Todays Agenda:
  • HTML Demonstration Continued: Creating Navigation
  • New Assignment - Mini Website
  • Lab Time

Basic HTML Assignment: Mini Website
Your Basic HTML Assignment is to create a simple 4 page website that is about anything you like. You will create a menu for navigation on a home page, and 3 other pages. These can be About, Contact and Sites of Interest. You could also have pages titles Pictures or whatever your subject matter is about. Each page should have a menu for navigation plus content. Each page should have an image or photo and text, links, lists etc. A full page is not necessary, the focus here is creating navigation, links and using color and embedding images.

Subject Matter: You can make your website about anything you like. You can make it about yourself, a favorite band, tv show, movie, food, car, place etc. The idea is to introduce me, the reader, to your interests. If you have an idea for your site ask me and we can think about how to structure your website.

For help: Google it or ask your neighbor before asking your instructor. Below are notes about the tags we discussed in class as well as extra's. Or check out the barebones HTML guide on the link list on the side of this blog.

REQUIREMENTS:

• You must code this project in HTML from scratch.
• You must use text edit to insert the proper HTML tags, Use appropriate headings to structure each of  your pages.
• Each page must contain a simple menu at the top for navigation, and a signature at the bottom to end the page such as your name, a quote or something else unique.
• Must have a total of  4 pages, more is allowed for extra credit. Page titles can be "Home, About, Contact, Favorite Websites, etc.."
• Include 1 image or photo on each page.
• Include at least 2 lists (ordered or unordered)
• Include at least 3 links to external websites (for instance your blog, the class blog etc...).
• You must include your email address either on your contact page or in your menu.
• Each page must have a background image or color
• Your home page must be titled "index.html" and be organized in a folder with all other html files and images.
• Make sure all pages have the .htm or .html extension and all images or photos are formatted for web correctly (jpg, gif, png) and reside in the same folder as the html files.


HTML NOTES:

Tags are used to format your text, text can be a link, a list, a paragraph, big, small, red, blue etc. In html tags are made like this:
<></>

You must always begin and end your tag, tags effect everything in between them. If you forget to end a tag it will effect everything after it. So to make some text look bold I would write my HTML like this:
Here is some <b>bold</b> text

And it would be rendered like this:
Here is some bold text


Remember that your document must be formatted, it has an html tag, plus a head and a body. Most of the content your site goes in the body. It basically looks like this:
<html>
      <head>
      </head>
             <body>
             </body>
</html>

You can also make the title of your document show up in the window. The title tag is:
<title>this is my website isn't it cool</title>

Other tags change the way text looks, like bold or italic. Try some of these others:
<i></i> makes text italic
<tt></tt> makes text teletype
<h1></h1> makes text into a header, 1 is the largest, 6 is the smallest
<hr></hr> puts a horizontal line on your page
<center></center> makes text align center
<blockquote></blockquote> makes the text indented

You can also format large pieces of text like a paragraph with the p tag:
<p></p>

If you want that paragraph oriented, you can add the align command:
align="center"
align="right"
align="left"

So if you want a paragraph that is left oriented, then your tag looks like this:
<p align="left"></p>

To make text into a link you can use the a tag. To link to a local document you can
write your html like this:
<a href="aboutme.html">About Me"</a>

If your link goes to an external site then you must include the entire URL like this:
<a href="http://www.myblogwebsite.com">My Blog"</a>

You can set the color of several different things in HTML. In the <body> tag, the bgcolortextlinkvlink, and alink attributes define the colors for the page background, text, unvisited links, visited links, and active links (i.e. the moment the link is being clicked on).

To change text color for part of a page, use the <font> container tag with a color attribute.

Color attribute values take one of the following forms:
"#RRGGBB", where RRGG, and BB are the red, green, and blue components of the color, in hex, ranging from 00 to FF.

One of sixteen "widely understood color names": aquablackbluefuchsiagraygreenlimemaroonnavyolivepurpleredsilvertealwhite (white), or yellow (yellow)



Ok have fun!

Monday, September 5, 2011

Today: How the internet works and using HTML

Hello Students,

Todays Agenda:

  • Temporary Seating Chart
  • Lecture: How The Internet Works
  • Video: How the internet works in 5 minutes or less
  • Glossary Review
  • HTML Demonstration and Exercise

How Does The Internet Work?



This is a visualization of the internet





If we zoom in we can see the IP address's that make up the WWW





A URL helps determine a files location on the WWW




Now watch along with my demonstration of HTML and how to create a website from scratch... tomorrow we begin our first website project.

 - Mr.Wilson

Thursday, September 1, 2011

Computer Setup, Photoshop Exercise and Tutorials

Hello Students,

There are a few items we need to complete today, your task list is below:
  • Turn your computer on, login username and passwords are located on whiteboard.
  • Create a file directory for yourself, either on the desktop or in the documents folder.
  • Create a shortcut to this directory and place it on the desktop for easy and quick access.
  • Remember to save each project in its own folder from now on.

Now that your computer is set up and you have a place to save files, lets start with an excercise! Watch me demonstrate the exercise below and then try for yourself.



Below is a map of the PSD Tool bar and what each tool does. Open an image and try each tool to see what it does.

  • Take 10 minutes and browse the photos at http://www.freephotos.se
  • Find a photo that you like and want to work with, save it to your file directory by right-clicking on the image, create a new folder called "PSD Excercise 1" for this project.
  • Open the file in Photoshop.
  • Apply an artistic filter of your choice or alter the saturation, contrast, color etc. Show me what you can do!
  • Download 2 more photos and repeat the process, change your filter or color adjustments, strive for a dramatic effect.
  • Use the text tool to add your first initial and last name to the bottom right of your photos.
  • Save your file as "firstnamehere_excrcse_1_A" for the first photo, and then change A to B and then C for the next two photos.
  • Write a small paragraph to tell me how you altered the photographs.
- When complete, email your 3 images and writing exercise to swilson@santacruz.k12.ca.us 
- Make sure you put the name of the project into your email subject and always sign your email with your full name


When you finish that exercise, try one of these tutorials for clever photoshop beginners:











- Mr.Wilson