JavaScriptTag: JavaScript
This sample player is based on the excellent SMP (Strobe Media Playback) media player that can be downloaded and used for free.
One of the great things about the SMP player is that it is so easy to embed and configure. Using SWFObject you simply point to the SMP SWF and pass the url of your media. You can pass other configuration variables but these are limited, which can be frustrating.
The latest SMP release (2.0) has a very cool new feature – a JavaScript API. This gives the developer with some JS experience the ability to control the player.
In our example we have a basic SMP player which we have extended using the JS API. You’ll notice the ability to play/pause/switch media and the indicators for current state and runtime. Thanks to the JS API we can access the MediaPlayer Class without using any ActionScript code.
For our current state and runtime indicators we simply set up event listeners and the corresponding functions:
player = document.getElementById(playerId);
player.addEventListener(“mediaPlayerStateChange”, “onMediaPlayerStateChange”);
function onMediaPlayerStateChange(state, playerId)
{
var newstate = player.getState();
document.getElementById(“currentState”).innerHTML = newstate;
}
The play/pause button uses a simple onclick event handler:
document.getElementById(“play-pause”).onclick = function(){
var state = player.getState();
if (state == “ready” || state == “paused”) {
player.play2();
}
else
if (state == “playing”) {
player.pause();
}
return false;
};
Our media switcher re-embeds the SWP swf so that we can pass in a new poster frame URL.
function changeSrc(url,purl)
{
// Create a StrobeMediaPlayback configuration
var parameters =
{ src: url
, autoPlay: false
, controlBarAutoHide: false
, poster: purl
, javascriptCallbackFunction: “onJavaScriptBridgeCreated”
};
// Embed the player SWF:
swfobject.embedSWF
( “../StrobeMediaPlayback.swf”
, “strobeMediaPlayback”
, 640
, 480
, “10.1.0″
, {}
, parameters
, { allowFullScreen: “true”}
, { name: “strobeMediaPlayback” }
);
}
Our sample player only scrapes the surface of the powerful JS API. (This example illustrates how a completely JS-driven control bar can be created.) The SMP team has done a good job of making the power of the MediaPlayer accessible while doing some smart things like making calls from StrobeMediaPlayback to javascript asynchronous and the reverse calls synchronous optimize performance.
Want to learn more?
Boilerplate: Web dizajn i razvijanje nije tako lako kao što je nekada bilo – još je lakše
NAPOMENA: Ovaj pregled Boilerplate-a je deo predstojećeg pregleda Roots WordPress Theme-eОвај i kao takav, uglavnom se fokusira v2. Imajte na umu da se Boilerplate konstantno razvija (v3 јеpušten u februaru ). u stvari, možete misliti o Boilerplate promenama као pulsu HTML5 razvoja. Ostanite sa nama da vidite neke fascinantne promene v3.
Ah …. život je nekada bio mnogo jednostavniji..
Godine 1998 sam uzeo knjigu pod nazivom “Naučite HTML 4 za 24 sata”.Par dana i 350 stranica kasnije ja sam dizajnirao, kodirao i validirao svoj prvi sajt.
Naravno, taj sajt nije mnogo uradio ili čak nije dobro izgledao po današnjim standardima.
Sve ovo može biti previše, a dobra vest je bila da postoji neverovatna zajednica programera furiozno stvara fantastične (i besplatne!) alatke da bi sve ovo bilo jednostavnije.
Međutim, to dovodi do drugog problema – koju alatku da koristim i da joj verujem?
Na primer, skočite do front-end developer diskusione grupe ili foruma i pitajte koji HTML5 framework( radni okvir) treba da koristite i vidite koliko ćete različitih preporuka dobiti .. Uf ..!!
Dakle,šta ako ste želeli podrazumevani šablon za vaše programiranje koji već ima sve isprobane-i-tačne, ažurirane alatke instalirane i spremne da se prilagode potrebama vašeg projekta -komplet alatki – ako hoćete.
Pa,i mi ih imamo takođe.
I verovatno najpopularnija trenutno se zove HTML5 Boilerplate.
HTML5 Boilerplate (H5BP) je izum superstar programera Paul Irish-a i Divya Manian-a.
Neću ući u sve H5BP-ove karakteristike (koje su mnogo bolje pokrivene оvde ) ali je zaključak da je H5BP rad tima programera od nekoliko godina da vam da HTML5 template sa najboljim iskustvom naučenim na teži način.
H5BP je posebno pogodan za dizajnere sa rokovima, koji žele da se fokusiraju na prezentaciju i ne moraju da se zanimaju sa mnogim postavkama projekta. Samo stavite H5BP fajlove u vaš projekat i počnite sa radom. U zavisnosti od verzije koju koristite – 1,2, ili (od februara novu ) 3 – evo sa čime ćete počinjati :
- Resetujte CSS normalizovanim fontovima (Eric Meyer-ov resetovan ponovo učitan HTML5 Baseline i YUI CSS fonts) ili Nicolas Gallagher-ov Normalize.css .
- Osnovni štampani i mobilni stilovi
- .htaccess i drugi fajlovi konfig. servera ( dosta pametnih isečaka), prazan fajl više domenskih pravila za flash, robots.txt, favicon, apple-dodir-ikona, i 404 fajlove
- HTML5 – spreman. H5BP koristi alatku koja se zove Modernizr a koja obuhvata drugu alatku pod nazivom HTML5 Shim (između ostalih stvari kao funkciju detekcije) da proveri da li vaš HTML5 kod dobro izgleda na svim pretraživačima, uključujući IE6
- jQuery učitan sa Google CDN-a ili lokalno ako je korisnik offline
- ddbelated png za IE6 png fix
- yui profilisanje
- Optimizovana Google Analytics skripta
- Kul male stvari poput ispravka grešaka za izbegavanje console.log u IE & ispravka problema pisanja dokumenata, itd.
Najnoviji H5BP je verzija 3 i proteklih nekoliko zadnjih godina tim programera je porastao i proizvod se stalno poboljšava. Nedavno je bio fokus na performansama veb sajta. U tom cilju, Paul i ekipa su razvili H5BP ‘Build Script’. To je nešto što pokrenete kada završite svoj dizajnerski / programerski rad koji se odnosi na optimizaciju i minifikaciju a u cilju pravljenja vašeg sajta moćnom veb mašinom.
Na kraju, mi živimo u svetu paradoksa. Dok je svet veb dizajna i programiranja kompleksniji nego ikada, nikad nije bilo bolje vreme za rad u ovom polju zahvaljujući dobro osmišljenim i besplatnim alatkama kao što je HTML5 Boilerplate.
Želite li da saznate više?
Pogledajte ovaj video u kom Paul Irish objašnjava ceo Boilerplate templat i veliki je resurs.
This article is translated to “http://science.webhostinggeeks.com/html5-boilerplate“Serbo-Croatianlanguage by Anja Skrba from “http://webhostinggeeks.com/” Webhostinggeeks.com.
Boilerplate: Web design and development ain’t as easy as it used to be – it’s easier!
NOTE: This look at Boilerplate is part of an upcoming look at the Roots WordPress Theme and, as such, it focuses mostly on v2. Keep in mind that Boilerplate is under constant development (v3 was released in February). In fact, you could think of the Boilerplate changelog as the pulse of HTML5 development. Stay tuned for a look at some fascinating changes in v3.
Ah.…life used to be so much simpler.
In 1998 I picked up a book called ‘Teach yourself HTML 4 in 24 hours’. A couple of days and 350 pages later I had designed, coded and validated my first site.
Of course, that site didn’t do very much or even look very good by today’s standards.
All of this can be overwhelming and the good news has been that there is an incredible community of developers furiously creating fantastic (and free!) tools to make all of this easier.
But this leads to another problem – which tools do I use and trust?
For example, hop into a front-end developer discussion group or forum and ask what HTML5 framework you should use and see how many different recommendations you get..whew..!!
So, what if you wanted a default template for your development that already had all the tried-and-true, up-to-date tools installed and ready to be adapted to your project’s needs – a tool-kit, if you will.
Well, we have those too.
And probably the most popular right now is called HTML5 Boilerplate.
HTML5 Boilerplate (H5BP) is the brain-child of superstar developers Paul Irish and Divya Manian.
I won’t go into all of H5BP’s features (that is covered much better here) but the bottom-line is H5BP is like having a team of developers work for several years to give you an HTML5 template with all the best practices learned the hard way baked in.
H5BP seems especially suited for designers with deadlines who want to focus on presentation and not have to monkey around with a lot of project set-up. Just dump the H5BP files into your project and get to work. Depending on which version you’re using – 1,2, or (new as of February) 3 – here’s what you’ll be starting with:
- Reset CSS with normalized fonts (Eric Meyer’s reset reloaded with HTML5 Baseline and YUI CSS fonts) or Nicolas Gallagher’s Normalize.css.
- Basic print and mobile styles
- .htaccess and other server config files (full of really clever snippets), empty crossdomain policy file for flash, robots.txt, favicon, apple-touch-icon, and 404 files
- HTML5-ready. H5BP uses a tool called Modernizr that includes another tool called the HTML5 Shim (among other things like feature detection) to make sure your HTML5 code looks fine across all browsers including IE6
- jQuery loaded from the Google CDN or locally if the user is offline.
- ddbelated png for an IE6 png fix
- yui profiling
- Optimized Google Analytics script
- Cool little things like a fixes to avoid console.log errors in IE & a fix for document.write issues etc.
The latest H5BP is version 3 and over the past couple of years the development team has grown and the product has been continuously improved. Recently the focus has been on web site performance. To this end, Paul and the crew have developed the H5BP ‘Build Script’. This is something that you run when you’ve finished your design/development work that handles optimizing and minification to make your site a lean and mean web machine.
Ultimately we live in a world of paradox. While the world of web design and development is more complex than ever, there has also never been a better time to work in this field thanks to well thought-out and free tools like HTML5 Boilerplate.
Want to learn more?
Check out this is a video where Paul Irish walks through the entire Boilerplate template and is a great resource.
or
What is it?
Using JavaScript with CSS selectors, particularly Classes has traditionally been a little awkward. You end up needing dozens of lines of code with fun stuff like regular expressions to do something simple like toggle a Class. Looking for a better way to do this is how many of us got introduced to jQuery and it’s easy access to the DOM.
The JavaScript API has showed up to the party by implementing the W3C Selectors API.
What does it look like?
It looks a lot like jQuery.
The following example would select all p elements in the document that have a class of either “error” or “warning”.
var alerts = document.querySelectorAll("p.warning, p.error");
(Example above taken from the API Examples)
I’ve created a demo that shows this example in action. It uses the classList property so don’t try this in IE. 
In addition to querySelectorAll, we can use querySelector which returns only the first descendant element. Also, querySelector is not restricted to CSS IDs and Classes – you can use this with HTML5 elements as well:
document.querySelector(‘footer’);
Um…What About Browser Support?
QuerySelector and querySelectorAll are supported by all the major browsers from IE8 and up. Of course you need to be careful which CSS selectors you are querying because not all browser versions recognize all selectors.
Should I care?
Poke around inside jQuery and you’ll find references to querySelector – looks like jQuery is using this native API too (when it can). So, if you’re already using jQuery in your project and you’re more comfortable with jQuery selectors this new API isn’t going to rock your world. If you’re not using jQuery, are not worried about old pre-IE8 browsers and are trying to keep your project super-lightweight then these new selectors will make your coding much easier. So it looks like it is up to you and your situation.
The Javascript-based rich text editor-CKEditor is a great tool to use in projects that require you to give your clients the ability to edit their own HTML pages. Implementation is dead simple, and the list of configuration options is long, giving you a great deal of flexibility in terms of the functionality you can implement in the HTML editor. For example, in addition to editing text, you can configure CKEditor to give your clients the ability to add images to their pages, either by linking to existing ones on the web, or uploading them from their own computer.
If this sounds like a tool you’d like to use in your own workflow, be sure to check out what Realeyes developer Nils Thingvall has to say about it. Nils’ article gives you helpful tips on configuring your editor to work with image uploading, a topic that is unfortunately under-documented on the CKEditor site. Thanks Nils!
Follow Us!