Java-Gaming.org Hi !
Featured games (91)
games approved by the League of Dukes
Games in Showcase (799)
Games in Android Showcase (236)
games submitted by our members
Games in WIP (865)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1]
  ignore  |  Print  
  How to Learn Web Development for Java Programmers  (Read 5775 times)
0 Members and 1 Guest are viewing this topic.
Offline Rayexar
« Posted 2015-06-27 05:55:55 »

Hey JGO,

I'd like some advice from Java programmers here who also do web development (creating websites) on some recommended ways to learn web development. I've programmed in Java and Python for several years but really have no experience working with websites. If you had to create a decent looking website, how would you do it?

  • From scratch using HTML/CSS/PHP/JS?
  • Using some sort of framework such as Play Framework or Ruby on Rails?
  • Would you use a CMS like wordpress?
  • How about online tools like Squarespace?
  • Something totally different?
 

I guess the end goal is to create a site I can use to present my projects, and possibly a blog too. I'm looking for a method with good balance between speed and ease of learning and use, and functionality.

Any suggestions would be appreciated!
Offline Opiop
« Reply #1 - Posted 2015-06-27 06:28:02 »

I do web development for a company which utilizes Java + Tomcat as the backend, C# w/ ASP.NET MVC as the front end and then of course some JQuery and Gumby thrown into the mix. I haven't done much web development other than at my company so I'm not the most qualified person to ask, but I generally feel like with that stack I get stuff done pretty fast. It's quite a handful at times, though, and I'm sure you could find much "lighter" stacks to work with, but oh well. ASP.NET MVC is pretty awesome though, I can quickly throw up a site because of how powerful it is.
Offline PlainBug
« Reply #2 - Posted 2015-06-27 06:31:22 »

In my opinion you should start learning about html and css. This will give you a rough idea on things that are going on in web development. 

Nevertheless you can use modern blog software like Wordpress, because for that you don’t need knowledge about html at all.
But if I were you I would firstly learn html and css, because it is necessary for a basic understanding (as I already said). You can start here http://html.net/ or on whatever your search engine finds.

If you learned these basics, you could also start learning JS and PHP.
But JS and PHP are suited for advanced web development - So for your project site you can probably make use of html and css only. Cheesy

I hope this will help you.  Smiley

Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline Opiop
« Reply #3 - Posted 2015-06-27 06:42:01 »

HTML/CSS for a blog? Where's the scripting language? JS is NOT an advanced web development language, its a must for almost any modern day site. HTML/CSS is not by any means enough for what he wants to create.
Offline BurntPizza

« JGO Bitwise Duke »


Medals: 486
Exp: 7 years



« Reply #4 - Posted 2015-06-27 07:13:32 »

Static sites are a thing, especially for tech blogs these days it seems...
Offline PlainBug
« Reply #5 - Posted 2015-06-27 07:17:28 »

HTML/CSS for a blog? Where's the scripting language? JS is NOT an advanced web development language, its a must for almost any modern day site. HTML/CSS is not by any means enough for what he wants to create.

No sorry - HTML/CSS only for the basic understanding of what is going on. And yes you can create a plain static project site with HTML/CSS and without JS. (I have never said he should use HTML/CSS only for a blog)  Smiley



For more functionality you will probably need JS and PHP. But I thought he is a beginner and why should a (web development) beginner start with powerful tools like
(...) Java + Tomcat as the backend, C# w/ ASP.NET MVC as the front end and then of course some JQuery and Gumby thrown into the mix. (...)
?

Offline nsigma
« Reply #6 - Posted 2015-06-27 08:59:15 »

Static sites are a thing, especially for tech blogs these days it seems...

Yes, and definitely not just for tech blogs.  We've also been looking at how to open up client-side editing (with prose.io, Cloud Cannon, etc.)  Separation of CMS features and static content is nice, both from a security side (CMS exploits happen in hours!) and for performance.

I'd be tempted to have a look at Jekyll, which is used on GitHub pages.  It's a good way of learning the basics (HTML / CSS / JS) which you need, while offering enough templating functionality to meet your needs for managing a project site / blog.  And you can host it for free too!   Grin

Also, there are some great starter themes out there that you can build on top of, for Jekyll or plain HTML5 - tweaking those is a good way of learning IMO.

http://jekyllthemes.org/ | http://startbootstrap.com/ | http://html5up.net/

Eagle-eyed may notice new Praxis LIVE website is derived from Start Bootstrap's Grayscale theme.  I build web stuff for a living, but I'm not averse to some time-saving (and legal) plagiarism!  Wink

Praxis LIVE - hybrid visual IDE for (live) creative coding
Offline Rayexar
« Reply #7 - Posted 2015-06-27 09:59:44 »

Thank you all for the replies! I've gone through this tutorial on HTML5 and CSS3 and it seems alright so far. Coding a website from scratch seems like its more reliable as you know everything everything behind the scenes and have more control over it compared to using a CMS.

From the frameworks mentioned, Bootstrap seems to have the easiest to "Getting Started" guide so I've downloaded a theme to play around with. I'm still confused about what the framework actually is though, it seems like it's a bunch of CSS and JS files that you modify or use (is this correct?). Would you host it like any other plain HTML file? How would you create a new page, say a new blog post, without using a database?

Onto a different subject, which editor would you guys recommended using for editing HTML/CSS files on Windows?

BTW sorry for bombarding you guys with questions, I really appreciate the help Smiley
Offline nsigma
« Reply #8 - Posted 2015-06-27 10:14:32 »

How would you create a new page, say a new blog post, without using a database?

Copy & paste into a new file.  Or use Jekyll ^^ or some other static site generator - if you're using plain HTML files and you decide to change header say, you need to do that in every file.

Onto a different subject, which editor would you guys recommended using for editing HTML/CSS files on Windows?

NetBeans!

I've been using the HTML5 support in NetBeans recently and like it.  There's a plugin for Chrome that lets you debug things too - point at something in the browser and highlight the code that creates it, etc.

https://netbeans.org/kb/docs/webclient/html5-gettingstarted.html

Praxis LIVE - hybrid visual IDE for (live) creative coding
Offline cylab

JGO Kernel


Medals: 195



« Reply #9 - Posted 2015-06-27 14:19:29 »

In my part of the industry the current must-have expertise in website development is angularJS, JSON and bootstrap...

Mathias - I Know What [you] Did Last Summer!
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline jonjava
« Reply #10 - Posted 2015-06-28 17:10:51 »

Learn the basics of HTML, CSS and JS (i.e. HTML5) and especially how they work together. Broadly speaking HTML is the content of the site, CSS is the styling/graphics and JS is the glue/functionality that ties it all together.

After you got the basics down, which is all client-side, you might want to look into the server-side of things. Which since a few years ago can also be done in JS using NodeJS - a very interesting project in both implementation and surrounding community - which can be used to build a web server with a few lines of code.

If you get into more sysadmin or webmin stuff you'll want to look into things like Apache and Nginx, not to mention basic DNS or unix know-how, and get familiar with how they can replace/substitute your web server and/or work with your web app.

The web is and has been moving forward extremely fast. Frameworks come and go and fall in and out of favor every few months.

Ajax is another thing you'll run into which basically only means getting content from a server without reloading the page on the browser (using JS). Traditionally, like, 10 years ago, every time you clicked something on the web you would send a request to the server and the server would send you back a pre-rendered completely new full HTML page. These days a variety of different things can happen such as rendering on client side and or inserting stuff to an already existing page (using JS) or fetching something from a server or another webpage. SPA vs Static sites etc. It's really the wild west of web development atm.

You can do a "blog" a variety of ways. Either edit the static sites each new blog post or have the site read from some database and edit the database. Or bundle up what I just said into an UI that you can use without yourself directly fiddling with the database (i.e., pretty much a mini CMS).

Along the way to server side you'll want to get familiar with databases and what they are. Basically they're an abstraction of writing text into a file, i.e., writing stuff down and getting it back. There's a lot of options. MySQL is the old school way while lots of new DB's have been popping up since the NodeJS age such as MongoDB, Redis or RethinkDB.

If you don't want to fiddle with server side and still have a database you can use services like firebase.com which handles stuff like user authentication etc all for you with a simple client side library (again, JS) you can use. Services like these are very nifty and you don't have to know diddly squat about unix, servers and stuff like that. Comes with a nice webview of your database etc - of course, for enterprise apps it comes with a nice price tag as well but a great choice for front-end devs. You'd need a database to create sites like facebook which has comments and chat etc.

JSON is a big deal and it's simple as shit. It's the way JS presents objects - JavaScript Object Notation. People like it so much they use it everywhere nowadays where you want to send data in a tangible workable form to and from somewhere. Just like XML it's a way to present data. Essentially it's a just dictionary or in Java it'd be a HashMap. It's a lot easier to understand than XML IMHO.

There's a lot of open source stuff out there you can look at and learn from. Most of it on github. JavaScript can be tricky to wrap your head around at times but it's not complete garbage as some would have you believe. Async callbacks and function scope are powerful features that goes hand in hand with the async nature of the web.

You'll undoubtedly hear or come across jQuery at some point and all you need to know is that jQuery is essentially only a simple ("better") API of working with your HTML/CSS from JavaScript than pure vanilla JavaScript. For instance, getting a HTML tag with the id of main-content would be $('#main-content') instead of document.getElementById('main-content'). This isn't as true anymore as it was 5 years ago. 5 years ago browsers had a lot of unique quirks you would have to account for. So you would have to write code that checks for if the current browser is Internet Explorer and write different code to do the same thing - jQuery was an abstraction of these "quirks" so you didn't have to worry which browser the user was using when viewing your site. This is much less of a problem today but still exists to some extent - and if you want IE8 compatability you'd better stick with jQuery. jQuery has grown and does a few other things as well like animation etc. Just remember that jQuery is simply a JavaScript function that is loaded before your other code does. So the '$' mark is simply a function name. I suggest reading the jQuery source for more info. Also: http://youmightnotneedjquery.com/

Also, press F12 (or Apple+Shift+J on Mac IIRC) in your browser to open up the console to fiddle around with/look at what's really making up the site you're currently viewing. F.ex you can type this into the console
1  
$('img').animate([{opacity: "0.5", transform: "scale(.5)"}, {opacity: "1.0", transform: "scale(1)"}], {direction: "alternate", duration: 500, iterations: Infinity});


One more thing, when you look at sites source code you might see all jumbled up scribbly nonsense - this is because in production you'll want to minify and compress the files you are sending over the wire for better loading speeds. This also has the side effect of obfuscating the code.

2cents

Offline quew8

JGO Knight


Medals: 53



« Reply #11 - Posted 2015-06-28 19:37:58 »

As far as I'm concerned, the only place you need to go to learn about web development is w3 schools. http://www.w3schools.com/. Literally that website, look at the menu down the left hand side. HTML, CSS, JavaScript (Including JQuery, AJAX and Angular and Bootstrap if you're interested in such things) and then goes onto all kinds of server side and more core technologies. And that's just the tutorials it shows there. There are plenty more on pretty much anything you'd ever need to know about developing anything for the web. The tutorials are great and they've even got interactive examples. Look no further.
Offline jonjava
« Reply #12 - Posted 2015-06-28 22:41:28 »

As far as I'm concerned, the only place you need to go to learn about web development is w3 schools. http://www.w3schools.com/. Literally that website, look at the menu down the left hand side. HTML, CSS, JavaScript (Including JQuery, AJAX and Angular and Bootstrap if you're interested in such things) and then goes onto all kinds of server side and more core technologies. And that's just the tutorials it shows there. There are plenty more on pretty much anything you'd ever need to know about developing anything for the web. The tutorials are great and they've even got interactive examples. Look no further.

This makes me cringe a bit, but maybe the site has improved over the past few years? Full disclosure I haven't touched the site in years. w3schools is, or at the very least, used to be notorious for misinformation and a good cause of major beginner web dev headaches. They're not in any way affiliated with w3c btw. See http://www.w3fools.com/.

Even so the Mozilla Developer Network (MDN) is a good place for accurate information https://developer.mozilla.org/en-US/

If you're more into a classroom approach https://teamtreehouse.com/ is a good choice imho.

Offline quew8

JGO Knight


Medals: 53



« Reply #13 - Posted 2015-06-29 13:03:03 »

As far as I'm concerned, the only place you need to go to learn about web development is w3 schools. http://www.w3schools.com/. Literally that website, look at the menu down the left hand side. HTML, CSS, JavaScript (Including JQuery, AJAX and Angular and Bootstrap if you're interested in such things) and then goes onto all kinds of server side and more core technologies. And that's just the tutorials it shows there. There are plenty more on pretty much anything you'd ever need to know about developing anything for the web. The tutorials are great and they've even got interactive examples. Look no further.

This makes me cringe a bit, but maybe the site has improved over the past few years? Full disclosure I haven't touched the site in years. w3schools is, or at the very least, used to be notorious for misinformation and a good cause of major beginner web dev headaches. They're not in any way affiliated with w3c btw. See http://www.w3fools.com/.

Even so the Mozilla Developer Network (MDN) is a good place for accurate information https://developer.mozilla.org/en-US/

If you're more into a classroom approach https://teamtreehouse.com/ is a good choice imho.

As with many tutorials, it is not a covers all solution. For beginners I think it is very good and will certainly start you off well and point you in the right direction but I completely agree that for advanced topics and as a reference it is at best not very good and at worse completely useless. But speaking as someone who has never relied on it as a source of information I can't say it has ever misinformed me.

Didn't realize it wasn't affiliated with w3c though. Thanks for that shout.
Offline gimbal

JGO Knight


Medals: 26



« Reply #14 - Posted 2015-07-31 12:02:02 »

A note on w3school: it used to be terrible because there were many mistakes and falsehoods in there that they refused to fix. But they've change, it is now quite decent. I still wouldn't rely on it for higher level javascript/web development info though, its a good site for CSS and HTML stuff.

I vote for Node.JS + AngularJS, even as a long time Java web developer, but its a learning curve that is almost impossible to breach with only the help of the internet; information is just so fragmented and over-simplified. Luckily this year there is an explosion of good and up to date AngularJS books either just out or just around the corner. The older books I've read (Pro AngularJS, the NG-book) are at best "decent".

For anyone that wants to get into basic Javascript programming coming from a Java background, I can recommend "A Software Engineer Learns Javascript", http://www.amazon.com/Software-Engineer-Learns-JavaScript-jQuery/dp/1493692615/ . One of those rare books that doesn't just vomit information at you, it actually speaks to you.
Pages: [1]
  ignore  |  Print  
 
 

 
Riven (181 views)
2019-09-04 15:33:17

hadezbladez (4820 views)
2018-11-16 13:46:03

hadezbladez (1776 views)
2018-11-16 13:41:33

hadezbladez (5100 views)
2018-11-16 13:35:35

hadezbladez (1011 views)
2018-11-16 13:32:03

EgonOlsen (4351 views)
2018-06-10 19:43:48

EgonOlsen (5207 views)
2018-06-10 19:43:44

EgonOlsen (2938 views)
2018-06-10 19:43:20

DesertCoockie (3863 views)
2018-05-13 18:23:11

nelsongames (4287 views)
2018-04-24 18:15:36
Java Gaming Resources
by philfrei
2019-05-14 16:15:13

Deployment and Packaging
by philfrei
2019-05-08 15:15:36

Deployment and Packaging
by philfrei
2019-05-08 15:13:34

Deployment and Packaging
by philfrei
2019-02-17 20:25:53

Deployment and Packaging
by mudlee
2018-08-22 18:09:50

Java Gaming Resources
by gouessej
2018-08-22 08:19:41

Deployment and Packaging
by gouessej
2018-08-22 08:04:08

Deployment and Packaging
by gouessej
2018-08-22 08:03:45
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!