Resources and tutorials for Webmasters
Resources and tutorials for Webmasters

Friday, August 29, 2008

YouTube Finally Figures Out How To Make Money: Big Ads On Its Homepage

Take a good, long look at YouTube's (GOOG) homepage. You may not recognize it soon: The video site is trying out new ad format that will turn over a good chunk of the page to sponsors.

The move is an obvious step that Google hasn't taken yet as it tries to wring money out of its hugely popular site. Messing around with pre-roll ads, overlays and other ways to insert advertising into the video is one thing. But simply handing over more of the homepage -- its most valuable real estate -- is a relatively easy way to generate dollars.

Advertising sources say YouTube is revamping the homepage to accommodate a huge new banner ad that will span the entire width of the page. The ad will is roughly the same height as the current video ad unit on the upper right of the page, and designed to accommodate high-definition video, similar to the campaign Sony Pictures ran on YouTube to market "Pineapple Express." Sources who have seen the unit describe it having multiple tabs that activate when rolled over by a cursor.

YouTube is shopping the unit to entertainment-industry advertisers, the ones that have most embraced the video site as a marketing tool. They're offering inaugural sponsors a deal to buy the new unit for roughly the same price as the old, or about $200,000 a day. The first is coming within the next two weeks, and advertisers expect YouTube to start bumping the rates up this fall.

Google has been criticized for leaving money on the table by keeping its search page free of advertising. Likewise, the YouTube homepage has until now had pretty minimal advertising, just the window in the upper right corner of the site. But it should be the easiest part of the site to sell, since YouTube has plenty of control of what appears there.

Industry observers think that News. Corp.'s MySpace is getting more than a $1 million for takeover ads on its homepage. One big difference: Unlike MySpace, many YouTube users never end up on the site's home page.

Asked for comment, YouTube offered the pro forma "We do not comment on rumors and speculation," response.


Top Best 50 Firefox Extensions For Web Design

Each day there are more people that use Firefox. It is much faster than Internet Explorer, and has a lot of extensions and themes. Regarding the extensions, many of them are much more than interesting. Some of them ease the work of designers and developers. Here follows a list of 50 of the best.

Graphics Tools : They let you manipulate and create graphics for your site.
  • Palette Grabber Gets a palette of colors from the current page. You can use it with Photoshop and other graphics edition programs.
  • MeasureIt A very useful ruler that can measure the size of anything in a web page. You can turn it on/off from its icon in the status bar. This may allow you to create banners, buttons, with the size that you wish.
  • Photo to Text Convertor Turns a photo into ASCII art. This is a picture done with numbers and characters. Really original designs.
  • ColorZilla Pick a color from a web site. Also includes a zoom.
Coding tools : They make easier to manipulate and write code.
  • Firebug Edit and detect errors in HTML, css and Javascript . See the loading time, see the code in different colors, etc. A complete solution for code edition.
  • View Source Chart Makes a square surrounding the HTML tags by colors so you can see easily distinguish them.
  • Text Formating Toolbar A toolbar for text formating for forums, html and wikis.
  • View formatted source View the CSS code formatted with colors.
  • ViewSourceWith Instead of seeing the source code with the Firefox menu, you can use your favorite application.
  • Xinha Here Edit HTML code visually. Very easy. You can use it in any text box.
  • Console² An enhancement for the Javascript console of Firefox.
  • View Dependencies Lets you see what files a web page uses. This is useful to see if you are doing a link to something that is in the wrong place.
SEO Tools : These are good extensions to better your position in search engines like Google.
  • Virtual Real Estate (VRE) Toolbar A complete solution for SEO that has the shape of a toolbar. Really useful.
  • SeoQuake Adds SEO information to Google searches (like PageRank,etc), and also a useful toolbar.
  • KGen A very good set of tools to choose keywords and see what are the best for a page.
Validation And Testing tools : They are needed to better your page’s performance, and ensure compatibility with all browsers.
  • Total Validator Checks the HTML, plus broken links, spell checking, and takes 25 screenshots of your website in different operative systems and browsers.
  • Window Resizer Tool for testing your web page in different window sizes. For example, you should know how it looks at 800x600, 1024x768, etc.
  • CSS validator Sees if your CSS template (the style of your website) follows the standards.
  • RSS validator Tests if your RSS follows the W3C (the organization that rules the standards for web pages).
  • Extended Statusbar Shows load time, download speed, number of images and percentage loaded in the status bar.
  • HackBar Security check for your website. This is not a hacking tool.
  • Html Validator Validates the HTML code.
  • Quick Locale Switcher Changes the language of your browser quickly. Useful to test your site for different languages.
  • YSlow Tells you why your website loads slowly, following the Yahoo rules.
  • lori (Life-of-request info) Tells you specialized information about the loading speed of a page.
Integration with other browsers : They are useful to test your design in other browsers.
  • Safari View Open the page in Safari browser (Mac).
  • IE View Open the current page in Internet Explorer. Can mark a page to always open in IE.
  • IE View Lite A lighter version of IE View.
  • IE Tab Opens Internet Explorer in a tab of Firefox, so you can see the page in Internet Explorer without having to open it outside Firefox.
Website screen capturers : Their mission is to create a screenshots of a web page.
  • FireShot Captures the web page as an image and lets you annotate things in the image.
  • Screengrab Captures a website, or a part, as an image.
  • Save As Image Make a screenshot of a page, or a part. Allows quality settings.
Tab Thumbnails : These extensions are useful to get a general view of your website or other's, and compare one with the others viewing them at the same time. Other use can be ensure that your website has a common appearance. They may be also an help to browser between tabs.
  • Firefox Showcase It's a way to see several tabs in thumbnails with tools to manage them as if they were files.
  • Viamatic foXpose Clicking an icon in the status bar gives you a view of all tabs.
  • Tab Catalog Puts a button that when you move your mouse over it, displays all tabs as thumbnails, and when you click one, you go to that tab.
Backup Tools : The reason to include backup tools is that when you are designing you may crash your browser, and it will be better to be able to restore all again. They are also very valuable for every user.
  • CLEO Backups all your extensions in one single file. Needs FEBE installed.
  • FEBE This can make a backup of your extensions and bookmarks. You can also setup it to make backups with the frequency that you like. It can also backup more things, but it’s not recommended because there are some bugs. Anyway, the extensions and bookmarks backup is secure.
Bookmark synchronization : To share bookmarks between different people or between different PCs is a need that many developers and webmasters may have.
  • Chipmark It's a solution to have the same bookmarks in different computers permanently actualized when you change or add them. You can also share some of them with your friends and explore popular random links.
  • Foxmarks You can have the same bookmarks in different computers. It works automatically and you just have to install, configure and nothing more.
  • Google Browser Sync The Google solution for shared bookmarks between computers. It can also share cookies, browsing history, etc.
Productivity tools : The purpose of these extensions is to work faster.
  • Pastego Creates an icon that you can place in any toolbar of Firefox that opens a tab and pastes the url you have copied in the clipboard.
  • Auto Copy When you select a text, it is copied to the clipboard automatically, like in Linux. It also has an icon in the status bar to turn it on/off.
  • CoLT Allows to copy the text of a link, the url of the link, or both at the same time.
  • Clippings You can define texts and paste them with the right click menu, instead of having to write them every time.
  • HighlightAll You select a word and choose "Highlight all" in the right click menu and all words like that are highlighted in the page.
  • All-In-One Search button Adds a highlight button to the search box that can highlight the searched words in a page. Also highlights the searched term.
Miscellaneous : Other tools that don’t fit in the other categories.
  • Smart Digg Button Shows a small Digg button that shows how many Diggs the current page has.
  • Launchy Open links in external applications. For example, open an email link in the program you choose.
  • CacheIt Displays a cached version of the page. Useful to recover some lost code that was not saved or if you break something.
  • FireFTP An FTP client integrated in Firefox.

Wednesday, August 27, 2008

Google helping expand undersea cable infrastructure

Google is once again joining forces with foreign phone companies to help lay new undersea fiber-optic cables to bring faster Internet speeds to the far corners of the world.

On Tuesday, the Web site TeleGeography reported that Google has joined a consortium to build an intra-Asia undersea cable called the Southeast Asia Japan Cable to connect Japan, Guam, Singapore, Hong Kong, the Philippines, and Thailand.

Earlier this year, Google joined a group to build an undersea cable linking Japan to the United States. The consortium building the new intra-Asia cable has many of the same members as the consortium developed for the Japan-U.S. cable, including Google, Bharti, SingTel, KDDI, and Global Transit.

There is already a lot of competition along this Southeast Asia route, where several cables have already been planned. As a result, the new intra-Asia SAJC cable won't likely be ready until 2011, TeleGeography analyst Alan Mauldin said in the report.

In addition to helping new fiber under the ocean in Asia, Google is also supposedly looking for partners to help it build a new undersea cable to Africa. So far details have been scarce, but the South African Web site ITWeb reported earlier this month that Google recently met with South African ISP Internet Solutions, Telkom SA, MTN, and Vodacom in July.

The site also reported that Google supposedly met with two existing project leaders, South Africa's Broadband Infraco, which is trying to build a cable along the western coast of the continent to Europe, and Seacom, a privately owned system that will run along Africa's eastern coast, connecting Africa to India and Europe.

Google has been building fiber infrastructure domestically for the last few years. Most of this fiber infrastructure has been used to fuel internal network and data center growth. These new undersea cable investments could be an extension of this strategy. But it also is likely a way for Google to push more bandwidth and capacity into regions of the world where it sees the most growth potential for its services.

Google executives have said for a long time that developing markets offer the biggest opportunity for the company with billions of sets of new eyeballs in these regions poised to use Google's products and services in the future.


Monday, August 25, 2008

Blender : 3D Modeling and Animation

Blender is the open source software for 3D modeling, animation, rendering, post-production, interactive creation and playback. Available for all major operating systems under the GNU General Public License.

Continuing Blender 2.4x series, Blender 2.47 is a bugfix release to stabilize the "Bunny Release", serious effort has been put in tracking bugs and fixing them.

Modeling
  • A range of 3D object types including polygon meshes, NURBS surfaces, bezier and B-spline curves, metaballs, vector fonts (TrueType, PostScript, OpenType)
  • 'Smooth proxy' style catmull-clark subdivision surfaces
  • Boolean mesh functions
  • Editing functions such as extrude, bevel, cut, spin, screw, warp, subdivide, noise, smooth Soft selection editing tools for organic modeling
  • Python scripting access for custom tools
Animation
  • Armature (skeleton) deformation with forward/inverse kinematics, auto skinning and interactive 3D paint for vertex weighting
  • Non-linear animation mixer with automated walkcycles along paths
  • Constraint system
  • Vertex key framing for morphing, with controlling sliders
  • Character animation pose editor
  • Animatable lattice deformation
  • 'Ipo' system integrates both motion curve and traditional key-frame editing
  • Audio playback, mixing and editing support for sound synchronisation
  • Python scripting access for custom and procedural animation effect
Realtime 3D/game creation
  • Graphical editor for defining interactive behavior without programming
  • Collision detection and dynamics simulation
  • Python scripting API for sophisticated control and AI, fully defined advanced game logic
  • Supports all OpenGL lighting modes, including transparencies, Animated and reflection-mapped textures
  • Playback of games and interactive 3D content without compiling or preprocessing
  • Audio, using the fmod toolkit
  • Multi-layering of Scenes for overlay interfaces
Rendering
  • Very fast inbuilt raytracer
  • Integral support for the famous Yafray render engine
  • Oversampling, motion blur, post-production effects, fields, non-square pixels
  • Environment maps, halos, lens flares, fog
  • Various surface shaders such as Lambert, Phong, Oren-nayar, Blinn, Toon
  • Edge rendering for toon shading
  • Procedural Textures
  • Ambient Occlusion
  • Radiosity solver
  • Export scripts available for external renderers such as Renderman (RIB), Povray, Virtualight
  • UV texture editor with various mesh unwrap modes
Interface
  • Flexible user configurable window layout
  • Powerful object-oriented data system
  • Anti-aliased fonts with international translation support
  • Windows for animation curves/keys, schematic scene diagram, non-linear video sequence editing, character animation action editor, non-linear animation mixer, image/UV editing, file/image selection and file management
  • Inbuilt text editor for annotations and editing Python scripts
  • Consistent interface across multiple platforms
Files
  • Save all scene data in a single .blend file
  • Blend format supports compression, digital signatures, encryption, forwards/backwards compatibility and can be used as a library to link to from other .blend files
  • Read / Write TGA, JPG, PNG, Iris, SGI Movie, IFF, AVI and Quicktime GIF, TIFF, PSD, MOV (Windows and Mac OS X)
  • Native import and export for DXF, Inventor and VRML files, with python scripts available for many other 3D formats
  • Create stand-alone executables containing interactive 3D content or play back with the 3d web browser plugin
Visit the tool Here

Thursday, August 21, 2008

Yahoo, Intel attempt to solve Web content on television with “Widget Channel”

Yahoo and Intel today announced they are working together to bring dynamic Web content to your television set through the use of widgets. It’s an interesting idea. As many pundits have noted, companies large and small have attempted to bring Web content to the TV for years. All the efforts have failed for a variety of reasons: navigation issues, trying to replicate an entire Web page on the TV during programming, the introduction of the browser, keyboard, and mouse in the living room, and so on.

Yahoo thinks it may have the answer with the Widget Channel, which will allow developers to create small mini-programs (or widgets) that will be displayed on the bottom of a TV screen. These widgets offer on-screen access to everything from your pictures on Flickr, to interactions with friends on Twitter or Facebook, real-time sports scores, weather updates, stock prices, online movie rentals, and so on.

Why fire up the Web version of Twitter on the TV just to check or send Tweets? Why not have an ESPN widget running rather than bounce back and forth between Sports Center and “Grey’s Anatomy?” Why even bother replicating the Web experience on a TV set?

The Widget TV platform isn’t available and probably won’t be until the first part of 2009, when a new class of Intel chips for consumer electronics will be available that enable high-definition viewing, home-theater-quality audio, 3-D graphics, and the mashing of Internet and TV functions. Major manufacturers set to produce widget-ready TVs include Samsung and Toshiba.


Wednesday, August 20, 2008

Super Screenshot: Web based tool for creating an image of any site

Want to take a screen capture of a web site? Not just the part you can see on your screen, but the whole page, even the parts you have to scroll for 20 minutes to find? Super Screenshot is a web based tool that will let you capture any page and save the output as a JPG or PNG image file.

You get a few options with Super Screenshot, like the ability to capture a whole page or just the top of the screen. You can also select the size of the final picture, but you don't get to set pixel heights and widths. Instead you get some rather unhelpful options like X-Small, Small, Medium, Large, and Full. So you might need a little trial and error time to find the right size.

If you want more control over your screenshots, you can always use a desktop application like Snagit. But if you're using a friend or coworker's computer and need to make a quick screenshot, Super Screenshot could come in handy.

Tuesday, August 19, 2008

Microsoft Opens Windows 7 Blog for Discussions

Microsoft has launched a new blog page for discussions with customers and partners about the next Windows operating system. "We strongly believe that success for Windows 7 includes an open and honest, and two-way, discussion," said Windows 7 development engineers Jon DeVaan and Steven Sinofsky.

For a while now, Microsoft has said it would deliver Windows 7 approximately three years after the January 2007 launch of Windows Vista. "The product is tracking very, very well," said Senior Vice President Bill Veghte, who runs Microsoft's Windows business. "And we are looking good relative to our commitment," he told analysts last month.

To prep developers on the new OS, Microsoft will hold two major Windows events. "The Professional Developers Conference on October 27 and the Windows Hardware Engineering Conference the following week represent the first venues where we will provide in-depth technical information about Windows 7," DeVaan and Sinofsky said.

Sales of licenses for Windows Vista surpassed the 180 million in the second quarter, according to Colleen Healy, general manager of investor relations at Microsoft. "And Windows Vista had driven client revenue to an average growth rate of 16 percent since it became generally available," she said during a conference call with analysts last month.

However, Vista has come under fire because of its failure to work well with other software applications and hardware. Adoption rates in enterprises have also lagged analysts' expectations.

With the launch of Windows 7, Microsoft will have its first major opportunity to improve industry perceptions about its operating system. "The biggest problem Vista has today is in perception --- a perceived lack of value and perceived instability," said Michael Silver, a research director at Gartner Client Computing.

Microsoft says it plans to listen more closely to what the world has to say about Windows. Earlier this year, Veghte told Microsoft's India-based customers and partners that the feedback they provided was playing an important role in work on Windows 7. The launch of the Windows 7 blog page is another step in that direction.

Improving performance certainly has to be one major Microsoft goal, Silver noted. Another will be to bring a new set of innovative features to market, he said.

"It's hard to come up with 'gee whiz' features for a relatively mature product, but security and improved manageability and ease of deployment -- especially from the standpoint of ecosystem support -- will certainly help improve Microsoft's chances," Silver said.

From the enterprise perspective, Silver thinks the Windows 7 development team will need to focus on making improvements to application control "to enable standard users to be able to install known good apps and prevent administrators from running known bad apps." Additionally, Silver sees room for improvement in in the way that user account control works to improve application compatibility and usability.

Overall, Microsoft will need to ensure that the computing ecosystem is ready to accept and adopt Windows 7 when it finally arrives, Silver said. And the development team must fix operating-system areas that currently confuse users, like the networking center, he said.

Visit the blog here



Wednesday, August 13, 2008

Learn Illustrator CS3 in 30 Days

This FREE 30 days Illustrator crash course is created for beginners interested in learning Illustrator. Each lesson will take around 20 mins to complete and you will be able to learn the basic fundamental techniques before the 30 days trial ends.

In this crash course, I will not be drilling down in details how each feature works. However, I will be covering all the essential tools that are commonly used so that you can get started and have a feel of how illustrator works. At the 30 days you will be able to and draw your illustrations, design your own logos and create special effects!

For more illustrator training resources, read my list of recommended illustrator books & videos.

1st Week

2nd Week

3rd Week

Last Week

Saturday, August 9, 2008

A Cuil reaction to new search engine

A new search engine launched yesterday. Cuil (that's "cool", phonetically) is today's buzz word on the web, primarily because the Cuil's founders - Tom Costello, Anna Patterson, Louis Monier and Russell Power - are respected search experts. Patterson, Monier and Power are former Google employees, and comparisons with the 300lb gorilla of internet search abound.

Michael Arrington at TechCrunch compares sizes. At launch, Cuil boasted an index of 120 billion webpages. Cuil claims this makes it larger than Google, although Google begs to differ.

"Even if Cuil is bigger than Google, it doesn't mean Cuil is more relevant," points out Danny Sullivan on Search Engine Land. "Nor does it mean adding more documents in a "I'm bigger than you" game would improve the state of search overall."

Indexing is only part of the problem, says Om Malik at Gigaom. "Analysing and displaying all the information is extremely resource-intensive." Cuil claims to rank pages by content rather than the popularity rank. But this isn't a black and white issue, says Sullivan.

Google relies on more than just popularity to rank pages, and preliminary results suggest Cuil actually does use popularity to rank some sites - else a search for Harry Potter wouldn't bring up the official movie site at the top of the list.

That leaves a rather nice 'magazine style' results layout as one of Cuil's USPs - something that's likely to be loved or hated depending on the user.

But Cuil's real selling point might prove to be the privacy issue. It claims not to log IP information - something that Google, Yahoo and Teoma (the engine behind Ask) all do.

"That may be reassuring to some searchers, but to date, even scare stories about what Google could do (not that it does) hasn't kept searchers away from it," says Sullivan.

Cuil is no more than 24 hours old - Google has been with us for a decade. Clearly, it's too early to say whether the king of search is about to be usurped.

Visit Cuil

Thursday, August 7, 2008

FancyZoom : Javascript Image Zooming For Your Web Pages

FancyZoom :This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website!

Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom's raison d’être (French for "raisin-determination") is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari itself. Since I originally wrote this script, there are now a lot of image zoomers to choose from (including a similar effect now on Apple's own site!), such as the popular (and inspiring) Lightbox. So you might be asking: "Cabel, why use FancyZoom?" Well, here's why!
  • Focused on the smoothest, most polished zooming animation possible
  • Automatically scales images from any image link, with no HTML changes
  • Preloads full-size images in the background on link mouseover
  • No resource-heavy Javascript libraries — 100% coded from scratch to zoom
  • Draws a nice drop shadow under the full-size image to offset it from the page
  • Uses Safari 3's "box-shadow" feature to draw the drop shadow natively, no images required
  • Requires only two new lines of code in your HTML
  • Tested and works with Safari, Firefox, IE7, and IE6. (Looks better in modern browsers.)

Since FancyZoom is so easy to add to a web page, I encourage you to give it a try!

Instructions

Installing FancyZoom on your web pages should be dead simple.

1 Download the FancyZoom package, right here:
2 Using Transmit (or your favorite FTP client), upload the two folders inside the package to the root of your webserver.

3Add the following two lines of code to the section at the top of your web page(s):



4Add onload="setupZoom()" inside your page's existing tag. For example:

onload="setupZoom()">

5Whoah. You're done! The rest is automatic — links to images in your page will automatically zoom the images. For example:

will zoom up image.jpg when clicked.

Additional Details

There are a few extra notes that you might find useful.
Want to add a caption? Add a title tag in your href. That's it!

FancyZoom will use the size of the first element in the href to determine the initial size and location of the zoom.

FancyZoom works best if you wrap your href around a thumbnail, but also works from text-only links to images.

FancyZoom will attach itself to any jpg, gif, png, bmp, or tiff link in your page.

If you're a Javascript hacker, FancyZoom's flexible fadeIn and fadeOut functions can be used for all sorts of fun stuff.

If you explicitly don't want an image to zoom, add a rel="nozoom" tag to your href.

Tuesday, August 5, 2008

Internet 2 works to reinvent the Web


Ten years after it began being embraced by the public, architects say the Internet is far from what it was destined to be, and they are working on a sequel. In 1993 Marc Andreessen launched Mosaic, the first browser to navigate the Web. In this vintage cyberspace, gray pages and low-resolution graphics were rife.

"I remember downloading it and running it on x-windows when it was running, said Pindar Wong, from Packet Clearing House. "So now it's really great to see parents and grandchildren and everyone using the Internet sort of through browser interfaces. It is a milestone. But I think the game is changing." It is changing because these days, the Internet is a much bigger beast. The "critical infrastructure" that hosts governments, businesses and universities is far-reaching, but far from flawless.With jerky video and hourglass icons, it's little wonder some call it the world wide wait. But one group is out to change that.

Enter "Internet 2" -- a U.S.-led effort to build cyberspace all over again, this time better. "Well the current Internet is not designed for the next generation of applications," said Ted Hanss, Director of Internet 2. "It's really focused on tens of millions of dial-up users. Not the applications that would really change how we do teaching, learning and education."

The Internet 2 backbone in the United States moves billions of bits of data per second, 300,000 times faster than the connection we have at home, said Hanss. Moving with such speed, Internet 2 will be able to provide remote diagnosis for doctors, send detailed medical files in a flash, stage high-resolution videoconferences and download virtual reality applications.

Champions of the project say Internet 2 shows what the net will do three to five years from now. But even a souped-up cyberspace is susceptible to worms, viruses and just plain junk or spam.And then there's the millions of mobile devices and appliances that are moving online, requiring more IP addresses. Back at the Internet monitoring station, engineers are scrambling to surmount those challenges, taking heart from their recent achievement. "I would view the last 10 years as a wonderful experiment," said Wong.

"Many of us were just kids, still young at heart now. We were trying all these different things. And we made our fair share of mistakes. The question is what can we learn from those mistakes?" The challenge is to build a cyber-sequel that's not just a pipe dream.


Monday, August 4, 2008

Ajaxload - Ajax loading gif generator

AjaxLoad lets you easily create your own Ajax loader icon. It is really useful for generating loading icons while waiting for things like AJAX content to load into a page.

More than 30 great indicators for loading image is available to choose from.

Create easily your own ajax loader icon :

  1. Select the type of indicator you want
  2. Enter the background code color you want
    (tick "Transparent background" if you don't want one
  3. Enter the foreground code color you want

Press "Generate it"

There’s nothing better than letting your user know when they’re waiting for something, and although a simple animation can’t tell them the exact progress, or how much longer they’ll have to wait - it’s often the thought that counts. Your preloader / loading animation is that little extra bit of finessé for your creations.