What is on this page?
Throughout the Creative Technology programme you will be asked to design or develop web components, websites, user interfaces, web applications and so on. Listed on this page are links to various tools to help you throughout your workflows that have been recommended by current and graduated Digital Media students.
See also the equipment and hardware and Devices, Connectivity and Deployment Considerations pages
- 1 Accessibility
- 2 Process & management
- 3 Design & visualisation
- 4 Editors & development or testing software
- 5 Academic writing and Reference Managers
- 6 FTP
- 7 Fonts & typography
- 8 Webserver software stacks
- 9 Code & learning
- 10 Code snippets etc
- 11 Tutorials
- 12 UWE PAL
- 13 Colour
- 14 Fonts
- 15 HTML5
- 16 Testing
- 17 Tutorial Sites
- 18 Magazines
- 19 UWE Stuff
- 20 Web Design Reference
- 21 Programming environments and frameworks
WAVE Web Accessibility Evaluation Tool Colour Contrast Checker http://webaim.org/resources/contrastchecker/ Webaim.org – Awesome website :) http://webaim.org/ WCAG 2.0 Checklist http://webaim.org/standards/wcag/checklist WAI http://www.w3.org/WAI/
Process & management
spideroak https://spideroak.com/ – encrypted cloud storage – cheaper than drop box, integrates with mac, windows, linux, android and iOS and is end to end encrypted – free 2Gb trial account too ! as recommended by Edward Snowden http://www.theguardian.com/technology/2014/jul/17/edward-snowden-dropbox-privacy-spideroak Evernote http://www.evernote.com/ Google http://www.google.com/ Browsershots http://www.browsershots.org/ – multi browser web page testing online www.basecamp.com http://www.basecamp.com/ project management and more online things http://culturedcode.com/things/ – great to do lists for mac and iOS
Design & visualisation
web usability checklist http://www.usereffect.com/download/checklist.pdf The difference between mockup, wireframe and prototype. http://designmodo.com/wireframing-prototyping-mockuping/ 10 wireframe examples http://blog.mockupbuilder.com/10-fresh-beautiful-examples-of-website-wireframes/ Mockflow: http://mockflow.com/samples/ a tool to make a clickthrough navigation of your wireframes (achtung! only allows to create 4 pages without payment) http://kuler.adobe.com Kuler is one of the better palette / colour tools on the web… http://colorschemedesigner.com/ Another pallette / colour scheming tool Mindmeister http://www.mindmeister.com/ for mindmapping Pencil for online wireframes http://placekitten.com/ An image placeholder for your mocks up, but with kittens! MOAR KITTEHS http://placehold.it/ Another image placeholder which has the size of the image in pixels.. on it! atom.io excellent text editor
Editors & development or testing software
Komodo Edit http://www.activestate.com/komodo-edit Firebug https://getfirebug.com/ debugging browser add on W3C Validator http://validator.w3.org/ The Web Developer Tool bar for Firefox is a useful bit of kit http://www.wirify.com is a bookmarklet that turns webpages into wireframe to see layout atom https://atom.io/ ATOM is a cross platform, open source, text editor notepad++ https://lab.github.com/courses learn github for source code control
Academic writing and Reference Managers
www.mendeley.com/ – Mendeley is a free reference manager and academic social network. Make your own fully-searchable library in seconds, cite as you write, and read and annotate your PDFs on any device.
Overleaf.com excellent browser/cloud based LaTeX soultion for academic writing. The easiest way to get into boosting your academic writing practice. Save pain in formatting and referencing !
Filezilla http://filezilla-project.org/ Cyberduck http://cyberduck.ch/ Fetch http://fetchsoftworks.com/
Fonts & typography
Font Squirrel http://www.fontsquirrel.com/ Font Face http://www.font-face.com/ http://www.typetester.org is an online application for comparison of fonts for screen. typewonder.com Helps you to test web fonts on any web site on the fly ! Enter a site url and preview fonts instantly !
Webserver software stacks
WAMP http://www.wampserver.com/en/ MAMP http://www.mamp.info/en/index.html XAMP http://www.apachefriends.org/en/xampp.html
Code & learning
Code Academy http://www.codecademy.com/ WP101.com http://www.wp101.com/ Lynda.com http://lynda.com/
Code snippets etc
HTML5Shiv https://github.com/aFarkas/html5shiv/ CSS reset http://cssreset.com/ Normalise CSS HTML5 Boilerplate https://html5boilerplate.com/ HTML5 Bootstrap http://getbootstrap.com/getting-started/ initializr bootstrap http://www.initializr.com/ 1140 Grid System
Learn more about PAL http://www1.uwe.ac.uk/students/studysupport/peerassistedlearning.aspx
Peer Assisted Learning – Students working collaboratively, sharing ideas, knowledge and learning together.
Colour Lovers an on-line community of colour lovers. Create and share palettes, patterns, and erm, colours! http://www.colourlovers.com/ Kuler Find complementary, contrasting and chromatic colours with Adobe’s Kuler colour tools. Kuler
dafont has loads of free and cheap fonts. http://www.dafont.com/ Font Squirrel is a site that not only provides free fonts, but also the means to include them in your website (using the awesome @font-face generator). https://www.fontsquirrel.com/ No need to embed fonts with Google Web Font’s one line of code will be enough to include Open Source fonts in your webpages. The League of Movable Type the most well-made, free & open-source, @font-face ready fonts. Typekit awesome font subscription service. So good, Adobe bought it! Urban Fonts more free fonts.
html-5-tutorial.com has “lessons for beginners in plain english”. There you go. http://www.html-5-tutorial.com/ Or if you’re feeling like getting wet, why not dive into html5? Includes some decent code examples. Chrome Experiments: Inspiration – what you can do with WebGL (hardware-accelerated 3D graphics). https://www.chromeexperiments.com/ Mozilla Dev. Network Demo Studio: Inspiration – Mozilla, (makers of Firefox) showcase HTML5 demos. http://mdn.beonex.com/en-US/demos/index.html
W3C Validator Invaluable resource – always validate your code before pulishing. Tells you where you’ve gone wrong. http://validator.w3.org/ http://responsive.victorcoulon.fr/ A bookmarklet that you can use on any webpage to see what it would look like on different sized screens – great for testing responsive designs
A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices. Also do a great series of mini-books. http://alistapart.com/ Future Publishing’s Creative Bloq is a network of Digital Media publications including computer arts and net magazine. http://www.creativebloq.com/ Smashing Magazine is a great site with articles on Coding, Design, Graphics, Mobile, UX and WordPress for professional Web designers and developers. https://www.smashingmagazine.com/ Web Designer: “Defining the Internet through beautiful design – they say”. Magazine comes with a CD of free resources. ACM Interactions Magazine ACM Interactions magazine is a mirror on the human-computer interaction and interaction design communities and beyond. http://interactions.acm.org/
Timetable Self Help: Check lecture times and timetable help. http://cetts.uwe.ac.uk/teachingTTindex.asp
Web Design Reference
Programming environments and frameworks
*Processing. https://processing.org/ Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. *OpenFrameworks http://openframeworks.cc/ openFrameworks is an open source toolkit designed for "creative coding". OpenFrameworks is written in C++ and built on top of OpenGL.