jQuery UI Helpers - for .Net MVC

jQuery UI Helpers - Getting Started:

Free Responsive template

ShapeBootstrap | Free Twitter Bootstrap template:

http://startbootstrap.com/

http://html5up.net/

http://www.html5xcss3.com/

check responsive web site

http://responsivetest.net/

Load testing your web application with Apache Bench -

Load testing your web application with Apache Bench -:

Day6- Web Mobile and HTML5

this day will be about video & audio and drawing with html5.

the ppt is from here http://www.slideshare.net/YnonPerek/06-html5-mobile start at page 60.

in html 5 there is a <video> </video>  tag , each browser support in different coded

http://getmiro.com is a free converter for music and video.
h.264 is widely supported in android & iPhones.
for mobile devices usually use mp4 format.

<audio></audio> tag is like video tag , iPhone & Android support MP3, there is no AutoPlay !!
to play any music you must use "click" event on somthing , no auto play.

if you want some free sound you can find them at Free Sound Clips, Sound Bites, and Sound Effects .

Hybrid app 

ppt could be found  here http://www.slideshare.net/YnonPerek/07-phonegap
phonegap online build is a good option for small application.

ppt about Ajax and WebSockets Intro.

this how to init object from json string:

var obj = eval(json_str)

place to use images - some are free

deviantART was created to entertain, inspire, and empower the artist in all of us. Founded in August 2000, deviantART is the largest online social network for artists and art enthusiasts with over 25 million registered members, attracting 65 million unique visitors per month - http://www.deviantart.com/

Day5 - Web Mobile and HTML5

JQM = J Query mobile

PPT could be founf here http://www.slideshare.net/YnonPerek/04-jquery-mobile

you can control JQM theme , you can use the

ThemeRoller 

to create theme to your application , you can setup your new theme, then download it ,  open it and save it into your project directory.

new directory called theme will be added to your project, you now need to add one line above JQM mobile links in the header to add your theme.

JQM is very good for prototype , small sites , business portfolio.
JQM build to support many devices ,without performance in their mind.

html5 - features and api  

localstorage is a great way to save your state in the browser.

navigator.geolocation is the way to track your current postion.
please note open html from your hard drive with the  navigator (e.g. file://) will not work from chrome , use firefox instead.

Day4 - Web Mobile and HTML5

putting script src tag such as
<script src="xx.js"></script> in the end of the html , its good for UI performance , the user experience is better because he see something first.

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

//on re-size do something

var someFunc = function(){
$('myElement').html('******');
}

$(window).on('resize',someFunc);

jQuery mobile framework takes the "write less, do more" mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded web site or application that will work on all popular smartphone, tablet, and desktop platforms.

ppt could be found here http://www.slideshare.net/YnonPerek/04-jquery-mobile

in JQM (jQuery mobile) this is the tree of mobile pages:
data-role="page"   - mobile page
---data-role="header"   - header of the page
---data-role="content"   - content of the page

---data-role="footer"   - footer of the page

(data-position="fixed" set the footer/header on the bottom/top of screen and the content in the middle)

JQM start guide

JQM is very popular for forms in the web, you can just add tree line in the header (include , css ..) and your forms will looks better.

set the type on input fields - will help to the user.

type="tel" - open number keyboard

type="email" - will make sure its email

type="text" - regular keyboard.

jqm is very sensitive with the spell of element (id,names,..etc), it will fail to work if you will make any mistake.

Day3 - Web Mobile and HTML5

very nice tool  ---- weinre is WEb INspector REmote 
weinre is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

ratchet UI framework  - Prototype iPhone apps with simple HTML, CSS and JS components.
you can combine it with Junior  - A front-end framework for building HTML5 mobile apps with a native look and feel.

Today we focus on java-script .. here is a starter slides - advanced java script .

if you not use var on variable , it will be global.
file is not a domain for variables.
var in a function , "live" in the function.
create variable in a function without a var , will be global.

best practice:
all variable should be start with var.
all my code should be insert into function.
function(){
     var foo=5;
}
when you add "use strict" , the supported browser will failed to run the JS function when there is errors in the function.

each var is like hashmap.
console.dir - display all the items in the var.

must tool when working with teams or a big project:JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team's coding conventions.

JS Bin is a JavaScript, HTML and CSS playground. If you want to experiment, learn or help your friends with a problem, then JS Bin is for you.

Day2 - Web Mobile and HTML5

day2 of the seminar - pdf  could be found here .

nice tool - for sharing screen with other over http - https://join.me/
if you need to fill up your site with text http://hipsteripsum.me/

the browser before rendering the page looking for any reference for style sheet - css files.
when adding style tag in the page header - should be faster to render.

 (h1,h2...,div,p,li,....) tags are blocked tags - get the full line.
inline tags(span,a,...) written one after the other in the container, inline elements represents text.
if you want.
img tags are special , they are inline/block element , you can define the size of this tag(width ).

to center block element you need to :
mergin-right: auto;
mergin-left: auto;

css selector - its the tag before { such as div,body,h1.

when you have multiple tags selector ,  with space between them, such as:
div div {}
means that the selector will look for div that have a parent div as well (its not have to be a direct father).

when planning a page (web page) use
reset.css - its  important to reset all the browser defaults, best practice, cancelled browser defaults.
there are many browser in the market(desktop,mobile), with different default , so you want to clear it first.

good practice to use em as sizing for fonts/heights , the idea is when the you set the font size on the body each em equal to the font size, when you change the font size all the sizes are changed.

PXtoEM.com PX to EM conversion made simple.

Mobile CSS PPT

we will use class selector when you need to have many items on the same page e.g.:
img.thumb { ......}

cool css samples:
http://css-tricks.com/examples/ShapesOfCSS/
http://www.the-art-of-web.com/


css animation tags:
-webkit-transition: all 0.5s;
-webkit-transform

exercise:
build left menu - when click on button , the menu will shown/hide with animation from the left.

Day1 - Web Mobile and HTML5

in this post i will try to summarize what i learned in a course.

some ppt from ynon perek about web mobile could be found here

http://ynonperek.com/course/mobileweb/about.html

another site i just found is Learn how to build beautiful & intuitive websites.

web most popular front end template - could be found here 

http://html5boilerplate.com/

its a good place to start to build your html5 site.

an easy meta tag to set in your html page to present nicely on mobile:

meta name="viewport" content="width=320"

mean that the mobile browser should show this page in 320 width, read more about newport tag.

A collection of inspirational websites using media queries and responsive web design.

more about mediaqueries

very good site to start and  play with yours html-css code http://dabblet.com/

JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. 

extra info about mobile web http://www.quirksmode.org/mobile/

list of media queries http://nmsdvid.com/snippets/

very good css tutorial  http://code.google.com/edu/submissions/html-css-javascript/ and another one http://css-tricks.com/ , https://developer.mozilla.org/en-US/docs/CSS

Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

Here is a  site who can help you to generate css3 styles to controls css3generator.

The Ultimate CSS Gradient Generator , will help you to create gradient.

until the next day ....

Yaniv 

Create a free website - tools

Weebly - Create a free website and a free blog:

ISRAELI Site in hebrew http://dashboard.webydo.com/gibo.aspx

http://www.wix.com/

JS - Making pop-up windows modal

i liked this article , passing data from/to modal dialog in html page.
beside the Blog looks like very good
Making pop-up windows modal - Article - CodeStore:

on the same issue of modal dialog , you can find this test very usefull.
showModalDialog Method Sample
showModalDialog Method

Enjoy
yaniv T

DHTML Menus, popup , on top Flash

when you have a flash component in your html page , you probably notice that when you open your menu , or trying to raise a html popwindows , that flash become on top of your html page.
if this is your situation , a very east solution describe here Flash, DHTML Menus and Accessibility.
the idea is simple just to change the "wmode" parameter in the flash starter script.

so easy .....

Yaniv T

java script code

i know there are many sites for java script , but,i found this efficient java scripts library.
DHTML scripts for the real world.
i am sure you will find something to enhanced your site.
enjoy
Yaniv T

Open url in Full screen mode

Here is a sample that simulate opening a url in a new browser in a full screen or as a popup, with several variation , you can even put your page name for test.
create two html files e.g a.html & b.html.

copy the next code into a.html file - and navigate to a.html file .

<html>
<script language=javascript>
function getUrl()
{
var myTextField = document.getElementById('myText');
if(myTextField.value != "")
return myTextField.value;
else
return "b.html";


}
function openMaxWithSize(url)
{
var strParam="titlebar=no,toolbar=no,status=no,location=no,menubar=no,resizable=yes,scrollbars=yes,top=0,left=0";
strParam += ",height=" + (screen.availHeight-40);
strParam += ",width=" + (screen.availWidth-10);
window.open(url,'',strParam); //remove comment to open full screen
}

function OpenUrl(url)
{
var childWin;
childWin = window.open(url,'window','height=300,width=550,status=yes,toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes');
childWin.focus();
}
function OpenUrl_yaniv(url)
{
var childWin;
childWin = window.open(url,'window','fullscreen=yes,status=no,toolbar=no,menubar=no,location=no,scrollbars=no,resizable=no');
childWin.focus();
}
function Maxfullwin(url){


window.open(url,'MainUI', ',type=fullWindow,fullscreen,scrollbars=yes,channelmode=0')
}

</script>
<body>
<br/>
page to Open <input type=TextBox id="myText" value="b.html"/>
<br/>
<br/>

<input type=button value="open Max With Size" onclick="openMaxWithSize(getUrl());"/>
<input type=button value="Open Url" onclick="OpenUrl(getUrl());"/>
<input type=button value="Open Url yaniv" onclick="OpenUrl_yaniv(getUrl());"/>
<input type=button value="Maxfullwin" onclick="Maxfullwin(getUrl());"/>
<br/>
</body>
</html>

enjoy
Yaniv