check this out:
Open an activity with animation in Android
yaniv
Tuesday, January 15, 2013
Animation between activity in android
i found here very nice working solution that make it very easy to add some animation between activities .
check this out:
check this out:
Wednesday, January 9, 2013
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
<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.
Monday, January 7, 2013
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.
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.
Thursday, January 3, 2013
Google map API Key
In case you want to use MapView in your android app, you need to have a map key .
the next step will describe how to do it in your debug environment.
search for the debug.keystore file , in my Win7 its located at:
C:\Users\yanivt\.android
open cmd windows.
cd C:\Users\yanivt\.android
C:\Users\yanivt\.android>"C:\Program Files (x86)\Java\jdk1.6.0_35\jre\bin\keytool.exe" -list -alias
androiddebugkey -keystore debug.keystore -storepass android -keypass android
you should get somthing like this
androiddebugkey, Sep 21, 2012, PrivateKeyEntry,
Certificate fingerprint (MD5): xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
goto here Google Maps Android v1 API Key Signup and accept the terms and enter the MD5 that generated for you by keytool.
another post about this subject could be found here http://moorandroid.blogspot.co.il/p/google-maps-on-android.html
enjoy
yaniv tzanany
the next step will describe how to do it in your debug environment.
search for the debug.keystore file , in my Win7 its located at:
C:\Users\yanivt\.android
open cmd windows.
cd C:\Users\yanivt\.android
C:\Users\yanivt\.android>"C:\Program Files (x86)\Java\jdk1.6.0_35\jre\bin\keytool.exe" -list -alias
androiddebugkey -keystore debug.keystore -storepass android -keypass android
you should get somthing like this
androiddebugkey, Sep 21, 2012, PrivateKeyEntry,
Certificate fingerprint (MD5): xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx
goto here Google Maps Android v1 API Key Signup and accept the terms and enter the MD5 that generated for you by keytool.
more info: Signing Your Applications
another post about this subject could be found here http://moorandroid.blogspot.co.il/p/google-maps-on-android.html
enjoy
yaniv tzanany
Wednesday, January 2, 2013
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.
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.
Tuesday, January 1, 2013
Day1 - Web Mobile and HTML5
in this post i will try to summarize what i learned in a course.
web most popular front end template - could be found here
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.
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
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
Subscribe to:
Posts (Atom)