Return to ivanwlam.com.
Check out the blog and Experiments sections for update on the Experiments section redesign.
Been working on the upgrade of the portfolio and Flush blog for the past few days. Made a copy of the blog in WordPress. Check out the progress at ivanwlam.com/blog/flush09. The address will change to the current Flush blog's, while the current Flush blog will be moved to the archives.
Even though the site's not officially done yet, I'm redoing the experiments page section, trying to be less ambitious so early with my experiments. So as of now, only the web experiments is up. Eventually, that will change a little bit as well. And hopefully, it'll work a lot smoother once I integrated the entire site with the use of PHP and MySQL.
I converted probably all the accessible pages to PHP. I will do a final check so I could move forward with the site building.
I created a script for the 404 (File Not Found page) so that it will default to the last directory path. So if you try to type in an address to an experiments page but it doesn't exist, the address will revert to the experiments page.
I also archived some of the old folders, like TP107 and phild, as part of my site clean up. Just swept everything I don't need under the rug.
I had the realization today that I could use PHP to provide a shortcut to my pages, especially if the address is long. So now you can type in "http://www.ivanwlam.com/?s=" and one of the common words for my sites, and the page will redirect you. This is more helpful for the directories that I've archived, like http://www.ivanwlam.com/?s=tp107, which was my old temporary portfolio. Now the address is http://www.ivanwlam.com/archives/portfolios/tp107/, which is sort of long. So now visitors can use that shortcut and will be redirected. This is great for typing on a mobile phone!
For the past few days, I've been working on the PHP-ication of the web experiments page. I dug up old experiments and turned their summary pages to up to five different files, including an xml file as well as stylesheets and scripts. This might seem wasteful, but it's much easier to manage and add now. And this conversion really worked out the kinks of my template and had me rewriting a couple of scripts. But now it should work fine! Check out the simple iPhone experiments (if you have an iPhone).
Finished testing on converting the web experiments to php and xml. Also, I got a new JavaScript experiment that I worked on for this gig. Check it out at http://www.ivanwlam.com/experiments/web/index.php#js.
A few days ago, I started testing a PHP conversion of my web experiment pages. I'm doing this because it takes a lot of effort to get an experiment documented and prepared and uploaded, which prevents me from doing a lot of experiments. But now I'm using PHP to pull the info from an XML file that I can enter more efficiently. Compare the Cookies experiment pages: index.html and index.php. They're practically the same! But one'll be faster to update.
After more than two months of designing and coding and testing, I can now link the portfolio page. It's not 100% done, but it's good enough to display for the time being.
Worked on the résumé some more with coding and content. Now I gotta make a PDF version and Word document version of the résumé for download, as well as deciding what my professional domain email address should be. Any suggestions? Use the feedback box!
Today, I worked on populating the résumé page with real/dummy content. Man, it takes a lot of PHP to put in just a couple of things. But I know that in the end, it'll be worth it, when I want to change some information, I don't have to dig through the code; I just have to change the xml file.
Started working on the résumé page. The address is /resume. Trying to figure out a way to make the design consistent but not make it boring with a bunch of text. We'll see how this turns out.
Added Collabench photos. Fixed "Why Don't We Care?" spread images. And also aded a video demo for the Deerwalking piece. It's not yet accessible to Javascript-disabled browsers, and the quality of the video isn't that great either. Will work on that.
Two main things today: 1) Renamed some variables in the backend so things are semantically accuate. 2) I added a step in the Ajax calling process that lets users know that Ajax is called when a button is clicked and it is processing the information before the action is complete and the image is displayed. This may not look as "smooth" or as "magical" for Ajax's reputation, but I think this makes it more user informative and also takes out unintended half-second distorted images before a new image is loaded. All browsers worked, though Chrome shows an outline of the images on first loads.
Spent about five to six hours fixing the portfolio page to be XHTML validated. Realized I did some stuff I'm not supposed to. But now it's fixed! There are some redundancies at places, but at least it's still accessible and valid! Here's the link: http://tinyurl.com/6gv86g.
So now I've put the flash showing component to the PHP part of the portfolio page, which means you can start at the video piece and not have to start from a different piece and click "next" to activate the ajax function. Long story short, it works! But I have to tweak the script and xml file a little bit to make it semantically accurate and also to figure out how to trick the XHTML validator to not call the page invalid because there's the deprecated embed tag.
I now have a way to put a Flash file onto what was an image-only screen with Ajax. But I'm using a noscriptversion of the code, AND I haven't put it into the PHP yet. Nonetheless, whatever I got is working right now, and I shall pursue this some more later this week.
I filled almost all of the pieces on the portfolio page, with images and descriptions. Some descriptions needed more space, some totally didn't. Also, going to figure out how to properly display video.
I've started putting information and images into the portfolio page. I'm not loving the look right now. I feel like it's missing something, that I need to work my pieces with the layout of the page. Just populating data won't cut it.
Used PHP's getimagesize() method and ajax to center the screen image on both JS-disabled and -enabled browsers. This way, I can pump out images and not needing to be exact in dimensions.
After a little finanggling with the accessibility stuff, I realize there isn't much for me to do in that department right now. So I moved on to the actual portfolio pieces. I tried fitting in a vertical image (the CoHo calendar), but it just didn't look satisfying. So I extended the height so that a wide or tall image could fit relatively nicely. I still followed the grid and checked across browsers, and I like it better now.
I made a handheld style sheet for the portfolio page. It still need a lot of work, but at least it wouldn't be a clunky page. I don't use the Internet on a mobile device, so it's hard to test web pages. I've been using Opera's "Small screen" setting, but that can only go so far in terms of accuracy.
Web experiments page PHP'd, not that you'd notice.
Put the navigation in a PHP include so I could change it site-wide in one file if I need to.
I fixed the arrow strips rollover effects and a couple other things so the navigation is more intuitive. In terms of accessibility though, I'll still need to finish up some stuff. But, if you have JavaScript and support CSS, the portfolio page should be working, in terms of navigation. Test it out!
Yay! Finally got all the links working (except for the résumé). The arrows are still wonky, but I'll work on them later. Test out the portfolio page for me and let me know of any navigation errors or inconvenience you may encounter.
Worked on the PREV/NEXT buttons in the portfolio section. It sort of works. The problem is with using JS to assign the href for those buttons. Whenever I assign it, the address bar gets assigned, too, which is not what I want. I tried so many different ways; I was almost on the home stretch! This will probably take another day.
Sprinkled in a little Ajax in the Progress Update as a practice for the portfolio section's "PREV/NEXT" buttons. The twitch you see when you click on "EARLIER" OR "LATER" or whatever is the Ajax in action. The portfolio section's gonna be a lot more challenging since it'll involve more interconnected functions, but this is still pretty cool. Let me know if there's any bugs.
Moved all the progress update entries to an xml file, then used PHP to spit them out onto progress.php. This forces me to convert the home page from an html file to a php file, which is okay with me, since that would eventually happen anyway.
So I did a couple fixes tonight on the navigation. When the page already has a query in the address ("?proj=blahblahblah"), the links become refreshed. So I fixed the script a bit and now the address bar will be a bit more messy, but it's still copy-and-paste-able to revert back to its simplest form possible. I also made the description box update when the project is clicked, not just when the pieces are clicked.
A lot went on since the last progress update. Trying to work with basic accessibility issues, I also learned PHP and Ajax along the way.
Spent a quick few hours PHP-ing my portfolio's navigation with an XML file, so that when I change my XML file, the portfolio site changes with it.
Also, I made the links bookmarkable so that you can type in a specific URI and get the specific piece without having to click through the portfolio to get to it.
Here's the link is now index.php instead of .html.
Spent the past month continuing to learn basic web programming languages. Learned some basic PHP, including applying it to Ajax functions. The experiments of those things are up.
Took a break from the portfolio page to learn how to write and work with JavaScript cookies. If you think about it, I didn't really take a break from the portfolio page because I'm doing this for the portfolio page. In any case, a new JS experiment is up.
I have been working on the layout for the past few weeks. And for the past few nights, I've pumped out some navigation images and put them together on the page. Tonight, I coded most of the rollover functions; the links don't work yet, except for the "Show Panels/Hide Panels" button. This is the easy part; I feel the frustration will arrive in the next few days as I try to code stuff that I've never done before.
If you haven't noticed, I rarely follow my "Next-action" wishlist, which means I've worked on something else. Feeling the pressure to finish this site ASAP, I started on the Portfolio section. The link is purposely not available yet, but you can manually entered the URI and see the progress there. It's just really basic right now and I'll built onto it.
The majority of the work actually has been on the navigation. I fixed it so I can use the same code for multiple sections.
Added category labels for the Type Experiments page. I hand drew the labels and made them semi-look like I put the labels on the digital stamps on the page. A combo of uber perfect, uber pixely graphics and all-human handwriting. It looks sort of ugly, and I'm want to keep it like that for now.
Worked on navigation and sorting of the placeholder font units. Went surprisingly painlessly well and relatively quickly. Reminded of the joy and frustration of JavaScripting. Learned a new way to use the "this" object in JS.
Added Categories buttons for the Type Experiments page. Going to replace the text with images. Slowly but surely, it's being built.
Half done with basic layout concept. Need to add a categories bar. Then fill with content. Go to /experiments/type to check it out.
The grid of the page is rearranged a little bit to width-align. The Flash slideshow is now on a faux-parency.
Reworked the nav to fit closer to what I wanted it to look like. Works a little differently (but still works) when JS is disabled.
I don't know how the Flash slideshow "screen" should be placed. It looks kinda fine now, but I feel like it needs to be on its on transparency, since everything else is.
I couldn't stand looking at the gray blue background so I went on with my second transparency concept: making fake transparency rectangles. I'm more satisfied with this version as it still has the quality of my first version, but it's much cleaner and less distracting. I still have to work on the background image; it's a picture I took last November of some hill across the Golden Gate Bridge in Marin County. I'm sticking with the sky theme, because I love the sky.
Brought the layout back to its pre-transparency days, but not tossing the concept entirely. I'm going to go back to the sky concept, but a little more organized and clear.
Applied the transparency background photo. Not quite sure how I feel about it. The final layout will not include this text box nor the feedback box on the left. So, if you want to see a better rendering of the page, roll over the frame above to make this box and the feedback box disappear temporarily.
Also, the links are not coded yet; they're just images. Here are the links to the BLOG and EXPERIMENTS sections.
Just put up the width experiments that I used for the Flash Experiments portal. I should probably put a disclaimer to advise people to double-check their code because mine's not a simple copy and paste, even though I don't think that's the best way to learn code anyway.
Worked on the Flash Experiments Portal some more. It may seem like I'm spending way too much time on one page, and you're probably right. But the process is fun, and I won't be satisfied until I get it to work the way I want. Check out my blog entry about the latest update.
After four to five painful hours of constant don't-know-what-went-wrong troubleshooting, I finally got the collapse/expand function to work on the folder layers. I had so much problem with it not because I didn't know how it should work, because I did an exercise in the experiments section, knowing that it works, but to make it work for more than one menu without opening them all at the same time nor having to write a separate script for each folder.
Turns out I had the script right. I just put it at the wrong place. It's one of those put-the-script-at-the-bottom deals, which I sadly forgot I had the same problem with the alternate background experiment before. Anyway, that's done now. I still have a few more things to work on in the Flash Experiments Portal, and they'll probably as adventurous as this one.
The Flash portal has begun construction. Did a collapse/expand menu experiment.
Not counting the little line-height matching fixes, I placed the Flash slideshow in the space above and prepped it for JavaScript-disabled browser, and I also added these "stickers" that goes on most of the pages to show that the site's in construction. There are three so far and appear randomly by JavaScript.
Did some house cleaning with validating XHTML and consistent page titling. The web experiments page now has somewhat of a format, and I added two more experiments that I made late last year, mainly for Flush.
It took some time, but I managed to get a really basic alpha slideshow for the screen above (it's not replaced, yet). The file is in the under-designed Experiments > Flash section. I still have lots do on it, though. I want to add playhead and selection control, as well as the potential to put video on there.
About twelve hours ago, I was completely overwhelmed by the amount of ActionScript 3 that I had to know to do this. I kept reading the same line of text and it could't register. But I eventually remembered the similarities with AS2, and now I'm proud to have started learning the new stuff in AS3!
(I'm gonna stop counting the days because there will be days when I'm taking time off the site and working on other aspects of my career.)
Got the changing background color by time script working. I was surprised that I figured it out and coded it one night. It's (as of) now on display on this page, and it's also the first experiment in the Web Experiments section, under JavaScript.
Added an Experiments section. Still working on how it should work with 1) the sub sections, and 2) the rest of the "normal" site.
Also did the Web Experiments section. No, there's no coding error; it's supposed to look like that.
I played with the design a little bit and started laying out the portfolio and about pages in Illustrator. I did the image navigation thing that I mentioned on my blog, but for now, I've grayed out the links that aren't done yet, but when completed, they're going to function like the "/BLOG" link. And if you view the page with no styles, you can see that the text navigation is still there. I will have to clean that up later too though. But so far, the navigation is working almost to my satisfaction.
I also added the form that sends feedback about the beta site construction to my email, so I will be able to read it and take notes within hours of comment submission.
ivanwlam.com is officially in beta mode. In the next few weeks (hopefully not months), you will see the live construction of this site. If you would like to return to the old temporary page, you may visit www.ivanwlam.com/fall07/. That page, however, will be deleted when the links there are available in this beta. Hopefully, constructing this site live can motivate me to work faster and to create a more user-friendly site.
Return to top.
Return to ivanwlam.com.