2 de agosto de 2009

MooTools Tutorials and Resources

Desde hace un tiempo vengo comentandoles de las posibilidades de JQuery asociadas a Sharepoint, y en este caso, voy a dejarles una serie de enlaces, utilidades y tutoriales de MooTools que seguramente les van a servir de mucho…

MooTools es un Framework de JavaScript con foco en ser flexible, modular y compacto. Todavia no se puede comparar con otros frameworks como jQuery, pero la comunidad de desarrolladores de MooTools genera numerosos articulos, tutoriales y plugins que ya estan bastante maduros y sofisticados para satisfacer las necesidades de la mayoria.

Starting points

The official documentation
Toda la documentacion.

Official Documentation

jQuery vs MooTools
Diferencias entre jQuery y MooTools.

MooTools para los que NO Programamos.
Una serie de tutoriales dedicados a los que NO Programamos:

The MooWalkthrough
The MooTorial
MooTorial

MooTools classes
Natives and Elements
Select and create elements
Intro to the Library

  1. Selectors
  2. Intro to Using Arrays
  3. Functions
  4. Event Handling
  5. Manipulating HTML
  6. Set and Get Style Properties
  7. Input Filtering Part I - Numbers
  8. Input Filtering Part II - Strings
  9. Using FX.Tween
  10. Using Fx.Morph, Fx Options and Fx Events
  11. Drag and Drop using Drag.Move
  12. Regular Expressions
  13. Periodical and Intro to Hashes
  14. Sliders
  15. Sortables and Intro to Methods
  16. Accordion
  17. Classes part I
  18. Tooltips
  19. A Few Mootools Tabs
  20. Classes part II
  21. Fx.Elements
  22. Fx.Slide
 

Facebook modal box
It reproduces Facebook’s modal box in MooTools. A Very simple solution to get a Facebook-style modal box without the need of any external plugin.

Using custom missing image graphics
A very elegant and extremely simple solution to handling missing image graphics with a custom fallback image.

Sending Email notifications for broken images
A logic follow-up to the previous tutorial. It shows how to use AJax and PHP to send email notification on the occurrence of broken images.

Skype-style buttons
How to create a Skype-style button.

skype style

MooTools Flashlight effect
An eccentric, however interesting effect.

Flashlight

Snook-style navigation
A MooTools revisit of a tutorial by Jonathan Snook.

Explode effect on Ajax page loads
How to create an effect that makes the current content ‘explode’ off-screen while another content is fetched and loaded via ajax.

Font-Size scroller with Cookie save
Shows how to create a scroller that sets the font-size and store this information in a cookie.

font-size Scroller

Track Ajax link clicks using Google Analytics
A very insightful solution to tracking ajax-based navigation in Google Analytics.

Periodicar Ajax updates using MooTools
Shows how to implement a very simple function that periodically makes a ajax request on the background.

helps you determine if caps lock is on
A nice and simple technique for easily determining if caps lock in on. Might help improve usability, specially in login scenarios.

Caps Lock on

Simulate Flash horizontal navigation
Tutorial on how to create a horizontal navigation web site.

Product Highlighter
Slick rollover mechanism that works well as a product highlighter.

Product Highlighter

Auto caption images
How to automatically extract alt and title content and add it as captions to images on the page.

toElement method
Explains and shows an interesting use case for the toElement method in MooTools.

outerClick event
An implementation of a custom event for when a user clicks outside of a given element.

Saving a sortalbe nested list
A tutorial with a full implementation of a sortable nested list, from MooTools to MySQL.

CSS sprites with MooTools
A MooTools version of an article published on A List Apart about CSS sprites using jQuery.

Sprites

Swiff
Explains what is the Swiff class and how it can be used to make flash elements communicate with JavaScript.

Fixing sIFR printing with CSS and MooTools
The use of sIRF can help you achieve the typography you want on the screen, but there may be problems when the user tries to print the page. This article shows how to work around that.

Advanced Topics

The Dollar Safe Mode
An article explaining a good practice for plugin developers that want to make their libraries compliant with “MooTools 1.2.3 Dollar Safety”, which means that it respects the global name $ in edge cases where people need to use more than one JavaScript library at the same time.

Custom Events
A nice example on how to define and explore custom events (such as alt+clicking) in MooTools.

Custom Events

Element Storage
An overview on the Element Storage functionality. How it works and how it could be used to make code easier to write and better organised.

Chaining with MooTools
A guide to the MooTools’s Chain class and how it can be used in custom classes.

Chaining

Set style per media
Using JavaScript for dynamic styling may defeat the purpose of having a style for each media, this tutorial shows one way to be media-specific while dynamically changing CSS properties.

Creating a custom “:selected” pseudo-class in MooTools
How to create your own pseudo-class selector in MooTools.

The Mouse Ghost
An interesting experiment on saving the cursor coordinates and then reproducing its movements.

Ghost Mouse

5 Advanced techniques for MooTools development
Things that you don’t get by reading documentation.

Don’t repeat your Moo
A very insightful article on how to achieve reusability in your JavaScript code with MooTools, adhering to the DRY (Don’t Repeat Yourself) principle.

dont repeat your moo

Private methods in MooTools
Shows how to implement private methods in JavaScript with MooTools.

The Singleton class mutator
A tutorial that shows how to write a class mutator that implements the singleton design pattern. A class mutator is a macro-like method/idiom to be used inside a class definition

Binds class mutator
A mutator that binds a method to the instance of a class so that it can be accessed thorough the ‘this’ keyword even in the class definition.

Informacion y Links extraidos de www.smashingmagazine.com Espero les sean Utiles.

No hay comentarios.: