6/17/11

ALMOST ALMOST finished with tutorial 8. I am really making an effort on this one to make it look useful. I'm trying to show that making a nice, dynamic webpage is easy with SVG. More, on next week.

6/10/11

Finished lesson 7, push to revision 304. I am planning to have one more tutorial, to finish up on SVG.

5/27/11

I'm almost finished with tutorial 6. Interactivity is closely tied to animation, which I will cover in the next chapter, next week.

5/24/11

I'm getting a lot done, and learning even more. The SVG path tag is so complex, that it can do anything that any other visual tag , such as circle, polygon, or rectangle, can do. I thought that the path tutorial would go quickly, but I am having to stop and learn again and again. This tutorial covers paths really well: http://www.w3.org/TR/SVG/paths.html, but as the "getting down with" tutorials are only basic tutorials, I am only going to cover a fraction of what you can do with curves, namely lines, polygons, and simple curves. Mastering curves especially, would mean explaining a lot of math, not something to do in a basic tutorial. I am almost finished with tutorial 4 (paths), and I think I'm done with tutorial 5, where I added a section on embedding conventional (.jpg, .gif, .png) picture files into SVG. After I'm done with paths, I'll take a break, work on the pyBook or something else for a little while.

5/18/11

Revision 292. I am currently working on tutorial 5, which concerns paths.

5/17/11

I think I've pretty much finished tutorials 1-3. I think I might move #4 back later, as it is mostly concerned with posting SVG files onto the internet, and not with paths and actual SVG code like tutorials 1-3 & 5 are. I've pushed to revision 292 tho.

5/16/11

Pushed Revision 290. Tutorial 2 finished.

5/12/11

I have been working on the tutorial, and I made some time to programming an image  gallery with svg. I'll be sure to cover inserting images with svg in a future tutorial when I'm done with rewriting the tutorials that are already there.

5/10/11

Pushed revision 288.
I redid lesson 1 in SVG tutorial series.

5/9/11

Today I took some time to update my student site. Inkscape was being crash happy today, but I finished this, which is an interactive svg thingy.

5/4/11

Here's what I've been working on:

Embedding Scaleable Vector Graphics in Webpages.
     Up to this point you have been creating SVG files from scratch with a text editor in .xhtml documents. This is the best way of picking up the basics of using SVG files, but it is unwieldly for creating complicated images, and using visual effects such as gradients and filters. Fortunately, there is an easier way make SVG images: Inkscape. It's a free, open-source vector editing software, that uses .svg files as its native format. I recommend that you download a copy if you haven't already.

    Before Firefox 4, the best way to embed SVG files into HTML was to use the <embed> tag. This effectively links in an .svg document from a seperate file. Unfortunately, this tag caused problems, as sometimes the tag would ugly scrollbars to the edge of the .svg document, even when they were unneeded. However, now, to display SVG pictures, you can display them as you would with a .jpg or .png file.

<a id=logo href="http://www.website.com" title="Sample Title"> <img width=400 height=250 src="/images/logo.svg" ></a>

4/29/11

I have been working on the apsva logos, and also on animation with .svg files.
Animation with .svg s is not typical frame-by-frame animation that is used in Flash documents. SVG animation is really just the changing of object or path attributes over a period of time. For example here, the .svg waits for 1 second, and then both rectangles spin in opposite directions at the speeds of .25 and .15 second per revolution. There is a lot you can do with .svg animation.

4/25/11

Finished a redesign for the NOVA logo.

4/14/11

Finished up and pushed illustrations for chapters 7 & 9. I should be able to get the flowcharts done over spring break, and have them ready when I come back.

4/13/11

I spent time today making the flowcharts on chapter 5 look good, and I've put most of the illustrations I could find into the appropriate chapter folders.
Pushed to revision 394.

3/8/11

Since I missed the last two days of the career center class, I put some time in tonight working on the chapter 3 & 5 illustrations. Since these are flowcharts, I developed a marking system that should be apparent.
Here is an example:

I have made .svg s for the flowcharts, but I can only post .gif previews here.

I hope these work !!

Also, on the 4th quarter project proposal, my goal is to illustrate the entire book. I'm pretty sure I'll have enough time to accomplish this. Already, I have illustrated the first 5 chapters. Completely this project will give me the experience of working on long projects with graphic design.
Thanks !!

4/5/11

Okay.
I have learned how use the bzr pushing and pulling, and I've completed revision 390:
1. Finally figured out what was going wrong with the .png exporting in inkscape. When exporting a .png, it is important to selct "Page" on the exporting menu. This exports whatever is seen in the "viewbox".

2. Finished and exported illustrations on chapter 1.

3/31/11

I finished the main graphic for the thinkcspy project. And I've learned how to make revisions and add my own images. Next week, I'll start on the illustrations for the rest of the book.

3/30/11

I am working on documentation for my keypad .svg project. What I have done is over here.

3/28/11

I finished an .svg for the Python book. If you want any of the colors changed, I can do that easily with inkscape. I am also working on writing a tutorial for the keypad I made. I will post that sometime this week.

3/23/11

Okay. I'm going to talk about the <embed> tag here, for use in .svg files.
First, what this tag does is link in an .svg from another file. It keeps you from having to clog your natural .html with with all the lines of code that come from an .svg . This is neater, and the advantage is that you can use .svg files directly from inkscape, without having to manually convert the code. Unfortunately, the <embed> tag has some drawbacks. For example, if you use the tag to display a 400 by 600 pixels .svg like this:
<embed src="example.svg" width="400" height="600"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
                                           :you will get some nasty scrollbars on the side of the image. The easiest way to drop the scrollbars, is to modify the embed code to this:
<embed src="foreground_front.svg" width="401" height=601"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
                                           :this is called "stretching" the embed tag. It's not "good" html, but it is very effective, and I haven't had a problem with it.
The second problem with .svg files in html is that when you use the .svg to make a clickable link, by default it opens the new web page inside the .svg picture. I don't know why. Here is an example:
Before:
<a
       xlink:href="http://mcoirad.deviantart.com"
       id="a3217">
What you need to do is add this: target="_top"
This opens the link in a new window.
After:
<a
       xlink:href="http://mcoirad.deviantart.com" target="_top"
       id="a3217">

3/18/11

Okay so far I've:

1. Changed up the logo, and sent an email to Filip. I haven't hear back yet. You can see the logo here. 
2. Added more interactiveness to my site. If you click on the "Enter" (i know it's ugly, but it's just a placeholder) it load new html, WITHOUT OPENING A NEW PAGE. I know! this state-of-the-art .svg technology sure is cool.
3. Worked on the css. Unfortunately I can't use .svg as background images, or at least not in firefox. If you go to site, and right-click and go to "View Background Image" you see the image, but it will not display on the actual site for some reason. oh well.

3/10/11

I finished the design for the py book builder.
Here
Next week I'll work more on my site.

Monday 3/7/11

I've figured out how to use links on .svg, and I'v implementing some basic .css  The cool thing about using links with .svg is that I can do most of the graphical web design in inkscape, instead of typing in code to make layouts. Right now the link doesn't go anywhere, but tomorrow I'll work on that.

My Site

Now, the problem with putting svg code directly into html code is as follows:
SVGs right out of inkscape have plenty of tags such as <svg , <path, <filter, etc.
Each one of the tags needs to become <svg:svg, <svg:path, and <svg:filter, otherwise the SVG will not display.
So basically I need a program that takes each instance of a tag: <(tag)
and turns it into <svg:(tag).
I'm pretty sure thats the process for converting inkscape files.
Ill have something else on that tomorrow.

3/3/11

I keep running into rendering problems when working with .svg files.
Text especially will not render will, as font sizes are nearly impossible to specify from inkscape.

2/25/11

My site is finally starting to look like an actual site. I've drawn some crude backgrounds, and a site header. Next week I'll add some buttons and other things.
http://students.gctaa.net/~dmitchell/

2/24/11

I added some css code to the page, and drew a background image in Inkscape. LINK
The background image is centered, and the css makes the links turn different colors.

2/18/11

I'm sorry, but I thought I posted this last Friday:
I have posted the pumpkin here.

2/17/11

I have completed the pumpkin drawing. I'm starting to get the feel of inkscape. It feels complicated at the beginning, but the more and more I work with it, the more comfortable I feel with it. However, I do not know how to display .svg files as pictures.  link

2/15/11

Star Game
Today I wasn't able to come to the Career Center because an English test I was taking took too long, and I missed the bus. However, I have been doing some Actionscript with Adobe Flash, and I have built a star field simulator. The illusion of the stars going past the ship was achieved by increasing the width and height of the group of stars. To control the  "movement past" stars and planets and give an illusion of depth, I used code like this:
onClipEvent(load){
 thrust = 0;                // stars start out not moving.
}

onClipEvent (enterFrame) {

 approachSpeed = (.3 * thrust);              // Speed a function of width

 this._height+=approachSpeed;
 this._width+=approachSpeed;

 if (Key.isDown(Key.SPACE)) {     // Pressing space gives illusion of acceleration
  if (thrust <=9)
  {
   thrust+=1;
  }
 }

 if (Key.isDown(Key.CONTROL))                //CTRL is the brakes
 {
  if (thrust >= -12)
  {
   thrust-=1;
  }
 }

}


Planets, however, work differently. The rate of the increasing of the"approachSpeed" is controlled by how large the planet appears to be. As the planet gets larger, it gets larger quicker.

onClipEvent(load){

 this._height = 3;                //defines size of planet
 this._width = 3;

 this._x = 205;                   //defines placement
 this._y = 105;

 thrust = 0;                           //begins steady

 this.swapDepths( _root.player1 );

}

onClipEvent (enterFrame) {

 if (this.hitTest(_root.player1))                     //if this hits the crosshairs
 {
  _root.description = "Targeting: Planet Isoya";    //display "Targeting Planet Isoya"
  this._x+=approachSpeed;           //Now the planet approaches the player instead
  this._y+=approachSpeed;                               // just flying by like the stars

}
 else
 {
  _root.description = "";
 }

 if (this._width <= 10)                     // these lines of code control how fast the planet
 {                                                     // is coming at you, based on how big the planet
  approachSpeed = (.01 * thrust);        // already is
 }
 else if (this._width <=25)
 {
  approachSpeed = (.012 * thrust);
 }
 else if (this._width <=45)
 {
  approachSpeed = (.023 * thrust);
 }
 else
 {
  approachSpeed = (.035 * thrust);
 }


 this._height+=approachSpeed;              // makes the speed of the planet a function of its size
 this._width+=approachSpeed;
 this._x-=approachSpeed;
 this._y-=approachSpeed;


 if (Key.isDown(Key.SPACE))
 {
  if (thrust <= 9)
  {
   thrust+=1;
  }
 }

 if (Key.isDown(Key.CONTROL))
 {
  if (thrust >= -12)
  {
   thrust-=1;
  }
 }



}

2/14/11

Working on learning Inkscape. its a little different from Illustrator, but its basically the same kind of program. Heres a picture of a pumpking i was working on today.

it doesn't look as good, because this blog doesn't allow for .svg files.

2/11/11

I have been learning to use Vim, and some basic html. I've thrown together a simple site-design at my site. As you can notice, all of the image links are broken. next week, i'll finish out the web design with some nice button images. I've set up some tables in the html that will prove useful when I upload the images.

2/4/11

Finished Unix tutorial, and Vim tutor. Next I am going through the Vim user manual. I feel pretty comfortable with Unix and Vim now.

2/1/11

This week I am learning the basics of UNIX. There are eight tutorials on the site I found. I should be done learning the basics by the end of this week.