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.
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 7 years ago.
Improve this question
I'm not sure where to begin, but my goal is to to create a 2D simulation game that allows the user to create formations using points, or dots, on the grid. I wanted the game to allow the user to direct the points on the grid to their next location, or set of locations, in a continuous simulation from the first formation to the last in chronological order.
Like I mentioned earlier, I am brand new to coding and wanted to know what specifically should I be looking to learn to create this? Also if you have suggestions on what I should use to create this such as Flash, Html5, or something else please let me know.
Are you trying to make Conway's Game of Life?
As far as good beginner game engines go my first couple of games were in GameMaker. I understand the reputation it gets about it not having "real programming" but if you are learning to write code I actually think this works great. No it doesn't have syntax like code does, but it does require you to learn programming logic and that is what is important. Syntax isn't that tricky and you can look it up. Logic and structure, that's hard.
I don't know much about FLash other than that it is kind of a sinking ship and losing support. If it's between javascript and that, go Javascript. When you say
HTML5 or Java, you do not make games in HTML5. If you have an HTML5 game engine like Impact, it's actually javascript code you are writting. HTML5 is just putting the game window in a web page.
I haven't messed with PyGame much, but Python is a fantastic beginner language and I have heard this works for small things like what you want to do.
Love2D gets used for projects like yours a lot. Don't have experience with it myself but you could take a look at it.
I have used Unity a lot for my projects big and small. It's a big learning curve but if you want to learn how you could make "big" games, this is how you should do it. Tons of great beginner learning materials and support, just expect to go through several tutorials(which you should do anyways with whatever you pick) before you can get started.
So you have a start pattern, and a target pattern, and the user must move the points by, say, sliding them along the grid lines, until the target pattern is attained... I think the easiest would be Corona (https://coronalabs.com/, free and excellent docs). It has a very simple game engine which is based on Lua programming language, a very simple language that is also very powerful and versatile such that it will allow you to jump in and support complexifying your game as you learn. Corona is built so you don't have to worry about all the intricacies of getting the code onto the device etc, it has a device emulator so you can test on your desktop. You just focus on creating your callbacks and logic and imagery, they will get used at the appropriate time.
The concepts you will need to develop your game:
- setting up the initial grid and pattern
- drawing lines (for the grid) and circles (for the "points) (presumably, different colors)
- handling a swipe
- updating the state of the grid so you know where the points are
- determining if the target pattern has been met
- keeping score (time used, number of moves required)
- start-over (prematurely with confirmation by user, or when target reached)
Install Corona, look at its intro to Lua, start playing around with it, starting with really simple stuff, actually best is to take existing examples that come with Corona and try to modify them to do something different and gradually diverge from original. The Corona docs and examples are excellent, there is a very active community, tons of youtube videos by avid game developers on tricks and techniques, and corona questions on stackoverflow get quick answers.
Have fun!
I am an intermediate level web designer & web developer. I built 5 official websites for hotels and not only, until now(2 years experience). But I have an uncertainty.
Should I use an already coded template like this for building the next websites? I already did 1 website with that great template and it saved me a good amount of time. My fear is that without that template, I don't have excellent skill for coding components like navbar, footer, making a page element to stay on the page in the position I want, etc.
I'm almost always copying code snippets from the net, let's say not coding from scratch.
My thought is: hey, you're using a template, you're not a real web designer/developer. I was thinking to only use bootstrap + wordpress, but if I use that CANVAS template( it already has lots of bootstrap components coded, css and javascript for almost any situation ) it would save me even more time.
What do you say, guys, what should I do ? Thank you !
Whatever it takes to achieve your objective in the fast manner and have quality output should be your way forward. I would not worry about purism of solutions used as the objective. When you need it, you will know it - as the time will come when you know this template is not enough, then you can go back to custom solutions. Ultimately no one can handle every aspect of the development, using open source, libraries and frameworks is nowadays a skill in itself. Reapplying easy modules will help you to focus on other crucial elements of your app ( move to mobile, speed, additional functionality etc.)
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
Hey everyone I just bought the master cs5 suite mostly for design purposes, and now I have a lot of peoPle telling me I should start using DW instead of hand coding my HTML/CSS because it will speed up my production and it's what all design shops use and is an industry standard . I was curious if this is accurate and how much would it really speed things up?
I (personally) disagree. I use DW in CS5 for code editing view only (it has the best markup/code highlighting I've found); the generated markup is not great, so I don't use it, nor am I highly trained in the workflow it entails. A lot of designers will not understand hand coding markup, but that's usually because they don't understand how to or don't care to do so because it's not what they get paid to do.
However, if you're working on (a) lower level, you have a better understanding of your markup/styles/code. It may take slightly/significantly more effort (depending on your abilities hand coding), but I personally think it's worth the effort in many cases. However, I am not a piece worker nor am I paid on deadlines.
There are other reasons I use DW (WebDAV support, searching capabilities), but I will likely never use it to author my markup. Also note I don't pay for it.
Used unwisely it won't speed it up at all. You'll spend more time pulling out DW's extraneous code. Use parts of DW that will make you faster like snippets (for storing snippets of code you use frequently) and find and replace (using f&r with regex is a very useful skill). I use it to cram in table markup quickly (for data tables). Dragging files over for internal links is quite nice and the keyboard shortcuts help (you can create custom ones).
That said, I like the product at work. Check in and check out has been very helpful there with multiple coders/designers.
So, there are plenty of parts in DW that will speed up your hand coding. Root them out.
Dreamweaver CS5.5 made a lot of improvements over previous versions. As a designer you may appreciate Live Preview and the design integration's. As a coding IDE, it's still considered sub-standard and many developers choose to go another route. I use PHPdesinger 7 for ~$70, its got in-line xdebug integration and pretty good intellisense for PHP, CI, and jQuery. I use DW5.5 and PHPdesigner and I find it's far less bloated then Dreamweaver for what I use it for, coding with PHP/Jquery and web API's. I also feel that it's closer to how I worked before using advanced IDE's like this, coding on my Macbook with Coda. But if your designing web pages you may like Dreamweaver better.
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.
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.