Mobile UI css Designs - css

This sound off topic but I honestly need a way forward, I have googled for 3 hours now but still no end product, although it might be I am using the wrong key term.
I have seen mobile apps with powerful designs like the foursquare apps etc I am used to using JQM default themes but I want to learn and be more creative with my themes. I have being looking for a crash course or any tutorials online but I have so far failed to spot one.
Please, does anyone have a link to one? Please if you do, provide it for me and you will be saving me hours of searching the net.
I am not really a professional on css but I am trying.

I think what you are looking for is just inspiration. You can check out my pinterest feed.
http://www.pinterest.com/uidesignguide/

Related

Googled, and failed: Looking for a really good video on WordPress

I Hope you can understand my difficulty in finding a really good tutorial video for WordPress. Not sure why, but I'm having a hard time finding some basic stuff in WordPress; like how to create a custom template using CSS. I know CSS, and Html just fine. But instead of just googling every little thing I come across ( i would not follow the trend of asking for help for every little detail) I am looking for a complete and quality video tutorial in WordPress, not just for myself, but for my people.
Since beginning training in Java I've learned it's best to learn broader rather than getting hung up on details, which I can research later, and go back to with references. If I understand the whole concept then when I want to do something specific, I at least know where to start looking on my own. With WordPress I don't have a broad view, and that's what I'm aiming for. Please don't just Google search 'Good WordPress Tutorial Video' and post the first decent looking link. I am looking for recommendations through experience. If you know of a good Tutorial Video Series on WordPress please then consider replying. :) Thank you!
WordPress.org not in video but excellent documentation available!

CMS for posting code snippets

I'm looking to build a website for people to post code snippets. I work in an office where people are always writing quick scripts for computational biology, and we need a place for people to post their scripts for others to reference in the future. Is there a good CMS for this?
There are lots of sites like this out there - djangosnippets.org is a great model. I also really like Github Gists, but we'd prefer to have our own website, rather than everybody posting their own Gists.
As of now, my plan is to use drupal and define a "script" content type, with a little "Download" button. But this seems like a common enterprise problem - is there an easier way to do this?
Snipt.net is open source and quite slick.

Which framework/CMS to be used

i am a hobby programmer with very little experience in web programming, i devote an average f 20-30 hours a week, but with summers coming i have some free time to experiment and learn. could anyone please tell me, whether a framework like (Kohana/cakePHP/CI) should be used or directly a CMS tool like drupal/joomla should be used to make a website something like stackoverflow, on a smaller scale though.
Thanks for your help.
It depends on what you want to learn. Depends on your goal.
Is it webdevelopment you wish to learn? CSS? Webdesign? Programming? Building sites?
If your goal is the site itself, I would suggest to start high up in the stack: use a ready-to-go CMS, such as Drupal, that gets you going fast. And that offers a (production ready) result in a few hours. Your downside will be freedom: sure Drupal can do a lot, so can Wordpress. But unless you move down in the stack (develop addons and such) you will have to do with what you are offered: ready made components that work according to the authors wish. Possibly not your wish.
If your goal is to learn webdevelopment in a more general way, you should start lower down in the stack. Ruby on Rails or Django are probably the best options. Simply because of their vast resource on newbie documentation. You will learn programming along the way there too. Within a few days you will have built a site according to your exact wishes (obviously, your milage may vary, depending on the wishes:)).
If your goal is development of software, Python and Ruby are most probably a good start too: both are cross-platform, have good newbie resources and offer great documentation. Both are really well (opinions may differ on this) abstraction and object orientation. They will form you into a good programmer, simply by their nature.
There's a Stackoverflow clone called Qwench that is free.
(search stackoverflow for open source stackoverflow clones)
and one built on drupal http://drupal.org/project/arrayshift
Wordpress can act very much like Stackoverflow with a proper template. See here: http://p2theme.com/ (demo here: http://p2demo.wordpress.com/). Actually you can than start editing the theme (.php files) and make it behave more and more like Stackoverflow (with reputation system etc. which should be easy to implement). This way you won't be reinventing the wheel and have a good headstart.
I personally use CodeIgniter and love it. I would recommend it to any novice looking to further their knowledge of object oriented programming, and any veterans looking to get their projects off the ground quicker. I am not going to go into great detail here, because I know Kohana and CakePHP are similar, and its mostly opinion. CI does have great documentation though.
I think learning the most common CMS is going to be hugely beneficial to you, tons of sites and companies use WP/Drupal/Joomla/Etc and it really can't hurt to understand them. These projects are very large, so you don't necessarily need to know their internal operations 100%, but you should know enough to be able to install, customize and get a site up and running fairly quickly.
Everyone has their favorites, but I invite you to try them all and see what moves you. It will NEVER hurt to learn something and not use it, especially with some extra time.
There are times to use a packaged CMS and hopefully be able to theme/customize it to what you need quickly...then there are times you will want to code a special case by hand using a framework.
Just understand the depth of the project you want to undertake, because starting from scratch is fun and rewarding, but once you get neck deep in code and get stuck its easy to lose motivation all together.
I would suggest learning the basics of HTML before diving in to using a content management system. The importance of understanding the basic building blocks of websites can't be overstated.
There are loads of resources online to learning about HTML - once you've got some experience with that, you can look at CSS, Javascript, and server-side scripting languages. Knowing the basics will help with using any content management system.
Joomla / Drupal are a good place to start with content management systems, as is Wordpress, but you'd be much better off learning how it works underneath (at least to the most basic extent) before diving in to anything else.
If you're already a programmer you won't find it too hard, but it's definitely worth doing.

What are the best sites to showcase my development skills?

Besides stackoverflow, what are the best sites to showcase my development skills?
For those sites that are specific to a particular set of skills, I am a ASP.Net developer and I use c# primarily.
Edit:
Something to send potential employers, and something that they would find easily during a Google search of me.
If you have a blog, that would be an awesome resource for your future employers to know more about you and your work.
Also, if you're looking for a job, there are many cool sites where you can show not only your coding skills (TopCoder, GitHub) but also what you think (Twitter), and maybe what your teammates think about you (LinkedIn).
Again, with a blog you could keep all this links together in one place.
SourceForge
Codeproject
Codeplex
There are many others as well.
A web page, of course. get a github account. Pick up silverlight and make a cool game perhaps?
Perhaps you may publish some of your projects in www.codeproject.com. If you have chosen a right project I think it can show your talent
Next time you take on a project that you don't mind being public, document your way through the project on a blog. It would give employers a chance to see your work patterns.
Also, win a couple TopCoder competitions. That might help
http://www.planetsourcecode.com used to be great but when I looked at it just now it seems like it has gone to the dogs.
http://www.codeproject.com is pretty poorly organised (in terms of site design) but if you want to draw attention to yourself it's pretty easy to find topics on there which aren't covered and could use a tutorial/example.
Consider contributing to existing established open-source projects on sites like SourceForge and CodePlex rather than starting your own. One which comes to mind that I looked at recently is http://anmar.eu.org/projects/sharpwebmail/ - it's a great project but sorely in need of a visual overhaul, which means more than just some updated JPEGs. Oxite was falling behind its roadmap targets from memory if you want another example of a good project to contribute to.
what about publishing a good nice opensource 'product' at google code, freshmeat or sourceforge?

Free tools to speed up web development [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
As a little side project, I am starting to build a new website for a certain organization I am affiliated to, which current site is simply outdated.
I am regularly a Java developer, and last time I really did some web development was back in the late 90s, when <p> was still more popular than <div> and Javascript was cutting-edge technology (JQuery is for lazy bums these days :) ).
Anyway, I feel really outdated. The website basically is going to be:
Django based
mostly serve static information pages
it will have a dynamic news and updates page (based on Django admin capabilites)
and some basic apps I'll develop myself (polls, small registration app, etc...)
My problem is designing the whole thing. I found some nice web-based CSS layout generators that got me going, but I still feel I'm wasting my time smoothing out the CSS files and aligning <div>s.
Are there any tools - the simpler and faster, the better - that you recommend I can use to speed up the design part of the site so I can concentrate on the real work?
I don't need anything fancy, just a nice looking layout and design that I can tweak a bit so the site will look presentable.
I second Brandon's suggestion to use a CSS framework. It won't give you 100% freedom to design anything you like, but it can speed up your design process greatly and free up your hands to do the coding you really want.
Suggestions Updated July 2013:
Twitter Bootstrap http://twitter.github.io/bootstrap/ - complete grid, typo, UI widget prototyping framework
ZURB Foundation http://foundation.zurb.com/ - responsive grid, type, UI widget prototyping framework (similar in scope to Twitter Bootstrap, but feels 'cleaner' in some ways)
960 http://960.gs/ - grid layout system
Tripoli http://devkick.com/lab/tripoli/ - really good typography, but no grid system
YUI Grids http://developer.yahoo.com/yui/grids/ - very customizable (to the point of overkill) grid system
Blueprint http://www.blueprintcss.org/ - grid system and basic typography
BlueTrip http://www.bluetrip.org - a hybrid system, mixing the best of the Blueprint grid with the best of the Tripoli typography
I won't lie to you. This website isn't the best place to go if you're looking for reliable Web Design advice. Stack Overflow is a programming community and programmers rarely know anything about design. If you want to get some real advice then I would strongly recommend the main Web Design/Development forums on the Internet, especially SitePoint.
That being said, as a former freelance Web Designer/Developer I'll offer my input on the issue. Not that you should value it, of course. After all, this is a programming website.
NEVER EVER SAY CSS LAYOUT GENERATOR EVER AGAIN! If you're going to seriously get into designing web pages then you need to learn semantic XHTML and CSS first. Whilst many people tout W3Schools as the definitive resource I see it as a programmers answer (i.e. not very good) and would prefer that you read up on the subject using...Google. There are countless examples of great websites to pick up the basics of Web Design/Development that Google is probably the best website for the job. Also, with a plethora of new websites offering this information you know it's going to be more improved than W3Schools. You'll seriously want to get clued-up on writing your design because it'll be much harder to fix things later on in the project.
If you're going to be designing web pages it would be a good idea to learn what actually makes a good design. Check out CSS Vault for a fantastic resource of some of the best-designed web pages around, of course with all the source code intact so you can have a play around with their code and see how they've managed some of the wonderful effects they've produced. I've learnt more than a thing or two from websites that have been featured on CSS Vault. On top of that you should read up on Web Design from the big Web Design/Development sites. Two of my favourites are SitePoint and A List Apart, two names that you'll near time and time again when you hear people talk about resources. Browse those websites, check their forums, see what REAL Web Designers/Developers are using, not what programmers are using.
On the subject of CSS Frameworks; they do help! The problem with using them is that you'll often spend so much time looking for a worthwhile framework that you could have finished most of the CSS for your website yourself. You'll either love them or hate them, but many people will say that they're not necessary.
Once you've got your mind set on what a good design looks like and you've got the resources you need to make something of value I suggest that you get to work! In reality when you're designing a web page all you really need is a text editor with a save function, an image manipulation program, a browser window and FireBug. An IDE helps a lot of people, but if you do use one then you'll definitely want to work in its text mode. I use NotePad++ or Emacs exclusively but a lot of people like to use Aptana Studio, so it may be worth a look.
When you're getting to actually building the code behind your website you can't really go much worse than your favourite IDE/Text Editor and a source control tool. As a Java programmer you're better suited to talk about programming so I won't lecture you on a subject you already know.
In the end, Web Design is going to take time and many of the tools that we choose to use that we claim will "save time" save very little in reality. If you're not a design guru then it will take you a substantial amount of time to create a great-looking website. It's a fact of life. Call me old-fashioned (a funny word coming from a 21 year old) but I still think that the quickest way is to sketch a design out on a piece of paper (a image program if really necessary) and to just get out there and make the damn thing! Again, I'll have to take this hunting for the silver bullet mentality as a programmers trait, one that really won't help that much when designing, because designing a web page is vastly different to writing a Java program.
In short, ignore everything you read here, read what REAL designers are doing and just make the damn thing!
There's one piece of advice that saves more time than any other when it comes to rapid development of CSS styled sites and that's KEEP IT SIMPLE
Use an attractive simple layout that doesn't require pixel perfection and that can 'gracefully' degrade in less compliant browsers (IE6). Minimise the amount of CSS and fix the basic bugs mentioned by meouw above. Then get on an concentrate on content and functionality...the real work
In my previous employment I created dozens of templates for websites.
The most useful too I ever discovered is the Firefox Web Developer Toolbar.
It has a wealth of small useful tools. My favorite feature is the ability to edit the CSS and see the results in real-time. This saves on the whole edit - upload - refresh cycle. Watch out for ie CSS inconsistencies though!
Off the top of my head, these are the most important gotchas.
double margin bug [google: double margin bug]
incorrect (but more intuitive) box model [google: box model]
incorrect (but more intuitive) float clearing [google: clearfix]
FireBug is another really usefull Firefox plugin for more in depth analysis.
I've always found Open Source Web Design to be a good resource when looking to get started trying to design something.
- http://patterntap.com/
- http://www.dotemplate.com/ (interesting concept of customizing template)
- http://www.templatemonster.com/
- http://www.freelayouts.com/websites/html-templates
- http://www.templateyes.com/
No idea what the site is going to be, but have you thought of using a pre-build CMS like Drupal, Joomla etc etc.? You can then tweak templates etc, rather than worrying about making it from scratch.
This question is pretty old, but since we're in 2012, it's only proper that I answer my own question with the exact thing I was looking for, back in 2009.
Twitter Bootstrap
Have you looked into any CSS frameworks? If you are competent enough with CSS something like a framework could help speed things up.
Don't forget firebug :) if you're worried about tweaking the design it's really great. With the inspect feature allowing you to real-time edit the CSS of your page.
https://addons.mozilla.org/en-US/firefox/addon/1843
I second Jens Roland's list of CSS frameworks.
But I would also suggest you have a look at websites such as Smashing Magazine. You might find this article of interest, amongst a lot of others. They tend to do a lot of nice and long mash-ups for the web developers that will at least give you inspiration if not a direct solution.
A colleague of mine has been trying to convince me all week that Dreamweaver, 5 years after I was last forced to use it at gunpoint, is actually now worthwhile for knocking up a design quickly and painlessly, and is also now competent at producing the HTML for that design.
I refuse to invest the 10 minutes it would take to find out based on my previous experiences of it, but you might like to give the demo a quick run around the block :)
I'd recommend finding a CMS package, since you're using Django, look into django-cms. It has TinyMCE and Markdown Support so updating your pages should be easy. Also django-cms integrates well with the Django admin interface.
A piece of paper to sketch your design
A text editor (preferably set up to save directly to a development server local or otherwise) to write up the initial HTML/CSS
FireBug/IEDeveloperToolbar to inspect each element that looks wrong and edit its CSS directly in the browser until it looks fine, followed by commits with the text editor
If you're doing any JavaScript development, use an advanced editor that highlights errors and warnings as you type. This kind of functionality has until recently been the province of static language editors only, but the free NetBeans 6 achieves this amazing feat. Traditionally, you first discovered JavaScript typos and simple bugs when first loading the parent page into a browser. The speed-up you get from being able to short-cut these iterations is profound.
NetBeans 6 also highlights CSS errors and is a more than capable editor for most all languages a web developer is likely to use these days.
You can also use www.zbugs.com - it will help you speed up a process of compressing and gzipping your CSS and Javascript files

Resources