http://dev.greeninteractive.com/js/gallery/fade-img-links.php
http://dev.greeninteractive.com/js/gallery/fade-next-prev-links.php
http://dev.greeninteractive.com/js/gallery/slide-img-links.php
http://dev.greeninteractive.com/js/gallery/slide-next-prev-links.php
http://dev.greeninteractive.com/js/gallery/slide-img-links-vert.php
http://dev.greeninteractive.com/js/gallery/slide-next-prev-links-vert.php
I can think of things I might add, and also ways I might optimize the code further. But if I wait until it is perfect, you will never see it. Enjoy!
Update 3/30/12: Added vertical transitions and updated links.
]]>
The ExpressionEngine templates are organized into one template group for the site, and another for the search to keep URLs clean and optimized. Global Variables are used for Google Analytics, the extended title on the home page, and the site meta description. Snippets are used to organize other pieces of the templates such as the CSS links, feeds, JavaScript files, site header, and footer.
The site uses four main channels and a featured channel to organize content. The four main channels could be used for different topics if creating an online magazine, or just one main channel could be used if creating a blog. The featured channel is used for featured entries on the home page.
]]>When I first ran the upgrade, there were some on-screen errors which did not inspire a whole lot of confidence and harken back to the beta software (I experienced many errors when trying to use the beta version, which is one reason I delayed the upgrade for so long). The upgrade eventually went through fine. I basically just clicked through the errors. Why they were there in the first place, I’m not sure.
I ran into some issues upgrading the multiple site manager that I don’t see documented anywhere, so I’ll make a note of them here. According to the MSM update instructions, all you need to do is replace a few files. From the standpoint of the control panel that’s all you need to do. However, in order to get the individual sites working, there are some other steps required.
I found that I needed to copy the primary index.php and admin.php to the individual site directories, and then modify as appropriate. This is the same process that you would use when setting up a domain or sub-domain. My sites didn’t show up after updating the MSM files per the documentation—but after copying these two files and editing for each site, the sites were functional once again.
Note: Do not uncomment the MSM information in the primary index.php and admin.php. Only do that for each domain or sub-domain. The comments in both index.php and admin.php state: Uncomment the following variables if you are using the Multiple Site Manager: http://expressionengine.com/user_guide/cp/sites. Only do that once you have copied these files into your directory for the domain or sub-domain you are managing. You will want to leave those comments in place for the primary index.php and admin.php.
One of my sites did not display correctly after configuring the multiple site manager settings. I eventually discovered this was due to how I used the the global variable {site_url} in the site templates, and how I edited index.php. In index.php, there is a line to specify site_url. When the site was set up originally, I included a trailing slash in the site_url. When I edited the new index.php, I did not include the trailing slash at the end of the URL, which broke links to CSS files, and links between site sections. This is something to be aware of if you use {site_url} in your templates.
I noticed that the path.php was leftover from ExpressionEngine version 1.x and is not needed once the system is upgraded to 2.x. The path.php file will also be present in your site domain or sub-domain folders if you are using the multiple site manager. You can move this to a backup folder or delete it. If you renamed files and folders to “_old” per the update instructions, move those to a backup folder or delete once the upgrade is successful.
During the upgrade process, weblog is automatically replaced with channel in your templates. There are a few other manual changes that need to be made. Mike Boyink authored a helpful article that outlines the necessary steps when updating your templates from 1.x to 2.x code.
Why do both index.php and admin.php have a system_path variable? Maybe this is related to the CodeIgniter framework, but it seems like the variable should only be in one place. The same goes for the multiple site manager settings in both documents.
What is the purpose of the “Synchronize Files” command in the file manager? Running the command generates errors for all the images in my portfolio, even though they display just fine on the site. According to the error message, they exceed a maximum file size. Unfortunately, the documentation does not make it much clearer.
I had been using the LG .htaccess Generator to remove index.php from the URLs. Now that ExpressionEngine has official support for clean URLs, I manually edited the .htaccess files instead.
The upgrade process was not as smooth as I would have liked, and I have noticed some frustrating bugs such as the Writemode not working in Firefox, and the login screen intermittently not working in Firefox. However, there are enough improvements in the new software to make the upgrade worthwhile. And as long as I recommend and implement ExpressionEngine for clients, it would be irresponsible not to be up to date on the latest version.
An automatic one-click update as seen in other software platforms would be desirable, but the system seems complicated enough that I don’t see this happening soon. I am hopeful for future improvements now that EllisLab hired someone versed in design and is officially listening.
]]>I worked with Wilcox Design, a graphic design firm based in Cambridge, Massachusetts. I provided consultation during a website redesign and acted in a production role to implement the new design. The resulting website moves from an earlier Flash format to HTML, taking advantage of natural optimization for search engines. The updated portfolio also features new design work.
I also worked with Alan Hill Design, a graphic design firm in New York, New York. We recently launched a new website for the Constable real estate development project in the SoHo Cast Iron District. Alan Hill provided the graphic design, and I handled the Flash development and hosting.
And I worked with Henry MacLean of Timeless Architecture to update the existing company website and implement a content management system. The new website features a photo gallery of the firm’s projects and is implemented with ExpressionEngine and SlideShowPro Director. We opted for a larger format to showcase the project images.
The 145 Hudson project is a custom Flash website originally developed by Basik. Changes and updates to the content were required and the original development team was not available. I was hired to reprogram the site, using the existing design and Flash assets.
I favor the ExpressionEngine content management system, but there are many options that might work for your website to keep content fresh. EllisLab, the makers of ExpressionEngine, introduced a mini-CMS called MojoMotor over the summer. It’s designed for managing content on a smaller site that doesn’t need a full-blown CMS. I could have used this earlier on many projects, and I am looking forward to trying it out.
This past year, I worked on a mix of design and development projects. I still had quite a bit of Flash-oriented work—both timeline animation and development. Contrary to the rumors, the Flash platform is still alive and well. It will be interesting to see how it evolves with the increased consumer use of mobile and portable devices.
Obviously the past two years were challenging for everyone. I’m optimistic about the upcoming year. I think we are beginning to see improvements in the health of the economy and overall business climate. I’m very grateful to my clients for the work this past year. If you were a client, thank you! And here’s to a successful 2011!
]]>Update: Site on hold for now. Find ExpressionEngine themes here.
]]>
Coming soon: templates for ExpressionEngine.
Update: ExpressionEngine templates are now available.
]]>With CSS you can override this behavior with the declaration outline:none. Please don’t do this.
After overriding the default behavior, anyone using the keyboard to navigate links on your site will receive no indication of where they are on the page. You have just provided a barrier to access for some of your users, and have most likely annoyed them. Some portion of your audience will need or prefer to use the keyboard for navigation. If they have to use your site for some reason, they will do so grudgingly. If they do not have to use your site, they may go elsewhere.
If you insist on removing the default link styling, at the very least provide an indicator with the focus pseudo-class, a:focus, so that users receive some feedback. There may be a case where the default outline looks so bad on a specific design element that you need to remove it to preserve the design integrity, but this should be an exception and not the rule.
]]>In 2007, we created a video player application in Flash that allows users to login and view four featured videos on trading topics. The entire application was in a self-contained Flash component. This included all the various application states such as the sign up form, login form, forgot password form, video details, and the video player itself. The content was managed via XML.
There are some problems with the all-Flash approach. Maintenance becomes more difficult. Interface or design changes require republishing the original Flash file. Of greater concern is that the user loses some control over the experience. Being that Flash is a black box within the browser, it does not react by default to browser controls such as the forward and back buttons or the text size controls.
Redesigning the application using HTML allowed us to create a product that is easier to maintain in the future, and gives control back to the end user. With the exception of the video player itself, the page uses HTML and JavaScript. The end result is more in line with the company branding and experience. The new design gives us a framework to use on other video products as well.
Unless you need or want to keep all videos on your own domain, I would recommend using available platforms such as YouTube or Vimeo in order to take advantage of the additional exposure your videos will receive on these sites. Another option is Brightcove.
In any case, here are the release notes for the FLVPlayer. Any further changes will be documented here.
I started development by revisiting an earlier video project from 2007. The objective was to build in closed-captioning capabilities and further explore Flash video. The earlier project used the NetStream class. I changed the player to use the FLVPlayback component in order to take advantage of the built-in captioning and playback methods.
]]>One solution is as follows. Add a div element with an ID of “grid.” By specifying absolute positioning for the grid div, you can overlay it on top of your page while you are working on the design. This will allow you to align elements to the grid while keeping the design intact. Comment out the CSS to hide the grid.
Here’s the code and a demonstration:
<style type="text/css" media="screen">
/* grid overlay */
html {
position: relative;
}
#grid {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url(/images/960-grid-overlay.png) repeat-y center top;
}
</style>
<div id="grid"></div>
]]>