Noggin's Notebook http://www.busynoggin.com/ This is Busy Noggin's little corner to chronicle his adventures in all things web including CSS, HTML, TYPO3, PHP and whole host of other acronyms. en Noggin's Notebook http://www.busynoggin.com/typo3conf/ext/tt_news/ext_icon.gif http://www.busynoggin.com/ 18 16 This is Busy Noggin's little corner to chronicle his adventures in all things web including CSS, HTML, TYPO3, PHP and whole host of other acronyms. TYPO3 - get.content.right http://blogs.law.harvard.edu/tech/rss Thu, 11 Feb 2010 06:44:00 -0600 Adding a Subject Line to an Email Link http://www.busynoggin.com/noggins-notebook-archive/article/adding-a-subject-line-to-an-email-link/ I am always surprised with the little simple things I learn about web development. After years of... <a href="mailto:friend@yourdomain.com">mailto</a> If you write it like this: 
<a href="mailto:friend@yourdomain.com?My Special Subject">
mailto</a>
Then when it is clicked the email will have a subject of "My Special Subject." ]]> HTML Thu, 11 Feb 2010 06:44:00 -0600 The Year of the Lightbox http://www.busynoggin.com/noggins-notebook-archive/article/the-year-of-the-lightbox/ It seems like the requirements for every site I do this year include lightboxes, video players and... NyroModal I have just completed a major project with this jQuery lightbox plugin and it is AWESOME! Both easy to configure and powerful, NyroModal can keep itself within the browser window adding scrollbars when needed for small monitors. If you resize the browser window while the lighbox is open, it will also resize on the fly. If you AJAX new content into an already open lightbox, the lightbox will gracefully resize to accommodate the new content. This includes form responses. This lightbox solution has several callbacks available. I recently had to serve alternate content in the lightbox when a user was on IE7 and had their page zoom set to something other than 100%. I was able to write JavaScript in one of the NyroModal callbacks to sense that scenario and accommodate it. For TYPO3 projects I like to create a page template that will serve only its content between the body tags and nothing else (no head, html or body tags). I use this page template for content I am serving into the lightbox. Find NyroModal at nyromodal.nyrodev.com.

Flow Player

Nice, open-source Flash video player. Has a well-documented API for controlling via JavaScript and is very skinnable. Find Flow Player at flowplayer.org.

SlideShowPro and SlideShowPro Director

These two programs offer a great one-two punch in the slide show arena. SlideShowPro can handle video and / or still images. It is very skinnable, can be controlled with external JavaScript / HTML controls and has a well-documented API. SlideShowPro Director allows provides a very friendly interface for managing albums and images for serving to SlideShowPro I recently completed a project where a TYPO3 extension automatically generates the images and XML for  SlideShowPro from product brands. While in a slideshow users can click on images to add them to a cart. You do have to pay a small fee for SlideShowPro but it is worth it. It is Flash-based so you will need Flash to customize the look and options. Find SlideShowPro at slideshowpro.net.
]]> Tue, 10 Nov 2009 00:00:00 -0600 Hungry for a System Mashup? Try a HTML Sandwich served by TYPO3. http://www.busynoggin.com/noggins-notebook-archive/article/hungry-for-a-system-mashup-try-a-html-sandwich-served-by-typo3/ An easy way to mashup another system with TYPO3 www.fogodechao.com), a very nice steak restaurant with locations in both the U.S. and Brazil. Fusion Advertising provided the visual design and content while my company, Busy Noggin, Inc., handled the front-end coding and TYPO3 integration. Jeff Segars contributed an extension for customer comments and helped with server tweaking. The site is graphically rich with with several interesting features including lightboxes and a scrolling JavaScript map of locations. One of the project requirements was for the site to connect to a separate ASP site used to purchase gift cards. Additionally, the gift card site needed to be visually identical to the main site. When on the main site (www.fogodechao.com) clicking on gift cards brings you to the ASP site (gc.fogodechao.com). Notice it is visually identical to the main site (see comparison). It is identical because much of its code is supplied by TYPO3. Here is how it is done. TYPO3 is programmed to supply three pages of code that are used by the ASP site as server-side includes. None of these pages include any header data. This is the code they supply to the ASP site.
  • Include #1: The style sheet links that are included in the head of the ASP pages.
  • Include #2: The code for the design that falls after the opening body tag but before the main content of the page. This includes main menu and header image.
  • Include #3: The code for the design that falls after the main content but before the ending body tag.
In effect this creates an HTML sandwich in which the TYPO3 supplied code from the main site surrounds the content on the ASP site. This means that when TYPO3 updates items such as menus and promotional items on the main site thee the changes will automatically be reflected on the second ASP site. Also, CSS and background image changes can be managed from the main web site. Of course, care must be taken that the paths in the supplied code are full URL paths (including the domain of the main site) so that links and images do not break on the second site. One of the includes contains this in its TypoScript template: config {
disableAllHeaderCode = 1
absRefPrefix = http://www.fogodechao.com/
} This will produce a page without the head section or a body tag and will make all links full paths. This is a very easy way to mashup two systems while keeping ongoing maintenance simple and presenting a unified experience to the front-end user.  Ron Hall
Busy Noggin, Inc.]]> Mon, 27 Jul 2009 00:00:00 -0500 Resize Browser Windows to Specific Size with One Click and More http://www.busynoggin.com/noggins-notebook-archive/article/resize-browser-windows-to-specific-size-with-one-click-and-more/ Very simple technique for one-click resizing of a browser window to a specific size. here. The link says it is for Safari but it can also be done in Firefox (and probably other browsers as well). And read the comment from the guy who figured out you could access the bookmark with a keyboard command (command-1, command-2, etc.)

Now for the more part.

The newest version of QuickKeys for Mac (version 4) has taken window resizing and positioning to a whole new level. It will allow you to assign shortcuts to resize and position the windows of ANY application. This is only a fraction of what this powerful macro program does. I have been using it for the better part of a decade and highly recommend it. I just set up QuickKeys macros today for window resizing and this is what I did. For each application I set up a macro for for each of the window sizing and positioning I wanted. I named them "Window 1", "Window 2", "Window 3",  etc. (clever, yes?) For each application I used the same keyboard shortcut for each window position (e.g. "Window 1" is always "control-F1" and "Window 2" is always "Control-F2"). Even though the shortcut triggers are the same the window sizes and positions need not be the same between apps. For instance, "Window 1" may be 500x600 pixels in my text editor but 800x1000 pixels in Photoshop. By the way, this is only a small symptom of the macro fetish I alluded to in my post on multiple monitors, 10 Million Pixels and Counting. Ron Hall
Busy Noggin, Inc.
]]> Mon, 20 Jul 2009 00:00:00 -0500 A Framework for TemplaVoila and the Busy Noggin QuickSite http://www.busynoggin.com/noggins-notebook-archive/article/a-framework-for-templavoila-and-the-busy-noggin-quicksite/ A workflow, code base and set of best practices for integrating a wide range of visual designs into... templavoila.busynoggin.com. This site explains the framework I use for building sites with TemplaVoila and also provides a download of the Busy Noggin QuickSite which is a TYPO3 starter site built on the framework. I presented a tutorial on this framework at T3CON09-Dallas which was well received. I will be presenting a refined version of that tutorial at T3CON09-Frankfurt. Since the Dallas conference over 100 developers received login access to the pre-release version of templavoila.busynoggin.com. With the public release login access is no longer required. The framework does not rely upon any special extensions and developers can use as much or as little of its techniques as they wish. I have been careful to call it "a" framework for TemplaVoila not "the" framework for TemplaVoila. You can find out what this framework can do by watching a six minute video on the home page of templavoila.busynggin.com. The middle of the video will be of particular interest as it demonstrates how editors can modify page layouts through the use of the utility FCEs in the framework. Using this approach has cut down the time I spend mapping TemplaVoila templates by 75%. The time I do spend mapping is in constructing special FCEs for the unique needs of a particular site. Look at the photo of the four layouts attached to this post (click image at top of post to see larger), you might be interested to know that they all run off the same page template code. The skinning approach in this framework supplies the variations in look and code. Were they all for the same client I could have setup up multiple domains in a single install and had them all use the same core page template files and could switch between them without remapping page templates. I think this package will be of most interest to developers who build a number of sites with TemplaVoila and spend a significant amount of time dealing with CSS, TypoScript and datastructures. They will most quickly understand why I have approached site building the way I have. If you look at the framework, pay particular attention to explanations of the header, footer, precode and postCode TypoScript objects as they are the keying to adapting the QuickSite to virtually any visual design without remapping page templates. OK, now now for a seemly insane statement. I believe that 85% of the visual designs on the web can be accommodated  in the QuickSite without remapping page templates. Don't believe me? Then see me in Frankfurt. :) Ron Hall
Busy Noggin, Inc.]]> Wed, 15 Jul 2009 00:00:00 -0500 10 Million Pixels and Counting http://www.busynoggin.com/noggins-notebook-archive/article/10-million-pixels-and-counting/ At our last TYPO3 user group meeting, Jeff Segars laughed at me. In and of itself, this is not... Expert Mouse with a trackball the size of a pool ball and four programmable buttons. Spin that with the bottom of your hand and you will move across 40 inches of monitors in a split second. Anyway back to my tale. When I began my business I bought a MacBook Pro and a 30" Apple Monitor. I wanted as much screen real estate as possible and would normally buy cheap third-party 24" monitors. However, since I could only have one monitor attached, I sprung for the mighty 30". This worked well for the first 18 months, but as I needed to be even more efficient, I started thinking about expanding. Attached to this post is a shot of what I have now and the following is how I use the setup when doing something like front-end coding. 24" monitor on a 15" MacBook Pro which runs:
  1. all my communications (e-mail, IM, etc.) on the 15" screen (everything else is on the 24").
  2. Photoshop for slicing, measuring distances, and sampling the colors on the layouts I am coding in CSS.
  3. browser and PDF reader for any documentation I am needing to access. I can refer docs on the laptop while coding on the other machine.
  4. all my data files so I can do any task off site with just the laptop.
24" and 30" monitors on a Mac Mini (yes, I said Mini) which runs:
  1. skEdit for coding HTML
  2. multiple browser windows with front-end and back-end views of TYPO3. Hitting the show icon on the back-end refreshes the front-end in the other window.
  3. my CSS editor with its preview window
Additionally, the machines run a bunch of other things like FTP client, MAMP server setup, etc. Since the files I edit for web are much smaller that with my former print work, I am able to get by with the Mac Mini. I was pleasantly surprised when I learned that by adding the Mini DisplayPort adaptor to drive the 30" that I could add an additional 24" on its normal display port. The 24" monitors are among the least expensive I found and I bumped the RAM on the MIni to 4 gigs. Setting up multiple monitors on a desktop is not as expensive as you might think. Surprisingly, you can buy a Mac Mini and outfit it with 4 gigs of RAM and two 24" monitors for less than $1,500 U.S. Anyway, that is my geek confession for today. Perhaps someday I will feel the need to unburden my soul about my fetish for external keypads and macros. Keeping a broad vision,
Ron]]> General Mon, 06 Jul 2009 00:00:00 -0500 Find TypoScript Properties Quickly http://www.busynoggin.com/noggins-notebook-archive/article/find-typoscript-properties-quickly/ I often find myself needing to look up the properties of a particular TypoScript object. Of... I often find myself needing to look up the properties of a particular TypoScript object. Of course, I search through TSref and when I need the  
details of the object it is great. But if all I need is to be  
reminded of the properties available and their spelling then searching  
and scrolling through TSref is a bit of a pain and slows me down. I posted this on the TYPO3 English list the other day. I explained that I was thinking of making an outline of TypoScript objects and their properties to use as a cheat sheet but wondered if anyone had anything like that already. Among the responses was from Martin Holtz who directed me to a solution he has put together using OpenSearch within the TSref section of the TYPO3 Wiki. It is very nice and just what I wanted. After adding it to your browser, simply select "TYPO3 Search" just like you would Google or Yahoo. Next enter the object or function you are looking for. For instance, type in "stdWrap" and you will get the page for that function with a list of all its properties. Search for "image" and you get the same for the IMAGE object. Much faster the searching and scrolling through a PDF of TSref. You can find out more about this and how to install it at wiki.typo3.org/index.php/OpenSearch. Thanks, Martin for sharing.]]> TypoScript Tue, 02 Jun 2009 19:23:00 -0500 Report on T3CON09-Dallas http://www.busynoggin.com/noggins-notebook-archive/article/report-on-t3con09-dallas/ 11 Countries, 4 continents, 20 states. A short report on T3CON09-Dallas
Well, everyone has gone home and the organizers are now all rested, so I believe now is the time to give a short report on the first official TYPO3 event to occur in North America. Let me first say that the attendance and response was far beyond expectations particularly as this was a first-time event. There were 80 attendees and they came from 11 countries on 4 continents. This international diversity was particularly encouraging to me as I have always seen TYPO3 as a global system not a regional one. The U.S. participants came from 20 different states (that’s our challenge, we are too spread out). I recognized many TYPO3 “celebrities” whom I have seen in various podcasts, but also met others running significant sites previously unknown to me, like a lady from North Dakota who oversees a university’s TYPO3 site with 20,000 front end users. The presentations were excellent and we had many positive comments about the venue. Overall, folks were very positive. We often heard, “I hope you are planning another for next year, I really want to come again.” We do indeed intend to make this an annual event. Thanks to everyone--the organizers, those who travelled so far, and particularly our European presenters who brought so much expertise (though I sensed you gained something from our “local” presenters as well).
]]> TYPO3 Wed, 22 Apr 2009 19:06:00 -0500 Photoshop Text Wrap: Faking Text Wrap In Photoshop http://www.busynoggin.com/noggins-notebook-archive/article/photoshop-text-wrap-faking-text-wrap-in-photoshop/ When mocking up a web design today, I ran into the need to represent an image floated inside text.... When mocking up a web design today, I ran into the need to represent an image floated inside text. When doing this for print work it is just an easy matter of wrapping the text around the image. However, Photoshop is not as robust in its text handling as InDesign or even Illustrator and does not have text wrapping capability. A quick search on Google came up with this technique for simulating text wrapping in Photoshop. Not as slick as an InDesign wrap but decent.]]> General Wed, 07 Jan 2009 15:47:00 -0600 Generate AJAX "Loading in Progress" Graphics the Easy Way http://www.busynoggin.com/noggins-notebook-archive/article/generate-ajax-loading-in-progress-graphics-the-easy-way/ How to produce an AJAX "loading in progress" graphic that matches your site's look. Sometime back I was putting together a jQuery carousel that was loading data via AJAX and I needed a animated graphic to indicate the data was in the process of loading. A search on google quickly produced www.ajaxload.info. This is an extremely easy way to produce a "loading in progress" graphic that matches your site's look. Those of you working extensively with AJAX probably already have a bunch of resources for this. But if you are new to AJAX, www.ajaxload.info is a great site to bookmark.]]> Front-end Coding General Mon, 27 Oct 2008 15:19:00 -0500