Many times I encounter a site, and would like to know - how did they do this?
Moreover, I'm looking at a the work of someone else in my own (web) project, and want to understand what exactly did he do?
What are the parts of the page? Which scripting manipulations are being performed? Which requests are being sent to the server, and when?
All this information is obviously present in the web page when one is browsing. However it can be very difficult to read and understand it.
Does anybody know of some tools for doing this better?
Could you define precisely some of the difficulties of such a process?
Any tips and strategies how this can be done?
Thank you!
Gidi
Download FireBug for Firefox. It is invaluable for this sort of thing.
http://getfirebug.com/
Using Firefox you can use Firebug to gain insight into all the XHRs that are occurring, as well as some of the javascript, html, and css. Note that people can make your life difficult by obfuscating the javascript.
With webkit based browsers like Chrome and Safari, you can get at this info with the developer tools.
Firebug is better for some things, webkit for others.
You need to do it yourself so choose a language and find a good book on web development then try to make web applications. Start from very simple ones. I suggest something like PHP because of ease to understand. After you learned basic concepts you can move to other platforms like ASP.NET.
Related
I know there are a few questions out there regarding what to do to create a website from scratch having browser compatibility in mind,... but what about a finished website? I've been given a website that somebody else designed and it looks sweet in Firefox, but it's awful in any other browser,... everything is all over the place (Yeah, my skills to describe technical problems are amazing), collapsed divs everywhere! That's the biggest issue here, I guess if I can solve that bit I could figure the rest out from that point on.
Any help greatly appreciated!
Since you really haven't given any specifics that can be addressed, I would just state that I don't see any shortcut to resolving this.
Ideally, you'll be able to go through and make a list of those techniques that are not compatible with other browsers. If that will be too much work then you are sort of looking at a rewrite.
And this, of course, is the reasons why website developers should be testing on all major browsers as the site is developed.
Is there a tool what will load my css and then analyzes it and then generates/shows me what to add/change to make it more compatible with other browsers?
There are online tools launching your website in many different browsers taking a screenshot and then display them to you. That way you can check by yourself!
Just google for it or try http://browsershots.org/
A sitebuilder's job is not just to write some CSS that he thinks is cool. It is also a part of the job, to test it against different browsers, the number depending on which ones are supported in the project.
I don't think there can be a tool that can do our job instead of us. All that a sitebuilder can and should do, is collecting knowledge, experience and keeping up with the browsers and techniques. There are no exact rules how to handle cross-browser issues. There are loads of best practices, tips and tricks, and it's always the sitebuilder who has to decide which one to use in that certain situation.
What we have, is great tools to check out our pages in certain browsers, one being what #Thorben suggested.
And I have to add that this is just my opinion, feel free to disagree and argue :).
As a new to web development i wonder, where should i start learning.
Should i start from a big good book on HTML5&CSS3 and hope, that FF and Chrome will support what i do, OR the whole world novadays doesnt write CSS themselves, and use help of JS-based CSS frameworks?
I think i wont be able to do a real world website in a year, so we must keep it in mind.
I hope, with modern browsers bit by bit support of new futures of HTML&CSS, many things can be done by native CSS3&HTML5 to the moment i 'graduate' w3school:)
If you are new to web development, I suggest you stay away from CSS frameworks and concentrate on "basic" HTML, CSS, and JavaScript. It is surprisingly easy to make a "real world" website with these basic tools. The whole world does NOT use CSS frameworks, most web designers do write the CSS themselves.
The best way to learn is practice. I would find something you are interested in and use that as a project to work on. Show off your knowledge and talent with whatever you are into!
You should be aware it will be many years before HTML5 and CSS3 are supported by all browsers, I expect that many will stick with IE8 for a long time since IE9 won't work with XP.
you should start by getting a little project. Make random sites. Pretend you got a webdesign studio. Look at other sites. view their source. Get your hands dirty. W3schools is your best friend.
start with html,css then add javascript(jquery) then go serverside. you could do this backwards too.
thats how i started.
my 2 cents.
HTML and CSS are very simple. Being a good developer is having the experience to know how things work and when to apply what.
On the other hand jQuery is a library, thus like a real life library you are always reading. Learn how it works, and then learn to google regarding what you are looking for.
Don't skip ahead to HTML5 and CSS3, that's a lot like starting with a beta product, they are not yet standardised, but have been adopted (thus far) by the browsers.
Analogy
A very good developer is a cowboy with his hand at his holster ready to whip out the perfect bit of code, due to experience and practice.
The novice has to get his gun out of bag, clean it, load it and aim it . As long as you are not going up against an expert your fire eventually, just hang in there.
P.S. Nearly forgot, the only point of framework ultimately is to increase the speed at which you can develop. If you don't know how it works it will only slow you down, and you don't need that on top of everything else.
Easy question. I used to develop websites back in the days of "classic" ASP, and when I'm asked to do a quick and dirty website for family or friends now, I still resort to direct HTML/ASP and some basic CSS and Javascript - I can get the sites up pretty quickly this way. However, I've had a few requests to design and develop some sites for pay, and thought I should catch up on my web skills. I have been using .NET 3.5, XAML/WPF, etc. for Windows apps, so I'm up on .NET, I'm just behind on the web end.
To the question: If I want to design/code a site that looks identical on all (at least somewhat recent) browsers and platforms, should I be using ASP.NET and AJAX? There might be a little database activity on the site, but not much, so I don't need an enterprise level, multi-tier extendable architecture... just something that looks good and works on multiple platforms without having to code all variations for each browser. After looking at all the ASP.NET books at the bookstore, it seems they all focus mostly on data and postback stuff. Is it still a legit option to use some basic, boring html and javascript with some Flash embedded where needed?
Let me know if I need to clarify the question. Thanks for your advice in advance!
Your question is more loaded than you think, but let me try to address a few points that I think are relevant.
First, how a site looks is almost completely dependent on the HTML/CSS you use and how you code the front end of the site and only slightly dependent on the server technology. So if you want your site to function across browsers and platforms, learn to code following web standards, with semantic markup. (Search on those terms for more info).
Also, ASP.NET comes in two flavors now: ASP.NET MVC and normal ASP.NET. I highly recommend, if you are going to get into ASP.NET, that you follow the MVC platform. It closely follows similar technologies (like Ruby on Rails) and will make the transition to other MVC platforms easier on you. Also, the MVC platform doesn't try to output as much pre-made HTML as straight ASP.NET will when you use their "drag and drop" controls.
Secondly, it really depends on the sites you are building, but straight JS (or JS + jQuery), CSS, and HTML -- and please don't use Flash unless you are embedding a video -- will actually work for a number of basic sites. If you need some things to happen on the server, PHP makes for a great platform. If you are working with advanced database access, and program flow, and since you are already familiar with .NET, then stick with it... MS has some great tools and resources to help you out.
Finally, a lot of developers use a favorite CMS or blogging platform as the backend of simple sites that still need the ability to manage the content easily. Expression Engine (CMS) and WordPress (Blog/Lite-CMS) are often used (both PHP based) but there are tons out there.
Good luck stepping up your game!
I would recommend learning jQuery. This will give you a browser independent abstraction for your JavaScript.
ASP.NET controls will render it's controls in a browser independent way, but that doesn't mean your site will automagically be browser independent. You still need to know how elements are rendered differently in different browsers.
I'd also recommend using a CSS Reset sheet as a starting point for your CSS.
All in all, if you've been developing old school ASP, you'll probably really love ASP.NET as it will save you a lot of time and looping. You may want to jump right in to ASP.NET MVC too.
To the root of your question, I'd learn ASP.NET if you're doing anything more than a simple brochure site. If you have .NET experience, and classic web development experience, then learning ASP.NET is not going to be a big hurdle and will be well worth the effort.
I agree with Aaron Daniels' answer about learning jQuery. jQuery helps a lot with cross-browser compatibility in JavaScript and some CSS-based effects.
However, you should also look into ensuring your site uses well-formed, valid HTML, and doesn't use too many CSS 2+ features. This should ensure that your site is standards compliant, which will mean it will play well with Firefox, Safari, Opera, and even later versions of IE to an extent. You will still need to do manual tweaking for IE - it's been too broken for too long for MS to be able to fix it properly in one go - so look into conditional comments for applying a separate stylesheet for IE users.
AJAX is a handy technology for "desktopifying" your web app. It provides a mechanism for asynchronous callbacks to the web server, so you can pass data to and fro without reloading the page in the browser window. This is how the voting buttons work on StackOverflow, for example.
Lastly, ASP.NET doesn't really have much effect on the end user's experience in terms of the look and feel of the site. It is a server technology that provides for writing complex applications to be delivered over the web to a browser. Having said that, MS have put in some extra goodies to make working with AJAX a little easier.
Hope that helps!
Does anyone know of any good resources for learning about cross-browser development in ASP.NET? Specifically, what causes a page to look different in FF/Chrome/IE, what are the gotchas when developing, how can this issue be addressed in a new project etc.
A good tool for cross-browser websites is Microsofts SuperPreview. This is still in beta, but so far looks like it will be a great help with web development.
Hope that helps!
There's really not a specific resource I've found for that type of information. Generally I've found the information as I encounter the errors. But the first step is learning at least a high level overview of the rendering engines used by the different browsers. They all have their own particular "quirks", thus why a site like http://www.quirksmode.org/ exists.
Another thing related to the different engines is understanding the box model of development and how CSS is treated differently with it in each browser (and the different versions of the browsers). If you need to be extremely worried about pixel perfect matching between the browsers, you're going to have tons of fun.
Related to that, another thing is to look in CSS Reset Sheets. This gets the environment between the different browsers fairly similar. This makes development easier, but still not foolproof from messing up layout.
Usually you won't get any problems with ASP.net and cross-browser compatibility issues if you just use the standard normal server controls ASP.net gives you. When the problems start is (as CD said) when you're doing something more "advanced" like Ajax calls using the ASP.net Ajax Control toolkit or jQuery or whatever and you still have the requirement to be backwards compatible till IE6 (which causes most of the problems!).
What I experienced, cross-browser issues arise when
you're using a lot of client-side code like JavaScript (Ajax calls etc...). In such cases it is worth to look for high-level libraries like jQuery for doing most of the things.
you're dealing with CSS stylesheets for doing your page design and layout, which you should do with CSS and not inline styles!! With CSS it's a matter of learning by doing. You'll get experiences on what will work fine on most browsers and what will probably give you problems.
Generally, just for ASP.net, it is extremely important to have the page/control/custom server controls lifecycle in mind. You should have a good idea about that, but there is plenty information around on the web. Most issues you'll experience with the ASP.net ViewState will be due to incorrect handling of the according control's lifecycle (i.e. attaching dynamic elements to early/late, reading the ViewState in the OnInit of your page and wondering why your values are empty etc...)
This really should be more a concern of HTML markup and CSS than ASP.NET specifically. That will help your search.
For me this has been an issue of learning the hard way, along with a lot of Google searches.
Quirksmode.org is a good reference as Agent_9191 suggested and there are other more specialized & detailed references scattered throughout the web.
However, if you try to read and understand all the incompatibilities between browsers it's easy to be overwhelmed. So often times I really need specific examples to learn from.
For that, I really like alistapart.com. There is a ton of good stuff on that site when it comes to creating layouts in a cross-browser compatible way.
For the ASP.NET specific side, the most important tip I can think of is to avoid the more complex ASP.NET controls as much as possible. The more markup the framework generates, the more stuff you will need to unwind. And honestly, one can do everything one would need to do in ASP.NET using repeaters and user controls at the end of the day. Which is what one had to do back in the 1.1 days to get anything resembling decent markup.
Now, if you can't avoid the more complex controls, I would also check out the Css Friendly Control Adapters. They can help slim down some of the other stuff.