SpotGeek.net » javascript

Video em JS

Filipe Teixeira Nunes — Mon, 24 May 2010 14:31:08 +0000

Em breve esperamos que todos os vídeos passem a ser vistos num player em js em vez do tradicional flash , o que vai tornar o carregamento das páginas mais rápido especialmente se utilizarem o google chrome, que está super rápido a carregar javascript.

Video JS, leitor de vídeo que utiliza HTML5 e Javascript .

usar jquery

Filipe Teixeira Nunes — Sun, 16 May 2010 23:45:32 +0000

Abaixo pode ver uns bons exemplos de como usar o jquery ..

http://www.9lessons.info/2008/08/jquery-ajax-and-php-projects-9lessons.html

http://www.smashingmagazine.com/2010/04/27/45-useful-jquery-techniques-and-plugins/

CSS – Truques dicas exemplos

Filipe Teixeira Nunes — Thu, 08 Apr 2010 23:49:30 +0000

Abaixo apresento alguns truques para se usar no css que por vezes são muito úteis e evitam problemas futuros

http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/

css técnicas

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/

Ferramentas para optimizar o css

http://www.smashingmagazine.com/2006/09/02/list-of-css-tools/

http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/

Javascript técnicas

http://www.smashingmagazine.com/2008/09/11/75-really-useful-javascript-techniques/

Redesenhar os botões padrão (submit) com css :

http://particletree.com/features/rediscovering-the-button-element/

Animações sem flash jquery

Filipe Teixeira Nunes — Tue, 23 Mar 2010 17:22:57 +0000

Agora é fácil criar aplicações sem precisar do adobe flash instalado, basta só usar HTML e JavaScript

http://www.spritely.net/

Firefox accelerometer

Filipe Teixeira Nunes — Wed, 14 Oct 2009 16:21:13 +0000

Paul Rouget shows off some cool new demos that are baking on the trunk of Firefox currently.

First are some nifty new events that get fired if your computer has an accelerometer:

PLAIN TEXT

JAVASCRIPT:

window.addEventListener(“MozOrientation”, function(e) {
/* 3 values: e.x, e.y, e.y */
}, true)

It works with MacBooks and on Windows and Linux with Thinkpads.

Check out this cool screencast of the orientation event in action:

They also have WebGL and CSS Transitions going in Firefox trunk now as well! There are some demos in the original blog post of WebGL + CSS3 + SVG as well as CSS Transitions + the HTML5 Video tag that are very cool (require Firefox Nightly).

Here’s an example code snippet showing how you can use CSS Transitions to change the background color of a DIV over time as well as changing the width and height of an HTML5 Video at the same time:

PLAIN TEXT

CSS:

div {
-moz-transition-property: background-color, height, width, font-size;
-moz-transition-duration: 2s, 1s, 2s, 1s;
-webkit-transition-property: background-color, height, width, font-size;
-webkit-transition-duration: 2s, 1s, 2s, 1s;
}
div video {
-moz-transition-property: width, height;
-moz-transition-duration: 2s, 2s;
-webkit-transition-property: width, height;
-webkit-transition-duration: 2s, 2s;
}

Someone’s also put together a cool demo that puts the new accelerometer support with some SVG to create a Super Mario Kart clone:

Fonte:Ajaxian

CSS 3 Generator

Filipe Teixeira Nunes — Fri, 09 Oct 2009 15:21:58 +0000

Interactive CSS 3 Generator from Ajaxian by Brad Neuberg 9 people liked this Many browsers have been experimenting with new custom CSS properties lately. Keeping track (and learning how to use them) can be a bit of a challenge. Via WidgetPad comes a nifty CSS 3 Generator that helps you understand the new CSS 3 features in Webkit with an interactive tool that will build up and show how each new property affects an element. Here, for example, we see the results of applying rounded corners, box shadows, reflections, and a transform to an element: css3_generator_screenshot Which results in the following code: PLAIN TEXT CSS: 1. -webkit-border-radius: 10px; 2. -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 3. -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 4. -webkit-transform: rotateZ(15deg); The CSS 3 Generator works on any webkit based browser, including Safari, the iPhone, and Chrome. Here’s a challenge to the community: can you create an enhanced version of this that works with all the new CSS 3 and vendor-specific properties, including on IE and Firefox, hiding the options that don’t work on specific browsers? That would turn this into a more general purpose educational and testing tool that would be very valuable. Even better if you open source it and we can host it on the Open Web Developer Network we’ve been kicking around. Drop me a line if you create such a thing As a side note, I had never seen the WidgetPad website where this is hosted before this which looks quite interesting. From the site: [WidgetPad is a] collaborative development environment for developers to develop fully-interactive, stand-alone, downloadable SmartPhone applications in HTML5, CSS3 and Javascript. You don’t need to install any special development tools or learn any platform-specific API sets. WidgetPad offers everything you need — project management, source code editing, debugging, collaboration, versioning and even distribution — in your own browser!

Fonte: Ajaxian

Preload Page

Filipe Teixeira Nunes — Wed, 07 Oct 2009 08:30:53 +0000

The classic animated gif, or the “loading…” text, could be now easily replaced thanks to this new jQuery plug-in.

Specially suited for a page loads of images, the final result showed in this demo looks really nice and flashy.

Features:

Preload a whole web page.
Preload a part of the page.
Gets all images, tags and background-image of your CSS
Easy to implement.
Adjustable loading bar.
Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

Full post, demo, and source code, are in Gaya Design blog.

To be honest, I instantly had a thought about this technique: wasn’t the DOMContentLoaded event purpose the one to avoid people waiting a full page download before they’re allowed to interact with it? … never mind, we cannot do much in any case in front of images dedicated layouts.

Fonte:GayaDesign

Open web tools mozilla labs

Filipe Teixeira Nunes — Wed, 08 Jul 2009 14:41:41 +0000

A mozilla labs criou um directório, onde podem ser encontradas de uma forma simples e rápida várias “ferramentas” para programadores, tentaram reunir numa só página algumas das ferramentas conhecidas dos programadores.

http://tools.mozilla.com/

E claro tudo ferramentas opensource.

A página ainda dispõem de um formulário de pesquisa, muito útil caso queiram pesquisar só pelo design , código etc..

jCarousel

Filipe Teixeira — Fri, 24 Apr 2009 09:00:19 +0000

Riding carousels with jQuery

Author: Jan Sorgalla
Version: 0.2.3 (Changelog)
Download: jcarousel.tar.gz or jcarousel.zip
Licence: MIT and GPL
Documentation: http://sorgalla.com/projects/jcarousel/

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

Examples

The following examples illustrate the possibilities of jCarousel:

JavaScript : Prototype e LibSAPO.js

Filipe Teixeira — Fri, 17 Apr 2009 15:47:33 +0000

Apresentação Prototype e LibSAPO.js, realizada pelo Cláudio Gamboa na segunda SAPO Session.