web design
As my first advancement into programming and design, websites were the most painless and free motivators. Starting with only a simple text editor and a web browser, I was able to create layouts to display any information I wanted. When static HTML wasn't enough, I discovered dynamic programming languages to automatically generate the HTML I wanted. But then the artist inside me wanted more and I explored CSS for design.
Although recently there hasn't been much in terms of my own web growth, here are the past examples of what I have done.
-
Cibo
During the year of 2007-2008, I hatched together a plan for my own computer science club. As an academically geared club, I wanted the site to feel like a bulletin that people could browse. As a preliminary iteration which the actual details, I devleoped this simple site which is meant to be the under layer of the bulletin board.
The main feature here is the use of SSI. Because the site is so simple, the only changing middle content. Therefore, with the use of SSI, all static parts are abstracted from each individual page.
-
Science-Driven System Architecture
Internship at Lawrence Berkeley National Laboratory
During the summer of 2006, I had the pleasure to work at the Lawrence Berkeley National Lab under the High School Student Research Participation Program. I was introduced to the Science-Driven Architecture Team in the National Energy Research Scientific Computing Center.
My primary mission was to build a web portal for SDSA to help share the data they have collected with other teams and promote collaboration. To faciliate this, I developed a database web application for data entry and retrieval. Through a web form, related teams can submit their results and later compare results across different runs. Unfortunately, this idea never fully panned out due to poor planning and execution. The site as it stands is only partially functional as a semi-static website.
The main feature of the website is actually in its design to faciliate adding information. Working around the PHP requirements of NERSC web development, I created a PHP framework that enabled an easy way to add new pages by only creating the content for each page. With .htaccess and PHP includes, the sidebar, header, and footers would be pulled in correctly. This abstracted all the nasty navigation logic and CSS that only web developer would be concerned about. This framework was meant to allow the members of SDSA who are not web savvy to provide content. Unfortunately, from the feedback I have received, this framework was still confusing. I hope to someday work with SDSA again to fix up the webpage.
-
Harker Webteam
High School Student Organization
In 2005-2006, I was the webaster of the webteam, a student organization, at my highschool. Having just lost all its members, I resurrected the club. With no real direction or motivation, I decided to create a club that would serve as a portal to other clubs as well as provide a place where students and teachers can find web related information. As such, I created a 'harker student portal.' Here, one can find links to all the student club organizations on campus as well as find pertinent information about what's going on campus web related. Faculty can find contact information for webteam members for website consultation.
With this website, I experimented with CSS includes. Using a file hiearchy based on CSS content, I separated CSS definitions by media, and colors. A master file would first pull in the base definitions which defined the overall. Then it would pull in basic grayscale color definitions. Last, it would define images, using image replacement techniques, and colors.
-
Harker Anime Club
High School Student Organization
In 2005-2006, I was webmaster for the anime club at my highschool. Given free reign and virtually no web traffic to the site, I designed the site from scratch. As an information portal for web visitors, the front page was the introduction to our club and club information such as meeting times. Other pages included our weekly schedule of showigns and the semester show highlights. I seemlessly integrated WordPress into our news section by only exposing the blog page to the public.
Notable features include the use of image replacement techniques for all images, the rotating random banner, and the navigation bar.