c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
esc
cancel

Latest Updates: Tutorial RSS

  • Zach Blank 10:52 pm on December 9, 2007 | 0 Permalink | Reply
    Tags: Browsers, FireFox, , , IE, Safari, Tutorial

    Sitting on a third floor table of Allen Hall (the journalism and communication school) at the University of Oregon my my colleagues pass by asking “mapping?” I sight and respond with a smile “nothing but.”

    The reason for this sigh has revealed itself as a disappointing yet without persuasion truth. FireFox is indeed not the browsers best friend.

    For several weeks I could not figure out why only Firefox would plot addresses from an XML file on a Google map in the same order each time. Safari and IE would plot points in an order arbitrary to the order of the XML file. Well the reason that FireFox was the only one that worked properly was because it is in fact the slowest browser.

    Here’s the lowdown: To plot addresses on a Google map they need to be geocoded. Google needs latitude and longitude to plot a point on a map. well here lies the problem. Google takes time to respond to the geocode request. So if the code doesn’t have patience and goes right on plotting before the response things will get out of order because the plotting and receiving of the latitude and longitude and not synchronized.

    So because FireFox took its sweet time to execute the code Google had time to respond whereas Safari and IE whizzed through the code before Google had time to fully respond.

    Here’s the Solution: Use setInterval to delay to the code a bit while Google is responding. I will give you a bit more of my code, but not too much that you will find out exactly what i am doing before official release.


    var address = addresses[i];
    var nextAddress = (res.length-1);
    window.theNext = function() {
    if (nextAddress < addresses.length) {
    setTimeout(’getAddress(”‘+addresses[nextAddress]+’”,theNext)’, 50);
    nextAddress–;
    }
    }

     
  • Zach Blank 6:33 pm on November 21, 2007 | 0 Permalink | Reply
    Tags: Class, CSS, ID, Tutorial

    What is the difference between a class and an ID in CSS? Both seem to behave identical, but they have different uses. A good coder knows when and how to use each one.

    IDs:

    1. Can only be used once on a page
    2. Can be used with a class for the same element
    3. Used to identify one and only one specific element

    Classes:

    1. Can be used several times on a page
    2. Can be used with other classes and IDs
    3. Reusable and can be applied to any element on a page

    So what is this big who haw? If you have tried to use an ID multiple times I’m sure that you have noticed it works. Well the who haw is that it is not valid. This gets us into another discussion which is the importance of valid code, but for now we will hold off on that.

    – Lets break it down. The only difference between a class and an ID is that a class can be reused and an ID cannot. –

    Both classes and ID can use numbers, letters and some special characters, like an underscore. But be careful here. Upper case characters and lower case are different characters. Some browsers will be forgiving and treat “a” and “A” the same, but some will not and here you will run into problems. So be sure that your tags are identical.

    Where did these names come from?

    This will hopefully help you remember the purpose for each. A person’s ID is unique and individual to them. A class is made up of many people. bring this back to coding for the web. An element, for example one specific paragraph on a page, can have an ID unique to it. Also it can have a Class that it will share with all of the paragraphs on that page.

     
  • Zach Blank 1:33 am on November 21, 2007 | 1 Permalink | Reply
    Tags: MySQL, , Tutorial, ,

    so as far as I can tell I am the first person at the University of Oregon to successfully install, setup, and run mysql and wordpress on their UOregon account. So that being said this post is intended to outline step by step the process so most people can do it themselves. Please leave comments on this post to let me know if it was helpful, useful, or didn’t work for you.

    So Here we go…

    Step 1 - Installing mysql:
    In a unix command prompt ssh into your account. Go to the Computing Center’s website if you need more instructions on this.

    OK now your in. If you do not have a public_html directory create one now. This is where everything that the public will see will be (basically your whole web page).

    mkdir public_html

    OK, no we need to manually create a .my.cnf file, this is the business file for configuring mysql. So above public_html type pico .my.cnf. now you will see a text editor. In this file you will add the following:

    [mysqld]datadir=/home#/account_name/mysql/
    
    socket=/home#/account_name/mysql/mysql.sock
    
    port=xxxx
    
    user=account_name[mysql]
    
    socket=/home#/account_name/mysql/mysql.sock
    
    port=xxxx
    
    user=account_name
    
    [mysql.server]
    
    user=xxxx
    
    basedir=/home#/account_name/mysql/
    
    [client]
    
    host=127.0.0.1
    
    socket=/home#/account_name/mysql/mysql.sock
    
    port=xxxx
    
    user=account_name
    
    [safe_mysqld]
    
    pid-file=/home#/account_name/mysql/mysql.pid
    
    err-log=/home#/account_name/mysql/safe.log

    Where you see home# enter your home. If you do not know what this is type pwd in your command prompt and it will tell you, for example I am home11, you might be home8 and so on.

    Where you see account_name enter your account name. For example jsmith (it is your uoregon account name).

    And where you see XXXX enter your port. This is a number of your choice above 5000. For example 5348 or 5729. Just choose anything in the 5000’s.

    Your done with this file. Hit control + X to save it and lets move on.

    Now it’s time to install mysql.
    type

    mysql_install_db

    (make sure that you are still above public_html)

    Now start mysql by typing

    mysqld_safe &

    OK we are doing great so far.
    Now we are going to set the credentials for the mysql so other people cannot connect to the database. So type

    /usr/bin/mysqladmin -u root -h shell --port=xxxx password 'new-password'

    Where you see xxxx put your port that you specified before and where you see new-password enter the password you want to use to protect it.

    Thats it. Now to access your database type:

    mysql -u root -h shell --port=xxxx -p

    Replacing xxxx with the port you specified before. You will then be prompted for your password. Enter it (you will not see anything appear on screen as you type, that is how it works, just type your password and hit enter.

    If all you wanted is mysql, then your done, if you are installing Wordpress then keep reading.

    Step 2 - Creating database for wordpress:
    First type

    create database database_name;

    replace database_name with a name of your choice. I prefer wordpress for this.
    Next type

    GRANT ALL PRIVILEGES ON database_name.* TO "root"@"128.223.142.%" IDENTIFIED BY "password";

    replace database_name with the name you specified above and replace password with a password of your choice.

    type

    FLUSH PRIVILEGES;

    And lastly type

    EXIT;

    Step 3 - configure, setup and install Wordpress
    Go to wordpress.org and download wordpress. Using SFTP upload the whole directory to your public_html directory.

    Once that is done using pico just like before edit wp-config-sample.php. (These instructions are in the redeme file that came with wordpress.
    this file should now have this in it:

    // ** MySQL settings ** //define('DB_NAME', 'wordpress');     // The name of the database
    
    define('DB_USER', 'username');     // Your MySQL username
    
    define('DB_PASSWORD', 'password'); // ...and password
    
    define('DB_HOST', '128.223.142.32:xxxx');     // 99% chance you won't need to change this value

    replace xxxx with the port you specified in the mysql setup.
    Thats it!

    Now we need to install Wordpress. Go to the wp-admin directory and type

     chmod 755 install.php

    then

    pico install.php

    add to the first line of this file

    #!/usr/local/bin/php

    Now you can go to your browser and point it at http://www.uoregon.edu/~your_user_name/wordpress/wp-admin/install.php and follow the instructions.

    LAST STEP
    This part is the biggest pain. Every time you try and go to a wordpress page and you get “500 internal server error” you need to see what file it is by looking at the browser location bar and then to that file you need to add:

    #!/usr/local/bin/php

    to the first line and change the permissions to 755 (chmod 755 file_name)

    you might be tempted to just go and do this to every file but if you do then you will break it. When one file is included in another the first does not need it, and if it as it then it will be displayed by the browser, and break your page.

    Good luck! I hope this helps. I will make edits as my comment suggest. Happy Blogging!

     
  • Zach Blank 3:45 am on November 20, 2007 | 0 Permalink | Reply
    Tags: Images, Javascript, Tutorial

    In an ideal world I would have found a Wordpress image captions plugin that just worked the way I wanted - not a perfect world I guess. Last night I struggled with Javascript and edited wp-lightbox2 so it would display any image with a link having a title attribute as a caption. This is lightweight and works great for me. here is an example:

    Matt Spohn Climbing Gram Parson’s In Joshua Tree, CA

    Here is how I did it:

    After downloading and activating wp-lightbox open plugins/wp-lightbox/js/lightbox.js near line 350 after:

    if(anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    anchor.onclick = function () {myLightbox.start(this); return false;}

    Add:

    //set the id attreibute
    anchor.setAttribute('id', 'caption'+i);
    //get the caption attribute
    captionDiv = document.getElementById('caption'+i);
    caption = captionDiv.title;
    anchor.innerHTML+='‘+caption+’‘;

    Thats it! Use the class ‘caption’ in your stylesheet to edit the caption’s style.