Guides for UI designers working in Google Web Toolkit - html

Can anyone point me to a useful guide for UI designers working in google web toolkit?

As per my comment to bhargava's answer, your designers should be learning UiBinder. The whole chapter about building user interfaces seems appropriate too (to get a better perspective), but UiBinder is what they will be mostly dealing with. Without using UiBinder in your project, you are stuck with Java and that's not something your designers are likely to know (and are probably not keen to :)).
I'd recommend building a simple example (but not too simple - maybe you should "strip" the official mail example) that uses UiBinder and show the designers exactly what you expect them to provide and what should be left as stubs. It all depends on the designers in question - whether all they know is HTML and CSS or maybe they have experience with Java, etc. Tailor the example to your needs - you probably won't "get it right" the first time, but with feedback from the designers (what's hard to understand, what they think should be the responsibility of the programmer, etc.), you should arrive at a good learning tool for future employees and a reference for current ones :)

Well if you're looking on how to use widgets and panels in gwt then i would recommend Roughian Examples
This website provides us the basic usage of the GWT widgets and panels and provides us with enough information just to get things started.

Related

How do I build the "To add content" page of a responsive website

Context: Ok so I am building a website for a friend. Hes a designer with a high need to daily include his projects (images and text).
Problem:
Ok so I know pretty much how to code in html/css/javascript a front end responsive website, that is the easy part for me, the hard one is the content page. I've never done it so I don't know the best way.
A page that he goes daily put a new project, new images, formatted text (A like a blog). But since he doesn't know anything about coding and front end, it has to be simple enough for him to understand.
Resources: I made several searches and found some websites that allow custom templates with content, one of them standing is wordPress (haven't used it for years). I am currently abusing tumblr for that matter, but their support is quite bad. Should I use one, should I buy a host like bluehost and create my self one, what you guys recommend? I tried google it but perhaps I am not doing it the right way since I am not finding any answer to my problem.
Look, you've come to a programming website, so the most common suggestion you'll get here, and the option I myself recommend is:
MAKE IT YOURSELF!
It really is a fun and very educational experience.
There are many, many ways to do this. In general you'll want to have a front end that communicates with a back end API.
For the front end, there are a lot of options. From templating engines like Jekyll, to MVC frameworks like Laravel, to full fledged high level abstractions like Angular and React, which are admitedly harder to learn but so, so robust, and useful once you've figured them out.
The selection of tools you can use to make the API that supports the website is just as rich. There is ASP.NET for C# (which some people use for the front end as well but I wouldn't), there is Node.JS for JavaScript, with a myriad of libraries and packages to get you started. Flask is a popular option for Python. The list goes on and on.
Oh and dont forget about Ruby on Rails.
As for the interface which your friend will use to add their work, turning all that complicated back end into a simple, easy to use interface is a fundamental part of UX design and, IMHO, quite satisfying once you get it right. Make it sleek and, most of all, intuitive. One shouldn't have to be taught how to use it. It should be apparent from the first time they open the page. You should always ask for their feedback as you are developing it. Some even opt to create mock ups of the interface, in order to get feedback on both its aesthetics and its intuitiveness before a single line of code has been written.
Now, regarding how you'll actually do it, the answer really depends on the tools you opt to use. In general, you'll want to read up on things like the MVC pattern, or React's component architecture. The former is something you'll come across on a wide variety of platforms. The latter is mostly React specific, but in my opinion, understanding how to properly build a website using component architecture means you're in the right mindset, something that will help you no matter how you choose to build it.
All that being said...
Web development is complicated. Creating dynamic websites is a much larger undertaking that designing a static page, or even making an SPA. Though I do wholeheartedly recommend you do it at some point, starting with your friend's website might not be the best idea. Or, you may simply not have the time to sift through all your options, figure out which is best for you, begin the learning process etc.
In that case, there are plenty of publishing frameworks and tool sets to choose from. Wordpress has become very popular in the recent years, and templates and plugins for it are abundant. Alternatives like Medium and Ghost have also gained some traction.
There are plenty of commercial CMS type frameworks. One I have heard good things about is ExpressionEngine. However, I cannot speak for it with certainty.
If you are looking for a website builder, there are also plenty of options out there such as Weebly, Wix, as well as Squarespace. Google sites is a relative newcomer in that department, but seems promising.
So, in summary,
I wholeheartedly recommend building it from scratch. There are many, many languages, frameworks, and tools out there you can choose from, each with its own patterns, best practices and idiosyncrasies. If you lack the time, or simply don't feel like going through that process of building a dynamic website from scratch, you can use one of many tools available. However, that wouldn't be nearly as much fun, and would likely produce an inferior result.

Evaluating YUi and BackBone

I want to start a project and I am evaluating the architecture.
And now I am at point to decide the front end components.
I want to use HTML5 + Css3 + Javascript
On Javascript side I don't know what do you recommend. YUI or Backbone. I don't know how to evaluate what can be the best for me. The idea is to create a Browser web app and a Mobile app.
Do you recommend another framework for do that? Or some book, url or something that expose how to organize my front end?
This might be a bit late. But I will say this. I've looked through these so far:
Angular, Knockout, Backbone, YUI
And I read some other comments on Ember.
From what I've seen, Angular and Knockout take the same starting approach. They start out telling you how to interface with the front end. I do NOT like this. They give you a whole lot of rope to hang yourself with if you don't know how to design good architecture. Its completely up to you to build a proper MVC app with them.
From what I've seen of YUI, its EXTREMELY similar to Backbone, which is no surprise because YUI was INSPIRED by Backbone. I have spent a LOT of time looking at backbone and I'm very impressed with it. If you follow its principles and standards, it will encourage you to build a sound framework that won't leave you hanging later.
But I saw another commentor who actually actually moved from Backbone to YUI because he said YUI is more streamlined and all around better. I wouldn't be surprised if this is true. But I need to evaluate it further.
Many folks, including myself, agree that Ember, Knockback, and Angular are rather "heavy handed" in their approach. Like I said, they START with explaining how to interface with the HTML. Right out of the gate, they're wanting you to do things a certain way. This could be very problematic depending on your particular application.. OR it could make your particular application a piece of cake if it fits nicely in their approach!
My two cents!
Backbone is great for creating web apps, both for desktop and mobile. It's strongest point is that it's small and quite simple: you can actually read through the entire annotated source code. Backbone helps you structure your code in a maintainable way, which is the main benefit.
The downside of backbone is that it's not very beginner-friendly: setting up the collections, models and views can be quite challenging if you're not used to it. It also doesn't help you at all in rendering the views, which is a blessing and a curse: it's not as easy or helpful as a widget based framework, but it also doesn't get in your way, which is especially important when implementing the mobile app.
I would recommend you study the backbone todo-example ( http://documentcloud.github.com/backbone/#examples-todos ) to get an idea how the framework works.

RoR and web design (css)

I am starting server side programming with RoR. I am noticing that it's tightly coupled with css/html web design. (Maybe I am just perceiving it that way since this is my first time doing server side stuff).
I just want to know, are server side programmers usually well knowledgeable in css/html layout stuff? I understand the ruby part, but css is giving me a headache. Debugging with different browsers/testing/ a lot of trial and error and still buggy. Finally you get it to work with Firefox and I.E doesn't work anymore...
How do server-side programmers out there usually tackle the "looks"/UI? Do they get someone else to do the css stuff and worry mostly about the functionality?
Thanks.
I answered a similar question here.
Most of the times from something basic, like twitter-bootstrap is now fantastic to get something up and running quickly.
What happens next is up to you: either you have some interest and learn some design skills. Or you get in touch with a designer to do the designing for you. I seriously think you will need to have some HTML/CSS skills yourself, but that is not the same as designing.
It depends on the development shop your working for I suppose. Larger companies tend to have some people focus on the backend, and some on the front end to best suit peoples talents.
I would highly recommend becoming familiar with the front end UI as well for your own benefit though. Most small web development shops are seeking full stack developers that can manage all aspects of the web app from server configuration, backend logic, and UI. You'll be much more well rounded in solving your own challenges, and become a more valuable employee with a diverse skill set.
Since your using RoR I would recommend becoming familiar with SASS and Coffescript since they can save a lot of development time. Also sass provides excellent mixin features to help solve your CSS cross browser issues, which you can find several prepackaged ones in Thoughtbots bourbon gem. https://github.com/thoughtbot/bourbon
The question is impossible to answer.
Many server-side devs are well-versed in HTML, CSS, and JavaScript, at least up to the "Oh that's the IE7 off-by-one bounding rectangle absolute-div positioning bug" point.
However, I think some groups of server-side devs are generally more adept than others: server-side environments like RoR, PHP, and so on tend to push more HTML/CSS onto the devs than, say, Java.
For me, the trick has been to keep the HTML and CSS relatively clean (sass/scss helps a lot), not obsess about pixel-perfect cross-browser appearances, and have layouts that you don't have to mess with much. There are HTML/CSS frameworks that help in this regard.
Conversely, a lot of designers don't know enough JavaScript to be useful--I think it is important for site developers to know enough JavaScript to provide the necessary functionality. Here again, the frameworks tend to breed different levels of JavaScript awareness, although that's changed somewhat as more sites get more interactive.

does one need any 'programming aptitude' to become a web-designer? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
It's well-known among teachers that some people can program and some can't. They just don't have mindset for that. In a nut-shell, I want to ask if the same is true about web-design.
I have a friend who is a good designer in general and can produce reasonably good-looking sites with WYSIWYG editor like Dreamweaver. But, since we're starting a common project, I'd like someone who can 'get hands dirty': work with html and css code directly. For many reasons, I'm sure you understand.
Now I'm thinking to incite him to learn, but not sure what're the chances of success.
So, do you also need some 'programming abilities' to profess css and html, or it's just a matter of training for regular designer?
I would especially like to hear particular experience from web designers.
PS I intentionally leave out JavaScript, let's keep it simple
The best web designers I have worked with know a small amount of html but don't use it when they are designing the sites. They do their work in PhotoShop (a minority will use GIMP). The reality is that I would rather they concentrate on laying out eye catching websites instead of trying to code it and lay the site out on the fly.
A web designer is absolutely not the same person as a front end web developer. That person has a skillset aimed towards converting the designers work into a set of working html/css templates.
Let me be clear that I am not saying that there is no cross-over between the two skillsets, but rather that very few people will be excellent at both design and development. If you are willing to settle for less than stellar results, at least be sure you go into the project with your eyes open.
Not at all. HTML is not a programming language, it's a markup language.
It shouldn't take you long to figure it out; I did it when I was 12. I personally think you need to be a better, how do I put it... artist to design websites than a programmer.
Of course websites nowadays are a lot more interactive, and for that you'll need some sort of server scripting (PHP, ASP, etc) and Javascript - and these are real programming languages.
A web designer who can't hand code HTML/CSS is not a web designer. The lack of such skills shows more of an aptitude problem(wanting to improve one's self). the graphic designer + front end developer combo doesn't always work well, because chances are the developer doesn't have the eye for the details in the design, such as margin, line-height, text kerning etc etc. Also it's hard to convert the interactive elements as well.
edit: this topic has been debated within the web design community on and off for a while now. You may find some interesting links in the blog post I wrote regarding this issue.
you are much better to know how to code a website HTML / CSS / Javascript before you go saying your amazing with a WYSIWYG editor. Sure you can use software to create a nice looking site but when it comes down to it how do you solve cross browser issues? How do you add dynamic content (even without server side) a WYSIWYG editor is just like designing a website in powerpoint or word but a lot more smarts. Though without the backing knowledge you are not going to go far.
As for learning plain HTML / CSS is fairly simple its an easy markup to get the understanding of. But then with that comes more, learning how to SEO plain HTML for example. There is always more to a site than HTML / CSS for it to be successfull.
This seems like a life question; I suspect it is true about almost anything. I think it can be hard to guage someone's aptitude for programming without seeing them actually try to program for awhile, however. Many people need to struggle with it for awhile before an "AHA!" moment is reached.
Nevertheless, I don't think design skills and abaility to work with CSS and HTML necessarily correlate to an aptitude for programming, per se. Of course, the two are not mutually exclusive,
It is not important for the designer to be able to program/markup/code in HTML or CSS. However, it is important for the designer to be aware of the current constraints imposed by HTML/CSS. With things becoming more dynamic, it is also important for the designer to understand how things are going to interact with each other. For example, you cannot become a real architect, without being aware of the constraints imposed by civil engineering.
But that's it. It is not important for a good designer to even know Dreamweaver or Photoshop or some other software :)
I am a university teacher, and I have also written both computer programs and HTML. Although I teach math, I understand the point about teaching computer programming. Although it might seem like there is no gray area between being able to program and not, I would say that writing in a markup language is one. You shouldn't divide the world into "cans" and "can'ts" with a question like this.
If he's a generally bright guy, yes you should encourage him to learn HTML and CSS. I wouldn't propagandize it as the thing that real men do or the greatest thing since sliced bread. Rather my argument would be to have a more complete perspective of what, after all, he's already been doing. Just as a racecar driver shouldn't necessarily need to pick up a wrench, but knowing what to do with one is useful for a deeper understanding. If you offer your friend a positive sell, the worst that can happen is that he'll say no and not take your advice. And who knows, he might even like it.
A lot of people either can't program or just wouldn't enjoy it, but don't mind writing in markup all that much. Most research mathematicians these days write their papers directly in a markup language, TeX/LaTeX, that in some ways looks a lot like HTML. Some mathematicians also like to write computer programs, but most of them don't. If they did like it, there is a good chance that they would have ended up in Silicon Valley. In fact in my profession, the whole question of can or can't write markup, or can or can't write programs, is stale. We're long used to a continuous range of abilities.
In my opinion, you can't have enough knowledge about this sort of stuff when doing any type of computer design or software implementation.
The more you know about the underlying technology, the better you will be at working with the high-level frameworks and constraints you live in.
Even if you work only in Photoshop in order to design a website, having the knowledge about what works and what will be more difficult in HTML/CSS/Whatever will give you an edge when designing that website over someone who doesn't know those details.
Of course, with knowledge comes constraints, which might be bad in and of themselves. Some of the best new technologies out there was built by people who didn't know that almost everyone else thought that what they tried to do was impossible.
But I still hold that more knowledge = Good Thing™
Web site creation especially a commercial website involves a LOT of different skill sets.
Back-end requires:
System Administration, Database Administration,
Web Applications development (anytime a website becomes interactive) requires server side programming skills and knowing various tools like (PHP, Java, ASP, Perl, C, C#, pick-flavour-of-the-month-server-side-language) and client side programming requires knowledge of browser behaviours mark-up languages and browser-side layout systems (HTML, javascript, CSS...)
Web Design requires artistic visual skills and related tools (Graphics programs)
Web Content requires language skills (Knowing how to proof read, translate, etc.).
Site Optimization requires knowledge of how to make sites appeal to various readers and audiences (both human and robotic)
A professional website involves several folks working in-tandem to bring all of the above together in various quantities.
If you are going to pursue something as a career, you need to know a bit about all aspects of that space and then follow in on what really excites you. So if someone is good at creating visually appealing content they should simply plan the content, and collaborate with someone to "program" their vision into the site.
Learning tools, and knowing about various components, is good as it tells you the boundaries and the playing field scope, but you don't need to know all of it to achieve professional competence in one specialization.

What are the right materials for a desktop developer to become web developer?

I'm a .NET guy desktop developer, and I love that. I don't really love web development because we lost precious time to debug CSS, javascript, and compatibility stuff instead of creating value.
But I think it's because I had not taken time to learn about good web development practices, so now because I want to become the best developer that I can, I'd like to learn about my weakness.
Can you give me some advices/links/patterns/frameworks to become a good web developer ? (I am a .NET guy so I accept everything that will permit me to develop better websites in .NET).
Thanks !
Precision
I have done a lot of ASP.NET webform in the past, but this is not enough to create great web site without loosing time on compatibility/css/javascript issue.
You could take a shortcut and use ASP.NET, which provides a number of controls to make web development easier - and you'll be familiar using them.
Unfortunately, they aren't really that great (imo) and do not teach you good practices with the web.
I suggest you look into ASP MVC, which is now in beta. This will teach you how to write websites whilst allowing you to use libraries you are familiar with .NET
With general web development, look into websites like W3schools which will teach you the basics.
Remember to seperate presentation from markup with CSS and make sure you are using javascript to add value to a page, but make sure your page is still usable without it.
You will always lose time with CSS compatability issues, all I can say is with practice you learn what pitfalls to avoid so it gets a little easier.
As for javascript development, it has improved considerably in the past few years with frameworks which in theory are cross-browser. Maybe try looking into JQuery which syncs well with ASP MVC and has intellisense in visual studio
Advices:
Best advice I can give to you: Just don`t get angry when you done something correct but it wont show as you wanted. Patience! :)
Links:
www.w3schools.com
Nettuts.com
Webappers.com
Digital Point - webmasters forum
Patterns:
My advice is to get more into MVC pattern and any enterprise pattern.
Frameworks:
Just see this link :) Framework Guide
For Javascript: JQuery,Prototype,Mootools,EXTJs
For CSS: 960 grid system is pretty good
Make sure you learn about the client/browser side as well.
Current best practice with all the different browsers around is to use a javascript library to make your web-application cross platform and cross-browser. An AJAX library like jQuery or Prototype to perform the interactive actions you wouldn't be able to do with standard HTML and CSS in the pre-AJAX era.