Advanced CSS Design Resources - last-child.com CSS Toys for Professional Web Developers 2009-09-14T16:12:54Z WordPress http://www.last-child.com/feed/atom/ Ted http://www.tdrake.net <![CDATA[Looking for an Action Script 3 programmer]]> http://www.last-child.com/?p=201 2009-09-14T16:12:54Z 2009-09-14T16:12:54Z We’re looking for a great Flash programmer to join our team at Yahoo! If you are interested and ready to join a great team on an important project send your resume to Ted Drake.

]]> 0 Ted http://www.tdrake.net <![CDATA[New Yahoo! BOSS Hacks web site]]> http://www.last-child.com/?p=196 2009-05-02T17:00:31Z 2009-05-02T17:00:31Z There’s a lot of information about Yahoo! Boss on the official site: Yahoo! Developer Network. However there is still a need for a more informal portal for quick reviews of BOSS-based mashups, helpful hints, techniques, and upcoming events.

BOSS Hacks is an unofficial Yahoo! BOSS Site that does exactly that. I started it last week as I noticed this site was becoming less about standards based markup and more about how I was working with Yahoo! BOSS.

This site will feature shorter, more succinct blog posts. I’ll save any large posts for the YDN blog. Please feel free to visit the site and send me notes about what you would like to see or any new BOSS-based sites that should be mentioned.

Related articles by Zemanta
]]> 0 Ted http://www.tdrake.net <![CDATA[Quick and Free Online PDF Creator]]> http://www.last-child.com/?p=188 2009-03-26T22:25:06Z 2009-03-26T22:25:06Z
Adobe Acrobat
Image via Wikipedia

I needed to create a .pdf document for a paper submission to an upcoming conference. Unfortunately I do not have Acrobat Writer on m laptop so I needed a quick fix.
PDF Online has a very simple tool for generating .pdf documents: Doc2PDF.
you simply upload your document, give it a name, your email address and its delivered in less than a minute.

Related articles by Zemanta
]]> 3 Ted http://www.tdrake.net <![CDATA[How easy is it to build a search engine with Yahoo! Boss?]]> http://www.last-child.com/?p=186 2009-01-31T20:25:56Z 2009-01-31T20:25:56Z Even I can do it! Check out the video, I look much less repulsive than I expected :)

]]> 0 Ted http://www.tdrake.net <![CDATA[Yahoo! Boss now features keywords and more language support]]> http://www.last-child.com/?p=168 2009-01-06T17:05:47Z 2008-11-19T07:33:32Z Yahoo! Boss search APIThe Yahoo! Developer Network blog just published a blog post with new Boss features: Yahoo! Search BOSS Releases Key Terms. There are a few key details in this article.

  • Key terms are now available: Each result now includes the keyterms Yahoo’s search index has assigned to the web page. This is the same information Yahoo! uses for search suggestions. I was trying to recreate this by using key term extraction in Yahoo! Pipes. But this would have involved multiple requests and slowed the page down. Boss’s inclusion of keyterms opens a whole new world of semantic search options. I’m using them to display related results on V3GGIE.
  • Extended language/region support: I was in Romania a couple weeks ago discussing Yahoo! Boss with some students in Bucharest. I noticed we didn’t support the Romanian language in Boss. I was able to send a few emails asking for support and voila, the Yahoo! Boss has not only added Romanian, but also Turkish and Hebrew! That is some fast turn around and shows their commitment to the users.
  • Boss made easier: Christian Heilmann has been creating Boss plug-n-play projects. You can get a JavaScript Boss badge, grab all the keyterms in one arrray, and recently a build your own site search in 3 easy steps lesson.
  • The article also has a link to a new site I’m developing: Tartin3. This is still in the development stages and is a prototype for a much larger site InsiderFood.com. I’m hoping to take the covers off Insider Food within the next couple weeks.Insider Food is now Live – but in Beta mode as I fix bugs and make enhance the search logic

Disclaimer: I work for Yahoo! but I’m not on the Yahoo! Boss team. I’m their “customer”, as I use Boss for multiple projects outside Yahoo!. I also am a member of the International Yahoo! Developer Network, which allows me to demonstrate and teach some of the Yahoo! API’s and services.

Related articles by Zemanta

]]> 0 Ted http://www.tdrake.net <![CDATA[Make a niche search engine with Yahoo! BOSS]]> http://www.last-child.com/?p=163 2009-01-19T16:39:04Z 2008-11-03T12:05:26Z The Yahoo! Developer Network blog just published an article I wrote about Yahoo! BOSS. It discusses how to use the search filters and query attributes with the BOSS API.

I’ve used these methods on V3GGIE.com, a vegetarian search engine and will be launching a new niche search engine in the next few weeks.
Yahoo! BOSS plus your ideas make a unique search experience

Update

Insider Food badge for featured expertsI’ve just taken the covers off my latest search engine project. Insider Food is a regional search engine powered by local bloggers, chefs, and restaurant fanatics.

It’s a wee bit slow right now due to a multitude of API requests to Yahoo! Boss, Yahoo! Pipes, Flickr, Amazon, and more. Look for some upcoming posts about the construction of the site. Hopefully I can even describe caching and threading. Once somebody teaches me :) .

Related articles by Zemanta

]]> 0 Ted http://www.tdrake.net <![CDATA[CSS3 Attribute Selector Presentation]]> http://www.last-child.com/?p=162 2008-10-09T20:46:11Z 2008-10-09T20:46:11Z During the fog of a summer cold and pressing deadlines… I gave a presentation today at the Yahoo! Front End Engineering Summit about CSS3 Attribute Selectors. The presentation briefly touched on some of my previous posts on this site as well as a few new concepts and ideas.

Here is the full presentation (HTML): CSS3 Attribute Lovin’. Feel free to copy, share, or do whatever you like with it.

I’ll post some more information on the new topics soon. Right now I’ve got to get back to my massive list of outstanding bugs on my project.

Related articles by Zemanta
]]> 0 Ted http://www.tdrake.net <![CDATA[Add Pagination to your Yahoo! BOSS search engine]]> http://www.last-child.com/?p=161 2009-04-29T08:45:58Z 2008-09-12T15:07:52Z Search pagination exampleYahoo’s BOSS search API makes it easy for you to create a customized search engine. Yahoo! also has a Design Pattern lLibrary to save time designing your pages. They’ve put a lot of effort into creating the best user experience for search pagination.

Pagination guidelines

Here’s a sample of the Design Library’s ideas for search pagination.

  • Display the navigation controls as a row of links.
  • Present links in the following order: ‘Prev’, page links, ‘Next’.
  • Display a left arrow after the label ‘Prev’.
  • Display a right arrow before the label ‘Next’.
  • Make the arrow(s) clickable.
  • The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.
  • When on pages 1-6, the page links should always start at ‘1′.

Search Pagination

The rationale for these rules is also interesting:

  • Displaying arrow graphics helps differentiate the links and provides larger click targets.
  • Disabled controls add little value in this context since
    • These links often appear blow the fold.
    • The first page of results makes up the vast majority of pageviews. Displaying a disabled “previous” control on all of these is of little added value.
    • Although a “First” link has value, it competes with the functionality presented in the random-access links.
    • The “Last” link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.

Add this pagination style to your search engine

See the final result on V3GGIE.com: Vegetarian Enchiladas Recipes

Most PHP pagination tutorials assume you are pulling content from a database. Ascanio Colonna created a good tutorial on building pagination with PHP that is agnostic to the data source. I’ve taken his code and modified it to match the Yahoo Design Pattern. I’ve also added the suggested YUI Module markup to stay consistent with the YUI Grids and any future YUI javascript.

The pagination.php file includes a function that creates the module. You’ll need to call this function from your results page with a series of parameters. These are easy to populate from the BOSS interface. It’s worth noting that I am ignoring the BOSS next/last page nodes in the web service and prefer to build my own urls.

The Pagination Code

Lets’ start by looking at the code inside your results.php file. This will call the pagination function and pass the desired parameters.


if(!empty($searchQuery))
{
require '/include/pagination.php';
if(isset($_REQUEST['page'])) {
$page = $_REQUEST['page'];
} else {
$page = '1';
}
$limit = $count;
$targetpage = 'results.php';
$pagestring = '?page=';
$summary_name = 'articles';
$placement = 'summary';
// start pagination
echo getPaginationString($page, $totalhits, $limit, $targetpage, $pagestring, $summary_name, $placement);
}

Here’s what you are working with:

require ‘/include/pagination.php’
Where does the pagination file sit on your server
$page logic
First look to see if there is page=x in the url. If so, $page = x, if not, you are on page 1.
$limit
How many results will appear on the page
$targetpage
what is the name of your results page? index.php, results.php?
$pagestring
I tried to minimize this to ?p= but couldn’t track down why it didn’t work. I’ve left it at the default ?page=…
$summary_name
This is what appears in the text “xxx (summary_name) results. This is not used in the Yahoo Design Library
$placement
You’ll probably want to use summary. This function also allows “footer” for a simplified output
echo getPaginationString(…)
Send the information to the function and display the results in the page.

Important Update!

The original code I posted had a serious security flaw. You should never output user’s input directly into your page. I had something like this href=”?query=$_REQUEST['query']“. This allows all sorts of Cross Site Scripting attacks. You must urlencode any text that comes from a user. This is safe: urlencode($_REQUEST['query']).

I apologize if anyone has used this code, as I wrote it on their site. They should immediately update the logic. -Ted

The pagination function

I have streamlined the original code from Asconio, as he was tying into pre-existing facebook styles. This code is for your unique web site. It’s also worth noting I use rewrite rules to make my search result page urls more friendly, i.e. /corn.html instead of /result.php?q=corn


//text strings in strings.php

function getPaginationString($page = 1, $totalitems, $limit = 15, $targetpage = '/', $pagestring = '?page=', $summary_name = 'items', $placement = 'summary',$safeQuery)
{

$countnum = '15';

// inurl or intitle
// it should only be three digits long, int, inu, or nox anything else could be a vulnerability
//int=intitle, inu=inurl, nox=no setting
if (isset($_REQUEST['inx']) && strlen($_REQUEST['inx']) == 3){
$inxv = $_REQUEST['inx'];
}
else {
$inxv = '';
}

// type of query
// request type should only be 2 chars, if not we are dealing with an xss attack
// type options: rc, lo, ve... these represent recipes, local, buzz for insider sites.
if (!empty($_REQUEST['t']) && strlen($_REQUEST['t']) <= 2) {
$tid = $_REQUEST['t'];
}
else{
$tid = 've';}
// count should only be a number. don't allow text for xss protection
if (!empty($_REQUEST['count'])) {
$countnum = number($_REQUEST['count']);
$limit = $countnum;
}
// DEFAULTS
$adjacents = 10;
//$targetpage = .'.html';
// VARS
if(substr($pagestring, 0, 1) != '?') $pagestring = '?' . $pagestring; // If query string is lacking start, add it
if(substr($pagestring, strlen($pagestring) - 5) != 'page=') $pagestring .= '&page='; // If query string is lacking page var, add it
$prev = $page - 1;
$next = $page + 1;
$firstpage = 1;
$lastpage = ceil($totalitems / $limit);
$fiop = ($limit * $page) - $limit + 1; //# of first item displayed in current page
$liop = min($limit * $page, $totalitems); //# of last item displayed in current page
$searchstring = "&t=$tid&inx=$inxv";
$nicetotal = number_format($totalitems);

/*
DRAW PAGINATOR
*/

// Give it the right class (the footer paginator has no summary and the current page has a different gfx)
if($placement == 'summary')
$type = 'summary';
else
$type = 'footer';

// Draw summary
if($placement == 'summary')
$pagination .= "

$string_results_page

";

if($lastpage > 1) // Paginator page selection is drawn only if more than 1 pages are there
{

$pagination .= '

    ';

    // First page selector
    if ($page > 2)

    // Previous page selector
    if ($page > 1)
    $pagination .= "

  • $string_next

    • ";

    // Page selectors
    if ($page < 4) //not enough pages to bother
    {
    for ($counter = 1; $counter <= min(5, $lastpage); $counter++)
    {
    if ($counter == $page)
    $pagination .= "

  • $counter

    • ";
    else
    $pagination .= "

  • $counter

    • ";
    }
    }
    elseif ($page > $lastpage - 3)
    {
    for($counter = $lastpage - min(5, $lastpage); $counter <= $lastpage; $counter++)
    {
    if ($counter == $page)
    $pagination .= "

  • $counter

    • ";
    else
    $pagination .= "

  • $counter

    • ";
    }
    }
    else
    {
    for($counter = $page - 2; $counter <= $page + 2; $counter++)
    {
    if ($counter == $page)
    $pagination .= "

  • $counter

    • ";
    else
    $pagination .= "

  • $counter

    • ";
    }
    }

    //next button
    if ($page < $lastpage)
    $pagination .= "

  • $string_next

    • ";

    //last button
    if ($page < $lastpage - 1)

    $pagination .= '

';
}

$pagination = "

$pagination

";

return $pagination;

} ?>

//This allows user to easily try the search with different options

// strings are translated defined in separate file for localization
//$string_try_diff_type = "Try a different type of search";
//$string_try_diff_header = "Didn't find what you were looking for?";
//$string_try_inx = "Try searching for $safeQuery only in page titles";

function trySomethingelse($safeQuery, $searchQuery, $inx, $tid,$string_try_diff_header, $string_try_diff_type, $string_try_inx, $string_buzz_tab, $string_local_tab,$string_recipes_tab){
if($inx==''){
$tryinx = "

  • $string_try_inx";
    }
    $trydiff='';
    switch ($tid){
    case "rc":
    $trydiff = "

  • $string_try_diff_type $string_local_tab or
    $string_buzz_tab";
    break;
    case "lo":
    $trydiff = "

  • $string_try_diff_type $string_recipes_tab or
    $string_buzz_tab";
    break;
    default:
    $trydiff = "

  • $string_try_diff_type $string_recipes_tab or
    $string_local_tab";
    }

    ?>

      print $tryinx;
      print $trydiff;
      ?>

    }
    ?>

    I’ve added a few classes to the final output. The previous and next links have class”nextlink” or class=”prevlink”. The current page has the number within a strong tag with class=”current”. Finally, the parent module has class=”pagelinks mod”. This makes it pretty simple to style

    Pagination CSS

    I’m using the YUI Sam Skin sprite for the tabbed search box. I’ve added a couple arrows to this sprite for my search pagination.


    .pagelinks {
    text-align:center;
    border:1px solid #ccc;
    padding:5px 0 0 0;
    }
    .pagelinks ul li {
    display:inline;
    }
    .pagelinks ul a, .pagelinks ul strong {
    display;block; padding:3px 5px;
    }
    .pagelinks ul strong {
    background-color:green; color:#fff;
    }
    .pagelinks li.nextlink a,.pagelinks li.prevlink a {
    padding-right:15px; font-size:120%; font-wieght:bold; background:url(/images/sprite.png) no-repeat 100% -1943px;
    }
    .pagelinks li.prevlink a {
    padding-right:0px; padding-left:15px; background-position:0 -1973px;
    }

    I am also not a PHP expert and welcome suggestions on improving the code.

    Download files

    Related articles by Zemanta

    ]]> 3 Ted http://www.tdrake.net <![CDATA[Create a tabbed search form with YUI]]> http://www.last-child.com/?p=159 2008-09-28T16:12:08Z 2008-09-09T14:00:59Z Yahoo! makes it easy to create an accessible, handsome tabbed interface. I used their Tab View library to create the tabbed search form for V3GGIE.com. While Tab View can create the tabbed content dynamically, I’m using it to hide/show hard-coded individual forms.

    Update: I’ve removed the tabbed interface from V3GGIE.com. This particular use of the tabbed module seemed to have created some confusion in users. The approach is still valid, just not the way I originally implemented it. See the tabbed search form on V3GGIE.com

    Step 1. Create the basic HTML code.

    The tabbed code is a simple pattern:

    1. Start with a parent div and give it an id and class=”yui-navset”.

    2. Create an unordered list inside this div with class=”yui-nav”.
    3. Each list includes a deep link to a corresponding div that is also a child of the parent div. The link text in an em tag.
    4. V3GGIE Search

    5. Create a div with class=”yui-content” and create a set of content containing divs. Each div has an id.

      ...
      ...
      ...

    6. Insert the Tabview CSS at the top of the page, the Tab View JS at the bottom of the page, create a small js that instantiates the tab-view module.
    7. For easier styling, use the sam_skin CSS package and add class=”yui-skin-sam” to the body.

    Step 2. Use PHP to make it more interesting

    Each page calls this chunk of code to insert the tabbed form, it also sets a variable ($selected), determining which tab is selected on page load. I’m also inserting the last search query into the text input to make it easier on the user. This is easily done by grabbing the query from the Request object.

    The finished code:

    Try "San Francisco Pho", "Paris Fromage", or "92104 tofu"

    Try "corn chowder" or "vegan pizza"

    Try "Vegetarian Chinese Olympics"

    Try a subject: "PETA", "Tempeh", or "Paris -Hilton Vegetarian"

    View the source as a text file

    The Final Product

    We now have a tabbed module that allows the user to find recipes, news, blogs, and local restaurants from any page. This is an easy introduction to the YUI libraries. However, I came across the following surprises:

    • The order of the tabs must match the order of the target divs. I moved my tabs around and discovered they were toggling the wrong forms.
    • The links that generate the tabs need to have em tags surrounding the text
    • You’ll need to download the entire YUI package to gain access to the CSS and sprites needed for the library. The examples on the YUI site assume relative links to files, you will either need to duplicate that file structure or upload the skin’s sprite and change the CSS accordingly.
    Related articles by Zemanta
    ]]>     0     Ted http://www.tdrake.net <![CDATA[Create your own Search Engine with Yahoo! BOSS]]> http://www.last-child.com/?p=158 2008-09-04T20:38:41Z 2008-09-04T20:38:41Z Yahoo! recently launched BOSS, which opened their search platform to developers around the world. They didn’t just create an API to access data. That has been around for a while. Yahoo! has opened the data to developers with no limits on requests, no restrictions of icon use, results display, or even the need to let people know the search engine is Yahoo! based.

    Yahoo BOSS plus your special sauce equals search innovation

    This open approach lets anyone build a search engine to their particular skills, mash the data with other sources, re-arrange results, or any other novel idea for the next king of search. You could also use BOSS to add search capabilities to a pre-existing site, limiting the resuts to just its data.

    Why is Yahoo! doing this? It’s a brash approach to push search beyond its current status of pages with ordered sets of links You can let your imagine fly with the only cost being your personal development investment. I recently took this challenge and decided to build a search engine for vegetarians.

    V3GGIE – A Vegetarian Search Engine

    My goals were simple:

    1. Create a simple site that could be copied easily as a proof of concept for other genres. Document the construction for others to explore.
    2. Keep it fast with minimal javascript and images
    3. Use as much Yahoo infrastructure as possible to minimize development time
    4. Most importantly: return information relevant to the niche audience: Vegetarians and Vegans.

    I’m not a PHP expert and some of my code is crude. I hope to clean it up and add a number of features to enhance performance and usability. However, the code samples will still be useful to the PHP beginner. More advanced PHP programmers could easily see where they’d take the concepts and improve on them.

    Set up the basic structure

    V3ggie has a basic workflow, there’s an input and result page. Arguably, this should only be one page which displays the original landing and subsequent results. I have separated them as I hope to create extra content that is appropriate to either the landing or results pages.

    Further, there are several search engines built into this site. Each has a specific set of resources to fine tune the results. Currently, these are built with subdirectories (/recipes/, /blogs/, /news/, /local/ ). Each subsection includes index and result pages. This could be changed by utilizing rewrite rules. I’ve kept it simple for now.

    Setup the Resources

    The BOSS API allows you to create a query param with a list of domains to search through. This is the easiest way to fine tune your results. For instance, the V3ggie recipe search page uses a list of vegetarian cooking sites as well as the vegetarian subdirectories of Epicurious and FoodNetwork.

    Technorati is the source for blog buzz. V3ggie searches through blogs tagged with “vegetarian” and/or “vegan”. This helps get the vegetarian viewpoint for any subject.

    You have complete freedom to mash the data as much as you like. You could take the search results and mix them with other data, such as the page rank for a result page, the company or product’s appearance on wikipedia, or perhaps data you’ve stored in your own databases. I can imagine creating an internal product search page that cross-references the results with a list of preferred vendors to encourage employees to purchase supplies from the correct vendor.

    Setup the Platform

    V3ggie is built from PHP. However, Yahoo! has also provided a python platform, the BOSS Mashup Framework, for building sites very quickly. You can combine this with the Google App Engine to create a custom search engine in a short time. Four Hour Search, formally known as Yuil, is such an example. It got its name from the length of time it required to research a domain name, setup Google Apps, and build the final search web site. Personally, I spent more than 4 hours trying to get Google Apps set up and I really didn’t want to learn yet another language (python).

    YUI on the frontend

    The Yahoo! User Interface library handles the tedious, basic formatting of a page. The CSS libraries allow you to create a wide variety of page grids, standardize the fonts, reset browser inconsistencies and establish a common look and feel.

    I started the project by using the CSS Grid Builder. This easy to use tool sets up the page with the desired columns and includes the base css files. I then added the YUI Base CSS file. This takes the plain page and re-establishes the margins and font-styles for a basic site. These two CSS files will remove 75% of the CSS you would normally have to write for a site. Now you can concentrate on what makes your site special.

    I also wanted to offer different seach options from a single interface. Once again, I used the YUI TabView package. This combination of CSS and JS allows you to create a semantic set of links and corresponding series of div wrapped objects. YUI Tab View will turn this into the tabbed interface that even has built in ARIA support for screen readers.

    I had some trouble getting the tabs to look correct. The documentation does not make it very clear that tab links must have an em within the links to get the proper look and feel. I also downloaded the preferred sprite and used fireworks to change the tab color gradients from blue to green.

    Yahoo also provides a design pattern library. This helped me configure my pagination links. Yahoo has spent a lot of time with user testing to make sure things are easy to use.

    Create your own search engine

    So, what are you wating for? Visit the Yahoo Developer Network and start by signing up and getting a application key. I will write separate posts that describe how to build various components of the page. I’m looking forward to hearing from better PHP programmers on how to improve the code.

    Related articles by Zemanta
    ]]>     1