Hi, please

Tag Archives: tutorial

OSD Project and What’s on so far

OSD Project Proposal:

I am currently thinking of writing a tutorial about creating template files within the Thematic Childtheme. I’m having a LOT of trouble doing that right now and after looking at last semester’s tutorial on this same subject, I think if I figure it out I could make the tutorial even better and clearer.

Things I’d like to cover:

1. Formatting the loops on the page templates are a little different than the index page

2. I’m also planning to divide my loops into three columns on the portfolio template page so that might be interesting

WP Progress this week:

1. Blueprinted what I could

2. Added the thumbnail feature

3. Created a template for my portfolio page but having trouble php-ing inside it

GRRr for GITHUB. Spent the whole of Friday trying to figure it out but I get responses such as “that folder already exists” or “disconnected from server because blablabla”. So here is my code on github

Portfolio Page

Index Page

Updating Wordpress from local to live

Hey guys, I’m posting about this because I don’t completely understand the most efficient and proper way to keep updating our sites from the local mamp setup to our live webserver.

Initial Questions:

  1. Do we need to replace all existing files on our live server each time we update? Or can we target only the css and php files that are changing?
  2. What is the best method for transferring the MySQL database (that we’ve developed locally on MAMP) to the wordpress database hosted on our live server.

I just updated my live site to match my locally developed site through the following steps:

  1. Replaced the functions.php file and the styles.css file within my childthem folder on my server (dreamhost in my case). Note that wordpress has already been installed there.
  2. Visited the site and found it looking pretty funky. Why? Because all the database info developed locally had not been transferred properly. So I need to figure out how to transfer all that info over to the live server somehow.
  3. Remembered that you can export an xml doc with all the post information from your site’s wp admin section. So I exported the post data from my local wordpress admin interface and exported that file through my live wordpress admin interface.
  4. The site looked closer, but still not perfect.
  5. So I went into the wp admin of my live site and tinkered with things until it matched what I had so far locally.
  6. It matches now, but this does not seem like the proper methodology for updating from local to live.

There must be a better method, right?

I’m thinking that exporting the wordpress database locally and importing it live is the best way to transfer everything you’ve built locally to your live website.

Ken found this tutorial: http://www.youtube.com/watch?v=cM9Z8aQTCvQ&feature=player_embedded#!

It covers how to transfer a site from local to live if you have not already installed your wordpress childthem on the live server. In our case this means a lot of extra steps.

If you skip to 3 minutes and 15 seconds in the tutorial you will see that the author explains how to export the complete wordpress database through the phpMyAdmin interface, which comes with MAMP.

If you skip to 8 minutes and 58 seconds the author then goes over how to import that file as a MySQL database on your live server. Depending on your server host this part is going to look different. This is still not 100% fitting for us, because it does not show us how replace an existing database.

In the end I’m wondering if this is actually the most efficient way to transfer from local to live:

  1. Target the files you want to change on your live server and replace with those files that you’ve developed locally.
  2. Export your MySQL database from your local site running on MAMP
  3. Import that file and replace the existing database on your live site running on an external server host.

Remaining Questions:

Does this seem correct? Is there an easier way anyone is aware of?

H2H2 – w3schools

http://www.w3schools.com/

The popular and widely used online resource for all things programming.

This site is pretty amazing in the depth of knowledge one can acquire here.  They claim to be the largest web developer site on the ‘net and all of the tutorials and information are free, very nice.

The homepage does a nice job of structuring all of the content.  As you can see there is a ton of information, from topics as basic as your first <p> tag in HTML to more complex server scripting tutorials and syntax.  Each topic is broken down further into categories and continuing to more advanced subjects.  All of these are laid out in succession from beginner to advanced, with each chapter building on the previous.

Great, so you’ve found a site that consolidates all of this information.  Can’t you just google search your problem and find it almost as easily?  Yes, you can but w3schools offers a great section within their site that allows you to tinker with the code and see what you’re doing to it, much like the way firebug works in our browsers.   Example As you can see, putting something into action like this is a very powerful tool to assist in the learning process.

While the ability to manipulate the examples are helpful, I feel like the examples themselves leave a bit to be desired.  They are pretty drab and not really inspiring the creative process.  The simplicity can become a bit confusing as well.  On the homepage they state the following:

“Because time is valuable, we deliver quick and easy learning.”

“Never increase, beyond what is necessary, the number of words required to explain anything”
William of Ockham (1285-1349)

This is all well and good but often you are not going to use the code in the fashion that they use it, it fails on a real world level.  It is so boiled down that the structure of code is affected and you are often left wondering about how this is structured within the rest of my content.  This is a tricky topic to touch on, understandably, because everyone’s outcomes and needs for the code differ.

Overall I think this site is a great resource.  Much like the encyclopedia is, it should be used as a reference material or as a support to a greater understanding of the code.  I cannot imagine teaching yourself any of the programming languages solely based on the knowledge of w3schools.

Additional resources:

Forum is offered as well as a reference list if you don’t know what that word or acronym means and need a quick look-up.

Hope this helps as another tool in the web building arsenal :)

Final hummus tutorial on yumhut.com

Based on the feedback I received, I made some minor changes to yumhut.com hummus tutorial:  tried to resolve type hierarchy issues, used a more neutral and organic color palette, resolved a padding issue to the logo and metadata on the left top to more accurately fit to my blueprint grid.

I really liked Ken’s comment on my tutorial about how the tutorial text might be better off pared down a bit more, since a few of the instructions seem pretty self-explanatory and obvious (ie: the lemon part of hummus tut.).  While I did agree with his comment and would pare copy down for my own foodie website (in the future), I ultimately chose to keep my copy for this particular tutorial assignment, since I wanted anyone (the target audience I had in mind was the most oblivious person in the kitchen) to be able to do make this hummus successfully.

Hummus V.2 and Helpful HTML & CSS links

I aimed to make Hummus v.2 as simple and straightforward a tutorial as possible, since it’s a recipe that anyone (with or without cooking skills) ought to be able to follow.  In case the design/layout isn’t clear or doesn’t accomplish those goals, please do give some feedback.

Using Blueprint CSS eliminated the need for me to go deep into CSS coding.  This was Very Nice.  Working with what Blueprint generated for me, I only needed to tweak some div, type, and img styles.  I had sized down my images in Photoshop (and Saved for Web and Devices!) before uploading them to my directory, so that there was no need for thumbnails or to “click to enlarge”.  Having sized my pictures to a pre-determined size, I also didn’t have to put in “width” and “height” attributes to the image tags.

While coding Hummus v.2, I googled many sites for help with HTML and CSS coding.  I still stick to my initially recommended sites: HTMLDog (for excellent HTML and CSS beginner tutorials) and W3Schools.com.  You really can’t beat free information that is this accessible and clear in instruction.  For those of you who like to “learn by doing”, the “try it for yourself” feature in w3schools is great–it allows you to see your code side by side with what it’d look like in a browser window.

HTMLDog:  Common HTML attributes

W3Schools.com:  Grouping and Nesting CSS Selectors

Let’s try again, this time with more *Style*

Now that we got some initial experience with Blueprint let’s dive a bit more into it.

  • First of all I would recommend you to subscribe to the Blueprint CSS mailing list where you can both ask some questions when you run into difficulties, learn from other people’s experience, and yes, one day also help others with their BP & CSS questions…
  • Second, go back to your PSD file and make changes to it based on the feedback you got in class.
  • Third, fix your css grid if it need any more fixing and go direcly into all the details, styling all the graphic and typographic elements in the page including: hover states, images and all. Feel free to steal take inspiration from other html/css designs you find online. Visit the html validator every now and then, and try to see what you can learn from it.
  • Post at least once to the blog this week with a tip for the rest of us, some clever way you found of doing something or even a problem you have that you want us to help you solve. Please post before Saturday night 11:59pm.
  • Post at least 3 comments to your fellow students on Sunday and Monday so they might make more progress on their designs through the week.
  • Try to implement the feedback you are getting in class and post again as you make more progress.
  • If you haven’t yet, get familiar with your Parsons webspace or buy your own domain name with a hosting space that supports PHP 5 and preferably also provides one-click install for Wordpress.
    I use Dreamhost and can recommend it + give you any of the 3 discount keys (for ~$50 discount) I have: 494827242184, 652338575666 or 778630683845 Go here and enter one of these numbers towards the end of the signup process, if non of them work, use the promotion code: OSD
    Disclaimer: I get a discount from this too.
    If you don’t want Dreamhost, you might choose one of the hosts recommended by Wordpress.org (Dreamhost is one of them)
  • The final links to your works should already be hosted on your own sites (or Parsons webspace).
  • If any of you have technical (or other) problems with this assignment, or want to consult me on anything, please use email. Don’t wait for the last moment with it. Best way would be to post a screenshot and a link on the site and email the list (osd5 {at} mushon [dot] com) if you want our immediate feedback on it. The rest of the class will be able to better help you that way too.
  • To start gearing ourselves towards the Wordpress assignment, I also want you guys to try to think of a site you might want to build with Wordpress this can be a blog but it can also be much much much more.
  • Next week’s great wide open would be led by Ken (email me with your topic if you want my help)
  • Next week’s How To How To would be led by Mei (“)
  • Enjoy!

See you next week,

Mushon.

Hummus Tutorial v.2

I missed out on comments since I was out last week (click here to view last week’s hummus tutorial v.1), but I tried editing down my hummus tutorial by consolidating some steps and laying it out in a neater “recipe card”-like format that’s easier to read and follow along.  The image below (click to enlarge) is a Photoshop mockup of my hummus tutorial v.2 page layout using the quomunnication ps starter kit.  I modified it again after implementing Blueprint, since the default type styles utilized the Helvetica Neue/Arial/Helvetica font stack, and I was initially hoping to use Georgia.   Since the sans serif font stack and heirarchy worked well with my design layout after all, I kept it.

I created my  new CSS styled Hummus Tutorial v.2 webpage using: Komodo edit, Blueprint, Bluecalc, Firefox, and Firebug.  Click here to view updated hummus tutorial v.2

I found the BP wiki demos (with Firebug to view the HTML and CSS markup) and the Quomunnication PS starter kit to be really helpful in my process.  One thing I had trouble with was utilizing the “colborder” vertical rule (from the BP wiki demo), which I thought might be nice to implement in my Equipment/Ingredients section.  I used a margin of 1em around my images, which in addition to the colborder’s right side margin and padding, made my columns add up to more than my container (pushing everything down to the next line).  I couldn’t quite get the img class=”push-#” and img class=”pull-#” to work exactly to resolve that issue either.  Anyhow, Blueprint was great in helping with my layout styling–I didn’t have to get too deep in CSS coding.

Hummus Tutorial

Ken’s Hummus tutorial was well designed–nicely hand-illustrated, clean visual layout, big legible type–and easy to follow.

The large format of the instructional poster might be problematic for someone who doesn’t have enough counter space to lay out the poster in the kitchen or some tape to tape it up on the kitchen wall.  As Ken had explained in class, he had printed the tutorial in this size to share with our class and had not known it would be taken home by another student to be used as a hard copy of the tutorial.  Since I had some tape handy, I was able to securely adhere the poster instructions to the window next to my kitchen counter, so I could view the tutorial as I proceeded.  I found that the large size actually helped me to read the tutorial better than if it were in a smaller 8.5 x 11″ format.

Reading the tutorial before getting started was the first step to take.  It allowed for me to write down the ingredients I needed to go out and buy at the grocery store.  Since I already had most of the ingredients in my kitchen pantry, I only had to purchase a jar of Tahini.

I also realized, upon reading the tutorial beforehand, that all of the equipment and tools required (blender, spoons, measuring cup, knives, cutting board, etc.) were not mentioned at all.  I already owned all of the kitchen tools, but for someone who does not cook often or own specific tools, this might be a problem.

Lastly, the prep step where you “add 1/2 cup of chick pea liquid” comes after the “add can of chick peas” step in the prep instructions.  Had I not read ahead, I may have simply discarded the liquid when I added the can of chickpeas (or added it all), and then missed out on that “add 1/2 cup of chick pea liquid” step.  A simple solution would be to add the “1/2 cup liquid from chick pea can” in the ingredients list before the instructions.

Overall, I think Ken’s tutorial was a success.  I cook often and read plenty of recipes, so I found Ken’s instructions to be clear, self-explanatory, and straightforward.  However, for the purposes of designing a tutorial that even someone with no cooking experience could follow, I think the addition of pictures and more descriptive sentences would help make it more user-friendly.  I took the liberty of adding in a few helpful tips with pictures (such as using the lid of the chickpea can to strain out the liquid into the measuring cup, squeezing the lemons into a small bowl and then fishing out the seeds with a spoon, etc.).

Click here to view my Hummus Tutorial, or click on the image below:

2 useful HTML tutorial references:

1.  HTML Dog:  http://www.htmldog.com/reference/htmltags/

2. w3schools: http://www.w3schools.com/tags/default.asp

How To Polish Silver, Save Money

Polish that tarnish off of your silver without scrubbing or chemicals.  Electrochemistry does it all for you.  All you have to do is use some aluminum foil, baking soda, and hot water (to catalyze the reaction).