I wanted to use any tool to design UI(by dragging necessary controls) for mobile application, which will give me the necessary HTML, CS (may be JS) code.
Please suggest me any free tool or browser plugin for this.
Thanks.
I'm not sure if the following links are best for you:
jQuery UI
Phonegap
Bootsnipp
Related
just downloaded the Adobe XD and i think i am going to love it. I just have a problem Exporting it from Adobe XD into HTML / JS / CSS and port it to my code in Visual Studio, so i can do WebForm.
How is this possible.
Adobe XD has a plugin ecosystem where you can download a third-party built plugin to achieve tasks not supported by Adobe XD itself. For web export, I can recommend a plugin called "Web Export."
In order to use the plugin,
Make sure you have the latest version of XD
Go to Plugins > Discover Plugins > Search "Web Export"
Click "Install"
Hope this helps!
Natively, you can't (yet), although some external plugins can help you achieve that.
Adobe XD is a prototyping tool, ie it has been designed for producing the designs of websites and app before passing it to a developer that will "manually" build the HTML/CSS/JS out of it.
However, the export to HTML/CSS/JS feature has been asked before by the community many times and the Adobe team is currently working on it (check this and this).
AdobeXD positions elements on a canvas with x and y coordinates. This is not how HTML/CSS works for websites. You need to create an html structure and position elements with grids, flex, etc.
You could use position:absolute and position the html nodes like you would do in AdobeXD, but that will not play well with different devices and when you will do the responsive code.
There are applications and plugins that will import the html and css with absolute position, but there's not much you can do with that code. There's also Desech Studio that imports AdobeXD relatively, but it will not be pixel perfect and you then have to adjust margins and widths yourself.
Right now most people write the html/css by hand without any tools, because the tools have limitations.
You can use Anima plugin for that.
To use Anima for XD: www.animaapp.com/xd
I am creating a reservation website with code igniter, but I am having a problem because I want to use metro css instead of bootstrap. how can I do that? thanks in advance. :) I want to know if using metro css is possible with code igniter. Please help me. I will really appreciate. Thanks.
You can use custom Meto CSS library which you can download from here
github.com
Introduction
Code Metro (Codeigniter Metro UI CSS) kick starts the development process of the web development process by including Metro UI CSS into CodeIgniter. With this custom Codeigniter framework, you can make a site with an metro UI interface. It also includes certain libraries such as AWS and Facebook in-case you are developing applications requiring those SDKs. Now start working on your idea.
Note: There are lot configurations to be done. So to through link carefully.
I'm about to build a fairly simple 'energy use issue tracker' HTML5 mobile app (Android/iOS Webkit only) using Angular. I want to avoid frameworks like HTML5Boilerplate, and use as few js libs as possible, and avoid anything JQuery; neither are we using node.js. The only UI features I really need are screen transitions (preferably CSS3-based with hardware acceleration), and to avoid the 300ms tap delay. I've been considering angular-mobile-nav, but am interested in what others have chosen.
For now, this will be a 'save to home screen' single-page webapp so users can submit an issue (e.g. lights are on, no-one in the building'), take and attach a pic, and view/filter a list of issues already submitted, each of which can be up-voted and Tweeted. There's an existing REST backend the app will PUT/POST to, and we'll be using Server-sent events to update a list on the app.
None of that is too hard (I have the camera working and the backend is up and running), but finding a minimal Angular-friendly solution for a lightweight UI is holding me up.
I think AngularUI will let you reach your target specially UI Boostrap which contains a set of native AngularJS directives based on Twitter Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are AngularJS (minimal version 1.0.4 or 1.1.2) and Bootstrap CSS and regarding the size of the library minified version is around 40 KB.
I hope my answer help you and Please feel free to ask me any question? and I will be happy to answer.
consider ionic framework, Ionic is a beautiful front-end framework for developing hybrid mobile , it is still in beta version , but there is an active community working on it
http://ionicframework.com/
We have to build an app which should run on iOS and android. For expenses reason we decided to to it with html5 and phonegap.
Now we have to decide which mobile framework we wann use for it. I know there are already a lot of this issues and I also already did a lot of research. But I'm still not sure which one we should pick.
I've heard a lot down side points from Jquery mobile, but on the other hands it seems there is nothing really better, beside senche touch, out there.
What are your experience, what whould you suggest?
I'm looking forward hearing your opinion
(let me now if you need further information for evaluating)
Thanks
Building PhoneGap with Bootstrap and AngularJS is a breeze.
AngularJS provide a really nice separation between Route, Model, View, and Controller. Learn Angular directives and stop writing spaghetti js dom interaction code.
Bootstrap, though not as nice as jQM for mobile features (maybe until v3), still provide a nice starter CSS such as (navbar, fixed top, bottom, etc...) And if you know your css, then I think Bootstrap is more flexible than jQM. Combine with some nodejs build script to compile your less file to css and you are all set. Glyphicons is also a good starter set of asset/images.
I am sure you would have done a lot of research on this but from my experience I would suggest you to take a look at Sencha Touch + Phonegap combination.
The reason why I opted for Sencha Touch over Jquery Mobile is that the JM is quite sluggish when it comes to page transition and animation. Whereas, Sencha Touch provides you all-in-one place regarding building a rich mobile app with HTML5, CSS and Javascript. The only thing about ST is that you might require to learn some Ext JS which is used by Sencha Touch to create components. They do have a lot of documentations which you can refer to.
You can refer these links to kickstart on Sencha:
https://github.com/senchalearn
http://www.sencha.com/learn/touch/
All the best! :)
We have just started working with PhoneGap in my studio and we are using Backbone.js + Handlebars.js and Bootstrap or Ratchet depending on the case. It seems to work very well.
If you want some more resources on that I will suggest you start with
http://coenraets.org/blog/2013/05/top-10-performance-techniques-for-phonegap-applications/
http://coenraets.org/blog/2013/05/architecting-a-phonegap-application-video-slides/
http://coenraets.org/blog/2013/06/sample-mobile-phonegap-application-with-backbone-js-and-ratchet/
Really good resources.
Where do I start to learn how to make mobile web apps? I am interested in the design and effects/animations used to make them look somehow native. There must be some difference in the css, html maybe javascript from regular web appplications with regard to screen sizes etc.
I am a Java developer so usually I use templates, but I am fairly experienced with css, html...but I don't feel very updated on mobile web apps.
If you want to develop cross platform mobile application using HTML,Javascript then you can try Phonegap. With Phonegap you can create single application which will run on Android,iOS,Blackberry,Bada,Windows,Symbian etc.
To learn android :
http://www.vogella.de/articles/Android/article.html
http://developer.android.com/resources/tutorials/hello-world.html
Phonegap can be a good choice as you are familiar with HTML,Javascript.
I think the easiest way to give a mobile web-app a very close approximation to native behavior and look is to use jQuery Mobile and even the associated ThemeRoller. It's all very well documented, and the site also had great resources for learning.
jQuery Mobile is obviously based on jQuery, but is tailored to be consistent yet configurable across mobile platforms.
I highly recommend using some kind of framework.
There are several.
Sencha Touch: Very comprehensive. You don't have to worry about writing any HTML or CSS, since the framework generates it. Sencha Touch provides a Java-like pseudo-class structure, and good documentation.
JQTouch: Rather basic.
JQuery mobile: Somewhat in the middle.
The-M-Project: Lesser known, but looks promising. Haven't tried it myself.
All of these offer widgets that come with the required CSS/JS for animation and native looks, so no need to worry about that.