There are a lot of web based IDE's like Cloud9, Codebox, AppBuilder(Icenium). And I'm really interested in how the front end / UI for these environments works.
I have a hard time believing that it's just plain HTML5/CSS/Javascript that are providing the rich features. Is there some similar framework/library that they are using?
You can look at the source for Cloud 9 yourself:
http://github.com/ajaxhub/cloud9
They use a number of JavaScript libraries but yes, the front-end is all HTML5, CSS and Javascript when it comes down to it.
Related
I am starting to build my own website using the Django framework. It has become apparent that in order to make quick progress I will have to use some form of external library to handle most of my HTML/CSS/Javascript, for example, https://materializecss.com
I have begun investigating different websites to see what works and what doesn't and I was wondering if there is a quick way to identify what UI library a particular website is using.
Chrome's 'inspect' tool doesn't really help me because I get lost with so much HTML.
For example, this website https://www.moneyunder30.com/category/banking apparently uses https://materializecss.com, is there a general place hidden deep in the HTML where I could look to find this information?
Thanks
There's a pretty cool Chrome extension called Wappalyzer
I know very little HTML or web dev, but I would like to write an
HTML5 app with a fairly complex UI. Is there a framework that stands
out among the rest for this type of job? Do I need a framework; or can
I just do everything in straight HTML+CSS+JS? And what about GWT?
Thanks!
As a general HTML5 starting template, Boilerplate is always a good choice.
It will optimize and chain all your scripts and CSS files, as well as your HTML code and images, it also comes with useful tools like Modernizr.
If you are looking for JavaScript libraries, YUI is a very good library when it comes to UI, though maybe a little more complicated than jQuery or jQuery UI at first. I found it better than jQuery UI, and can work together with jQuery anyway.
EDIT
You may also be interested in Ext JS. Looking at the demo it provides, seems really like a powerful library with many ready to use UI widgets. Never used it though, and looks like it only offers a commercial license.
I suggest you to use Html5-boilerplate.
Download from github
Video Tutorials from author :
http://www.youtube.com/watch?v=qyM37XKkmKQ
http://www.youtube.com/watch?v=OXpCB3U_4Ig
GWT is a good way to go for a complex web application, particularly if you're familiar with java but not javascript. GWT now provides support for HTML5 features such as offline storage, canvas, audio, and video, although it's possible to use any HTML5 features whether GWT provides specific Java classes to support them or not (I implemented the offline storage feature in one of my apps before it was part of GWT). Using GWT will mitigate many of the browser compatibility problems you will encounter with straight HTML+CSS+JS. Although you write in Java, it's still important to be familiar with HTML, CSS and JS, since the java is compiled to js.
I'm looking to implement drag & drop in MSIE (must be, a bonus for other browsers, but just "nice to have").
I'm looking at a sort of drawing package - let's say flowcharts for example. The user can drag flowchart elements from a palette and position them in the browser. When complete, I will need to know the type and position of each element, probably some other data too.
Can this be done? If so, what's the most powerful technology to do so? HTML 5? Ajax? JS? Something else?
Short version: I would recommend JQuery UI (A javascript framework), this will make your life easier. As for other components, you are free to stack it up from server-side to client-side components depending on your needs and most of the times depending on your preferences.
[update] The long version: Personally, if I would start a useful website with a back-end, I would use Java as my PL of choice since I'm familiar with it, SQL for my persistence, and make it a Web 2.0 site, like what you want to achieve which is a rich internet application (drag and drop, dynamic content, etc). I would normally make use of Java (JSP, Servlets) but use Grails framework (Groovy, GSP, Groovlets), SQL DB (like MySQL, SqlLite, etc), Ajax, HTML, CSS, Javascript (JQuery as my JS framework). Eclipse would be my IDE to program and integrate all of these components.
Some people would prefer to use Python, others PHP, some .NET, Ruby on Rails, etc. Like what I said, it is very subjective. If you already have a field of expertise, then I suggest you stick with it, but if you are starting from scratch, it's basically a choice of the easiest learning curve for you because different Programming Languages can and will satisfy your needs.
For the front-end you have Flash, Applets / JavaFX, Javascript, etc. The problems with Flash, Applets or other embedded media are 1) heavy on resources 2) compatibility, but the clear advantage is that they are more robust because you can do so much more with these technologies in arguably a smaller amount of time. But if you want to use one of these, you have to seriously think about your target audience e.g. for Flash, iPad and iPhones cannot display them at all (except if you installed the unofficial "frash" which supports a bit of flash content).
I believe what you want to do is highly feasible even if you just use Javascript, and again, I will strongly recommend that you use a framework that can readily satisfy your needs (like drag and drop) so that 1) you'd worry less about cross-browser compatibilities, 2) you won't have to reimplement them and 3) fix many unexpected bugs along the way. But this is the general idea if you are developing a software, if the framework or library already exists, use it (just be extra careful with licensing though but this is another topic) :)
disclaimer: rum + coke = awesome
use javascript, that's all you should need to have drag n drop for elements. for example : http://flowchart.com/demo/
Does anyone have any suggestions on how to generate accessible PDFs (including images) from HTML?
The PDFs need to look like the original HTML, including positions of images etc.
Any special HTML structure required to help make the final PDF accessible?
I've seen questions about creating PDFS none of them specifically address the important issue of accessibility.
My poison of choice is Perl but references to any program, language or library will help.
I have a more in-depth question at TypeDoc if anyone has more general information to offer.
http://doctype.com/TiB
Also,
I, and others, would find it useful if users with accessibility problems could comment if they find the "usability experience" of using PDFs better or worse than reading from Plain Old Semantic HTML (POSH).
Thanks
Mike
Look into PrinceXML. Through CSS you can control margins, page breaking and orientation. While not open source, you can try it for free, but it places a small water mark in the upper right corner.
The Adobe ColdFusion server product does a really fine job of this, not surprisingly. But it's not free, and the open source implementations of the language (Smith and BlueDragon) don't support the pdf stuff.
Developer licenses to Adobe ColdFusion are free, and you can download it.
I've done this thing on a small scale but scripting Safari to print to PDFs. I don't recommend it for large-scale projects though.
By far the most capable PDF publishing tool I've ever come across is reportlab. There is an open source library written with Python and a proprietary system that allows you to construct a document using RML, a custom xml spec. The latter is easier for more complex docs. They tend to be very flexible (and reasonable) with pricing.
Not strictly an answer to your question as it doesn't handle html-to-pdf conversions, but perhaps of use to you.
I don't like WYIWYG editors, I want to be responsible for the selection and placement of each tag and attribute! Is there a good editor out there that allows you complete control over the HTML but offers useful features such as:
syntax highlighting (of course)
suggestions of tags, attributes etc. e.g. as dropdown lists
validation and accessibility checking
previewing the HTML
Currently I use TextPad with syntax highlighting, but feel I could do better.
I'm a big fan of Aptana for generic HTML/CSS/Javascript editing. Based on Eclipse, but nicer usability. Automatic formatting, code suggestion (with native support for jQuery & ExtJs) and embedded browser tabs for checking your work.
It's also cross-platform, supports Windows Mac & Linux.
I like Notepad++; it doesn't have embedded preview, but it's lightweight, has a good UI, syntax-highlights reliably...
Microsoft Visual Studio 2008 might suit your needs (and there's a free download "express" version).
Others have mentioned Visual Studio and HTML Kit. You might also consider DreamWeaver or Microsoft Expression Web. Technically, both of these (and even Visual Studio) have WYSIWYG modes, but they also offer split source/WYSIWYG and total source-only modes. All have validation, standards checking and the whole nine. All allow complete control over code with no fuss nor muss, if that's what you want. Expression and DreamWeaver support syntax highlighting for more than just HTML/ASP; both also support PHP natively.
Here's a link to Visual Web Developer Express (the free Visual Studio Brian mentioned).
I really like Coda on the Mac http://www.panic.com/coda/.
HTMLKit is reasonably decent and free.
I really like Microsoft Expression Web 2.0 or Microsoft SharePoint Designer 2007, depending on my needs.
Specifically, Microsoft Expression Web 2.0 supports development of the basics (HTML, CSS, etc.) while including Intellisense for ASP.NET and PHP.
Microsoft SharePoint Designer 2007 includes support for SharePoint Services and MOSS.
I've heard people say that they like Dreamweaver, but it's a little on the bloated side for my taste. Both the tools I mentioned above allow for WYSIWYG editing, but they support all the features you listed as well. They also allow for doctype support and validation for accessibility, etc.
I recommend Programmer's Notepad for lightweight code editing, but then I'm biased :)
To be fair, these are all also good for the same:
Notepad++,
SciTE,
Notepad2.
None of these (including PN) do the big extras you're asking for with previews and the like, however. For those features you need something more full featured like the already recommended and excellent Expression Web or perhaps even Visual Web Developer.
I should point out also that there are loads of editor discussions on SO already:
https://stackoverflow.com/search?q=html+editor
I still use an old version (4.0) of Homesite and it does just about all I want and need. It was originally written by Nick Bradbury and was not too heavy, had just the right set of features, and was very popular.
Nick sold Homesite to Allaire and then it was eaten by bigger and bigger fish. But it is still maintained and now being sold alongside Dreamweaver as a text-based HTML alternative by Macromedia (and now Adobe).
They charge $99 USD for it.
I would have upgraded, but they only have upgrade pricing for version 4.5 and after. Sorry for the following emotional comment, but I say Software vendors should not ignore early adopters of their programs. People who were first in line deserve special and lifetime treatment. They will become your best customers and best spokesmen for your software, if you let them.
I realize you're on Windows (from the tools you describe) but, for the next Mac guy to read this question:
TextMate seriously does-not-suck for editing all sorts of things, especially collections of things (like projects of C, ruby, java, html, perl, bash, etc.) If it had SubEthaEdit's ability to do cooperative editing, it'd be the only editor I ever use.
TextMate
Depending on what code you will be using (ASP v. php v. ruby, etc), I would suggest Dreamweaver. It is WYSIWYG, but many of the best editors you would find are, including VS 2008. Of course, that doesn't mean you have to use it! I used Dreamweaver quite often at my last job and it was great for editing code and quickly previewing.
Edit: I should mention that Dreamweaver would be best for html, css, javascript, coldfusion, and php. Those are the technologies I have used it with.
I really like Kate, and since it's a KPart, other KDE programs use it as the editor, so it's goodness everywhere!
(why is everybody else assuming you use windows?)
You might want to look into Bluefish - it's what I use for php at home. It has nice support for syntax highlighting for many languages and quite a bit of other goodies HTML-wise.
I use Eclipse here at work, for J2EE stuff. It comes with some great tools and syntax highlighting for html/css/etc.