Archive for the ‘Web Design’ Category

As I mentioned before, I don't have access to a modern version of Safari and when I pass an Apple store, I try to play with it and the site. Something always pops up to bite me. This time it was an improved version of my Hebrew keyboard, that I made into a popup, absolutely-positioned <div> instead of a separate page, using sprites for the keyboard button rollovers. Nice and elegant, but it means loading the <style> element with all those a:hover {background: 0 -150px}'s via Ajax as well. Just putting a <style> element in the loaded <div> worked fine in IE and Firefox, but today Safari wouldn't show any styles. Turns out Safari is technically right; <style>'s go in the <head>, not the middle of the <body>. That's a rule that doesn't make any sense, any more than requiring <script> elements to be limited to the <head> would. But such are the rules. I looked up a few ways to include a <style> element, but realized there's an easier way; I split the style into its own stylesheet and added a line to Javascript: $('head').append('<link type="text/css" href="/css/kb.css" rel="stylesheet" >'); before the $('<div id="keyboard-holder">').insertAfter('#q').load('/inc/keyboard.html'); // load via Ajax and now the style loads dynamically and easily. Luckily, jQuery handles identifying and executing <script> elements in Ajax'ed code, so I don't have to pull that out.
Just completed a long meeting about the website, which will be undergoing a major redesign, hopefully before the yomim tovim. The Lubchansky's think we should roll it out all at once, completed, rather than redesign and then recompose, to maximize the impact. So the site will stay as it is. Watch this space for more info!
I can't claim any talent at design; I just used the old design when I made the YI website. I have help now! A few people who want to remain nameless are helping remake the site into something both more modern-looking and more streamlined, easier to use. As Cameron Moll said, Good Designers Redesign, Great Designers Realign and I certainly think we need a complete realignment, to put the important stuff on the home page and other things back behind (we don't need a list of officers on the front page, and the map, while incredibly cool, slows the initial load time immensely). The plan now is to make it more WordPress-y (fixed width, site navigation across the top), based on a design by Jenna Smith.
To make the eruv map, someone had to enter all the individual points of the eruv boundary. That someone was Mickey Ariel (thanks!). To make it possible, I wrote a simple web application that contains a Google map and placs a marker at every mouse click. Each marker has a number, and the list of each marker's latitude and longitude is inserted at the end of the page. The markers can be dragged to new locations, and the boundary is drawn between the markers. Clicking a marker brings up a small callout window where notes can be added, the marker can be deleted and it can be renumbered (to move a marker between markers 4 and 5, change its number to 4.5. When you hit Update, the list will be renumbered appropriately. The tool can be used anytime you need the latitude/longitude for any route. Enjoy!
With the I-64/I-170 construction, the eruv had to be revised (an incredible job by the eruv committee!) and I had to revise the Google maps eruv on the site. Google maps was the reason I started maintaining the Young Israel site; I read about the API that lets you add your own markers and lines to a map and thought that it would be really cool if we could mark the boundary of the eruv on the satellite map. It turned out to be pretty easy; the code should be clear enough. The problem is what to do if javascript is not enabled. I initially had a <NOSCRIPT> section that contained an <IFRAME> that displayed the maps.google.com page directly, but that was ugly, didn't actually show the eruv, and didn't deal with the case of javascript enabled but Google maps not supported. And NOSCRIPT is certainly not ideal for unobtrusive javascript—where the site works without javascript but works better with it. So, the better answer is to have some non-javascript element that does what we want, then replace it with the Google map if javascript is enabled (and trivially, add a test for GBrowserIsCompatible() to make sure that Google maps are supported). new GMap2(elem) replaces the contents of elem, so that's easy. But what should the default, no-javascript, element be? I finally realized that a static map would work, and the way to get that is to take a screenshot of the real Google map, edited to leave a blank spot where the infowindow goes, and use CSS positioning to put the infowindow in there. Now the scriptless user gets a site almost identical to the real one, but just not interactive.
For those who liked the YI Hebrew keyboard, I wrote a similar keyboard that I use to turn Hebrew into HTML entities (for the website), and, at my kids' request, uses Morfix dictionary and Google Israel to translate or search for Hebrew terms. Enjoy!
I spent a few minutes at the Apple store tonight, drooling over the big imacs, and tried the YI website with Safari 2.0, and most things didn't work! The search box was visible in the sidebar, the Google map was broken, and the drop shadows and centered embossed text weren't there. At least with the unobtrusive javascript philosophy, the site worked and looked OK, but it wasn't pretty. I have an old mac, running OS X 2.8 (Safari 1.3; I know jQuery won't work) at home and Windows XP at work, so I can debug on Firefox and Internet Explorer 6, and just hope for the best. I wonder if the Apple store will let me hang out there, hacking :)
Well, I had every intention of documenting all the PHP and Javascript tricks I've learning to get the YI site running, but I'm leyning Acharei Mot-Kedoshim in 2 weeks, plus trying to keep up with shnayim mikra/echad targum plus Rashi and Emek Davar (i've given up on the Malbim,which I started but can't go through all of Sifre each week) in this season of double parshiot is taking all the time I would have had. At least I have my priorities straight! (If you're reading this because you're interested in programming and it all looks like Hebrew, don't worry. It is.)