Difference between revisions of "Tools"

From UWE Digital Media Wiki
Jump to: navigation, search
m (Design & visualisation)
Line 35: Line 35:
     http://placekitten.com/ An image placeholder for your mocks up, but with kittens! MOAR KITTEHS
     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!
     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===
===Editors & development or testing software===

Latest revision as of 17:13, 1 December 2017

What is on this page?

Throughout the Digital Media 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 hardware and Devices, Connectivity and Deployment Considerations pages


   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

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


   WordPress Tutorials


   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

Tutorial Sites

   CSS Tricks handy site with loads of code snippets, videos etc. – this guy is good. https://css-tricks.com/
   Nettuts+ is a blog-style site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites covering HTML, CSS, Javascript, CMS’s, PHP and Ruby on Rails. http://tutsplus.com/
   psdtuts+ um, kinda like nettuts but for Photoshop.
   Treehouse simply great video resource, learn web design (and app development) the easy way through watching video tutorials, taking quizzes, code challenges, and earning badges. Fun, interactive and cheap student plans available. Only $9 a month. https://teamtreehouse.com/
the annual Digital Media php-bootcamp


   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/

UWE Stuff

   Timetable Self Help: Check lecture times and timetable help. http://cetts.uwe.ac.uk/teachingTTindex.asp

Web Design Reference

   Dev Docs: CSS, HTML, Javascript, DOM, jQuery, PHP and Python documentation search tool. http://devdocs.io/
   A great reference site, w3schools is the good point of call for learning web technologies. http://www.w3schools.com/
   Use this site, HTML5 please, if you want to use any HTML5 or CSS3 as it tells you which new features are in use and how to handle those features in older browsers. http://html5please.com/
   UX Checklist on GitHub https://uxchecklist.github.io/

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.