Language to Create User-Friendly Web Applications - user-interface

I wish to create web application for users. So far, I have been developing mock-ups on PowerPoint.
I've asked around and I've been told to study HTML, Javascript, CSS. The books I find from https://www.allitebooks.in/ are for super-beginners, i.e. how to write "hello world", how to use css to select font and color.
Then I saw that Duolingo wrote it's website in Scala. To me, Duolingo is a user-friendly, easy-to-use website that allows user interactions to type, drag-and-drop.
But can Scala be useful?
Right now, I am looking to create a web application that takes user input and dynamically updates webpages. The web application is mostly graphics (I'm more of a visual person)
Also, user should be able to drag and drop things. For instance, if there is a bowl of fruit, how to allow users to type in description, and drag it where they wish?
One more thing. If user decides to save data, it should be saved on the cloud (user has account, but they don't have to download software).
Application is free for individual users, but huge organizations need to pay nominal fee.

A website being user-friendly doesn't have anything to do with what language it was built with. A good design is what makes a website more appealing and as you said user-friendly. Designs are typically made in softwares like Photoshop, Sketch,Xd... Now once you have a design you like, comes the web dev part of building a website. Typically this is split into two parts:
Frontend : Here you implement the design using HTML, CSS and JS. There are no alternatives as browsers only understand these languages. HTML is used to create the structure of the design. CSS is used to style the different elements. JS is a programming language used to make pages more dynamic.
Backend: Here we deal with tasks than need to be tackled on the server i.e Login, singup,send email etc. Now because a server can be thought of just being a computer,you can technically use any language that has capabilities to make http requests. Here Scala can be used. Typical languages include PHP, Python, NodeJS etc.
I kept this brief and didn't want to go in much detail, just to paint a picture of what is used for which purpose. I recommend before thinking about building a website like duolingo, to take some kind of course that explains in detail how websites are built.

Related

Web User Interface design and smart watches. What considerations to make?

I dont know enough about smart watches but i figure that at some point, browsing web sites on them will become a standard feature. The "Web Browser for Android Wear" app on google play has more than 100,000 downloads and the "WebBrowser for SmartWatch" app has more than 10,000
To that end, given that smart watches like Sony's SmartWatch 3 has a 1.6” screen, what should web designers need to take into consideration when making their web pages as portable as possible? Is there a set of standards? What kind of functionality and behaviour should one expect of a page displayed in a smart watch browser?
Although SO isn't the best place for this question, I'll chip in. As far as I know, designing for wearables is still a new thing, and as per say, I haven't come across any standards as such.
But I think responsive web design should do just fine.
People are working on designing websites for smart watches. Here.
However, think about using the standard manufacturer APIs to build more robust and interactive experiences than just relying on websites on tiny screens.
Here's an article from Net Tuts+ that shows you how to design for the Apple Watch using existing web technologies. Bear in mind it doesn't beat native at all.

Development methodology for CMS driven websites

This is quite a generic question, and I hope to hear what opinions people have on this, rather than a dedicated answer.
Ive been developing for about 6 years and have recently joined a new team. I am self taught. I have been given a project to develop a Magento driven ecommerce site, and a large portion focussing on editorial/blogging sections.
When I work with a CMS (i realise not CMS's work the same), to complete a project my methods have always been in the following order:
Develop the front-end (html, css, js).
Integrate front-end templates onto CMS
Compile CMS functions to fill out contents in placeholders on thos templates (replacing any dummy text etc).
Inject content.
When I explained this to my colleagues they looked horrified.
So they work a different way around:
Compile functions on CMS
Inject content.
Add styles (html templates, css, js etc).
Add to the equation, my scenario, the ecommerce website im developing must be responsive on devices.
So my question is, having I been doing this wrong for the last 6 years? Complete the front-end first? Or compile the front-end after?
I would really like to hear what people think about this. I am self taught, so have never had official training on development patterns such as this.
Thanks
It rather depends on the system used. Some systems allow you complete flexibility in the front-end, others (such as Magento) are more restrictive in what they allow.
At my company we usually use something akin to your preferred method; but I know that a partner of ours developed for Magento in the way of your colleagues.
So, my guess is that you both are right and that it is dependent on the choice of product.

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.

What Software Do You Use To Create Sitemaps / Site Structure For Large Sites?

Just wondering what software you use to create a visual sitemap / site structure representation before you start big sites?
I am looking to map out a large site, but cannot find any good software to help me map the site visually (And in pages/categories)..
Maybe SketchFlow http://electricbeach.org/?p=145 ? which is included in the Expression Blend Trial http://www.microsoft.com/downloads/details.aspx?FamilyID=92E1DB7A-5D36-449B-8C6B-D25F078F3609&displaylang=en
I strongly suggest taking a look at this tool: http://www.balsamiq.com/products/mockups
The Balsamiq tool is the best for doing mockups (i assume this is what you are referring too when talking about sitemaps before you start...). With this software you can quickly generate a working wireframe of what ever you are creating. So much functionality that you can actually share it with your client to get some good sign offs prior to typing the first bit of code.
Very powerful!
And the other one...just shown at the last MIX09 is SketchFlow. Couldn't remember it to save my life. This is a WAY COOL tool for site maps and UI mock up. I was trying to find you the actual MIX presentation as it is super cool to watch. But here are some YouTube videos of that presentation from a user perspective I guess.
http://www.youtube.com/watch?v=zsAZjb7FKXA
http://www.youtube.com/watch?v=f3ErrS68YMM
Check it out!
update...found the SketchFlow video!!! http://videos.visitmix.com/MIX09/C01F
Great keynote from there too: http://videos.visitmix.com/MIX09/KEY01
I know this is an old question, but for others who find this via search, I personally love mocking my websites up with mind mapping tools. I've tried several but my favorite was MindNode for Mac and Xmind for Windows.
XMind free download:
http://www.xmind.net/
MindNode free download:
https://mindnode.com/
I've also tried MindMeister which works just as well as other mind mapping tools and is hosted for you so you can access your mind maps anywhere. However, MindMeister only allows you three maps (currently) without upgrading to a paid subscription.
Another that I've worked with is mockflow.com which is great for mocking up websites with all their features and buttons and even making clickable navigation. They have a free version, but again it's very limited without upgrading to a paid version.
I'm using Slickplan. This cloud based app allows me to have access to my projects from different machines regardless of their operating systems. All I need is one of the leading web browsers (Chrome, Firefox, Safari).
With Slickplan you can create visual sitemaps from scratch or you can use Site Crawler to import your existing website to visualize and reorganize its structure.
Of course you can always export your projects to the XML format, and use the exported file to create pages and menu systems inside some popular content management system - Slickplan provides plugins for WordPress, Joomla, concrete5 and a few more.

Content/Document/Project Management System - Which is right for my needs?

So I just started an internship with this nonprofit company and it's pretty cool. My first assignment was to find a type of program that would work well for the company and its users. I and some team members just finished summarizing down what I think is a good list for the needed functionality. Before I started working, I've never even heard of content/document/knowledge/project management systems. So I've done a bit of research on many other programs and I've narrowed it down to Joomla, activeCollab, Basecamp, sharepoint and a few more. Which program out there would fit my needs the best? It doesn't have to be from the list I just wrote, those are just the programs that popped up first when I started searching.
MUST-HAVE CAPABILITIES
Searchable
Keyword search
Advanced search: Ability to tag & search documents by different categories, for example, type of file (e.g. PDF, Word, etc.), service line (e.g., fundraising, strategy, etc.), type of document (e.g., deliverable, data set, etc.)
In-document search
Categorization
Simple navigation to browse all content
Simple to set up and modify the tree/hierarchy used to browse content
Workrooms
Provide each team a separate workroom to post their own documents
Easy to navigate from team workrooms to the Toolkits (best if team workrooms reside in the same system the toolkits reside)
Version Control
Ability to see which is the most recent file
Security
Password protected
Tiered security, i.e. certain permissions for certain users (to create workrooms, change navigation tree, change toolkits, view/post team files, etc.)
Multi-year support
Easy to “archive” old workrooms or files so the navigation doesn’t become cluttered over time
Share across workgroups
Ability for power users to access multiple team workrooms
Ability to send docs from one group to another—or to the toolkits (by simple tagging or simple “submit” feature)
Uploading
Ability to upload files to workrooms
Ability to submit a new file for consideration for a toolkit (not a file currently in any workroom)
OPTIONAL CAPABILITIES
Messaging
Opt-in notification of uploaded files or changes to existing files
Version Control
Ability to see who has the file checked out
External Access
Client access to certain documents
Within our website
Users gain access from our website
It looks like it resides on our website
Collaboration Tools
Team Calendar
Blog / Forum
Instant Chat
WebEx/Remote Presentation (for virtual team meeting)
Ratings
1-5 Star document rating (by user community)
Searching & Sorting documents by rating (best documents display first in search results)
Simultaneous Edit
Multiple people can edit the same document at same time
Workflow
Ability to tag a file to be reviewed by another user (ability to “escalate” a file for review by someone else)
Messaging alerts when a file has been flagged for a user
Most of the features that you mentioned above are available for free using Plone, which is an application that runs on top of Zope. I actually built and deployed an instance of Plone for a non-prof that had a lot of the features that mentioned above. They features might not have had the same names, but you get a lot of the same functionality.
Here's what my users really liked about Plone:
The ability to index the content of MS Office documents, so that people could search for documents based on content in addition to property and tags/keywords.
Usability. The default theme for Plone isn't the flashiest thing that you will ever see, but it's usability is excellent.
How easy it was the change the system and add new sites or functionality.
Here's what I liked about Plone:
Zero licensing costs. I was able to implement features that usually only come in very expensive systems for free. And I'm aware of these types of costs, because I administer FileNet systems for a living
It was very easy to install, upgrade, and administer. Please take that "pro" with a grain of salt if you're not a professional systems administrator :)
Overall, it was just very easy to work with.
And here are my cons:
If you need the web site to be accessible on the public internet, then your hosting costs may be higher-than-expected. It's definitely cheaper to set up a vanilla Joomla site than it is to set up a vanilla Plone site. Please note that you sound like you need a lot more than a vanilla content management system, so their may be no difference in hosting costs.
Plone is built on Zope, and Zope is an application server. It's easy to set up and use, but it works a little differently than a lot of other web and application servers. If you're used to administering a LAMP stack, then this will be different (but not necessarily bad).
One final con is true with all modern content management systems: don't give your users enough rope to hang themselves. When it take 2 minutes to a wiki and a blog to a web site, then users expect you to add new sites all of the time. Every new site adds a lot of administrative work to your plate, so try and get as much functionality as you can from each site that you add.
Hope that helps!
Tom Purl
Basecamp. Even if it doesn't have all the features you think you need, it does what it is supposed to (37Signals loves to rant about too many features, you aren't gonna need it (YAGNI), etc.)
Joomla is a pain. Activecollab is a poor clone of basecamp (unless it has changed drastically in the year or so that its been since I tried to use it to get out of paying for basecamp).

Resources