Android Asset Studio:
'via Blog this'
Tuesday, January 29, 2013
Wednesday, January 23, 2013
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 .
phonegap online build is a good option for small application.
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-phonegapphonegap 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/
Thursday, January 17, 2013
Upgrade nopcommerce from 1.6 to 2.8
i have an old site with nopcommerce 1.6 here are the steps to upgrade it.
run all the upgrade db scripts from 1.9 version , means download the
nopCommerce_1.90_NoSource.rar - run all the scripts in this rar file nopCommerce_1.90_NoSource.rar\Install\Scripts.
all downlaods could be found from here http://nopcommerce.codeplex.com/releases/view/98452
download nopCommerce_2.00_NoSource.rar install it , when the site want to create new db , set the parameters to your old db ( the original db - the one you already upgrade to 1.9 ).
after doing so , you need to run the upgrade scripts from 2.0 version (nopCommerce_2.00_UpgardeScripts).
after run all the upgrade scripts , you can find them here .
enjoy
Yaniv Tzanany
p.s. - its not worked well for me ... i might miss something while copy and paste - and i am lazy todo it again.
but this is the way !!!!
run all the upgrade db scripts from 1.9 version , means download the
nopCommerce_1.90_NoSource.rar - run all the scripts in this rar file nopCommerce_1.90_NoSource.rar\Install\Scripts.
all downlaods could be found from here http://nopcommerce.codeplex.com/releases/view/98452
download nopCommerce_2.00_NoSource.rar install it , when the site want to create new db , set the parameters to your old db ( the original db - the one you already upgrade to 1.9 ).
after doing so , you need to run the upgrade scripts from 2.0 version (nopCommerce_2.00_UpgardeScripts).
after run all the upgrade scripts , you can find them here .
enjoy
Yaniv Tzanany
p.s. - its not worked well for me ... i might miss something while copy and paste - and i am lazy todo it again.
but this is the way !!!!
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
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.
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.
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:
Open an activity with animation in Android
yaniv
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)