Web design studio

10 HTML5 Video Players as Alternatives to Flash Player Read more about 10 HTML5 Video Players as Alternatives to Flash Player

admin — Fri, 11 Mar 2011 09:07:45 +0000

Flash has always been the standard for displaying video online, yet with the arrival of HTML5 web developers have got more excellent possibilities to easily streamline video content. HTML5 new specifications for a video is for sure one of the most talked aspects in the range of many new notable HTML5 features developed for more dynamic web applications and interfaces. Though support for HTML5 is still evolving, a video element has clear benefits for the users who can now get browser-native video players without any third-party plugins at all.

In the current blog entry we’ve covered some of the best HTML5 media player implementations to help you get the most out of HTML5 video tag and embed video content into your web pages. This round-up is done specifically for you to decide which HTML5 video player is better for your website design project, so check out a few of the solutions that we particularly like. We invite you to rate the content, quality, and genre of these great video players and opt for the choices according to your needs.

* * *

JW Player

What about skinable open source JW Player, this solution is all about Flash and HTML5 working together as part of a single video player. The player automatically falls back to the Flash or HTML5 mode when needed. This solution supports the major CDNs, YouTube, Adobe’s Flash Media Server, HTTP streaming, major advertising networks, analytics providers, and more. JW Player as well has a range of add-ons to extend the players functionality. By choosing the JW Embedder, it will also provide hosting solutions and mobile support for iPhone, iPad, and Android devices.

* * *

SublimeVideo

Sublime Video is an HTML5 video player that allows you to easily embed video on web page using HTML5 with Flash Fallback. What you’ll need is just to add a single-line-of-code to run this video player. Note that this solution supports a limited number of browsers since it’s still in experimental state. Sublime Video solution is not based on any JS library and aims to provide a high quality user experience thanks to its consistent implementation of both HTML5 and Flash user interfaces. Besides, SublimeVideo supports iPhones, iPads, Android smartphones, as well as other mobile platforms. Note that it’s a player only, so you’ll have to have your own video hosting.

* * *

VideoJS

VideoJS is a free, open source, skinnable, and lightweight HTML5 Video Player with three core parts, including an embed code (Video for Everybody), a JavaScript library (video.js), and a pure HTML/CSS skin (video-js.css). It allows you to embed video using HTML5 with forced fallback to Flash. Based on Video for Everybody, it adds custom video controls made of HTML that you can style anyway you please with a bit of CSS. VideoJS is a download rather than a hosted player; with browser bug fixes it has a consistent look between all major browsers, including Firefox, Safari, Google Chrome, Opera, IE9, and this apart is compatible with many handheld devices – iPhone, iPad, Android.

* * *

Projekktor

Projekktor is a free, open source (GPL) HTML5 based video player written in JavaScript and containing Flash fallback. To install Projekktor, you’ll only need to add two line of JavaScript to your web page (and one more CSS for styling), besides you’ll be able to add and remove Projekktor whenever you want and without the need to alter your HTML at any time. Being controlled by custom scripts using its JavaScript API, Projekktor supports iPad, iPod, iPhone, IE6, IE7, IE8, Firefox, Opera, Safari, Chrome, googleTV. It can optionally mount itself onto HTML5 and tags, and, even more, has multimedia playlists which is a central part of this project.

* * *

FlareVideo

Another completely open source and free for commercial use solution is FlareVideo which is a jQuery powered HTML5 video player. This fully customizable player supports fullscreen mode, has a fallback mechanism into a Flash driven player, an easy CSS/HTML/JS customization and theming. As for the browser support it is compatible with Safari, Firefox and IE7.

* * *

MediaElement.js

MediaElement.js is a complete HTML5 audio and video player in pure HTML and CSS. Based on Video for Everybody it uses a custom Flash or Silverlight player that mimics the native HTML5 API for older browsers. MediaElement.js builds a fully skinnable player with features like support for the HTML5 track element, fullscreen video, and even ambilight. Additionally, it includes support for sub-titling and has plugins for WordPress, Drupal, jQuery, and BlogEngine.NET. With MediaElement.js, video controls are doing using HTML / CSS for cross-browser consistency.

* * *

Kaltura

Kaltura is an easy to skin, extend and integrate HTML5 video player that works in all major browsers by using a unique fallback mechanism and playback engine (Native HTML5, Flash, VLC or Java Cortado) for your settings and video format. Unlike other HTML5 video players, it has developed a full library for videos so that with it videos can be watched even in IE. Kaltura’s player maintains a unified look and feel across formats and browsers, plus its platform additionally provides automatic transcoding into all supported formats (OGG, H.264, MOV, FLV etc.).

* * *

jMediaElement

jMediaElement or JME is an easy and intuitive to embed, style and script HTML5 audio and video development kit with Flash Fallback, which focuses on flexibility, intuitive DOM-API and semantic code. Having a cross-browser, cross-plugin and cross-device support, it’s based on HTML5 media elements and Flash (JW Player) as backend and has CSS stylable and accessible controls as flexible building blocks. Besides, JME is jQuery UI themeable and hooks to extend plugin support.

* * *

LeanBack

LeanBack Player is an HTML5 Video Player that has an independent Javascript library, support for subtitles using HTML5 track element, ability to handle more than one HTML5 video element on a single page, presents a multi-language support, and allows switching HTML5 videos and subtitles with the help of jQuery. LeanBack Player, being skinnable through using CSS, supports widely used desktop browsers and mobile devices, and its upcoming version 0.8.0 of LeanBack Player is now available for beta testers.

* * *

Video for Everybody

Video for Everybody is simply a chunk of HTML (no JavaScript) embed code for HTML5, that includes a fallback to a Flash video player, as well as video download links for devices that can’t do Flash or HTML5 video. It therefore works in RSS readers (no JavaScript), on the iPhone, iPad and on many browsers and platforms. This fully-featured solution is for those who want something really simple and are unfamiliar with HTML. Video for Everybody does not use JavaScript, and because of this, it does not work on Android versions prior to 2.3.

* * *

Deciding which video player is right for you can be complicated. In this case you can use a nice comparison chart of various HTML5 video player solutions. This chart covers some key features to show you which video player has the options needed for your project, and additionally offers links to demos to see each video player in action. If you’ve tested on a browser or device any of the above-listed players or maybe some other ones not mentioned in this list, please let us know your impressions and give us a short feedback in the comments.

Fast Five

admin — Thu, 10 Mar 2011 14:26:36 +0000

Create a 3D Flipping Youtube Player

admin — Mon, 14 Feb 2011 07:13:35 +0000

In this new AS3 tutorial, learn how to create a 3D flipping Youtube Player consisting of a youtube player that you can flip 180 degrees to show a description of the video.

1. Create a new flash file (Actionscript 3.0) and save it as youtube.fla.

2. First we are going to create the back side that contains the video’s description.

To do so draw a rectangle 560×340 (dimensions of your youtube player) with the color of your choice. With the Text tool write your description on it. Select both text and rectangle and convert it to a movie clip with an instance name of back.

Once this movie clip is created, reselect it and convert it to a movie clip, set its registration point to the center and give it an instance name of container.

At this point you shoud have on the stage the “container” movie clip that contains the “back” movie clip.

3. Now create the button that will use to flip the container, convert it to a movie clip and give it an instance name of “flipBtn”.

4. All is set on the stage, now let’s add some actionscript code. Open the actions panel.

We’ll use the Tweenlite Engine and the Youtube AS3 API. If you are new to this, please visit our previous tutorial on the Youtube API.

First write the following statements in order to use the Tweenlite engine and communicate with www.youtube.com.

1
import flash.system.Security;

2
import com.greensock.*;

3

4
Security.allowInsecureDomain("*");

5
Security.allowDomain("*");

5. Then declare the following variables. Set the videoUrl variable to the id of your youtube video.

1
var videoUrl:String = "owGykVbfgUE";

2
var player:Object;

3
var loader:Loader = new Loader();

4
var flipped:Boolean = false;

6. Also set the back side’s rotationY property to -180 degrees and its visibility to false.

1
container.back.rotationY = -180;

2
container.back.visible = false;

3

4
flipBtn.buttonMode = true;

7. Next load the youtube video. Once the player is ready to play, we set the visibility of the back side to true and add a click event listener to the button.

01
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);

02
loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));

03

04
function onLoaderInit(event:Event):void {

05
 container.addChild(loader);

06
 loader.x = -container.width /2;

07
 loader.y = -container.height /2;

08
 loader.content.addEventListener("onReady", onPlayerReady);

09
}

10

11
function onPlayerReady(event:Event):void {

12
 player = loader.content;

13
 player.loadVideoById(videoUrl);

14
 player.setSize(560,340);

15
 container.back.visible =true;

16
 flipBtn.addEventListener(MouseEvent.CLICK,turn);

17
}

8. Inside the turn() function we checked the value of the flipped boolean variable. If it’s false, we use Tweenlite to rotate the container 180° vertically so that we can see the back side with the description and pause the video.

If it’s true, we use Tweenlite to rotate the container back to 0° so that we can see the youtube video and play it.

We also add to the Tweenlite.to method an onUpdate event listener that calls the setVisibility() function in which we set which side of the container is on top.

01
function turn(e:MouseEvent):void{

02
 if(!flipped){

03
 TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});

04
 flipped = true;

05
 player.pauseVideo();

06
 }

07
 else {

08
 TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});

09
 flipped = false;

10
 player.playVideo();

11
 }

12
}

13

14
function setVisibility():void{

15
 if(container.rotationY >= 90){

16
 container.addChild(container.back);

17
 }else if(container.rotationY < 90){

18
 container.addChild(loader);

19
 }

20
}

9. Here’s the final code :

01
import flash.system.Security;

02
import com.greensock.*;

03

04
Security.allowInsecureDomain("*");

05
Security.allowDomain("*");

06

07
var videoUrl:String = "owGykVbfgUE";

08
var player:Object;

09
var loader:Loader = new Loader();

10
var flipped:Boolean = false;

11

12
container.back.rotationY = -180;

13
container.back.visible = false;

14
flipBtn.buttonMode = true;

15

16
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);

17
loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));

18

19
function onLoaderInit(event:Event):void {

20
 container.addChild(loader);

21
 loader.x = -container.width /2;

22
 loader.y = -container.height /2;

23
 loader.content.addEventListener("onReady", onPlayerReady);

24
}

25

26
function onPlayerReady(event:Event):void {

27
 player = loader.content;

28
 player.loadVideoById(videoUrl);

29
 player.setSize(560,340);

30
 container.back.visible =true;

31
 flipBtn.addEventListener(MouseEvent.CLICK,turn);

32
}

33

34
function turn(e:MouseEvent):void{

35
 if(!flipped){

36
 TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});

37
 flipped = true;

38
 player.pauseVideo();

39
 }

40
 else {

41
 TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});

42
 flipped = false;

43
 player.playVideo();

44
 }

45
}

46

47
function setVisibility():void{

48
 if(container.rotationY >= 90){

49
 container.addChild(container.back);

50
 }else if(container.rotationY < 90){

51
 container.addChild(loader);

52
 }

53
}

Sursa : http://www.riacodes.com

SEO pentru Blogspot

admin — Fri, 04 Feb 2011 11:30:05 +0000

Indexare blog

Pentru a indexa un blog/site in Google trimiteti URL-ul aici :
http://www.google.ro/addurl/?continue=/addurl Google este insa capabil sa va indexeze blogul si fara a apela la aceasta operatiune.Pentru a verifica daca blog-ul a fost indexat de Google, efectuati urmatoarea cautare: site:nume-blog.blogspot.com.

Optimizare Blog Blogspot
Ca si in cazul unui site, pentru a obtine rezultatele dorite, este nevoie de o optimizare on-site si off-site.

Optimizarea on-site consta pe scurt in :

Stabilirea unor cuvinte cheie care sa aduca trafic targetat. Aceste cuvinte cheie trebuie sa se regaseasca in: numele de domeniu, categoriile site-ului, URL-uri, Meta Tag-uri, continutul editorial, textul descriptiv al link-urilor, textul descriptiv si numele imaginilor.

Optimizare balize Meta – nu avem aceleasi avantaje ca in cazul unui site sau al unui blog WordPress. Meta Tag-urile se formeaza automat dupa urmatoarele ‘’formule ‘’ : titlul paginii va fi dat de titlul postarii, precedat de numele blogului ; descrierea paginii va consta in primele doua randuri de la inceputul postarii. Astfel pentru o buna pozitionare pe Google se impune ca : numele blogului (antet) sa fie cat mai scurt iar titlul postarii sa fie cat mai concis si sa contina cuvintele cheie targetate.

Optimizare continut editorial – incercati sa repetati de mai multe ori un cuvant cheie intr-un text dar nu exagerati. Punand un cuvant cheie in bold, italic, underline, sau inserand un link pe el catre o pagina pertinenta ii acordati mai multa importanta si implicit sansele blogului de a fi bine pozitionat cresc. Dar cel mai important este sa publicati continut original si de calitate.

Optimizare linking intern – crearea unei legaturi intre postari prin inserarea de linkuri catre alte pagini ale blogului pe cuvintele cheie pertinente. Va recomand ca din cand in cand sa reveniti asupra postarilor si sa faceti legatura intre articolele vechi si cele noi. De exemplu, in articolul Parametrii algoritmului Google am enumerat cei mai importanti parametri luati in considerare de Google si de fiecare data cand scriu pe larg despre unul dintre acesti parametri, revin la postare si inserez un link catre noul articol.

Optimizare URL-urilor – in cazul platformei Blogger titlul postarii va fi preluat in URL sub forma http://nume-blog.blogspot.com/an/luna/titlu-postare.html

Optimizare imagini

Navigare si structura :arhiva blog-ului, mai ales in cazul unui blog care are foarte multe articole, nu ajuta prea mult utilizatorul sa gaseasca o informatie sau sa navigheze cu usurinta. Solutii : adaugarea unei casute de cautare, adaugare de tag-uri pentru fiecare postare, tag cloud, implementarea unui meniu in css, implementarea widget-urilor precum LinkWithin care fac legatura intre postarile blogului. Atentie insa, implementarea multor widget-uri/obiecte gadget duce la incetinirea timpului de incarcare a paginilor, factor neagreat de utilizatori si de motoare.

Optimizarea off-site:

Obtinere de link-uri catre site (backlinks) prin inscrierea in directoare sau link exchange.
Promovarea blogului in retelele sociale (promovare pe Facebook sau publicitate pe Facebook, promovare pe Twitter, promovare pe Youtube…) pentru a creste popularitatea si vizibilitatea acestuia. Creati o legatura intre blog si retelele sociale prin intermediul diverselor butoane si aplicatii de sharing.

Sper ca am acoperit cam tot ceea ce ati vrut sa stiti despre optimizarea unui blog Blogspot. Daca aveti nelamuriri sau intrebari, va stau la dispozitie.

Google hacks

admin — Mon, 31 Jan 2011 18:42:25 +0000

Google is a treasure trove full of important information, especially for the underground world. This Potential fact can also be utilized in the data for the username and password stored on a server.

If the administrator save important data not in the complete system authentifikasi folder, then most likely be reached by the google search engine. If data is successfully steal in by the unauthorized person, then the will be in misuse.

Here, some google search syntax to crawl the password:

1. “Login: *” “password =*” filetype: xls (searching data command to the system files that are stored in Microsoft Excel)

2. allinurl: auth_user_file.txt (to find files auth_user_file.txt containing password on server).

3. filetype: xls inurl: “password.xls” (looking for username and password in ms excel format). This command can change with admin.xls)

4. intitle: login password (get link to the login page with the login words on the title and password words anywhere. If you want to the query index more pages, type allintitle)

5. intitle: “Index of” master.passwd (index the master password page)

6. index of / backup (will search the index backup file on server)

7. intitle: index.of people.lst (will find web pages that contain user list).

8. intitle: index.of passwd.bak ( will search the index backup password files)

9. intitle: “Index of” pwd.db (searching database password files).

10. intitle: “Index of .. etc” passwd (this command will index the password sequence page).

11. index.of passlist.txt (will load the page containing password list in the clear text format).

12. index.of.secret (google will bring on the page contains confidential document). This syntax also changed with government query site: gov to search for government secret files, including password data) or use syntax: index.of.private

13. filetype: xls username password email (will find spreadsheets filese containing a list of username and password).

14. “# PhpMyAdmin MySQL-Dump” filetype: txt (will index the page containing sensitive data administration that build with php)

15. inurl: ipsec.secrets-history-bugs (contains confidential data that have only by the super user). or order with inurl: ipsec.secrets “holds shared secrets”

16. inurl: ipsec.conf-intitle: manpage (useful to find files containing important data for hacking)

17. inurl: “wvdial.conf” intext: “password” (display the dialup connection that contain phone number, username and password)

18. inurl: “user.xls” intext: “password” (showing url that save username and passwords in spread sheet files)

19. filetype: ldb admin (web server will look for the store password in a database that dos not delete by googledork)

20.inurl: search / admin.php (will look for php web page for admin login). If you are lucky, you will find admin configuration page to create a new user.

21. inurl: password.log filetype:log (this keyword is to search for log files in a specific url)

22. filetype: reg HKEY_CURRENT_USER username (this keyword used to look for reg files (registyry) to the path HCU (Hkey_Current_User))

In fact, there are many more commands that google can crawl in use in the password. One who has the ability google reveals in this case is http://johnny.ihackstuff.com. For that, visit the web to add insight about the google ability.

Here, some of the other syntax google that we need to look for confidential data :

“Http://username: password @ www …” filetype: bak inurl: “htaccess | passwd | shadow | ht users”
(this command is to take the user names and passwords for backup files)

filetype:ini ws_ftp pwd (searching admin password with ws_ftp.ini file)

intitle: “Index of” pwd.db (searching the encrypted usernames and passwords)

inurl:admin inurl:backup intitle:index.of (searching directories whose names contain the words admin and backup)

“Index of/” “Parent Directory” “WS _ FTP.ini” filetype:ini WS _ FTP PWD (WS_FTP configuration files is to take FTP server access passwords)

ext:pwd inurl:(service|authors|administrators|users) “# -FrontPage-” (there is Microsoft FrontPage passwords)

filetype: sql ( “passwd values ****” |” password values ****” | “pass values ****”) searching a SQL code and passwords stored in the database)

intitle:index.of trillian.ini (configuration files for the Trillian IM)

eggdrop filetype:user (user configuration files for the Eggdrop ircbot)

filetype:conf slapd.conf (configuration files for OpenLDAP)

inurl:”wvdial.conf” intext:”password” (configuration files for WV Dial)

ext:ini eudora.ini (configuration files for the Eudora mail client)

filetype: mdb inurl: users.mdb (potentially to take user account information with Microsoft Access files)

intext:”powered by Web Wiz Journal” (websites using Web Wiz Journal, which in its standard configuration allows access to the passwords file – just enter http:///journal/journal.mdb instead of the default http:///journal/)

“Powered by DUclassified” -site:duware.com “Powered by DUclassified”-site: duware.com
“Powered by DUcalendar” -site:duware.com “Powered by DUcalendar”-site: duware.com
“Powered by DUdirectory” -site:duware.com “Powered by DUdirectory”-site: duware.com
“Powered by DUclassmate” -site:duware.com “Powered by DUclassmate”-site: duware.com
“Powered by DUdownload” -site:duware.com “Powered by DUdownload”-site: duware.com
“Powered by DUpaypal” -site:duware.com “Powered by DUpaypal”-site: duware.com
“Powered by DUforum” -site:duware.com “Powered by DUforum”-site: duware.com

intitle:dupics inurl:(add.asp | default.asp |view.asp | voting.asp) -site:duware.com (websites that use DUclassified, DUcalendar, DUdirectory, DUclassmate, DUdownload, DUpaypal, DUforum or DUpics applications, by default allows us to retrieve passwords file)

To DUclassified, just visit http:///duClassified/ _private / duclassified.mdb
or http:///duClassified/ or http:///duClassified/

intext: “BiTBOARD v2.0″ “BiTSHiFTERS Bulletin Board” (Bitboard2 use the website bulletin board, the default settings make it possible to retrieve the passwords files to be obtained with the ways http:///forum/admin/data _ passwd.dat
or http:///forum/forum.php) or http:///forum/forum.php)

Searching for specific documents :

filetype: xls inurl: “email.xls” (potentially to take the information contact)

“phone * * *” “address *” “e-mail” intitle:”curriculum vitae”
CVs “not for distribution” (confidential documents containing the confidential clause
buddylist.blt)

AIM contacts list AIM contacts list

intitle:index.of mystuff.xml intitle: index.of mystuff.xml

Trillian IM contacts list Trillian IM contacts list

filetype:ctt “msn” filetype: Note “msn”

MSN contacts list MSN contacts list

filetype:QDF (QDF database files for the Quicken financial application)

intitle: index.of finances.xls (finances.xls files, potentially to take information on bank accounts, financial Summaries and credit card numbers)

intitle: “Index Of”-inurl: maillog (potentially to retrieve e-mail account)

Design a Sleek, Dark Mobile App Website

admin — Tue, 25 Jan 2011 19:25:29 +0000

Final Product What You’ll Be Creating

Now Updated with a Coding Tutorial and the free PSD! In this tutorial we’ll be using Adobe Photoshop to design a sleek web interface that can be used for any mobile app website. We’ll be covering an array of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

The Coding Portion of the Tutorial

Eric has offered the PSD for Leaflet for free to all of our readers here. If you’re a premium Tut+ member, hop over to our sister site, Nettuts, for the full coding portion of the tutorial as well. Eric will walk you through how to take this design into a full coded HTML/CSS template!

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Alright, on to the free design portion of the tut!

About This Design

This tutorial is based on the dark, clean website design for Leaflet, an iPhone app designed for Envato marketplace publishers. Eric Alli of Trilab Media helped design and code the site, so he’ll be walking us through the step by step tutorial. Whether you’re looking to use a similar design for your own projects or just want to see how it was made, there are plenty of excellent tricks and techniques in this tutorial that you’ll be able to pick up on. Enjoy!

Step 1

Let’s begin by creating a new Photoshop document by selecting File > New.

Set both the canvas Width and Height to 1100px, Resolution to 72, and the Background Contents to White.

Next, we need to create two guides that will act as the container for our page.

Select View > New Guide…

For the first guide, set the Orientation to Vertical and the Position to 70 px.

For the second guide, select View > New Guide… again and create another Vertical guide with the Position set to 1030 px.

We should now have an outlined space that is 960px in width for our page.

Step 2

Next step is the background. Select the Paint Bucket Tool (G) and set your Foreground Color Swatch to “1e1e1e”. Then, click anywhere on the canvas to apply the color to our Background layer.

Let’s also add a bit of texture to our background by selecting Filter > Noise > Add Noise…

Set the Amount to 2.5 and click OK.

Step 3

Next we’re going to create a spotlight that will help add focus to the top area of our page.

Select the Brush Tool (B) and change the Master Diameter to 400px and set the Hardness to 0%.

Create a new layer by selecting Layer > New > Layer… and give it the name of “Spotlight”.

Change your Foreground Color Swatch to “FFFFFF” (white) and create a circle near the top of the canvas using the Brush tool.

To help blend the spotlight into the background, lets add some noise to the spotlight layer by selecting Filter > Add Noise…

Set the Amount to 20, check Monochromatic and click OK.

To smooth out our spotlight, select Filter > Blur > Gaussian Blur…

Set the Radius to 50.0 and click OK.

Finally set the Opacity on the Spotlight layer to around 25%.

Step 4

Next we’re going to be adding our phone graphics. For this tutorial I will be using the iPhone graphic from the superb Vector iPhone 4 PSD from Psdtuts+ which can be downloaded for free here. Also keep in mind, you may use any phone graphic that suits your particular needs (Android, Blackberry, etc…).

Once downloaded, open the PSD in Photoshop. Expand the “Phones” folder in the Layers panel, right click the “FRONT” folder and select Duplicate Group… Here, give the group a recognizable name (I used “iPhone”), set the destination to “Leaflet” (or whatever it is you named your PSD for this tutorial), and click OK. Once you’re finished, close this PSD.

Position our first iPhone touching the left guide and around 100px from the top of the canvas.

This is also a good time to customize the screenshot within the iPhone.

An easy way to do this is to expand the “iPhone” folder in our layers panel then click on the “SCREEN CONTENTS” folder. Now select File > Place, choose your screenshot from the browser, then click Place.

Drag your placed layer over the iPhone and resize to fit into the screen. Once finish, click Enter to save the changes.

Duplicate the “iPhone” group by selecting Layer > Duplicate Group… name it “iPhone 2″ and click OK on the dialog.

Select Edit > Transform > Scale and expand the duplicated iPhone to 107.0% width and height. Position this iPhone around 50px from the top and 200px from the left guide.

Repeat the step mentioned above to replace the screenshot within the “iPhone 2″ folder.

Step 5

The final touch for our iPhones is to create a reflection of them. Lets start by selecting both iPhone groups (“iPhone” and “iPhone 2″) then select Layer > Duplicate Layers… and click OK. Then select Layer > Merge Layers.

Next we need to flip our iPhones upside down. Select Edit > Transform > Flip Vertical, then position the flipped layer directly under the original iPhones.

Add a Layer Mask by clicking the Layer Mask icon in the Layers Panel.

Select the Gradient Tool (G) and choose a black to white swatch. Draw a line from top to bottom on the flipped iPhones that is around 50px in height.

Finally, lower the opacity on the layer to 30%.

Step 6

Next is to add our app’s main details to the right of our phones. Before we start, lets add another guide to keep things aligned. Select View > New Guide… select “Vertical” for orientation and 550 px for position.

At around 100px from the top of our canvas, we’re going to add in our logo. I’m using a logo I’ve previously made, you can simply use text or insert your own logo here.

Below the logo, we’re going to add a paragraph of text for our app’s description. Select the Horizontal Type Tool (T) and draw a rectangle between the center guide and the right guide. Set the character settings as follows:

Font Family: Helvetica Neue
Size: 16 px
Style: Regular
Leading: 26 px
Tracking: -25
Anti-aliasing: Crisp
Color: #FFFFFF

Step 7

Next we’ll create a button for visitors to purchase our app. Using the Rounded Rectangle Tool (U), draw a 240x75px rectangle with a 4px radius. Align it so the left side of the button touches the center guide and it’s 45px below the text.

Now we’ll apply some layer styles. Double-click the right side of the layer in the Layers Panel and use the below image for reference.

To add the Apple icon, draw a small text box inside the button using the Horizontal Type Tool (T), then copy and paste this symbol:  into the text box and set the character settings as follows:

Font Family: Helvetica Neue
Size: 50 px
Style: Regular
Anti-aliasing: Crisp
Color: #000000

Finally, change the opacity on this layer to 30%.

Create another text box to the right and add 2 lines of text (ex: “Download now on the App Store”). Apply the following character settings:

Font Family: Helvetica Neue
Size: 11 px (first line) 24 px (second line)
Style: Bold
Leading: 26 px
Tracking: -25
Anti-aliasing: Crisp
Color: #FFFFFF

Add a Layer style to this text using the following image for reference:

Next, we’re going to add a separator to the right of the text we’ve just added. Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the top of the button to the bottom, then change the line’s color to “FFFFFF” (white).

Change the opacity of this line to 15% and duplicate it by selecting Layer > Duplicate Layer… and click OK. Change the color of this duplicated line to #000000 (black) and change it’s opacity to 10%. Then, move the duplicated line 1px to the left.

The last element to add to this button is an icon that indicates download. Begin by selecting the Ellipse Tool (U) and creating a circle that is 25px in diameter.

Then, add the following Layer Styles:

Finally, grab the Custom Shape Tool (U) and choose an arrow shape (I’m using a default shape called “Arrow 9″). Create a small arrow 10px in width inside the circle and change the color to “FFFFFF” (white).

Step 8

Now to create a small box to display our app’s price. Select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rectangle that overlaps our download button and is 52px in height and any width greater then 100px.

Change the color of this box to “2B2B2B” and move it below the download button in the Layers Panel.

Next, add a Stroke Layer Style to this box with the following settings:

Now we can add the actual price information. For this we’re going to create two separate text boxes since the content within requires different styling.

For the first text box, add some text (I used “ONLY”) and apply the following character settings:

Font Family: Helvetica Neue
Size: 19 px
Style: Bold
Anti-aliasing: Crisp
Color: #FFFFFF

For the second text box, add your price (I used “$1.99″) and apply the following character settings:

Step 9

Moving on to the bottom portion of our page, we need to create some separation. For this, we’ll use the two-line technique we applied earlier on the download button to give the separator an “inset” look.

Select the Line Tool (U) and while holding the SHIFT key, draw a 1px line from the left guide to the right guide, then change the line’s color to “000000″ (black).

Change the opacity of this line to 80% and duplicate it by selecting Layer > Duplicate Layer… and click OK. Change the color of this duplicated line to “FFFFFF” (white) and change it’s opacity to 10%. Then, move the duplicated line 1px down so it’s under the black line.

Step 10

In the section below the line separator we’ve just created, we’re going to be adding two columns, for screenshots and a list of features.

Starting with screenshots, begin by importing your first screenshot by selecting File > Place. Choose our screenshot from the file browser and click Place. Resize the screenshot to 80% width and height, then move the screenshot near the left guide and click Enter.

Select the layer in the Layers Panel and click the “Add Mask” button twice to add a Vector Mask.

Now select the Rounded Rectangle Tool (U) and change the radius to 6px and create a rectangle over the screenshot with the size of 175x120px.

Lastly, we’re going to add a Stroke Layer Style with the following settings:

Repeat the above steps for all of your screenshots and give them 35px of space between each other.

Step 11

To separate our screenshots from the features, draw a 1px line from the top of the first screenshot to the bottom of the last screenshot that is around 55px from the screenshots.

Change the line’s color to “FFFFFF” (white) and set it’s opacity to 5%.

Step 12

Let’s add a title that will describe our features (I used “Leaflet Features”). Position the text 55px from the left separator line and use the following character settings:

Font Family: Helvetica Neue
Size: 24 px
Style: Regular
Tracking: -10
Anti-aliasing: Crisp
Color: #FFFFFF

Now let’s create our list of features and position it below the title. Create a text box and add five or six lines of features and give them the following character settings:

Font Family: Helvetica Neue
Size: 15 px
Style: Regular
Leading: 28 px
Tracking: -10
Anti-aliasing: Sharp
Color: #8d8c90

Repeat the above steps to add the app’s requirements.

Step 13

To make our list of features stand out, let’s create some simple, custom bullets.

Start by shifting the list of features text box 25px to the right.

Now select the Ellipse Tool (U) and create a circle that is 9px in diameter to the left of the first feature. Change the circle’s color to “bce086″.

Add the following Layer Style to the circle:

Step 14

Now we need to duplicate our bullets and align them to each feature. Start by duplicating the circle layer by selecting the layer then clicking Layer > Duplicate Layer…

Next, move the duplicated layer down 28px (the amount of Leading we applied to the feature list). Repeat the above steps three times.

Step 15

Moving on to the footer portion of our page, we’ll once again apply the two-line technique we applied earlier in Step 9 to add some separation.

Step 16

Now we can add some useful links to our footer area. First we need to create four text boxes, side-by-side, that will hold our links.

Start by creating a text box that is around 160x40px. Add some text to it and repeat 3 times. Here is some sample text you can use:

Box 1: Follow @mycompany on Twitter for news and updates.
Box 2: For help & support head to our Support area.
Box 3: Download our press and media kit.

Use the following for the character settings:

Font Family: Helvetica Neue
Size: 12 px
Style: Regular
Leading: 20 px
Anti-aliasing: Sharp
Color: #5555552

As you may notice our boxes are uneven and not aligned properly, don’t worry, we’ll be fixing this in the next step.

Step 17

To fix our alignment issues, begin by placing the four text boxes we’ve created above into a folder and name it “Footer”.

First, position the first text box 55px from the left guide and the last text box touch the right guide.

Now select the four text layers in the Footer folder and grab the Move Tool (V). Click on the Align vertical centers button, then click Distribute horizontal centers button from the Move toolbar.

Step 18

Now we can add some custom icons to accentuate our links.

Select the Ellipse Tool (U) and create a circle that is 36px in diameter next to our first text box. Change the color of this circle to “FFFFFF” (white).

Now select Layer > Rasterize > Layer.

Next up is to add our icon to this circle. For the first icon, I’m using the Twitter “t” that i’ve downloaded for free here.

Once downloaded, select File > Place in photoshop to import the icon into our document. Once imported, resize the icon to 28% width and height, position it over our circle, then click enter.

Next, right-click on the thumbnail of the Twitter icon in the Layers Panel and click Select Pixels.

Now select the circle layer in the Layers Panel then select Edit > Clear.

Delete the imported Twitter Icon by selecting it in the Layers panel and click or drag it to the Trash icon.

Finally, lower the opacity on the circle layer to 15%.

Step 19

For the rest of the icons shown above, repeat the steps in Step 18 by using other icons or with custom shapes in photoshop.

Step 20

To add a finishing touch to our footer links, lets give them a hit of color to help them stand out.

Using the Horizontal Text Tool (T) highlight a part of the text in each text box and change it’s color to “83b546″.

Conclusion

That’s all! I hope you’ve enjoyed this tutorial and have found some useful techniques that you can adapt / apply to your next design.

Sursa: http://webdesign.tutsplus.com/

Video Sitemaps & mRSS vs. Facebook Share & RDFa

admin — Fri, 14 Jan 2011 07:43:20 +0000

Care sunt beneficiile submiterii de feedurilor Video Sitemaps si mRSS vs. beneficiile submiterii pe Facebook Share si RDFa? E una mai buna ca alta ? Hai sa vedem.

Functionalitatea feed-urile vb on-page markup

Google accepta informatii de la video feed cat si de la Video Sitemaps si mRSS, la fel de bine ca si on-page markup, de ex. Facebook Share si RDFa. E recomandat sa folositi ambelel metode.

Daca aveti resurse limitate, va prezint un chart care explica argumentele pro si contra pentru fiecare medota.

In timp ce feed-urile si on-page markup ofera motoarelor de cautare date meta, Video Sitemaps/mRSS ofera de asemenea si ajutor la crawl discovert.
Folosind Video Sitemaps/mRSS este nevoie ca motoarele de cautare sa suporte aceste formate si nu toate le suporta. Din cauza markup-urilor on-page crewleri motoarelor de cautare pot aduca metadata prin mijloace organice in timp ce indexeaza URL-ul. Nu necestia suport pentru feed-uri.

	Feeds (Video Sitemaps & mRSS)	On-page markup (Facebook Share & RDFa)
Acceptate de Google	⎷	⎷
Ajuta la motoarele de cautare la descoperirea de adrese URL noi cu videoclipuri (imbunatateste descoperirea si acoperirea)	⎷
Furnizeaza metadate structurate (de exemplu, titlul si descriere pentru un fisier video)	⎷	⎷
Permite motoarelor de cautare fara suport pentru sitemap/mRSS sa obtina informatii metadata ( permite colectarea organica de metadate )		⎷
Incorporeaza informatii metadata aditionale ca si “duration”	⎷

Daca va intrebati de beneficiile speficice feed-urilor Video Sitemaps vs. mRss, le putem clarifica de asemenea.

In primul rand, le puteti folosi pe oricare dintre ele. Unu din beneficiile folosirii feed-urilor Video Sitemaps este acela ca Google il consolideaza in mod activ, si va permite introducerea mai multor speficitatii.

Cu toate acestea spuse, daca vei porni de la zero, Google recomanda feed-urile de tipul Video Sitemaps.

	Video Sitemaps	mRSS
Acceptate de Google	⎷	⎷
Sunt folosite de ceva timp, si acceptate de majoritatea motoarelor de cautare.		⎷
Extrem de rapid pentru echipa Google Video Search sa le extinda	⎷

Daca doriti informatii suplimentare despre feed-uri sau on-page markups, visitati Google Webmaster Central Blog sectiunea pentru Sitemaps.

Sursa: Google Webmaster Central Blog

Imagini uimitoare

admin — Mon, 10 Jan 2011 10:12:34 +0000

Pencil Vs Camera – 26 by `BenHeine

Sad Girl by Juliano Tejada

SunBall by Waleed Almotar

Cloud by Flea Yan

Spouting Off by Mark Dekovic

World’s Favorite Sport by Vramak

Transparent Screen by Yohann

God’s Canvas by Lee

Sisters Communion by Keith

LuLu Sunfingers by Rse75

Tower of Pisa by Trixnbooze

Transparent Screen iPad by Chengyin

Casio by Alexis Raimbault

Grassland by Nils Andersson

Basketball by Pixheaven

Hackerii au spart reţeaua de telefonie GSM

admin — Tue, 04 Jan 2011 10:06:40 +0000

Faptul că bătrâna reţea de telefonie GSM nu prezintă prea multă siguranţă este binecunoscut de fiecare dintre noi, obişnuiţi deja cu ştirile despre diverse persoane, mai mult sau mai puţin dubioase, ale căror convorbiri telefonice sunt ascultate de autorităţi şi folosite apoi în instanţă.

Karsten Nohl şi Sylvain Munaut, au demonstrat în cadrul evenimentului Chaos Computer Club din Berlin, cum pot fi interceptate apelurile telefonice realizate prin intermediul reţelelor GSM folosind un set de unelte relativ banale şi puţin costisitoare, constând din patru telefoane mobile şi câteva aplicaţii software open source, disponibile oricui în mod gratuit.

Citeste despre Hackerii au spart reţeaua de telefonie GSM pe go4it.ro“

My Blackberry Is Not Working!

admin — Thu, 23 Dec 2010 08:21:50 +0000

Probleme cu gadgeturile ?