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 4 years ago.
Improve this question
I'm trying to get in the habit of designing the interfaces to my websites at the very beginning before I do any actual coding. I've read "Getting Real" by 37 signals and they recommend doing the interface first, before any actual code is produced.
What exactly is meant by that? Does that mean use pure HTML and CSS to design the site and add php, js logic to page afterwards, or is it okay to sprinkle in the php, js from the beginning?
What if your using a framework, should I set up empty controllers that simply call the views, or should the early stages be solely html, css?
Also, what do you guys think about design first vs later?
EDIT I'm talking about AFTER I have sketched everything with pen and paper.. I'm taslking solely about the html mockups. And I'm not too sure about using extra tools that I would need to learn to do this
I think that the majority of the benefit of designing the interface first has been achieved after you are done your paper sketches. Basically, you are just ensuring that you have a design in your head and that your coding process is somewhat end-user driven. You are also trying not to waste time on needless documentation.
Getting the HTML in place (or the skeletons of the Views in an MVC app) makes some sense and this is the main thrust of what 37signals says. I would certainly not do anything beyond this that is just going to be thrown away.
I think if you have a proper design, it is immaterial if you next move on to writing the back-end code after the HTML or if you do the CSS and JavaScript. The CSS and the code should not even need to be aware of each other.
Do whatever gets you excited and motivated. Do whatever gets you thinking more deeply about how the app will actually work so you can catch any flaws in your original thinking. I like to code before CSS but that is just me. You might find it important to get the CSS further along before the app takes shape in your head.
Joel Spolsky likes Balsamiq as a mocking tool. I think that 37signals uses Draft (an iPhone app). I use a Sharpie. The key is not getting too detailed though.
Opinions vary, but I believe that JavaScript should come last. I believe most sites should be designed so that they work 100% without JavaScript and then have JavaScript added for polish.
Learn more about Unobtrusive JavaScript
So (for me):
Quick and dirty sketches of views
Get some HTML in place
Maybe some basic CSS for layout (or more if I need to impress somebody early)
Write the core logic
Add support for web services and AJAx calls
Pretty it all up with snazzy CSS
Write some JavaScript to add the sizzle
Let me ask you this. Do you paint a car before or after you have made the working parts? Maybe you have chosen which paint but ultimately it cannot go on until the car is finished. Maybe you don't agree with this analogy but I think coding will bring out issues that cannot be understood before a site is designed. Code first, design second.
Get a pad of paper. Each page represents one page of your site.
Sketch the interface. What controls go on each page? What controls are the same on each page? What forms are there and on which pages? What happens when user clicks on item x? Item y?
This will help you solidify your plan of both the content and behaviour of your site.
If you just start blindly coding you will end up with burnt spaghetti.
The user interface is what the users of the website will see. Before coding you probably start with some very basic sketches of the site that are not code, to identify page navigation, general placement of content and interaction with the site.
But the earlier you can show and discuss a working UI, the easier it is for the users/client to get an idea of the final product. So quickly move to the HTML, CSS, JavaScript and things like images, to identify:
The data presented on the page (HTML)
The representation of the data (CSS)
The interaction with the data (JavaScript)
Doing so helps to gradually develop an actual working UI that you can discuss with the client. This keeps them involved from early in the project. It forces them to think about the site, and make decisions about content, look and interaction.
Getting such feedback early in the project reduces the risk of building a product that needs to be changed later on. And making changes early in the project is easier/cheaper, then later in the project.
While the UI is being developed you can already start looking into data structures, software components and integrations with other systems to drive the site. But that's not what users/clients are interested in, they want to see and use the product.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I recently started learning coding I actually didn’t know where to start after doing some researching I decided learning the javascript language as a first step . After finishing the courses on freecodecamp I didnt know what to do next I heard so many things to the point that I feel like I dont know anything . I would like someone to actually help me understand basics before languages, html css ...
Here are my questions :
Are libraries essential to build a website or create games ?
What ui and ux ? ( I heard that its for webpages designing though I also heard that css is also for web designing )
What’s a framework ?
Does all languages have libraries ?
Can you develop apps without libraries or frame work just using css html and javascript(example)
Are libraries essential to build a website or create games?
Yes. Any code you write will fundamentally become your library.
What ui and ux?
UI is the user interface of any tool that requires input. UX is the user experience of a given interface. For example, an airplane pilot is given an interface to control the aircraft, and the controllers are meaningfully arranged to give the pilot the ability to fly safely. The result of the user experience is determined by the pilot's ability to accomplish a task.
What’s a framework?
A framework is the foundation for deploying multiple functionalities for specific tasks. For example, an airport specifically manages how passengers arrive and depart to a new location by air travel. Similarly, a boating dock specifically manages how passengers travel over water. Here is a list of a few web frameworks out there: Github Frameworks
Do all languages have libraries?
Most languages include built-in libraries. For example, Javascript includes basic math functions.
Can you develop apps without libraries or frame work just using css html and javascript(example)
Yes and no. HTML is a markup language, and CSS is used to style your information. Fundamentally, you can write a static web app with html, hide or reveal information with css, and link out to other pages. If you intend to write an app with functionality that manipulates the HTML or CSS, you will need a programming language such as Javascript.
Are libraries essential to build a website or create games? In a way no, but they will make your life much easier if you use them properly.
What is UI and UX? User Experience and User Interface. The first one (UX) is in charge of researching the user and it's context to plan and design the basic structure and flow of any platform, app, etc... The later (UI), using the UX outcome, manages the final design, the look-n-feel of it, as well as all the interactions.
What’s a framework? A library of a coding lenguage. They are very useful when you are developing, helps cut time if you can settle for somewhat generic functions-styles. Personally, I still customize the looks as some of them they can look a bit too generic
Does all languages have libraries? Most of them, yeah. All web development languages I know do.
Can you develop apps without libraries or frame work just using css html and javascript(example)? Yes, but for these lenguages it sounds like a waste of time not to use them. The basics to start on those 3 would be Bootstrap, jQuery and their
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 last year.
Improve this question
It seems like I'm a bit outdated on website creation.
Some years ago I learned to create simple websites with frames.
Yet this solution is discouraged by w3school.com and frames are no longer supported in future HTML versions.
So what are the simple replacements?
iFrames also seem to be discouraged by most developers
PHP seems to provide a solution? what is a simple way in php to replace frames?
if I'm not using php (actually I need to use JavaEE in one project), how can I create frame-like websites?
Short: How to create a good-looking (frame-like) website nowadays?
Generally speaking:
Visually
CSS. There are numerous techniques for laying content out (depending on the precise effect you want, Holy Grail is a common desire).
The overflow properties handle scrolling sub-sections of pages, although designers who think that having a menu using up screen space all the time is a good idea are usually wrong.
Avoiding duplication of metacontent
(i.e. putting things like basic structure, navigation menus, etc on every page without copy/pasting them)
A template system (or an include system) that either runs server side (most common) or at build time (which can support HTTP servers which only allow static files).
The language this is implemented in is irrelevant, PHP is as common as muck, Java is an option, I tend towards Perl (and more specifically: Template Toolkit), there are many others. JavaScript is becoming increasingly popular for this type of job, with tools such as assemble becoming available. You can go all the way with a static site generator.
Use a search engine to find popular template languages or include systems for your programming language of choice.
Loading new content without leaving the page
JavaScript, usually with the XMLHttpRequest object (the technique being known as Ajax), and (if you are doing serious content changes) used in combination with the History API (so bookmarking and linking still works). Github are a good example of this. There are various frameworks such as React and Angular which try to make things easier. Note limited browser support and all the other things that can cause JS to file makes using good design principles essential. One approach to making these things robust is to write Isomorphic JS.
Frames are not replaced by a new "technology". The state of the art is to put all content into the same document and style it via CSS. Of course server side includes can help you to do this.
Use CSS positioning to create a frame-like interface and AJAX to change the content of a container. You can use JavaScript frameworks like jQuery, Prototype or MooTools to handle AJAX requests.
However, if you want to include content from another domain you have to use an <iframe>, since AJAX follows a same origin policy.
If you want to write DRY (don't repeat yourself) you could use some kind of template system (PHP, Ruby, Pearl, Python - and of course a framework for this languages).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My wife's birthday is coming up and I would like to create a website similar to
Ba Ba Dum: https://babadum.com/
I have learned HTML5 in school but never learned about its ability to create animated websites.
How do I go about making a website like that? Do I have to use Flash or is it fully rendered with HTML5? Looking at the source code revealed something about google api and ajax and jquery, are they essential to making an animated website like this?
Thanks!
Although your question is way, way too broad, I'll try to help.
The site you linked -as far as I can tell- is made HTML, CSS and JavaScript. There are less and less sites that use Flash, and you shouldn't use that either - it's starting to die out, at last.
Be prepared to research a lot - you'll have to learn about CSS3 (style, position and animations), JavaScript ("JS", it's very useful for sites filled with interactive elements - sounds, videos, etc) and jQuery (special JS library, it contains several dozens of pre-written functions that can make web development easier and faster). If I were you, I'd visit Codecademy, it's a website that teaches these languages, and for free. Completing those courses shouldn't take more than 20-30 hours, and it would give you a solid base to start from.
Of course, the required skill level depends on the type of site you want to build. A simple, animated website can be built with only HTML and CSS3. For more complex sites you most likely have to use JS and jQuery.
Here is what should you do:
Start out with a fix idea: you want to know what you want to create, especially because (probably) this will be your first serious project. Doodle on paper, write down your ideas about what should happen if you press a button, for example.
Divide the site into smaller pieces: you won't finish it one day, so you should focus on building the site step by step. Create a button, use CSS to make it fancy then give it some animation. If you are satisfied, you can move on to the next part.
Research: most likely you won't be the first person to do the things you want to do the way you want to do. Use google and you'll find hundreds of different tutorials, starting from simple things (building a layout) to more complex one (pure CSS animations, canvas, etc). If you stuck, Stackoverflow will help, but you'll have to be more specific with your questions. This current question is bad, and I'm only writing this response because I too know about needing help and realizing no one will help me just because my question is too broad. And I don't have anything better to do at 23:40 :) Try to find out if someone already asked your question - it's possible, and that way you may find the answer(s) instantly.
Study source codes: if you are using Chrome, you click on any element on a site to view it's code - you just have to select "Inspect element" from the context menu (there are other ways to do it with other browsers). It will show you the HTML, the CSS properties and even the relevant JS code. You can modify these values (especially useful with CSS) if you want to experiment a little - these changes are only visible for you and deleted when you refresh the page. This method is useful if you found the perfect button animation you want to include on your page but don't know how to do it.
Backup your work! Create a backup copy of your site every day, so if you mess something up badly (happens to everyone, especially if you're in a hurry like often I am) you don't have to start from scratch. It happened to me before, and if you are using other people's code (from tutorials, I'm not talking about stealing) it might happen to you too.
Also, good luck!
Here are a few places I'd recommend going to, all of these have helped me and are a good place to start.
Codecademy - http://www.codecademy.com/learn
For basic HTML, CSS, JavaScript and jQuery lessons. Best site on the web, I say. Also, recently released AngularJS lessons, which are quite good.
Code school - https://www.codeschool.com/
Provides good AngularJS lessons, which you should do once you've finished the Codecademy ones.
Egghead - https://egghead.io/
Good for AngularJS lessons and HTML5 canvas lessons. The HTML5 canvas lessons are brilliant, the presenter is a genius.
What all these things are.
HTML5 canvas - A method of drawing graphics to the screen. Great for video games and animations. I've actually made the loading effect of that site you listed with canvas.
jQuery - A JavaScript library, which is a bunch of predefined functions for ease in coding. It is good for special effects and event listeners.
AngularJS - An awesome library which makes displaying data so much easier. Great for fast single page apps.
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 7 years ago.
Improve this question
I'm supposed to do a presentation for my co-workers on a web framework I evaluated. These people are developers and hate long and boring PowerPoint stuff, so I got lots of little code snippets. I also put together a small sample application. My question is, how do I present the code so people can follow?
Some things I thought of:
Put the code on PowerPoint slides, looks pretty bad and unless it's an image I can't get syntax highlighting to work. Having my code in images is a pain and doesn't scale well to different resolutions.
I played around with the S5 XHTML presentation format and integrated a JavaScript syntax highlighter. It's a bit clunky but workable (I'll get some grief for ignoring the company's CI for presentations since I wouldn't use their templates. Don't even ask...)
I could put together a script (notes) and "live-code" in front of my audience. I don't like this so much because it keeps me so busy that it's hard for me to give a good explanation while I write. And there's also a high chance of me causing errors and make them wait.
A screencast? But then I wouldn't have to be there... Maybe narrate it?
So what would you do?
I could put together a script and
"live-code" in front of my audience. I
don't like this so much because it
keeps me so busy that it's hard for me
to give a good explanation while I
write. And there's also a high chance
of me causing errors and make them
wait.
I like this option, if you can get your demo streamlined to the point of not holding up the audience. You can do what TV cooks do when the recipe takes more time than they have; start the coding, then jump ahead to one that's 90% or 100% done.
If you have a colleague you can get up to speed, you can have them do the coding while you talk and point out what they're doing.
You can use your IDE, which will give the syntax highlighting and show your audience how to compile, deploy, test, etc. I would recommend using an oversized font though, just for the session, so that everyone can see.
Does your IDE allow opening/closing regions or code segments? In Visual Studio you can create code regions that you can expand or collapse. If your IDE has the ability to do this you could create your code samples as regions and then open/close them as you go through your presentation. You could switch back and forth between your presentation and code samples in the IDE, but wouldn't have to code on the fly. Using open/close allows you to hide the code you're not referencing to keep things less cluttered.
I actually saw this done at Agile 2008 and it seemed to work pretty well.
You can only fit so much information on a PowerPoint slide but that's actually a good thing: people can only look at a certain amount of information and get something meaningful from it.
So if you can't fit it on a PowerPoint slide, you need to rethink your approach.
Code snippets are good. They don't need to be highlighted. Just put them in Courier New (or some other fixed width font) and it'll come across as code. Code snippets don't have to be complete either. Just boil them down to the essential concepts (using comments or ellipses to indicate missing code).
Programmers being programmers, they'll probably ask questions when it gets to the technical, which is good.
Also, if the programmers are familiar with something similar try and relate all the concepts back to what they know. It makes it easier to grasp. Like if you're explaining Spring MVC and they know Struts, explain the Struts equivalents. It can be useful to put that sort of thing in table form (even as a handout).
That's what I did for exactly that (a Spring MVC primer for Struts programmers).
If you want your audience to see a lot of code snippets, especially lengthy ones, you could print them out as handouts or provide them as notes in PDF or text files (people can follow along on their laptops).
Actual presentation slides should contain the smallest amount of text (including code) necessary to convey your ideas. If there's a lot to read from a distance, your audience will get tired after awhile and might have trouble following along. Let people read the full code sections on their own laptops or handouts, while calling attention to just the critical parts in your presentation slides or script.
If they don't like Powerpoint, don't use use it. We use Camtasia screen recording to record 'live' demos for presentation to customers (live in quotes since it doesn't have the disadvantage of crashing halfway through your presentation :-). They always prefer to see it in action rather than what they think is fudged functionality.
It's pause-able like your Powerpoint slides and has the advantage of syntax coloring since you just record bringing your up in your favorite editor. It's also dynamic which is much better than Powerpoint (although I've seen some people do crude animation with multiple Powerpoint slides, always funny to watch in action).
This basically maps to your screencast idea but, if you want a reason to be there, do a large number of small screencasts to show interspersed between your real presentation, narrating (in person, not on the screencast) if necessary.
Personally, I'd prefer to send a fully narrated Camtasia off to the target audience but that's because I'm not totally over my early-career phobia of public speaking :-).
In a pinch, you could do a real live demo since your audience (is videance the equivalent for video presentations?) are programmers and will understand any problems you have.
I had this done to me, and thought that it was the best possible solution:
Get another person to help you out. While you are talking about the code, let the helper type the code. This way everyone in the room will be looking at the code, while listening to you explain it.
This of course involves finding someone who can help out, and understand the code just as well as you do. But the results can be great.
If you could do it all in a screencast and you wouldn't have to be there, then do a screencast and don't be there. Nobody complains when a meeting gets canceled. Just distribute the video, maybe with an accompanying report with notes or links so people can read more about the tools you're demonstrating.
And you'll get more credit later as your co-workers and managers talk to other people: "Hey, did you see the presentation Bibac did? No? You should; I'll send you the address after lunch."
If you're demonstrating code in the presentation, then also consider having the finished project available so people can try it for themselves.
When I give presentations involving Visual Studio I put code snippets on the general tab of the toolbox. During the presentation I drop/drag these code snippets into a code file, markup page, etc.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I'm pretty sure most of us are familiar with the concept of a project's requirements changing after it starts, this becomes more and more of an issue the less the client knows about how things work and the closer you work with them.
How then can I design a system (specifically a website but general advice will probably be best here) so that smallish changes can be made, are there any programming strategies that deal with this issue?
All the normal oo principles apply here, reduce coupling, increase cohesion, don't repeat yourself etc. This will make sure you have a flexible and extendible code base.
Apart from that don't try to preempt change. Apply YAGNI (You aint gonna need it) everywhere. Only build stuff you know your users need. Dont build stuff you think you're going to need. You're more likely to guess wrong and then you've got a bunch of code that's probably only in the way.
I think the biggest thing is to make sure you have a comprehensive test suite. That way you can make changes confidently when needed and know when it breaks.
Having no experience with PHP, take this with a pinch of salt.
But it's all about knowing change will come. So when you are coding and start wanting to hack things to get them done, stop and think "what if I need to change this again?".
Now, I know php is a scripting language, but you must be able to library off code right? Thats the best thing to do, keep the UI (the web page) as LIGHT as possible, for the most part 1 or two method calls.
If you have fancy rendering logic, library it. Create a nice look that may be common? Look at what might change (colour scheme etc.), library it. You're already putting all your core code into libraries though right? ;)
If you always work on building your library, all you need to then do when the change request comes in is "find the right book for it".. Whats cool about what we do is that if the book is well written, you can easily add annotations to it ;)
This is basically what I am doing at work at the moment, my "project" is to build the platform that future apps will be working on, so this is really my main focus. :)
Update
Mendelt made a good point on applying YAGNI, with all of the above, don't just write stuff to library it but if you think for a second that the sexy little table you just created (because a client wanted it) might be used again, then it's time to think about making it more usable. Some obscure function for a one-off client should be done ad-hoc.
Well, I'd try to tackle this problem from the other side:
More communication with the customer/user.
I have been there myself, programming things that were not wanted or not properly communicated and having to redo lots of code. It would have been prevented with more communication or rather: with more of the right communication.
Aside from that:
Allow Users to change the color and ask them now and then, where to place a button and the probability, they will be satisfied with this "great level of control" is quite good. And then they won't want you to redo real features. Yes, I am sarcastic about this.
I suggest using a tried and tested framework for your language of choice. Most good frameworks will have been designed to accommodate a multitude of scenarios.
First, you should identify the aspects that will have a high change probability. These aspects should be 'abstracted out'. A classic example is the style of your website (i.e. through css). But you could even so define a 'presenter' class that lays out the specific elements of a web page.
The hard thing is making a correct estimate of the change probability. But that's up to you :)
This is where frameworks come into play.
If all the baseline, background, business-as-usual is in the framework, then your application is the extensions, special-cases and add-ons.
The framework is already designed and built for change. Your stuff is the change that the frame was designed to accept.
When change occurs, you will respond to change with some combination of modifying the framework configuration and rewriting your stuff that plugs into the framework. You cope with change by not focusing on the default, background stuff. Delegate that to someone else -- the framework authors.