About - Website
First and foremost, the purpose of talynkevin.com is to give you, the visitor, a glimpse into our lives. But it's more than that - we wanted to make this a place where you can view and share recipes and ideas. We love cooking and we love eating, we love sharing our recipes and learning recipes from others, and what more convenient way to do it than right here. (away from those pesky banner ads...) So, enjoy!
(Target audience: budding web developers and those who are simply interested in web development - I try not to get too technical)
Though this site is far from perfect, there are many concepts that I have applied to its design and development. It looks best in Firefox (Mozilla-based browsers have some neat features, like rounded corners, that will come out in CSS3) in 1024x768 resolution, but it has been tested using most resolutions in the majority of the more popular browsers: Firefox 1.5+, IE 5.01+, & Opera 9+. (I'd test on Safari too, but I don't have a Mac) Try playing around with different window sizes & resolutions, and I think you'll be pleasantly surprised at how the content of the page rearranges itself. If, at any time, you notice something else that can be improved, or if I've made any type of error, please let me know. Now, about the site and how it was created:
PHP (recursive definition: "PHP Hypertext Preprocessor", or originally "Personal Home Pages") is used as the backend - ie. it does all the grunt work like processing requests, maintaining user sessions, and retrieving/storing information from/to the database. When a PHP page is requested (eg. when you click on http://www.talynkevin.com/index.php), the index.php script runs on the web server that hosts talynkevin.com (server-side script) - not your home computer - and outputs standard HTML code. This code is translated by your internet browser into what you see on your screen. You will never see any actual PHP code, even when you try to "view source" - this simply shows you the HTML code that was outputted by the PHP script. One advantage of using server-side scripts (like JSP, ASP, ColdFusion, Ruby-on-Rails, etc.) is that as long as the web server can process the scripts, all internet browsers will see the same content. That is, it's not dependent on the client computer.
I chose PHP because of its ease of use, wide availability, and for the fact that it costs nothing - anyone can download a PHP/Apache/MySQL server bundle and install it on their machine.
Years ago, the standard for creating page layouts on web pages was using tables. And they did the trick - you could make even the most complicated layouts by creating complex tables, if you nested them in countless other tables - programs like Adobe Photoshop has tools to create these layouts for you, and it's all done with the click of a button. Visually, it got the job done. But if you look at the HTML code required to make some of these layouts, finding content embedded in the code is like trying to find your one navy blue sock in a basket of black socks. You could have 10 times as much table markup (code) as content. File sizes are much bigger than necessary, and those who use screen readers (which reads a webpage out loud) have a hard time filtering through the gobbly-gook. (if your website still uses this method, don't worry - our old one did too)
Additionally, styling was done with extra HTML markup - font tags for text styling, nested tables for borders, etc. - that cluttered the page markup even more.
Then came CSS, or Cascading Style Sheets. CSS allows you to separate the content (what's really important on your webpage) from both the layout (positioning of elements on the page) and styles (fonts, colors, borders, etc.).This has many advantages, but here are a few:
- less unnecessary code
- the ability to style all common elements in a certain way (eg. you can specify all links to be bold)
- position the page differently, according to style sheets, without having to rearrange the actual content (see http://www.csszengarden.com for illustration of this point)
- oodles of additional styling & layout functionality
Unfortunately, accessibility doesn't seem to be high on the priority list of many web developers. More than just a logical page flow and intuitive element positioning, accessibility allows those with less favorable circumstances (eg. decreased motor ability) to still navigate the site. Keyboard shortcuts are very easy to implement (supported on input and link tags as the accesskey attribute), and allow the user an alternative to using the mouse. An underlined letter on a link or the label of an input key denotes the keyboard shortcut. Using these shortcuts varies by browser:
- Firefox <1.5: alt+[shortcut key]
- Firefox >=2.0: alt+shift+[shortcut key]
- IE: alt+shift+[shortcut key], then enter
- Opera: shift+esc (shows a list of available shortcut keys on the page), then [shortcut key]
Another important aspect of accessibility is the absence of unnecessary markup, which is attained by good usage of CSS. Not only is it important to avoid usage of old, deprecated tags and attributes (eg. <font>, the bgcolor attribute, etc.) to clean up the page, but it is just as important to use good semantic markup. For example, use the <blockquote> tag if you're quoting something (instead of using a <div> tag) or the <label> tag when identifying an input field (instead of using a table for simple forms). Any of these tags can be styled in your CSS style sheets. Avoid using <i> or <em> tags simply for formatting - only use them when you want to convey the message that the contained text is emphasized. In this way, one who analyzes the code or listens to it being read by a screen reader can have a better understanding of the organization of the page.
- famfamicons [http://www.famfamfam.com/lab/icons]
- XAMPP [http://www.apachefriends.org]
- Scriptaculous [http://script.aculo.us]
- Sortable Lists [http://www.gregphoto.net/sortable]
- The CSS Anthology: 101 Essential Tips, Tricks & Hacks [http://www.sitepoint.com/books/cssant1]
- The PHP Anthology: Object Oriented PHP Solutions [http://www.sitepoint.com/books/phpant1]