Building things (NEF & Freeformers workshop)
Last month we had a 1 day NEF workshop on the basics of web development and all things coding! The day was put on for us by an outside agency called Free:Formers (http://www.freeformers.com) and hosted at CCT Venues in Farringdon.
The purpose of the day was simple, to give a crash course in coding, how the web and websites work, look at mobile and responsive design, and have a go at developing a mobile app ourselves. This was a good idea and a great complement to our learning programme. While I’ve done plenty of web design previously myself, my knowledge is self-taught and basic in my opinion. It’s always good to hear it re-iterated and from a different source, plus I also wanted to learn more about mobile apps, which are an area I’ve not played in before.
Some of the objectives for the day:
- Understand how the web works
- Look at how the web has changed – trends
- What is out there
- Cut through the mass of information and get to the 10% I need
Summary of the day’s agenda:
- Build a basic web page for a (hypothetical) product launch event
- Make the launch page slick and mobile-ready
- Add ticket booking and commenting facilities through plug-ins, and look at ways to market and make the webpage viral
The day was good fun, the presenters were very energetic and a good laugh and I enjoyed learning more about apps and the different types (native versus hybrid) which are out there. The exercises we did made use of a couple of online facilities for making web publishing easy and simple for beginners (or developers alike), including JSBin.com, and also the Bootstrap framework. Both of which I’d not used before, previously I’ve done all my web design in basic HTML, CSS, a bit of PHP, and all on Adobe Dreamweaver.
Some of my (rather disjointed) notes below:
Using JSBin.com (open source software) – gives a great user interface for coding up web pages
Cool periodic table of HTML elements: http://www.joshduck.com/periodic-table.html
Showcase & discover creative web designs (Adobe): http://www.behance.net
“The web is made of boxes – sites are built up of an arrangement of boxes (HTML elements etc.) – only now they move!” (Responsive Mobile design)
On the FireFox Inspector tool – there is an awesome 3D visualisation of these ‘boxes’ – click on the 3D icon…
‘Bootstrap’ is a “mobile-first” front-end framework for faster and easier web development. Developed by Twitter and made OpenSource. Changes page layout to a 12-column format – http://www.getbootstrap.com
‘Facebook Developers’ >> APIs & Plug-ins: allows you to embed a Facebook commenting facility on your webpage
‘Parse’ database, and ‘Code Igniter’ are two good alternatives for a CMS framework
Plug-ins: Simple programmes / snippets which can give your site extra functionality or features
Useful plug-ins: Wufoo (Forms), Twitter (News), Tubular (Video Backgrounds), Facebook (Viral / social network), Unheap (Snippets), Pinterest (Pin & collect media), YouTube (Videos).
“Native Apps” – Written in same language as your smart phone > Result is a faster, slicker, more attractive experience/product > Takes time & cost to develop (more expensive than a Hybrid App)