Los Rios Portfolio
Los Rios Community College District Work Experience Website
*Click Image to View Live Site
(2 Month Contract Complete June 25th 2010)
- Table-less Structure, Consists of all Div's
- Complete CSS Driven Site
- Complete PHP Site
- Custom PHP Scripts for Form Validation Process
- Custom JavaScript to Validate Forms, Pre-Load Images, & Show/Hide Content
- 100% Custom Design to Meet Criteria
- 3-d Logo using Cinema 4-d
- Custom Vector Flash Logo
- Custom Flash Animations
- Custom Flash Buttons
- Alternate Flash Content
- Advanced Photoshop Effects for Design Elements
- Advanced CSS Techniques
- Complete SEO Optimization for Web
- SEO Friendly Alt tags for all Images, Title's for all Pages, and URL's
- Cross Browser Friendly
- 508 Compliant
Complete Custom CSS & PHP Site Built with Dreamweaver
This is a complete CSS driven site which allows for easily editing the entire look and layout of the site within the CSS file. CSS styles also allow for setting properties to any HTML tag which means any HTML element can be modified or styled. The entire structure is a table-less design consisting of all DIV's which plays a key part in the CSS. PHP allows to save content sections as an INCLUDE. With this we can reference the INCLUDE multiple times throughout the site. If we need to edit content in the future we can change content or variables in the INCLUDE's and it will globally register.
Custom written JavaScript to Validate Form Elements
Here we make sure users enter valid information before a submission is allowed.
Custom written PHP
Part of the form validation process, here we have a custom script that will display the form fields to the user upon submit, while at the same time is sending the results to the desired email in a readable format, and finally re-routes to a thank you page.
Here we have the script that displays the form fields to the user upon submit.
100% Custom Design to Meet Criteria
JavaScript Image Pre-loader
& Advanced CSS Hover
Here we have a CSS mouse hover technique for the main navigation. In order to prevent the rollover blinking on the first mouse over, we include a JavaScript image preloader referencing the images in the CSS file.
Custom Collapsible DIV's using CSS & JavaScript
Custom 3-d Logo using Cinema 4-d
Click HERE to see it live.
Custom Vector Flash Logo
Click HERE to see it live.
Custom Flash Animations
Click HERE to see it live.
Step 1: Create Elements in Photoshop
Step 2: Import all necessary elements into the Flash library. Convert elements to graphics, buttons, and movie clips when necessary. Add ActionScript when necessary. Keyframe various animations and effects with stage objects.
And the Final Result.
Custom Flash Buttons
Click HERE to see it live.
Step 1: Create Elements in Photoshop
Step 2: Import to Flash, Keyframe for Animation, Add ActionScript to call Http URL's
Display Alternate Flash Content if Browser
does not have Flash Player Installed
Using SWF Object and JavaScript we can read if a browser has flash player installed, and display alternate content if flash player is not installed. This specific piece of code references the flash object on the homepage at wexp.losrios.edu
Search Engine Friendly - Optimized for Web
- Search Engine Friendly Page Titles targeted toward keywords & referencing content on page
- Search Engine Friendly URL's targeted toward keywords & referencing content on page
- Search Engine Friendly Headers targeted toward keywords & referencing content on page
- Search Engine Friendly Image Alt Tags targeted toward keywords & referencing content on page
- THE USE OF CLEAN CODE! Such as referencing any programming languages, CSS and JavaScript through external files. This keeps page code CLEAN which search engines favor.
Advanced Photoshop Techniques
Flash Puzzle for the American River College
Work Experience Site
Click HERE to view it live.
Numerous Flash elements and techniques were used to accomplish the final result. Some of which include using actionscript, tweening effects, and keyframing with multiple movie clips targeted to their respective content area on the html page.
Each puzzle piece will click through to their respective area...
Whats the Missing Piece button starts out with a STOP on frame 1. Once this button is clicked an actionscript event occurs starting the movie at frame 2 which allows for PLAY and reveals the missing piece.
Once the Missing Piece button gets to the final frame we have an actionscript telling it to go back to frame 27 so we get a continuous loop. If we didn't do this the loop would go back to the STOP on frame one, which would prevent the effect we want.
Initially we created the vector puzzle in Illustrator and imported into flash.
LINCS Headers for the Los Rios College District Sites
Here are the steps taken to create the headers.
