Drop all tables, MySQL

Drop all tables, MySQL.

SELECT concat('DROP TABLE IF EXISTS `', table_name, '`;') FROM information_schema.tables WHERE table_schema = 'MyDatabaseName';

Copy and paste the result and run it.

Read More

Noob Creating a Shell Script

Using the terminal can be a pain in the ass. So let's make a shell script, so we can avoid typing in the same commands over and over again. Connect to your terminal and log in, then type this...
cd ~
...or wherever you want, "~" is the users home directory...
mkdir shellScript
cd shellScript
...note: while you're typing in a file or folder name, type a few letters and press the TAB button, the rest of the name should appear automatically, unless there's another name that starts the same.
Create a script file: Both "vim" and "nano" are file editors in Linux, you probably have both. Either way they are easy to install, I'm using "nano".
so...
nano scriptFile.sh
... this will create a file and open the "nano" editor, behold you're editing a file, type this...
echo "gd"
...press control+X, you will be asked to save? press "y", then press enter to save as the current file name. You're back in the terminal...
bash scriptFile.sh
...the file runs and "gd" is echoed to the terminal, wow. So you don't like having to type "bash" before the filename to run it? No problem, just do this...
nano scriptFile.sh
...add this line at the top of the file...
#!/bin/bash
...press: control+X, y, enter - file updated! Now all you have to do to run it is...
./scriptFile.sh
...notice you need the "./" before the filename now?
Haha got you, the file doesn't have permission to do anything, lol...
chmod +x scriptFile.sh
...permission granted. Now just type...
./scriptFile.sh
...wow it worked! So easy.
Now just type...
rm scriptFile.sh
...great, now that piece of garbage file is gone!

Read More

Internet Exploder

Notes on weird IE things:

IMAGES
Images saved in CKMY mode cannot be displayed in IE.

TRANSPARENCYS
img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ }

POSITION ABSOLUTE: IE7 BUG
Beware of the "hasLayout bug" of IE. The relatively positioned parent element doesn't have layout, and hence IE forgets to redraw its children when it gets resized/repositioned.
The problem gets fixed if you add "overflow: hidden;" to the relatively positioned parent.

Read More

PHP: Ternary Operator, Short 'if' Statement, One Line 'if' Statement

The ternary operator is called so because it takes three operands; a condition, a result for true, and a result for false.

The ternary operator is a shorthand way of writing if statements.

Here's an example:

//Assign a string value to $x
$x = ($myvalue == 10) ? "the value is 10": "the value is not 10";

Breaking it down into its three parts you get this:
Condition: ($myvalue == 10)
Result for true: $x = "the value is 10"
Result for false: $x = "the value is not 10"

Read More

CSS Positioning, Absolute

Here are a few tips for absolute positioning with CSS:

1) Default Position
By default, if you don't give values for the top and left styles, they are set to show the element where it would normally be displayed on the page.

2) Position Relative to a Parent
The element is positioned relative to a parent container. By default, the container is the browser window, but if a parent element has position: relative or absolute set on it, then that will act as the parent for positioning coordinates for its children.

3) Centering an Absolute Element
Here's one way to do it:

#absolute_centered {
height: 100px;
width: 140px;
border: 1px solid #333;
background-color: #CCC;

position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -70px;
}

The div is given a position of 50% top and left. This positions the div's top left corner in the very center of it's parent container (see point #2).

Using margins to further position the div, we set "margin-top: -50px;" 50px is half the height of the div. The left margin is set in the same fashion.

This places the div in the center of the parent container.

Read More

Featured Website - Planescape Online

The Planescape Online website has been a labor of love. Since the beginning of my time at Conestoga College, in the Web Design and Development program, I have been working very hard on this personal project.
I'm happy to announce that the website is now in regular use (by my friends and I), and we're quite happy with how it works!
To understand exactly what this website is capable of, it helps to know what the basic idea of a table-top role playing game is. The Planescape Online site was named after a Dungeons&Dragons campaign setting.
Table-top role playing games have complex rule systems that can easily fill 400 page books. Translating the Pathfinder role playing game system into an online web-based system has been challenging, and a lot of fun. It's an ongoing process.

One of the more interesting aspects of Planescape Online is the encounter page, because it has a battle-map that I designed using Flash AS3. You can click on the characters on this mini-map and move them about using the arrow keys on the keyboard. It's a neat little feature that will surely see improvement and additional features as I continue to work on the site.

Read More

Preloading Images and Removing Screen Flicker While SWF Loads

There are many options to preload images in HTML pages. The simplest would be to create a div and move it off the screen.

In this div, I created a list to preload background images into (using CSS). The other images that are loaded up are header images for the other pages in the website. Once loaded they stay in the cache, thus the header images appear instantly when the user navigates to those pages.

 <div id="img_preloader">
  <ul>
   <li>button hover</li>
  </ul>
  <img src="images/contact.jpg" />
  <img src="images/fabulous.jpg" />
  <img src="images/fabulous_text.jpg" />
  <img src="images/new_me.jpg" />
  <img src="images/nutrition.jpg" />>
  <img src="images/services.jpg" />
 </div>

I used the following CSS rules:

#img_preloader
{
width:200px;
position:absolute;
left:-9999px;
top:-9999px;
}
#img_preloader ul li {
background-image:url("../images/button_hover.png");
}


Flash SWF content may show a block of white in it's place until it had finished loading. To remove the white box, I added the following parameter to the OBJECT tag:

 <param name="wmode" value="transparent">

For more information about editing HTML tags manually for SWF content, see Object Tag Syntax.

And here is a link to the Adobe support page: Create a transparent background in a SWF file

Read More

MYSQL Query tips

Querying for NULL or non NULL values

Since arithmetic comparison operators do not return meaningful results, use the 'IS NULL' and 'IS NOT NULL' operators in your query.


...to be continued

Read More

PHP here document (also called a here-document, a heredoc, a hereis, here-string or here-script)

Using heredoc in PHP

<?php
echo <<<EOT

    <h1>This will display as an h1</h1>
    <p>I can use "double quotes"</p>
    <h1>and 'single quotes',
    <p>plus $variables too, which will
    be properly converted to their values,
    you can even type EOT.</p>

    <p>Make sure your opening EOT has no spaces after it,
    and the closing EOT has no spaces infront of it!</p>


 EOT;
 ?>

Read More

Creating Websites with Adobe Flash

Compared to Dreamweaver, the process for creating a website in Flash is very simple.  Drag and drop to the next level.  The actionscript covered in class has been the simple stuff, e.i. goto a specific frame, link to URL.

Something that surprised me while working at home, Flash CS4 does not have a code snippets panel!

Flash allows for visual effects like fades and slides.  However, from what I understand, Javascript is more efficient.

I'm looking forward to getting into more complicated Actionscript coding!

Read More

Designing websites with Dreamweaver

In this past course we learned about Dreamweaver, and how it's possible to create a decent looking webpage without knowing much about HTML or CSS.  However, for me, the benefit to using Dreamweaver is the tips it gives you while typing out the script.  Since I can't always remember the HTML tag names or the names of the CSS rules, it's very helpful to have the tip pop up and show the list of possibilities.
Also, the split view between design and code is nice.  Getting used to how HTML and CSS work can be tricky, so being able to see the results of what your doing quickly is handy.  Design view is good for positioning elements and playing with image sizes and colors.  The templates and site system work great for updating and managing files and links.
Using Dreamweaver speeds up the design process, I like using it!

Read More

Database Design

I have been thinking about a new website project.  The site would be used to store and categorize information for a role-playing game.  There would be a forum, and players would also be able to conduct live gaming sessions online.  The database would be required to store data for the forum topics and posts, game system, characters, players and gaming session history.

Read More

PROG1260 - Introduction to Programming with Visual Studio C#.NET

The design process for this course was very different from the last course (customer service). I found that with the customer service project, the goal was to create several different designs based on what the client might like, and let the client's input determine the final product.
While programming, the design changed during the process as well, but only because I learned that certain functionality was possible as the project was being created.
New features were added and the project grew as I worked on it. With programming, it's like if you continue to work on the same project it can only keep expanding and growing. This is especially true if you are learning a lot while working on the project.
This course has been very enjoyable!

Read More

The Best Portfolio Websites

thibaud.be

This is an amazing site because of it's interactivity. It's fun to just click around and see the pages move around. It loads fast and looks really professional. Very unique, very interesting to look at.


fa-d.com

Very clean and crisp. I like the style of this site very much. I love the awesome backgrounds that change automatically, it looks really cool on my TV.


elliotjaystocks.com

This site is nice and simple. My attention was brought to his projects right away. The simplicity of the site kind of urges you to click around and see what else is in the site and check out his work.


cesarvillegas.com

This portfolio displays the designers work even more prominently. I was very impressed by the sample work he put up for display here. The actual site is very basic but his work is so good that it makes it a really cool site to scroll through.


mac-design.org

It's really cool looking without being cluttered. It's mostly black and white, you don't see that much on a designers portfolio site. He decided to list his website work without any thumbnails or descriptions. You have to visit the website to check it out. This was ok but some of the websites took a long time to load up.

Read More

Adobe Software

So far we've covered Photoshop, After Effects and Premier Pro. Out of these products, I would say Photoshop has the most functionality for Web Design. As far as designing the web page background, panels, buttons, and layout Photoshop is very useful. With the slicing tool, Photoshop gives you a quick way to cut your image into smaller components, and the 'Save for Web and Devices' option allows you to compare the size and quality of your images in different formats (like gif or jpeg).
After Effects is very useful for creating animations and animated text, but that only goes so far online. Perhaps After Effects will work together with Flash well, we'll soon find out.

Read More

3rd Course; Customer Service

As my designer for this customer service course, Bosa was able to take the ideas and strange requests I made and turn it into a very nice looking animated banner. I was impressed by her creativity and design skills today when she showed me what she had been working on. Thanks for the great effort Bosa!

Read More

Web Design and Development Course List, Conestoga College

Course List

DSGN1210 - Graphic Design using Photoshop

DMED1330 - Video Animation with After Effects

DMED1320 - Video Design and Editing

BUS1180 - Customer Service

PROG1260 - Introduction to Programming with Visual Studio C#.NET

COMP1215 - Database Design

PROG1240 - Web Page Design

DMED1300 - Creating Web Sites with Dreamweaver

DMED1310 - Flash Animation

DMED1340 - Introduction to Animation with Flash ActionScript

DMED1350 - Advanced Animation with Flash ActionScript

PROG1250 - JavaScript

COMP1215 - Database Design

PROG1260 - Introduction to Programming with Visual Studio C#.NET

PROG1270 - Advanced Programming with Visual Studio C#.NET

PROG1520 - Java SDK

PROG1250 - JavaScript

DMED1350 - Advanced Animation with Flash ActionScript

BUS1180 - Customer Service

PROG1930 - Web Animation with Silverlight

Read More

Second Course; Adobe After Effects

I'm enjoying this program is more and more every day! Now that we've finished the second course, I'm feeling great about where we're going. I'm looking forward to getting more into the programming and flash because I've been working on projects at home and I'm excited about creating some cool games.

Read More

First Course; Adobe Photoshop

I've enjoyed the first course very much. It's been a lot of fun and I've enjoyed getting to know my classmates! I've been using Photoshop for a few months previous to this course, but I was still able to learn many new shortcuts and tricks.

I'm planning to get the most out of this program by putting in many hours at home. I'm planning on working on the Flash game as an ongoing project that I do for myself. I'm really excited about the Flash course.

Read More