Current state of client-side XSLT - html

Last I heard, Blizzard was one of the few companies to put client-side XSLT into practice (2008). Is this still the case in 2011, or are more people now exploring this technique in production? 
It seems that modern browsers (IE9, FF4, Chrome) and client processing power are primed to exploit this standard for tangible savings in server CPU power and bandwidth on large scale properties. Am I missing something?
The negative aspects I'm aware of include
additional rendering time
additional assets required on uncached page load
additional layer of complexity
noticably less developer experience than server-side template techniques
The benefits I perceive include
template composition offloaded on the client
caching of common template fragments offloaded on the client
logical separation of document structure and data
well-documented web standard supported by all modern browsers
Finally, although I know it's impossible to predict the future, I am curious to know opinions on whether or not client-side XSLT's day will come. With interest in HTML5 driving users to upgrade their browsers and developers to explore new techniques, I'm eager to see what develops.
Thanks in advance,
Casey
Edit:
Any insight into how transformed XML is viewed by Google and the ramifications it has on SEO is appreciated too.

I use client-side XSLT on kulesh.info. I haven't found any differences in IE 6–9, Chrome, Safari, and Firefox. XSLT transformation happens very fast. I haven't done any speed measurement, but I don't see any differences comparing to pure HTML version (even on first generation of iPod Touch).
mail.yandex.ru (big mail provider in Russia) is also using XSLT on client-side.

Last I heard, Blizzard was one of the
few companies to put client-side XSLT
into practice (2008). Is this still
the case in 2011, or are more people
now exploring this technique in
production?
Here are some examples:
Jenni Tennison's site is completely XSLT-client-site driven and has been so for years.
This commercial website is totally client-side XSLT driven: http://www.skechers.com/
We already have an implementation of XQuery in the browser: XQIB
Michael Kay has blogged about his attempt to produce XSLT 2.0 in the browser and there would be something working soon.
Some people argue that XSLT isn't designed for "programming in the large" -- for example it lacks any separate compilation capabilities. Let's hope that the coming XSLT 3.0 will change this.

I may be somehow lost in translation, but I guess SEO issues is the main reason, preventing a lot of people of using client-side XSLT.
I'm not aware of search robots, capable of parsing application/xml instead of plain html or even flash.
Still it's a good practice (mail.yandex.ru is a notable example indeed) for highly loaded web-apps to use XSLT partially on the client, because traffic is large and SEO-friendliness isn't necessary.

The problem with the XSLT stuff on the web is there are so many other things out there that can be used in place of it that are easier on the developers. I can never really see XSLT taking hold on the web in the form you are describing, in fact I believe Blizzard actually pulled the client side XSLT translations from their sites when they recently did some redesigns to consolidate their brands.
Trust me though, I wish it would, I wrote a solution for a company I worked for in the past that used XSLT translations for all their front end templating. It didn't use client side translations because this was in 2005, when there was still a large market share of browsers that didn't support client side XSLT. One of the biggest issues we had when working with that system was finding developers that could help work on it. And when you found someone who could work with it they'd butcher a lot of the templating because XSLT development is a different beast than any other templating language out there.
While the benefits of using XSLT are tremendous ( do a google search for symphony, a great cms that utilizes xslt as it's templating system ) I don't see it taking much more hold for front end development.

When making a decision about XSLT usage, it usually comes down to a cost of developer time vs perceived benefit in CPU cycles. For a little customer it almost universally means: XSLT, if it exists, goes on a server side. There is simply not enough benefit in figuring out all the client issues.
If a breakthrough is coming, it will be on the big sites, such as: facebook, or google. On those, the CPU cycles offloaded to a client will make up a significant $$$ figure, enough to justify hiring developer(s), who will iron out the client problems. I would be watching those players to see if a change is going to happen

I made a XML - XSLT website a couple of years ago for a project in school and noticed a bug: Firefox doesn't support disable-output-escaping.
https://bugzilla.mozilla.org/show_bug.cgi?id=98168

Related

How to choose the right web application framework?

http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks
Since we are ambitiously aiming to be big, scalability is important, and so are globalization features. Since we are starting out without funding, price/performance and cost of licences/hardware is important. We definitely want to bring AJAX well present in the web interface. But apart from these, there's no further criteria I can come up with.
I'm most experienced with C#/ASP.net, PHP and Java, in that order, but don't turn down other languages (Ruby, Python, Scala, etc.).
How can we determine from the jungle of frameworks the one that suits best our goal?
What other questions should we be asking ourselves?
Reference material: articles, book recommendations, websites, etc.?
For me, the most important things to consider were:
Fantastic lead developers who I trust to keep working on the project.
Googling a question brings a lot of good answers.
Most importantly, I have to like the way the code flows.
Edit: Also they have to be anal about coding standards. If there is inconsistency, I get very annoyed.
Those 3 points brought me to Symfony. It is always using the latest cutting edge features of the latest PHP version. Symfony 2.0 is using namespaces before any other framework.
Two of your points were:
i18n - there is great support for it (helps that the company behind it is French, so i18n is a first class citizen).
Scales - Yahoo Answers and Vimeo use Symfony and contribute back code. If those guys can scale Symfony to 100 million users, you can too :)
It all depends on the type of project you will be developing.
Are you building a web application or a heavy content website or something else?
You also mix up programming languages with frameworks. The frameworks for PHP that I know are: CakePHP, CodeIgnitor, Zend and Symfony. For an out-of-the-box heavy content website I would suggest Drupal or Expression Engine.
It seems you won't be developing yourself. In that case I would determine the cost and availability of programmers and how widely the framework is supported and by who it is backed. The Zend framework is backed by the guys behind PHP, while CodeIgnitor is backed by the guys behind Expression Engine. Drupal has professional support packages,...
IMHO, for something that will have a lot of users, go for a compiled language.
If you don't try it, you will not know. So, I'd say do a small project in each of the frameworks you are seriously thinking about. I would prepare myself to do a lot of testing if it's something I'll be maintaining for some years. It's better to start off on the right foor than to get half way through a project only to realize you took the wrong path. There may be some requirements that end your search. For example, your servers' OS, a framework feature, or scalability. If you lay out your software plans and requirements, you probably will have very little left to choose from - unless your project really is quite generic or simple.

Client-side image processing

We're building a web-based application that requires heavy image processing. We'd like this processing load to be on the client as much as possible and we'd like to support as much platforms (even mobiles) as much as possible.
Yeah, I know, wishful thinking
Here's the info:
Image processing is rasterization from some data. Think like creating a PNG image from a PDF file.
We don't have a lot of server power. So client-side processing is a bit of a must.
So, we're considering:
Flash - most widespread, but from what i read has lackluster development tools. (and no iPhone/iPad support for now).
Silverlight - allows us to use .NET CLR, so a big ++ (a lot of code is in .NET). But is not supported for most mobiles ( rumored android support in the future)
HTML5 + Javascript - probably the most "portable" option. The problem is having to rewrite all that image processing code in Javascript.
Any thoughts or architectures that might help?
Clarification: I don't need further ideas on what libraries are available for Silverlight and Javascript. My dilemma is
choosing Silverlight means no support for most mobiles
choosing Flash means we have to redevelop most of our code AND no iPhone/iPad support
HTML5 + Javascript we have to redevelop most of our code and not fully supported yet in all browsers
choosing two (Silverlight + Flash) will be too costly
Any out-of-the-box or bright ideas / alternatives I might be missing?
This is the sort of issue that software architects run up against all the time. As per usual, there is no ideal solution. You need to select which compromise is most acceptable to your business.
To summarise your problem, most of your image processing software is written in .NET. You'd like to run it client-side on mobile devices, but there is limited .NET penetration on mobiles. The alternatives with higher penetration (eg. Flash) would require you to re-write your code, which you can't afford to do. In addition, these alternatives are not supported on the iPhone/iPad.
What you ideally want is a way to run all your .NET code on most existing platforms, including iPhone/iPad. I can say with some confidence that no such solution currently exists - there is no "silver bullet" answer that you have overlooked.
So what will you need to compromise on? It seems to me that even if you redevelop in flash, you are still going to miss out on a major market (iPhone). And redeveloping software is extremely costly anyway.
Here is the best solution to your problem - you need to compromise on your "client side execution" constraint. If you execute server side, you get to keep your existing code, and also get to deploy to just about every mobile client, including the iPhone.
You said your server power is limited, but server processing power is cheap when compared to software development costs. Indeed, it is not all that expensive to outsource your server component and just pay for what you use. It's most likely that your application will only have low penetration to start off with. As the business grows, you will be able to afford to upgrade your server capacity.
I believe this is the best solution to your problem.
Host you image processing on Amazon E2C, Azure, or Google. IIRC E2C has many common image processing problems packaged and all ready to go.
Azure probably more familiar ground in term of sharing code as a web service
You just pay for CPU cycles and transfers/storage etc
I'm sure there will be Silverlight and JS people posting examples. Here are some image editors written in actionscript:
Phoenix
PhotoshopExpress
There is an ImageProcessing library to start with.
Plus PixelBender is available in Flash Player 10, it's fast, it runs in a separate thread
and people do some pretty mad things with it.
HTH
Some help for the Silverlight part:
There is an Silverlight image editor called Thumba.
And Nokola recently made one called EasyPainter and he will also provide the source code in the furure.
For the image conversion I would recommend the open source library ImageTools that also includes some basic effects.
Silverlight has a class for pixel manipulation of bitmaps called WriteableBitmap. The open source library WriteableBitmapEx is a collection of extension methods for Silverlight's WriteableBitmap. The WriteableBitmap API is very minimalistic and there's only the raw Pixels array for such operations. The WriteableBitmapEx library tries to compensate that with extensions methods that are easy to use like built in methods.
Pixel Shaders can also be used to make some fast and advanced effects. Although they are limited by Shader Model 2 shaders can be used for fast bluring, tinting and such things.
DISCLAIMER: I consider myself as an advocate of the Flash platform. I admire Silverlights huge potential as a technology to deploy almost any .NET content through the browser, but it has low penetration, is horribly marketed and -although perceived as such by many (mostly people who don't know either Flash or Silverlight)- is no competitor of Flash, as much as Flash is no competitor of Sliverlight. The idealist in me loves the idea of doing everything in HTML+JS using a standard, instead of relying on 3rd party proprietary software. But the truth is, JS is slow and the API is limited, and implementations of JS, HTML and CSS are terribly inconsistent accross browsers.
If you really wanna stick to .NET and are so interested in targeting the iPhone and its siblings, then you might wanna check out MonoTouch.
Still, even though this may surprise you, I am going to tell you to use Flash. :)
Why? The image processing bit is the smallest part of your application. Whatever it is you are writing, I am very sure of that. I don't know about Silverlight, but in Flash the filters used by "Thumba" and "EasyPainter" can be created within a day, most of them simply using ConvolutionFilter, ColorMatrixFilter, DisplacementMapFilter and BitmapData::paletteMap or even simply by applying one of the other filters Flash offers out of the box. Any additional things can be created using PixelBender, which was pointed out by George. The kernel language is a subset of C, so porting classic filters shouldn't be too time consuming. Also alchemy (an LLVM backend targeting Flash Player 10) would be an option worth investigating, although it's not very stable yet.
The biggest part of your app will be a lot of GUI design, GUI implementation, Business Logics etc. Flash is really great when it comes to simple, yet reasonably fast image manipulation and with the Flex framework and MXML you have a powerful tool to productively create the GUI of your app, that can interoperate very well with a multitude of server solutions for virtually any platform.
Also, Flash has a great and active community, offering tons of tutorials, code snippets, libraries and frameworks, and a big ecosystem, with cross-compilation tools to deliver flash content to other platforms (including the upcoming Flash CS5, or the mentioned Elips). I don't understand, where you got the impression, that the Flash platform lacks developement tools. The difference to the .NET suite is that they are provided by a multitude of vendors. The upcoming Flash Player 10.1 was already pointed out by George, but never the less, I wanted to stress, that this makes many of the cross-plattform considerations obsolete.
Last but not least, I'd like to point out Haxe. It allows compiling to SWF, but also to C++, using the very same API provided by NME, to target the iPhone. Also there's work in progress on an android backend. If you're aren't playing to launch within the next 4-5 months, then this is definitely an option.
Your issue is a perfect target for the Haxe programming language. Haxe is written for the web and can compile to JavaScript, Flash and Objective-C (possibly Java/.NET soon).
So you do not choose which platform you are going to invest in but in which language. Haxe is easily adoptable for an AcitonScript programmer.
It makes no sense to run your imageprocessing algorithms in a JavaScript sandbox when Flash is available because it will be much faster. It makes also no sense to run heavy image processing algorithms on a mobile device like the iPhone with JavaScript. I would only support JavaScript as the worst fallback solution.
If you do not like to use Haxe I would go with Flash. You can deploy your Flash application for the iPhone aswell if that is your problem. This is also very great because you get native ARM code. There are actually great tools for professional Flash development available. FDT and IntelliJ IDEA are two of them. The best Haxe IDE is probably FlashDevelop at the moment of writing.
So I would definitly not use JavaScript as the only solution. Haxe is perfect for what you try to achieve. If you do not trust or do not want to invest in Haxe you can use Flash because of the iPhone/iPad export.
Depending on your usecase I would also encourage you to look at cloud hosting like Amazon EC2 and Google AppEngine for instance. Hosting costs are cheap and scaling will be easy for your task. The experience will be much better when it comes to complex operations that can take even a lot of time on a desktop system.
In addition to other answers, another option may be a hybrid solution. For example, use Flash/Silverlight for the majority of your target audience and use server-side processing for those that don't support it (or you could create a native app for iP[hone|ad])
You may have to do something like this anyway as the mobiles you are targetting may have insufficient processing power depending how complex your image processing gets.
Of course you still have the option of upgrading your server which, although you've currently discounted, is probably far cheaper than spending development time creating/deploying/testing a client-side solution.
You can use Silverlight for all Silverlight enabled clients and for non Silverlight clients, do the image processing server side. Since the Silverlight code is C#, you can double compile it to make (mostly)the same code work as Silverlight and non-Silverlight (i.e. server). This gets you the best of both worlds.
You don't say what language "all that code" you'd have to rewrite is in. Might a semiautomated translation to Javascript be practical?
Perhaps you could start out server-side, as CraigS suggests, and then move functions into the client over time instead of rewriting all at once.
Have you checked the editor of Pixlr.com ?
Take a look at their API as well..
The best solution is to use silverlight (so you already have the code ready). If the client can't run it (mobile phones, etc) then process it server-side.
It's the best compromise.
Depends on the type of image processing and the end user experience you are targeting.
As you are looking to target mobile phones your image processing will need to take into consideration the type of handset the user or the receipient has (if messaging via SMS/MMS), as different handsets have different resolution screens and handle different image formats for main images and thumbnails.
I'd suggest that you consider a hybrid cloud architecture as was mentioned in the Microsoft PDC keynotes this year. This would enable you to have your own server(s) to support your application, but if you require additional capacity due you scale out into the cloud using AppFabric.
Additionally, to maximise the market availability of your product pulling the image processing to a common reusable infrastructure allows you to target different platforms, exploiting the positives in each.
I have worked on a solution that hosted its image processing and delivery infrastructure server side and then built different UI offerings allowing sales via desktops, MNOs and AppStores. It can work and from a business perspective can offer economies of scale benefits.
Why not mention Java Applet ?
Good sides are:
almost all browser support ?
need install JRE ?
all OS support
Java provide Java Advanced Image kits, but if c++ dll can be called, that is best (JNI can call c++ dll )
In Python, one of the most popular libraries for image processing is pillow. Through the pyodide project (python running inside browser via emscripten), it's possible to use libraries like pillow and numpy for image (or matrix) processing, and convert the output to a base64 string (via Python standard library). This can then be passed to your <img> html element, either native JS document or with a library like React.
The way I see it, there's no one solution that meets all of your needs. Your best option, imo, is to go with Flash and hope that Adobe sets an agreement with Apple to get Flash on the iPhone/iPad. The major downside, of course, is you'll have to rewrite much of your code.
If the mobile sector isn't absolutely critical, then choose the Silverlight option for reasons you mentioned already. You could also use Silverlight in an out-of-browser mode to work as a desktop application.

Tips to get started with webdevelopment

I am very curious about what you think is the best approach for people that want to start webdevelopment. I'm now talking about people that finished their education and so want to start from scratch.
I still have questions like:
Where do you start?
What software gets involved in webdevelopment?
What tools / setup would you recommend?
Offcourse i'm interested to hear alot more then only the answers to those three questions.
I am not writing this to get a load of people react on my post, i am trully interested in knowing how much work and money it will cost a webdeveloper when starting from scratch.
I hope to get a clear view on how to approach and to maybe hear some best practices.
Well one thing's for sure, education isn't finished! There's a whole lot to learn, and the more we learn the more we seem to need to learn.
If you're really starting from having no programming background whatsoever then I think you'd be advised to take a staged approach. For example:
1). A web page with a few different text formats and pictures and colours. Here you're just learning HTML. For that any browser and a notepad editor would do, but probably a tool such as Eclipse that gives some HTML editing capability would help.
2). More adaptive HTML - stylesheets that let you change appearance without changing all the html. So that's CSS.
3). Using the above, improve your designs. There are loads of formatting tricks good web sites use and you'll need to learn those.
Note that by now we've done a lot of study and we have not actually written any programs!
4). Dynamic web pages. Now we move to the programming side, rather than just writing some HTML files write a program that delivers the HTML and in some way changes the content. Starting with something really simple such as including "today's date is ..." on the page. For that You would need to pick a server development technology such as Ruby/Rails or PHP or Java/JSP ... You'll get a lot of different advise about "best" for this.
5). Now you can start to work on accepting input from the user and doing something with it so that useful work gets done. Things such as databases start to become important.
There's a whole load more after that, JavaScript and so on. An experienced programmer can pick up this kind of stuff quite quickly, if you've never done any programming at all then you will need to be prepared to take a while before you can get to the level you probably target. I think the key is to acknowledge that a great commercial web site reflects a lot of collective wisdom and skill picked up over many years, and probably is the result of a multi-disciplinary team working together. For one person to match that is a big ask. For one person to produce something nice and useful is more practical, but still does need a lot of different skills. It's quite reasonable to specilaise in a subset of the skills. For example, good visual designers write little or no code but are highly valuable.
you need:
a browser, eg. FireFox, Internet Explorer. A webdeveloper toolbar might also be useful.
a webserver, eg. Apache, Tomcat, IIS
a programming environment, eg. Php or ASP.NET
a development tool, eg. Notepad, Notepad++, Visual Studio .NET, Eclipse
most of the times a database, eg. SQL Server, mySQL
I'd say it depends what you want them to master: the technologies only (up to which skill level ?) or the whole software engineering behind a web project
A sample and fast technologies learning tree could be:
1) HTML
2) CSS
3) HTTP
4) Server side programming (PHP ?): programming concepts, interacting with HTML/CSS, then PHP API
5) Databases (start simply with MySQL for instance) + SQL (CRUD with Joins, Subselect, Indexes, Views and Transactions)
6) Client side programming (JavaScript first then Ajax)
7) A web framework (ZEND ? cake ?) and a good IDE (lots of...)
Full-time learning those technologies requires at least 1.5 year , based on the experience I have with my students and people must be trained mainly on concrete projects.
Then people should learn software engineering (cf link text) covering at least
- software requirements
- software design
- software construction
- software testing
I think people can have useful experience in this software engineering tree in 1 year and can (should) combine learning technologies with learning software engineering.
For training someone from scratch (technologies + software engineering) I'd say a least 2 years if working on at least three 6-month projects
This answer is Microsoft specific.
For starters you'll need an editor, a (optional) database and a few starting points.
Microsoft supplies most of these for free: you can download the Visual Studio Webdeveloper 2008 Express Edition for free, this includes most of the stuff you'll need.
If you plan on developing database driven websites, and who isn't, you might want to use the free SQL Server 2008 Express Edition
When you have the tools setup it's time to download some samples and see see how they work. Again Microsoft supplies some for free. You can check out tutorials and samples at their Asp.Net site.
When you are ready for some more advanced stuff, check out ASP.NET MVC, again at Microsoft.
With these tools and examples you should be able to get started.
I just want to add that you will most likely also need Photoshop or other tool to create the graphics for your web sites.
In spite of java/.net/php,the HTML,CSS,JavaScript are the basic web development toolkit.
Get a job as a junior developer that will put you on a project that is developing a web application. I personally think it should involve one of the two most established platforms, Java or .Net. I know some will disagree, but these are good foundations to branch into other tech platforms later.
Make sure you open an IDE (e.g. Visual Studio or Eclipse) everyday and code something. If not, find a new job immediately.
Read religiously at night. Start with "Code Complete", then move on to other books.
Learn the fundamental technologies of the World Wide Web:
HTTP
HTML
CSS
JavaScript
DNS, URL's
Good luck and happy travels!!
you need:
a google chrome . This provide you some advantage like inspect option. A webdeveloper toolbar might also be useful.
2. Html, Css, JavaScript are the basic language that you should be know
a programming environment, eg. Php or ASP.NET is needed for storing data and making login type page
a Visual Code Studio is needed for coding. This provide you emmet facilities that suggest you while you are coding

How would you teach web development?

I am the lead instructor of web & internet related courses on a private post high-school institution. My current classes include introductions to HTTP, TCP/IP, (X)HTML/CSS/JavaScript and generic SQL. Next year we will deal mostly with PHP / Java. What, in your opinion, are the most important aspects of web development in contrast and relation to traditional development and what should be the main focus of my lectures?
Of course there is a curriculum I will follow but I would really like to enhance it with everything there is time for, from hypes and semantics to oldschool hardcore scripting.
Keep in mind that I am fortunate enough to deal with highly talented and moderately motivated individuals.
Most important aspects of web development:
Where is this code running? (Client vs Server programming - as many have said)
Who is going to use this? (Know your audience - why are they on your site/app)
How to play nice (copyright, standards, borrowing ideas vs stealing stuff)
How to be resourceful (code libraries, google search and stackoverflow)
Main Focus of lectures
I am a strong believer in contextual learning. Let them choose a project with boundaries and guidelines that will employ the concepts you want to get across. One can spend all day learning syntax and concepts, but real learning is done when you are trying to solve a problem. They will also have more fun.
Summary
Lecture on the How (XHTML,CSS, JS, etc) but only in the context of Who, What and Why.
In my opinion, the most important thing is to teach the difference between server and client programming, and when you would use one over the other. I am so surprised at the number of new graduates that don't understand the difference.
IMHO, the most difficult concept in Web development is that of state and how to maintain it.
If I were designing a Web programming course I think I would get the students to design a simple application framework that attempted to address transparent state maintenance. Dividing them into groups, you could have them take different approaches (server-side, client-side, database supported etc.) approaches to this. And at the end of it I believe that they would have learned a lot more about Web architectures than if you had focussed on producing an actual application.
For front-end web development ((X)HTML/CSS/JavaScript), try the Opera Web Standards Curriculum which:
takes students from complete beginner
to having a solid grounding in
standards-based Web design, including
HTML, CSS, and JavaScript development.
I believe a lot in inspiration. As a new web developer I found it really difficult to make my websites usable, appealing, and well coded. I found inspiration in outside resources such as Nettuts and Smashing Magazine. These websites really opened my mind to all of the features I really could learn and use in my designs/coding.
Well if you are asking for opinion....
Please teach them:
self documenting code.
the difference between client and server
data checking
security
If they have a good understanding of the programming language (which it sounds like they will get with your curriculum) the things that I have listed will be a great improvement.
I also believe that web development can only be taught after first learning a little bit about software engineering. I think agile processes is the best route for teaching students software engineering. It's lightweight and not quite as document driven.
After that I would teach them the basics of client server programming, the http protocol and some basic web programming (PHP and javascript would be sufficient). If there is enough time I would show them the basics of Java EE programming and the differences between that and PHP.
Also cover some of the more advanced materials such as MVC for the web (using JSF) and javascript libraries (JQuery). I would also teach them data access objects and persistent objects.
For my senior research this year I came up with some materials for an upper level college course that requires web programming, web design, and software engineering background. You may look at the basic materials here to get a basic idea of what I thought of a course for an advanced web application development course. I know this may be out of your scope, but it might be a start.
Keep in mind that web programming is a mess and it is your job to provide not just light at the end of the tunnel, but the tunnel itself. I would expand on AaronS's answer:
The difference between client and server.
Web applications run over a network, with all that implies.
There is more than one way to do it. Squared.
In the end you will have to choose what not to teach to actually get somewhere.
If you have a group of motivated people then I will suggest to focus on creating a full web application from scratch, I mean, from requirements elicitation itself.
You could start with a brainstorming session where you get some of your students to take the role of the clients from different perspectives (you will need to came up with the base problem itself) and then another group of students who try to get the "clients" group to express their needs and propose solutions to those problems using via a web application. This will help them to learn one of the biggest problems of development in general which is the interaction with clients and how to get the most information out of them overcoming the usual communication problems. Actually if you can get other non-technical people to act as the clients it will be even better.
Then you can introduce then to a methodology like extreme programming or any other you like. I would suggest an agile one because it will provide faster results and won't get boring that fast, besides, the market appears to be shifting in favor of them.
Now, regarding web development itself, it is really important to get people to understand the need for web standards and how wrong things can go when they are not followed (IE6)
After all this is clear, it will be time for them to realize that in web development most of the time you just have to deal with the differences in platforms in which their applications will be displayed and teach them actual techniques to do so like unobtrusive javascript and progressive enhancement.
Regarding the server side of the equation, I believe it is important to enforce the use of patterns (MVC is a must), code re-use, and all the usual development practices. And be sure they understand that HTTP itself is a stateless protocol and how it is important to handle cookies and sessions in a responsible fashion, here it is important to make sure they understand the differences between the server and the client side.
Also, covering the OWASP top 10 (at least) is a must, the last version is available at: http://www.owasp.org/index.php/Top_10_2007
Some links:
http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
http://forabeautifulweb.com/blog
http://www.alistapart.com/
http://www.owasp.org/index.php/Top_10_2007
Teaching web development (like GUI builder in the old age) has the risk of focusing too much on the front-end and not enough on the back-end. It is too easy to fall into the trap of getting the students to think too much about superficial visual issues (e.g., how to align these two things) rather than core things (how to we effectively compute, calculate, store, etc.).
In addition, many web-development languages are not hallmarks of good programming practices since they tend to be on the dirtier scripting side.
These two factors together, to me, are why languages like PHP often get a bad rep.
If you were teaching people who were actually going to be practicing developers, I would focus separately on the model and on the view, and show how to tie them. But in a high school environment, it's possible that the parents just want their kids to demonstrate some publicly visible stuff for their college applications.
If they are truly talented and motivated, teach them real programming with some web manifestations (e.g., use Java servlets), and leave all the scripting for them to learn in their spare time. A good teacher is invaluable for building good engineering skills, so use your time where it matters.
I honestly do not believe you can do well with web development without having a good background with general software development. If one doesn't pay attention to that he/she will end as a mundane scripter or something.
Would be a good idea if you told us what kind of people with what background you get.
If you got some financial academy graduates, it is not clear what kind of motivation will they have towards any kind of development. If these are engineers or some creative field like design, decorations etc. it will be a different story.
Try to gather a little bit of best-practices from various aspects of development. A little from testing and quality control, a bit from project management, a few things about dealing with customers, security for publicly-exposed software, legal aspects. Not too much, just to paint a big picture.
I would start with introduction to web standards carriculum by Opera.
I think it would give a good understanding of some of the basic concepts in web development
For the programming portion, I would suggest you start with the lowest level / most basic concept you can come up with. The first thing that jumps to my mind is HTML. You could make sure the students understand HTML (and markup in general) and its basic syntax. I think that starting with hand-coded HTML will also give them a greater appreciation for some of the great tools out there that help you generate HTML or other code.
After that, you can get into some tools and technologies surrounding HTML like CSS, JavaScript, and AJAX.
Once the client-side is covered and those concepts are concrete in their minds, you can move onto server side scripting / programming. Most of the languages on the server side simply emit HTML, CSS, JavaScript, etc. to the browser, so understanding those things first is essential.
Finally, start talking about using their new found knowledge to create apps that talk to other systems (databases, web services, etc.). Once all of those basics are in place, you'll probably be done with the class, but then they'll be ready for the 200 level, right?
I like the answer about the difference between client side and server side programming. Since you teach talented/motivated students, I think that some theoretical discussion of the MVC (Model View Controller) architecture might be in order. How it was originally devised for desktop applications, and in that case it was necessary to implement a system that listened for events, so as to be able to keep all facets of the view synchronized with the state of the model as it was modified. But that, under the web paradigm, the listener code is given to you for free in the form of the web server, and the request is the event. And therefore MVC for the web, at least as regards interaction between client and server, should be less complex, with the controller merely mediating between the client and server.
That is, of course, until the advent of Ajax. When now it is appropriate to implement listener code on the client side with Javascript, so as to be able to keep widgets in synch.
I am an MVC junkie so take whats useful from this. Your mileage may vary, but I do think material on MVC is certainly warranted.
Good luck
Since you're getting into the server-side stuff, I would highly recommend going over some basic application security. From keeping applications (Wordpress, PHPBB, etc) up to date and patched, to actual attacks like SQL Injection and Cross-site scripting.
Since it sounds like you're teaching them from the ground up, you have a great opportunity to impress upon them the importance of input filtering and output escaping, legitimate user authentication, and other best practices.
This is very front-end focused as well... but I thought it was a great post.
http://veerle.duoh.com/blog/comments/teach_the_web_right/
[Edit]
She mentions the Opera Web Standards Curriculum as has been mentioned in previous posts, but she also mentions WaSP InterAct Curriculum. That seems like it's still very much in progress, but already has some great resources and links.
Focusing on "Next year we will deal mostly with PHP / Java". I'll focus on Java, since I don't know much about PHP.
Get the model right. Design a model, use the ORM, get this to work sensibly. This is highly reusable stuff. It's the backbone of the application. If this isn't right, the rest will rapidly become a mess.
Get the template presentation right. JSP's shouldn't do too much (they can, but shouldn't). This should have any fancy processing -- that's either a model problem or an action class problem.
Knit these together with Struts action classes and Java Beans that make sense in the domain you're building a solution for.
Add CSS/JavaScript and what-not after it all -- essentially -- works. No amount of JavaScript can fix a fundamentally flawed model.
Core Technology issues (XML, HTML, SQL, etc.) are important, but not central. It's hard to skip around, but you have to skip around.
SQL, ORM, Java first.
HTML, JSP, more Java next.
Struts, Action Classes, etc. and more Java next.
I think that much of the core skills issues need to be covered in a Just-in-Time manner. If you spend too much time on fundamentals of HTML, CSS and SQL, no one's building anything useful.

Resources for getting started with web development? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
Let's say I woke up today and wanted to create a clone of StackOverflow.com, and reap the financial windfall of millions $0.02 ad clicks. Where do I start?
My understanding of web technologies are:
HTML is what is ultimately displayed
CSS is a mechanism for making HTML look pleasing
ASP.NET lets you add functionality using .NET(?)
JavaScript does stuff
AJAX does asyncronous stuff
... and the list goes on!
To write a good website to I just need to buy seven books and read them all? Are Web 2.0 sites really the synergy of all these technologies?
Where does someone go to get started down the path to creating professional-looking web sites, and what steps are there along the way.
While I have built my knowledge largely based on using the internet to search out what I want to know (w3schools.com helped a lot, as did A List Apart), a few good books have helped me along the way, though they have been platform/language-specific, so I'll avoid mentioning them unless someone is curious. For me, at least, having a book open so that I don't have to resize windows or switch between them is very valuable.
The first part of your list is ok, but the last few items need tweaking. ASP.NET adds server-side functionality (for the most part) to your application. This lives outside of the browser and is thus quite powerful and easily shared with a variety of end-users.
The problem (some say) with server-side processing is that your application must make a new HTTP request when you ask for an action to be performed. So if you click on a link to a page that yields a new set of data, you don't get instant results. The page reloads, or loads a separate page.
Javascript solves this to a degree--it allows you to respond to user input instantaneously. Do you want to display the sum of two numbers when the user clicks a button? You can do it with Javascript.
The problem with Javascript is that it can't talk directly to databases, or explore your server's file system, or other stuff like that. It lives in the browser--period.
AJAX bridges the gap between your user's browser and your server. With AJAX, Javascript makes the HTTP request without refreshing your page or loading a new one. Javascript talks to a server-side script (not necessarily ASP, either--works with PHP, Rails, Coldfusion, etc.) and sends and receives information. And because Javascript isn't dependent on page loads, a quick, snappy AJAX script can almost give the feeling of a common desktop application, in which you don't have to wait for HTTP requests when performing simple actions on your application's data.
I think that this series of Opera Articles will give you a good idea of web standards and basic concepts of web development.
2014 update: the Opera docs were relocated in 2012 to this section of webplatform.org:
http://docs.webplatform.org/wiki/Main_Page
Ian's answer has a lot of weight. You could buy all those books and read them all and know nothing about web development. What you really need to do is start with something that is not nearly as big as Stack Overflow. Start with your personal site. Read some web dev/css articles on a list apart. Learn about doctypes and why to use them. Add some css and change the colors around. Go over to quirksmode and peruse the site. Add some js. Follow some links on Crockfords site. You will probably stumble across his awesome video lectures, which you should watch. Then after that go back to all the js that you wrote and rewrite it. Then pick a server side language that you want to learn. Python is pretty easy, but it really doesn't matter what you pick. Then come back and integrate all those together in your site. At this point you will at least be getting started with web development and will have worked with several different technologies.
EDIT: I forgot to mention. READ BOOKS.
Many developers that I have worked with in the past have gotten through their career without really advancing after a certain point. I could be totally wrong, but I attribute it to not reading enough books and relying on using their same bad code over and over.
You could go out and buy a bunch of books and start reading them and quickly get overwhelmed in the seemingly massive learning curve it takes to go from nowhere, which is where it appears you are, to a rich internet entrepreneur, which is where you want to be.
Alternatively, and what I would suggest is, you could define a problem you want to solve, and then go about finding the solution to that problem. Start with something small. "I have a problem: I don't have a web site about myself.". Define what you need to do to solve that problem, learn the basics, and do it. Then, define a new problem, which probably relies on the solution to the first problem, find what you need to do, and do it.
This is how all technology professionals evolve. My first website was a personal site with nothing but text. Then I added some jokes and some movie quotes. Then I got tired of man-handling all the updates to I learned how to put them into a database and retrieve them from the database for display. It goes on and on.
Call me when you've got more money from your financial windfall than you know what to do with.
If you really just want to jump in with both feet, I would suggest looking at ColdFusion from Adobe. The developer edition is free and runs on windows, os x and linux. The documentation is authoritative and extensive, there is a very active developer community and only a few books you might want to dig into. The definitive guide is a series of books that can be found on Amazon
The nice thing about ColdFusion is that you can use it as a stepping stone to other languages and remain productive along the way. You can even mix it together with Java since it is itself written in java. There are also lots of goodies built in that you would have to scour the web for or pay more for in other languages. Things like full text indexing, graphing, server monitoring, ajax based controls, flash/flex integration, asynch os calls, etc.
You even have the choice of building object oriented code or procedural code, although some people would not count that as a benefit. Those people rarely agree on which style should win, though.
Cheers!
I think sitepoint is the best resource for learning best practices in web development. They have great articles, good references, and probably one of the best forums. However the people there can be a bit grumpy. ;)
If you are a real nerd, reading the specs for HTML 5 and CSS is also a good way to learn.
I'm with Ian on this one. Reading books is all well and good, but nothing beats getting stuck in. I actually started with a Dummies Guide to ASP (that'd be "classic" ASP), back in 1999.
If I was going to start from scratch today I'd be looking at something that covered a full stack solution, whether Apache/PHP/MySQL, RoR or whatever.
ATM I have no experience of Rails, but it might be a pretty good place to start as it includes a lot of stuff that you'd have to figure out early on otherwise (integration with a Scriptaculous, a JS framework) - you can always learn what going on under the hood at a later date.
.NET is always an option, and if you're comfortable with Visual Studio it may be the way to go, but it's not the easiest thing to pick up otherwise.
If you know a bit of HTML but are basically new to server-side programming you might look at ColdFusion. It's actually extremely powerful and like Rails includes lots of "out of the box" benefits. There's a Swiss company called Railo who are currently in the process of releasing an Open Source ColdFusion engine that is affiliated with JBoss.
Last and not least - don't forget databases! Sooner or later you'll need to get to grips with some pretty serious SQL...
CFML (aka "ColdFusion" even though that's really an Adobe product, not the language) is definitely easy to learn, and if you want FOSS for CFML, in addition to Railo you can use Open BlueDragon which is a GPL CFML engine.
Designing with Web Standards is a great first read!
http://www.zeldman.com/dwws/
I would recommend this book:
http://www.amazon.com/MCTS-Self-Paced-Training-Exam-70-528/dp/0735623341/ref=sr_1_1?ie=UTF8&s=books&qid=1218830714&sr=8-1
I have just read it to take the exam, and although I knew the web theory part, I found it to be of great value.
This of course is a ASP.NET specific book, but that is what I would recommend learning anyways.
After you learn all the ASP.NET stuff, I would suggest reading up on JQuery.
Happy coding :)