Lost About where to start to become a web designer - php

i have long wanted to be a web designer, self taught. My aim for this year is to design a wordpress theme from scratch. i dunno where to start from.
learn photoshop, html, js, php, mysql in which order? where to get the learning resources etc.
what do i need to learn?
any advice will be hugely appreciated...

Are you aiming for designer or developer or both? A designer doesn't neccesairily need to be able to make a fancy AJAX page that does all sorts of mysql things. Mysql isn't needed at all for a designer.
Now if you wan't not only to design the template, but give a complete sollution to you customers your need to do a lot more.
The order I would do it would be:
photoshop / drawing / 'designing' ->
make the actual thing you want to
sell (the image, the 'vision' etc)
Some usability etc: Show your clients why your design is better,
why it's a good page and why your site 'works'
HTML: you can make a mock-up for your site so they can actually click
trough it. You can also sell this as a base for their programmers.
javascript, AJAX etc: You can make your mock-up better like this!
Now you want to sell complete templates (not just the design), you'll have to start learning the ins-and-outs of wordpress templates. that's kinda like a language an sich.
Get some basic PHP skills if you want, cause it can get you out of trouble, but it's not a big amount.
Mysql is only needed if you want to start adding functionality etc, but now you're really talking about a second job :)

In building websites there are different disciplines. In a nutshell:
Designer. Draws the website, how it should look. Defines the style of the website. Uses mainly PhotoShop.
Interaction Designer. Defines where each feature goes and how it should work.
Client side developer. Writes client side code. HTML/CSS templates, maybe a bit of JavaScript, although there is a big difference between HTML and JavaScript and the skills you need. Maybe you should even consider HTML/CSS and JavaScript to different disciplines.
Server side developer. Writes server side code (PHP/ASP/...). Will probably need some SQL knowledge as well.
Database administrator. Keeps the database running. Actually not part of the web-building disciplines list.
So, you need to think whether you want to be all these persons, or just one or a few of them. I personally so mainly PHP development and a little JavaScript. In work, I hardly do any HTML/CSS, because this is done by another guy. If you got a fellow that wants to build websites too, you maybe could check where each others skills lie. If you're a programmer, you can focus on serverside and JavaScript, where he can build the lot in PhotoShop, think about the interactions, and build HTML/CSS. You will only need a little of eachothers skills for sparring, and you could build great things together because each of you has their speciality.
If you need to do it on your own, and you haven't got any of these skills yet, I would just start somewhere and at least try everything. Keep your learning projects simple, and don't start mixing 5 of the names disciplines. If you want to start using HTML techniques, don't mind tha fancy looks yet. Draw a few lines in paint and just pretend you got all these gradients and spiffy looks. With a bit of make belief, if you try one of these skills you don't need any of the other ones.

Related

NOT PHP vs JS Comparison: Can I do anything in PHP that can be done with JS?

I've now got some very good understanding of (X)HTML and CSS, and plan to move on. My next choices are PHP and JS (and don't know if I'll ever end up learning one of them, but I would love to).
So, I need to choose one of them. I have learnt that PHP is server-side programming and JavaScript is client-side programming, and I am NOT asking you to compare the two of them for me. What I would like to know is, can I do anything (or most of) in PHP that can be done with JS? (or put it this way, can do everything people use JS for, on the server-side with PHP?)
Instances include, using PHP instead of JS in web themes, real-time content display (as in live blogging, live comments etc), effects etc.
This might seem dumb, and there's definitely a reason why people use JS in all the above instances, but since I cannot (really) learn the two of them, thought I should ask for some advise here.
EDIT: Would it be possible to reload only a part of a web page (not the entire web page) every few seconds with PHP? That should be good enough for the real-time application that I am planning.
If you absolutely don't want to learn both, then learn Javascript. There are possibilities to implement a Javascript-based backend with node.js.
I advise you to at least try PHP since it is widely used - maybe even at your company.
For nice user experience (dynamic menu, ajax, effects, ... ) you need client-side programming and for dynamic content you (almost always) need server-side programming.
In short, you need both.
PHP and JavaScript cannot really be compared in the way you're asking...
Both are powerful in what they've ment for and they have a very similar syntax. If you can't absolutely study more than one of them, learn PHP in my opinion. I coded with PHP for almost 10 years before really getting into JS. I would say PHP is the food and JS is the spice.
In order to create AJAX web apps Javascript AND a server-side language is required.
No, you can't. PHP only works on the server side. Once you've delivered content to the client, PHP can't do anything until the page reloads or the user loads a new page. If you want to do anything client-side in between, you need JavaScript (this includes loading content in real-time, doing a lot of modern UI stuff, etc).
Either learn both PHP and JS or use a blogging CMS and use a minimal amount of both.
If you put enough effort into it, you can do almost anything server-side using lots and lots of page reloads. You can also generate arbitrarily complex dynamic content using Javascript.
But it's a lot easier to do minor changes to a page's content from Javascript, it's only possible to do animations and effects from Javascript. It's also much easier to directly access the database from server-side code – there might be pure-javascript drivers for SQL databases, and you could use a NoSQL databases that's accessed using web services, but both are relatively uncommon techniques.
I have a thought regarding your original question/situation. I know this is about four years tardy, but I thought I should throw in my two cents for people who are looking back on this conversation as a reference from Google like I am. In your situation, because you are a blogger who is trying to save time when it comes to programming, I would recommend looking into WordPress (the .org version, not the .com). It is a sort of marriage of WYSIWYG blogging/website creation and programming. It takes care a lot of the back end stuff (including Javascript, PHP, and more), but also leaves it open for you to edit if you so desire. You probably could get away with using Wordpress as a total non-coder, but with HTML and CSS, you're already off to a great start. WordPress is super simple to learn and amazingly powerful. If you do take this route, I would suggest learning PHP as an asset because that is the language that WordPress runs off of. If you know PHP and are using WordPress, you have vast potential, not to mention that speedy blogging is a snap. If you don't feel the need to have whipped everything up from scratch and want to work faster, give WP & PHP a try. They'll take you a long ways.

What script should I attempt first?

I've just got started with the basics (as well as a few intermediate aspects) of HTML, CSS and PHP. What is a good starting point to practice these 3 languages?
I was thinking of writing a URL shortening script but I was wondering if anyone here might have a better idea.
I am looking to develop something that would help me broaden my knowledge of the above 3 languages, but it shouldn't be too advanced that I wouldn't even know how to start it.
Any suggestions would be appreciated.
Whatever you write, if you allow users to input anything, prepared for it to get spammed and hacked mercilessly as soon as it goes live.
Therefore I'd suggest starting with something where you don't give end users any input ability. Something like an image gallery, or a CMS where you as the site admin can create the content, but end users only get to see the finished pages.
If you're feeling more adventurous, you could write a guestbook app, or something like that, but be warned that you'll have to learn quickly all the security aspects of allowing end user input. You'll need to learn how to block spam, avoid SQL injection attacks, prevent cross-site scripting attacks, and a whole bunch of other stuff.
That's all important stuff to know about, but perhaps best left to your second project rather than your first.
Some common beginner tasks are:
- image gallery
- message board
- phone book
- simple forum
These simple projects will allow you to get accustomed to the languages and prepare you for the next steps: security, optimization, user experience, and maybe other.
I recommend trying something very simple at first and finishing it. Only after that you should start something bigger, or better still improve on your first project.
A simple blog platform would be a potentially good second or side project, with the opportunity for enhancement as your skills improve and incorporating things you'll learn from other smaller systems. Start from a single-user blog without comments, and build things up as you go along. Gives you some more free reign to play around on the design (HTML and CSS) side of things as well, and you can always throw in some simple JavaScript as well.
I'll say that #Alin's answers are some good potential starter projects as well, and #Spudley's answer is a good one.
And above all else - have fun!
I support a few of these. I would also suggest you look into doing something for someone else, say a small project. One think I find with myself and those I've taught is that it's a lot harder to commit to something when it's your own project. You also get caught up in the details. When you're doing it for someone else, though, it minimizes the chance.
Also look into using a MVC framework as a way to learn. Good MVC frameworks will allow you to play around while learning how classes work in PHP. I'm sure there are plenty of questions regarding them on SO.
Finally, if none of that leads you anywhere, think of something fun you'd like to try, not matter the difficulty, and go with that. Even if you don't complete a project, there's a high chance you learned something on the way, and that's worth your time.
You can start by reading and do some examples from here http://www.w3schools.com, they have good explanations for everything you want to use in html, php and css.m
Here are a couple suggestions:
Guest book
Simple client / project management
No PHP script could help you with html and css.
You have to master these things separately.
if you want to practice with html and css - just create an HTML page that represents one of your site/script pages and use it to train your html,css skills.
And it will have absolutely nothing to do with PHP part.
Just once you have finished with HTML, you will need to produce the same text dynamically.
Make blog. One step at a time:
On the main page articles one after another. Store them in files.
On the main page only 3 newest. Access the rest of them by menu.
Add option to create new articles.
Add option to edit or delete them.
Restrict access to these actions by using logins and passwords stored in file.
Add option to comment articles.
Add option to remove comments only by administrators (those logged with login and password).

what aspect to develop first in a website?

I'v just started learning different languages in web development and I believe the best way to improve is to think of an idea and develop it. (Feel free to correct me if i'm wrong).
My question is what aspect do I develop first. If I am looking to build a simple script which is styled and comprises of HTML, PHP and CSS, which part of the website do I design first?
I was thinking HTML > PHP > CSS however once I complete the css I would have to edit all the tags to include the css classes/id's. Is that the way it's done?
PS - Also I started off web development by learning the basics as well as a few intermediate aspects of all the three above mentioned languages and now Im looking to design/clone scripts I've come across to get better at them. Is this approach correct?
Thanks.
The order doesn't really matter.
Deal with the data and the UI separately (following the MVC pattern will help you do this), and modify each of them as needed.
You'll probably find that the optimal solution is to work on a feature at a time rather then doing the backend of all features and then the frontend of all features (or vice versa).
Within each feature, start on whichever end you have the strongest vision of and let it inform your development of the other.
HTML->CSS->PHP. Start by focusing on writing a valid, well-coded HTML page and learn to style it with CSS. After that, you can start to work with script.
Of course this is just my personal approach. Have the skeleton first and then you'll know where to put what
Learning to develop for the web is not a straight path; it’s really more like a cycle.
You will learn things (e.g. HTML and CSS), maybe to the point where you’ll be fairly confident that you master those technologies, then you will learn new things (maybe PHP), then you’ll look back at what you’ve done, and you’ll start realizing that you still don’t know much, because things evolve, and your perspective on those matters evolve as well, as you discover new techniques.
There is no absolute truth. My advice is to give yourself a goal, and try reaching it. Don’t worry about making mistakes. Don’t worry about what language or technology you pick. Just start small, because there is a lot to learn. Focus on understanding how the web works, how technologies interact. Learn about best practices, and always ask yourself how to make things better.
HTML and CSS of course.
PHP is just supporting feature.
You can have a perfect site without PHP or any other server-side programming language at all, but you cannot have a site without HTML and CSS as it's part.

a two or three-pane hierarchical list app with several scrollable areas - what language handles that well?

My question is in bold (see below) but I hope to provide some insight into my issues just in case it helps anyone who could answer my question.
I'm not sure which framework or language is the best for this job but I'd like to make an app that has two or three independently scrollable areas, similar to a 2 column template, that are all dynamically updated. Users can populate each list separately as they go and yah know ... I really don't want the app to move slowly in any way. It needs to be jerky with almost knee-jerk reactions to input.
I've read some interesting things about speeds for each language that I'm considering (php and python - possibly java or ruby) and well, I can't really decide for myself since I don't yet know what's going on to create any slowdowns.
The app would be very simple requiring basic information on a user and letting the user basically grow their own database of lists themselves. Some fancy things would happen on the site per the users input or list updates like color changes or pictures and numbers that change .. maybe a graph or something.
All that said, I hope my question(s) is simple and answerable:
What is a useful programming language and/or framework for making and handling user created hierarchical lists that would ultimately grow in complexity? And how does the language differ from the others for tasks like ones as described in this post?
Just trying to find the right/best/effective tool for this particular job.
By the way, I'm new to programming but have covered the basic tutorials for python (plus some django) and php via youtube mostly - I've got a few books in the queue. be gentle
I don't think you will conclusively be able to decide on a language for your task based on clear evidence of it outperforming others for similar task.
There's too many variables to factor in.
My take is, a well built app, whatever the technology would perform as well as the other one with different technologies, but built well. The difference wouldn't be much to make a fuss over.
Some things that are of note:
The client side code, HTML, CSS and Javascript would need to be top notch. You need to
Combine that with a good host, a nicely constructed and tuned database, a good lean method of communication back and forth between client and server.
Use gzip, caching, minifying and combining scripts, stylesheets, make fewer http requestes,
Architect the application with performance in mind from the get go.
If you are new to programming then the language/framework will be the least of your problems. You tried a little Python and some PHP. Which language did you find easier to grasp? Whichever one that was, pick it and just start writing.
As you work on your project and become a better programmer you can revisit the language/framework debate (although, to be honest, the programmer influences the site performance more than the framework).

Is there a high-level language for the web?

Preamble
To build dynamic web-sites, we have to master at least four languages:
HTML for the structure of web pages
CSS for layout and design
JavaScript for interactivity
A language for business rules or dynamic driven data
In addition, there's SQL for persistent storage, Memcache for sessions and caching, APIs for the many different content management systems. We should also consider interacting with OpenID, Facebook, Twitter, OpenSocial in building a web application, for it to be interesting.
All in all, it's an utter mess!
If you take into account two objectives:
Teaching web development to kids
Staying productive as a team
Question
What high level systems exist that unify HTML + CSS + Javascript + (Insert High Level Language here, PHP preferred)?
Background
I am a software engineer with 15+ years of experience as project lead and developer with technologies like Broadvision, Autonomy, Enterprise Java, and Oracle.
During recent years, I have focused on the developing community websites, using Drupal or PHP frameworks such as CakePHP. I like web development and enjoy the impedance mismatch between the technologies involved. Still the inevitable conclusion I come to is there must be a better way.
I am the father of two sons (13 and 9), and while I don't want them to become programmers I would like them to comprehend computers as more than gaming machines. I like to motivate them to tinker a bit with web development to express themselves.
Whenever I show them bits and pieces, I would love for them to have a toolset that allows them to create "interesting" results in an hour or two on a Sunday afternoon.
GWT goes someway towards being a high level toolkit, letting you write Java to produce Javascript.
"Links is a new programming language designed to make web programming easier. . . Links eases the impedance mismatch problem by providing a single language for all three tiers. The system generates code for each tier; for instance, translating some code into Javascript for the browser, some into a bytecode for the server, and some into SQL for the database."
At first I wasn't going to post this, since it's a research project, not a production system; but all these answers saying "that's how it is, deal with it" begged for a counterexample.
Web programming is an inherently multi-discipline craft.
The primary reason for this is because of seperation of concerns...the reason that HTML and CSS and JavaScript, SQL, etc, are not mashed together in one language is because they each have seperate goals, caveats, pitfalls, and strengths.
Can you imagine trying to debug a site that has SQL, CSS, JavaScript and PHP code mixed together in the same source files? You may have already had the misfortune of doing so. Sadly, there are literally thousands of sites written like this, and it is a complete nightmare trying to debug or add to such messy amalgamations of presentation, data, and structure.
All in all, an utter mess! How is one
supposed to teach web development to
kids?
I think the most important thing is teaching the fundamentals of programming and making them stick. Variables, logic, pointers, memory management, algorithms, data structures, etc.
When you have the fundamentals of programming, it's easy to work in multipe languages, pick up new ones, and easy to change with the times. This is an invaluable skill for something as constantly-evolving and trend-based as web programming.
In my opinion people new to programming should be started at lower level languages, like C for example. People should be tought the intrinsic, fundamental concepts of programming and should gain knowledge of what is going on behind the scenes before even being shown a higher level language like PHP or Python.
I think that this attitude towards teaching programming will have the effect of breeding better web developers as well as providing a barrier of entry that will weed out people that don't have the interest or intelligence. I think the result of this type of attitude will be better developers, better software, and ultimately more powerful languages and tools.
How is one supposed to teach web development to kids?
An army of kids in web development is what has degraded our profession since now just about anyone calls himself a programmer while it's getting harder and harder for us to get distanced from them and get decent pay.
Many languages and technologies to master? It's a good thing. Let there be some entry barrier to join the ranks of developers.
ADDED: By following comments I can see I have not made myself entirely clear. I say nothing about the age, be it 10, 30, 50 or 80. It's all about attitude. Whether a person understands and accepts the fact that there is much more to the profession than moving controls with a mouse in some designer or CMS. There is a lot of knowledge to be gained, including basics of CS, algorithms, data structures, databases, architecture, extensibility, maintenance, performance, scalability, usability, marketing and much more that belong to the workshop of a professional software developer. I a person is ignorant of those and doesn't make a move to educate themselves and strive to become more and more proficient, they do not belong to the profession. And let this opinion be biased.
The closest I think you'll get is .NET. There are many frameworks for many languages, but none that I know of that handle absolutely everything. Beside that you must not attempt to convince children that programming is a walk in the park. It's a difficult career, that requires a lot of study and keeping-up. We work with technologies that are here today, and gone tomorrow.
If you think about it, programming isn't any different than carpentry, or aeronautics. Just about any profession you chose will require you to learn a lot of different things to be better at what you do.
How are you supposed to teach web development to kids? Wow, that's a thorny one. How does one go about teaching them surgery, or intellectual property law, or civil engineering? Or for that matter auto mechanics, or plumbing, or general contracting?
Have you thought about popping in a Sesame Street tape?
Elmo doesn't like it when you trivialize his profession.
Software industry is suffering from unqualified individuals doing nothing but creating poor quality products and at the same time distancing this profession from becoming a true engineering discipline. This isn't something to get certified on. For the love of god, don't 'teach' anyone software development. Explain to them that making great software only comes out as a result of years of experience and wealth of knowledge of past and current technologies. The worst you can do is introduce yet another half-baked developer creating work for others working with them. Tell them to get educated. I know this isn't the answer you probably wanted to hear, but I wanted this to be read.
I think the problem with web development is that it was not originally designed for what it is used today. We build rich client applications inside a browser with HTML+CSS+JavaScript plus whatever serverside technology generates it. Yes, it works, but it's a pain, especially with those annoying browser incompatibilites. The existence of Flash and Silverlight proves this. They let you build your app with one single technology, still inside the browser. The downsides of needing a plugin for your content is obvious though.
The languages are the least of your worries. It's the problem domain that they work with that is complex. Using different languages actually makes things more manageable because a) It makes the boundaries explicit and b) the languages can be optimised for the domain.
Programming (PHP/JS) and document format (HTML/CSS) are 2 different things.
Learning to program in PHP and JS at the same time will also be difficult.
You should focus on HTML and JS on the client at start. You could then let them program javascript on the server as well. This will make it only one programming language, and focus on HTML over CSS to start with.
Once they've learned the basics of JS and HTML, you can teach them a more widely used server side programming language (like PHP, Ruby, etc) and CSS.
Django can take you part of the way through its cleanness. It is focused around productivity. Teaching is not easier than any other language/framework, but look at it this way: when taught this tool, your students are well equipped in their knowledge of how easy it should be. They will never accept Java servelets or similar nightmares after having learnt Django.
Check out Opa: http://opalang.org/
This is an up and coming web development technology. It looks quite promising. I have done a lot of web development over the past couple years and if I had to make a prediction which up and new framework/language/technology is going to be the primary way websites are developed in ~5-10 years I would say it will be Opa.
The documentation is great, the community is great, the tutorials and responsiveness to questions asked of the team working on the project is excellent. Overall they seem to have an attention to detail in regards to developing this new framework that seems to be unmatched.
Many technologies to master is not a good thing. We need a Visual Basic for the web, no matter what the elitists say.
You need different languages for different purposes. In most web applications there's actually quite a bit going on, so you need the different languages and solutions.
If the goal is to unify on a single language, you can do that. You can use Javascript on the server, and then build the pages using document.createElement() and apply styles to them directly to the styles property. And on the server, store your data directly in files with Javascript.
Obviously this wouldn't work out that well. HTML is not perfect, but there is a reason it is so ubiquitous-- it does what it does simply and well. CSS is both convoluted and too simplistic, but the underlying idea of defining overrideable rules to express your design is sound. And SQL may be a pain to understand at times, but expressing database queries this way is expressive and actually works pretty well.
That being said, I'm not saying there is or should be one architecture. There shouldn't be. Each project should use an architecture in line with its requirements.
On your next project try to simplify: do you really need a database? Can you combine the view layers to simplify, either using something like GWT, Applets, Flash or .NET? Do you really need to serve up your content in a browser (which introduces CSS, HTML and Javascript complexities), or can you just write an application?
I think your approach might need to be rethought. Take this for what it is, my opinion, but I would think this ordering might work better.
Top Priorities: (no particular order)
Develop problem solving skills
Be productive as a team
Next:
Basic Programming skills (PHP, Python, etc)
After they know how to solve problems as individuals and as a team they can move onto specifics such as:
Client/Server model
Markup (HTML, XHTML, XML, etc)
Styling (CSS)
Client-side scripting (JavaScript / jQuery)
Server-side scripting (PHP, Ruby, etc)
Build up their knowledge of what's involved piece by piece rather than jumping into the deep end off the bat - they'll be quickly overwhelmed.
At this point you can start to introduce things like file I/O and databases.
This will give them a fairly comprehensive skill-set. From here they can really start learning.
In addition, one may have to deal with SQL for persistent storage, Memcache for sessions and caching, APIs of content management systems, OpenID, Facebook, Twitter, OpenSocial etc. to build anything interesting.
These are whole topics unto themselves, you can't bite them off all in one chunk. Especially if you're taking these people from 0. Before you can build something interesting you have to learn to build something mundane.
HTML5 will probably be more in the vein of what you're looking rather than Flash or Silverlight but it's not quite here yet...Though support is building.
Baby steps, Olav - if this were The Matrix you could download all that info in one shot but we're not there...yet ;-)
For the moment, and near future, web development is the synergy of many different technologies working together to deliver an interesting user experience.
Well, that's my 2 cents
The multi disciplinary nature of web development is one of the things that makes it a joy to work in, especially in a team environment.
To work well as a team, you naturally come together with a group of people with a range of expertise, from UI/graphics people down to DBAs and sys admins. Even within a single layer of the group (for example back end programmers) each person generally specialises in a different set, for example some people may have more experience up towards UI, others down towards data.
I would take this variety any day, compared to working in a room of 10 java programmers all working on some middleware application.
If you simply want to teach them to write dynamic websites, set them going through the HTML tutorial on w3schools.com and once they're done, find yourself a decent looking stylesheet that they can include and set them going with PHP. That'll get them up and running as a hobby, and if they want to do more, they can start piecing together extra knowledge, like CSS and JavaScript.
Ruby on Rails goes quite a way towards unifying all of those, but for CSS it leaves you out in the cold (though there are probably a few frameworks for RoR that make CSS obsolete, but then you have another markup language, I think), and you still need Javascript (though it does write a lot of Javascript for you, and all DB code).
On the other hand, about your kids: programming is for programmers. On a Sunday afternoon to put something together in a few hours, you would need to know a framework, and buy some plugins, and get everything up and moving without much work. Something like Drupal or Joomla, where they sell templates (for Joomla you can buy packs of hundreds) and plugins to do all kinds of things. And when that fails, your kids should probably know how to go on ODesk and drop $100 to get something done on your framework. Learning to programming is good if you want to be a programmer. Otherwise, it's best to learn what you need to hire good programmers or buy good predone components, and have the cash to do it.
Last point about the kids: let them play video games. That is the best training that they can get for whatever the future holds in store on the computer side. Video games let you investigate, play, and relax with the computer. Once you have that, learning HTML, CSS, Javascript, and some application stack is cake.
angularjs could be an option. it is inteded for single-page-applications and runs on a nodejs-stack and does some template-javascript "magic".
example (template/code):
It binds(via auto-generated-client-side-js) the value from the input-field to the the heading(h1).
If you type something to the input field, the text in the heading gets updated.
And you don't have to write the frontend-js.
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<h1>Hello {{yourName}}!</h1>

Categories