What is a Twitter Bootstrap UI? - user-interface

I recently came across this term and I was wondering if there is anyone that could enlighten this concept and how it could fit into application development?

Twitter Bootstrap
You're probably reffering to Twitter Bootstrap. Not to be confused with normal bootstrap, which is something else.
Twitter bootstrap is a small (frontend) css/js "framework" with which you can build fluid web pages. So this is meant for web design only.
This means that when you resize your browser, all elements will be resized aswell, so that it even displays everything nicely on a mobile device.
For examples and more information check out their github page: http://twitter.github.com/bootstrap/
What is bootstrapping? (bootstrap)
Bootstrap (or bootstrapping) is something different. A bootstrap is a piece of code that is run when the machine (or application) first starts. A bootstrap file contains all sorts of standard configurations to configure itself.
There's actually more detail behind the whole bootstrap story, so for more information please read the wikipedia article:
http://en.wikipedia.org/wiki/Bootstrap

Bootstrap(aka Twitter Bootstrap)
It is a powerful front-end(CSS,JS) framework for faster and
easier web development.
It contains HTML and CSS-based design templates for
typography, forms, buttons, navigation and other interface
components, as well as optional JavaScript extensions.
It is compatible with all browsers from mobile to desktop
platform.
Since version 2.0 it also supports responsive design. This
means the layout of web pages adjusts dynamically, taking into
account the characteristics of the device used (PC, tablet, mobile
phone).
Its open source and its hosted on GitHub
To know more

Actually, the people giving the prior answers themselves did not have knowledge of the term and mistakenly, provided to you something "that is more popular".
Bootstrap UI is also called Angular UI. This is a JavaScript Library that is used for enhancing features used in projects using both - Bootstrap + Angular. It synchronized between them regarding pagination and other stuff. It is useful for projects primarily using Angular.
See here more details:
https://angular-ui.github.io/bootstrap/
https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
Thanks, buddy!

Related

Is it possible to build mobile and web apps from the same code base?

Is it possible to have a single code base for a mobile(ios/android) and web application? I'm thinking about using react native or angular/nativescript. If you have attempted this what are the things to keep in mind before doing this. Also anything particular to for SEO?
Most importantly are there any real world apps with reasonable complexity that already have done this?
NativeScript actually supports this a couple different ways.
NativeScript officially supports Angular; so you can create everything as an Angular application. Almost the entire app can be shared between Web and NativeScript; the only things that can't is the actual screen layout. In Angular for the Web; you use HTML tags so it might be somepage.html <div>{{somevalue}}</div> and for the NativeScript side you would have somepage.xml and it would have <Label text="{{somevalue}}"></Label>. This allows you to layout the app using the native components for Mobile, and web components for browsers, but use the same backend logic.
There are several seeds and platforms that are designed around fully creating a web app and a NativeScript mobile app that can share virtually everything.
NativeScript also supports VueJS; in this case you can again create virtually everything that shares much of its code base, the only thing is again you need separate layout files because again the web uses html, and NativeScript uses native components. So you have to have separate display files.
Disclaimer: I also work for nStudio; I tend to do non-angular type plugins mainly; but I do know that xPlat is really state of the art and has been used in several successful applications that our development studio has produced.

Capuccino alternative with a comparable looking UI?

I'm looking for a set of Javascript based UI components for a web app I'm building and have found that many of the best looking web apps were built with the Capuccino framework; see http://www.getflow.com/, http://www.picsengine.com/home/ and http://timetableapp.com/ for examples.
However, I'm not a Cocoa developer and have no interest in learning Objective-J. Ideally, I'd find a set of components that provide the visual end result of Capuccino apps without the underlying weight of the framework.
I have seen the Aristo jQuery UI them (http://taitems.tumblr.com/post/482577430/introducing-aristo-a-jquery-ui-theme), but jQuery UI just doesn't seem to have the depth of components available in Capuccino.
I realize this may be a long shot, but I figured it can't hurt to ask. :)
Thanks.
As another option, there is jQuery UI: nice if you are already familiar with jQuery, with the plus side of not being too heavyweight, but may not have all the components you need pre-defined. A nice thing is that it encourages to write the HTML in a way that degrades gracefully when your application in older browsers.
Maybe sproutcore is an alternative for you, although it requires you to hand-code everything in javascript from scratch. It offers most basic components and is easily adjustable to your personal design goals. Sproutcore is used in Apples Mobile Me and in some other big projects.
Another possibility might by vaadin which offers a rich set of prebuild controls and is based on Googles GWT javascript compiler. But it only makes sense if you are developing in a java environment.

Web technologies in GUI apps

What's your experience in using web technologies (HTML, XML, CSS, JavaScript) to implement part of the functionality of a GUI application? Pros and cons, please.
No servers, relational databases, AJAX, or cookies for session management, nor an existing webapp either, but rather a GUI app that uses web widgets (like Qt WebKit) to render and handle substantial parts of the UI, while taking advantage of a GUI framework to achieve an even richer interaction and better desktop integration.
I've already validated that the approach is possible using PyQt. Content can be rendered from the file system or from strings, and URL requests (images or clicks) can be captured and served by the form's event handlers. CSS and JavaScript are supported, perhaps with some limitations.
# ...
self.webView.page().setLinkDelegationPolicy(
QtWebKit.QWebPage.DelegateExternalLinks
)
#...
class TotiMainWindow(QtGui.QMainWindow):
def linkClicked(self, url):
pass # events arrive here
Note: This question is different from this one and this one made before, among other things because there is no requirement to use web technologies on the GUI, but there is the requirement that the application should work without a network connection available, and should integrate well with the default desktop over different platforms, without previous infrastructure requirements (no .NET, Java, browsers, or database servers).
Note: I posted a different version of this question on PMS but found very little experience with this approach there.
Closing Note
I just found most of the information I was looking for in a series of blog posts by André Pareis.
I think the largest advantage to using web markup like HTML/CSS and other web technologies is that desktop apps may very well have their days numbered.
As we speak, Google engineers are working on the Chromium OS, which essentially consists of a single GUI application... the browser...
Now, while nothing may never actually come of it, there is clearly a rising trend in the number of applications accessible through a web browser, accessible anywhere. It seems to me that this is the future of application development.
By using these technologies, this becomes one less headache you have to deal with when or if you determine that your app should be available as a web application.
Update: A few years ago, we developed an Agent Desktop for our call center that is essentially a local application that opens sockets to integrate with the phone system. The user interface the agents use is built with HTML, CSS, and JavaScript, and the experience is stunning. When we released our latest update in 2010 with a professional CSS redesign, our agents were all very impressed with not only how easy it was to interact but also how easy it was to use.
In the future we will port this 100% to the browser, but for now it needs to be a local application because of the COM integration with the phone system.
We did exactly this for a project back when Windows XP was new.
This gave my team several benefits:
A good-looking UI with relatively little effort
Easily change the style of the UI in a consistent manner using CSS
Relatively simple integration with C++ (invoking functions from the ui and vice versa)
The drawbacks we saw were:
Some not-so-good firewalls considered accessing internal resources (ie other html pages in the ui) to be a web request
Adding and accessing the needed resources could in some cases be a bit cumbersome
It was possible set properties in Internet Explorer that would prevent JS from running in the application
Note that some of Windows XP:s programs are using this approach.
This probably works best with small, more Wizard-like parts of the ui (which our ui consisted almost entirely of).
I have since then not really been involved in ui projects, so I cannot really tell you whether this approach is still valid... I know that MFC-based applications will let you use HTML-based dialogs though.
In a similar situation in 2005 I created a stand-alone webapp using XForms, CSS, JavaScript, XML and XML Schema for offline data retrieval and verification. With a good XForms -> HTML + JS transformer (Chiba) it did the job with no bug fixes after the initial release. It was used for 6-12 months (IIRC) by about a dozen engineers for a project gathering test data in the tunnel of the Large Hadron Collider. The biggest surprise of that project was just how much you get for free when going for a web platform, even for offline use. Highly recommended.
The major problem is that it reduces your development speed, or the quality of your user interface. A lot. Unless you're using Seaside, it is much faster to develop a desktop app.
There is quite some number of applications built on top of Mozilla platform. It isn't 100% web technology, as instead of HTML you use XML based XUL, but the rest is indeed web stack (JavaScript, CSS). The most successful of these it the OpenKomodo and it's commercial big brother Komodo IDE.
On the other hand, as far as Qt goes, the newest version 4.7 you can build GUI using QML language. Don't let the name mislead you, it's not markup, it acctually JavaScript with app-specific extensions.

how to make web application?

I want to implement web application using xcode?is it possible?if yes then then please advicse me?
example:http://pinoypay.com/iphone/
While I have no personal experience with it I think you are looking for Dashcode rather than Xcode for developing web applications such as the one you linked.
It's located in /Developer/Applications/Dashcode after installing the developer tools.
You can read more about using Dashcode to develop web applications in the Dashcode User Guide.
Is it possible? Yes.
Is it convenient or pleasant? No.
I'm sorry but from the question, it appears you are trying to run before you can walk. Or possibly even crawl.
XCode is not required to build an iPhone styled website, only to write an iPhone application. You would be better off starting with some HTML-CSS tutorials.
XCode is an IDE. You can use it to build a web application but you must use some kind of web application framework in the first place.
The best option is to use one of the frameworks becoming available and maturing.
In the first instance as has been said look at Dashcode, particularly the latest release as this has templates for web based apps and will actually generate the code for dual, Browser and iPhone app so the resultant code will function in both.
The there are a number of third party solutions of varying quality, ease of use and documentation.
In no particular order there is:
IUI library
webapp
iWebkit
jqtouch (this is jquery based)
phone-universal
quickconnect (which has large parts of an OReilly book devoted to it)
All of these give you the javascript and the css to make a web app look and feel and act like a native iPhone app (to one degree or another).
Dashcode is excellent for some solutions as it gives you access to all the Apple tools and has reasonable IDE. The result then runs on a normal web server.
Quickconnect actually has Dashcode templates which you load into Dashcode and build the first part of the app in, then this is exported and imported into Xcode and you completed the project in Xcode and deliver it as a Web App for the iPhone.
Thee other frameworks can be used and developed with any tools, Textmate, Eclipse etc. and the resulting code it then run on a normal web servers
In my opinion, yes.
And while xCode does not target to the web development as other software (like Brackets, DW, etc.) it has a nice feature: a drop-down menu of javascript functions, which would be extremely useful to have in other web development IDEs...

JSF vs Flex

I want to settle on a GUI framework, and use AJAX, as simply as possible.
Assuming adequate skills in both JSF and Flex, but not too skilled at AJAX/javascript, and assuming Java as the language for the application, and using a DB, which is a good choice, or both have equal set of pros/cons?
Try using Richfaces. As RichFaces library will provide ready made Ajax Enabled JSF Components. You can use them in your JSF Application.
RichFaces is a rich component library for JSF and an advanced framework for easily integrating AJAX capabilities into business application development. The RichFaces components come ready to use out-of-the-box, so developers can immediately save time in taking advantage of component features to create Web applications that provide greatly improved user experience more reliably and more quickly. RichFaces also includes strong support for the skinnability of JSF applications. RichFaces also takes full advantage of the benefits of the JSF framework including lifecycle, validation, and conversion facilities, along with the management of static and dynamic resources.
http://www.jboss.org/jbossrichfaces/
...and the pros of Flex are:
Flex Framework-built SWF files runs in the Flash Player JIT, which is 100x faster than browser-native JS, unless you've got a JS Jit-enabled browser which uses SquirrelFish, for example. So user performance may vary considerably, whereas the Flash Player works at the same performance across all browsers, all platforms.
The Flex Framework is open source, so you can customize it to your heart's content. And since it runs on the Flash player, it runs the same everywhere. Unlike an AJAX framework, where you usually have to be highly expert at browser compatibility coding to customize it.
Flex tools are also free, as the Flex SDK is open source.
Having said that, you can code desktop apps in AJAX using Adobe AIR, without using Flex or ActionScript, if you want to.
How to make HTTP requests with Flex:
http://www.adobe.com/devnet/flex/quickstart/httpservice/
AJAX using JQuery (one of many JS frameworks):
http://docs.jquery.com/Ajax
Both of these are pretty simple once you've played with 'em a bit. You specify a URL and a callback function to read the text response once it's finished loading. Assuming you're familiar with the pros of Flex, the pros of JS are:
It doesn't require a browser plugin
You don't weigh down the page with the Flex framework.
You'll probably find more developers in the market who are familiar with it because the development tools are free and the code is usually visible to anyone who wants to learn from it.

Resources