MP3 zvonenie na iphone

V dnešnej dobe je v mobiloch samozrejmosťou, že si môžete nastaviť svoju obľúbenú MP3 skladbu ako zvonenie. No čo ak máte iPhone? Prvé, čo sa dozviete je, že sa to nedá a zvonenie potrebujete nie vo formáte MP3, ale ako M4R.

Čo je formát M4R a ako skonvertujem MP3 na M4R?

M4R nie je žiadny výmysel spoločnosti Apple na znepríjemnenie užívateľského komfortu, ako by si dakto mohol myslieť. Je to len iný (lepší) štandard z rodiny MPEG-4. Pre technofilov odporúčam Wikipediu a Google.

Ako teda konvertujem MP3 do M4R?

Nie je potrebný žiadny extra program. Úplne si vystačíte s iTunes.

  1. Otvorte si iTunes, zvolte skladbu. Je dôležité odsledovať počiatočný a koncový čas pasáže, ktorá bude slúžiť ako zvonenie. Zvonenia majú totiž obmedzenú dĺžku na 30 sekúnd.
  2. Pravý klik na skladbu, zvoľte “Get Info” a následne záložku “Options”.MP3-do-M4R-1
  3. Vyplňte počiatočný a koncový čas. Následne svoju voľbu potvrdte “OK”.
  4. Znova pravý klik na skladbu a zvoľte “Convert Selection to AAC”. Pribudne vám nový súbor, no odlišnej dĺžky. Opakujem, že dĺžka je obmedzená na 30 sekúnd.MP3-do-M4R-2
  5. Opäť pravý klik na skonvertovaný súbor a zvoľte “Show in Windows Explorer”. Otvorí sa vám okno so súborom, ktorý má koncovku .m4a.MP3-do-M4R-3
  6. Teraz už len stačí premenovať koncovku .m4a na .m4r.
  7. Dvojklikom na tento súbor pridáte nové zvonenie do iTunes. Odtiaľ ho jednoducho nakopírujete do svojho iPhonu.

V poslednej verzií sa položka v iTunes, v ktorej sú zvonenia, nazýva “Tones”.

Funkčná budúcnosť bankomatov

Funkčná budúcnosť bankomatovPri samoštúdiu ohľadne možností redizajnu s airbagmi som náhodou natrafil na zaujímavý redizajn bankomatu.
Začiatkom roka 2007 sa španielska banka BBVA rozhodla pre zmenu konceptu bankomatov. Poverenie dostala dizajnérska firma IDEO. Postup bol jasný. Vychádzalo sa z nepopísaného listu. To preto, aby nový koncept neniesol so sebou zlé návyky klientov z používania starých strojov. Po dvoch rokoch užívateľských testov vznikol funkčný model s novou logikou používania. Nakoniec presvedčte sa sami.

The Future of Self-Service Banking from IDEO on Vimeo.

zdroj: IDEO – http://www.futureselfservicebanking.com/

Safari, Chrome, Webkit CSS hack

Chrome_SafariExistuje niekoľko zaužívaných spôsobov ako pri písaní CSS donútiť napríklad Internet Explorer, aby použil inú definíciu, ako ostatné prehliadače. Konkrétne mám na mysli rôzne css hack, ako napríklad znak podčiarnika alebo otáznika pred danou deklaráciou.

No ako oklamať prehliadače s jadrom webkit v prípade výnimočnej núdze? V Safari a Chrome pekne funguje nasledujúca vec:
body { background-color: red; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
body { background-color: blue; }
}

O tom, že to spraví z css nevalidný dokument sa baviť nebudeme. To je jedno. Keď treba, tak ten css hack použijem, a ten jeden dva riadky parser prehryzne.

jQuery pluginy #1

jquery_logo_color_onwhiteV tomto článku sa budem venovať pluginom pre JavaScriptový framework jQuery.

jQery plugin: Organic Tabs

Veľmi často sa jQuery používa na vytvorenie takzvaných tabov. Špecialitou tohoto pluginu je, že animuje aj natiahnutie tabu ak je to potrebné.

Demo | Stiahnutie súborov | Zdroj: CSS-Tricks.com

HTML:

<div id="organic-tabs">
<ul id="explore-nav">
<li id="ex-featured"><a class="current" rel="featured" href="#">Featured</a></li>
<li id="ex-core"><a rel="core" href="#">Core</a></li>
<li id="ex-jquery"><a rel="jquerytuts" href="#">jQuery</a></li>
<li id="ex-classics" class="last"><a rel="classics" href="#">Classics</a></li>
</ul>
<div id="all-list-wrap">
<ul id="featured">
<li><a href="#">Full Page Background Images</a></li>
<li><a href="#">Designing for WordPress</a></li>
<!-- More... --></ul>
<ul id="core">
<li><a href="#">The VERY Basics of HTML &amp; CSS</a></li>
<li><a href="#">Classes and IDs</a></li>
<!-- More... --></ul>
<ul id="jquerytuts">
<li><a href="#">Anything Slider jQuery Plugin</a></li>
<li><a href="#">Moving Boxes</a></li>
<!-- More... --></ul>
<ul id="classics">
<li><a href="#">Top Designers CSS Wishlist</a></li>
<li><a href="#">What Beautiful HTML Code Looks Like</a></li>
<!-- More... --></ul>
</div>
<!-- END List Wrap --></div>
<!-- END Organic Tabs -->

CSS

ul { list-style: none; }
ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
ul li a:hover { background: #fe4902; color: white; }
ul li:last-child a { border: none; } #organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; } #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
#explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#explore-nav li.last { margin-right: 0; }
#explore-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#explore-nav li a:hover { background-color: #111; } #jquerytuts, #core, #classics { display: none; } #explore-nav li#ex-featured a.current, ul#featured li a:hover { background-color: #0575f4; color: white; }
#explore-nav li#ex-core a.current, ul#core li a:hover { background-color: #d30000; color: white; }
#explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#explore-nav li#ex-classics a.current, ul#classics li a:hover { background-color: #FE4902; color: white; }

JavaScript

$(function() { $("#explore-nav li a").click(function() { // Figure out current list via CSS class var curList = $("#explore-nav li a.current").attr("rel"); // List moving to var $newList = $(this); // Set outer wrapper height to height of current inner list var curListHeight = $("#all-list-wrap").height(); $("#all-list-wrap").height(curListHeight); // Remove highlighting - Add to just-clicked tab $("#explore-nav li a").removeClass("current"); $newList.addClass("current"); // Figure out ID of new list var listID = $newList.attr("rel"); if (listID != curList) { // Fade out current list $("#"+curList).fadeOut(300, function() { // Fade in new list on callback $("#"+listID).fadeIn(); // Adjust outer wrapper to fit new list snuggly var newHeight = $("#"+listID).height(); $("#all-list-wrap").animate({ height: newHeight }); }); } // Don't behave like a regular link return false; }); });

jQuery plugin: Table sorter

Tento plugin urobí z hlavičky tabuľky prvok ktorým si viete zvoliť radenie dát v tabuľke.

Demo | Stiahnutie súborov | Zdroj: Tablesorter.com

HTML:

<table id="myTable">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>

JavaScript

// automatický sorter na všechny sloupce
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
// pouze první dva sloupce
$(document).ready(function()
{
$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
}
);

jQuery plugin: Shadowbox

Multimediálny prehliadač. použitelný na zobrazenie galérií, videí alebo stránok v popup okne.

Stiahnutie súborov | Zdroj: Shadowbox-js.com

Príklad použitia HTML:

<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true,
// include the html player because we want to display some html content
players: ["html"]
});
window.onload = function(){
// open a welcome message as soon as the window loads
Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
};
</script>

Zomrelo XHTML, nech žije HTML5

rip-xhtmlKonzorcium W3C oficiálne oznámilo, že vývojová skupina pracujúca na štandarde XHTM2 ukončí svoju činnosť do konca roka 2009. Dôvodom je navýšenie prostriedkov na dokončenie prác na HTML5.

Pri tejto príležitosti uverejnil server Veign.com pdf dokument, v ktorom nájdete prehľad použitých tagov v novom jazyku HTML5. Potrvá ešte niekoľko rokov, kým sa úplne dokončí štandard HTML5 a implementujú ho internetové prehliadače. Dokument bude treba ešte aktualizovať, no na základné zorientovanie sa táto pomôcka úplne postačuje.

HTML5 cheat sheet (PDF 76,8 kB)

Vlastná ikonka web stránky v iPhone

iphone-iconUž vyše mesiaca som spokojným vlastníkom iPhone 3G. Zrástol som s ním, vyšperkoval som ho aplikáciami a až na pár maličkostí je to skvelá vecička.

Ale k téme, keďže mojou prácou je tvorba web stránok, rozhodol som sa postupne všetky projekty obohatiť o ikonku pre iPhone (iPod touch). Dôvod je ten, aby aj na ploche iPhonu po uložení odkazu mal web peknú ikonku a nie len zmenšeninu stránky, čo nevyzerá dobre.

apple-touch-icon-cajovna

Rozmer ikonky pre iPhone je 57×57 pixelov vo formáte png. Ostáva už len nasledovný html tag link do hlavičky stránky:

< link rel="apple-touch-icon" href="apple-touch-icon.png" />