Jules of Nature
occasionally subtle
Stranger Things
Today's Document
if i look back, i am lost
2025 on Tumblr: Trends That Defined the Year
$LAYYYTER
trying on a metaphor
No title available
No title available
Product Placement
❣ Chile in a Photography ❣
we're not kids anymore.
Janaina Medeiros
Keni
No title available
AnasAbdin
d e v o n
will byers stan first human second
Alisa U Zemlji Chuda
seen from United Kingdom
seen from Malaysia
seen from United States
seen from United States
seen from Türkiye
seen from United States
seen from Germany
seen from United Kingdom
seen from Singapore
seen from Argentina
seen from United Kingdom
seen from Germany
seen from United States
seen from Germany
seen from Singapore
seen from France
seen from Canada
seen from Germany
seen from United States
seen from United States
@web-design-create-blog
Assessment timetable
Date: 6 June
Location: Peter Karmel 2.28 (Our normal computer lab)
Timetable
15 minute blocks
10:15 - Sirja 10:30 - Estelle 10:45 - Elijah 11:00 - Break 11:15 - Sunita 11:30 - Frances 11:45 - Sanne 12:00 - Break 12:15 - Siti 12:30 - Amy 12:45 - Xiaochi
Assessment panel: Alex Lewis and Rohan Nicol
Not strictly web design but related to digital information, infographics are a fun way to visualise complex infomation. Have a look at this entertaining list from 2013, hopefully informative and enjoyable!
Web-Design-Create 2 - Semester 2 2014
Hi Everyone,
Make sure you are in class tomorrow for any final questions before assessment next week. Also at around 12:30, Yasmin, who will be taking the class next semester, will be coming around to visit. It would be really great if she could meet you all and see what you are working on!
See you in class.
Alex
Picture and text together on a Tumblr page
Have a look at this page here: Picture and text
What we have is an image floated to the right and enough space added around it so the text doesn't sit too close.
Here is the code for the page:
<p><img src="https://64.media.tumblr.com/790c440b564fd487f5d0b7db58c1f987/tumblr_inline_n609foqRK71rgvefx.jpg" style="float: right; margin-left: 20px; margin-bottom: 20px;" /></p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
The important bit is this: style="float: right; margin-left: 20px; margin-bottom: 20px;"
Once you have added the image via the camera button in the page text editor, add that snippet to the <img> tag.
Google Maps API
The main Google Maps Developer page has all the main information you need to use the API (Application Programming Interface)
We are interested in the Web section of the Maps developer documentation in order to create a dynamic map on our site. As an alternative, the Google Maps Image API provides simple documentation for embedding a static image from maps to your site.
On the web section there are two options for using the Google Maps API:
JavaScript API v3: The most customisable version but also the more complex.
Embed API: The easier embed option, not unlike when you share the map from within Google maps.
The API is obtained at the Google API Console. Here you need to be signed in with a Google account and create a new project that is going to call on Google maps.
Get specific coordinates from regular Google Maps. Right click and select "What's here?" and you can get the exact location of your cursor.
Theming the map is the fun part! Try Snazzy Maps to get user designed style code for your map. Use this Styled Map Wizard to design your own. These 3rd party sources give you style code that you add into to your API code.
For a complete beginner, Snazzy maps examples are often easier to follow than the Google Maps API documentation examples.
There is a great tutorial on putting it all together at this blog post here: Google Maps API v3 tutorial – how to make a simple custom map
Basic trends and do's and don'ts of social media from a business/art perspective. Short post, have a look!
Last exercises for the semester
Attempting some of these tasks in the last few weeks will round out the semester:
Save your large portrait image from the photoshoot as a series of small images for web. Try: 100px in the largest dimension, 200px and 300px, a colour image and a black and white version.
Automate the resizing of your work images through a batch process.
Attempt to "deep etch" or cut the background out from an image. Add the shadow back in if you need to. Only post if you are totally satisfied.
Embed at least one piece of simple content onto a page. e.g. a YouTube or Vimeo video
Add at least one of social buttons to your blog. e.g. Facebook like button, Twitter tweet button, Pinterest pin-it button, post to Tumblr button etc
Add at least one social media widget, e.g. Pinterest board, Tweet feed, Twitter follow button, Facebook follow button.
Attempt to call the Google maps API and embed a custom map on a page (advanced)
Attempt another API project like Vimeo channels or Twitter twitterfeed. Find our more on the developer pages for the service.
Some things to think about for assessment...
Remember we are assessing you on your professional website and blog, make sure each one looks as professional as possible.
For the purposes of the assessment, try and discuss the work you have completed in the semester in relation to outcomes of the course and also the context of your discipline.
Make sure you have all the basics done. e.g. all the images are labeled and credited, links are not clunky urls, the theming of your site or blog is logical (links are clearly underlined and post load in a way that is expected), using tags where appropriate, you have your own avatar image on Tumblr, the pages have proper titles and headings, link to your blog from your website and vice versa.
Be prepared to discuss the role of the blog and the website in your practice. How has it helped you to organise or present ideas? What future scope do you see for your online presence?
Be prepared to explain your practice in a very concise and easy to understand way. Although we are not assessing you on your major works themselves, we are interested in the presentation of your practice online as a whole, being able to communicate what it is you do will give the website and blog context.
Make sure you present the aspects of the site that you really want us to see. This might include particular posts, special additions to the site or blog, problems you have overcome in theming or content management, number of visitors or followers. It is in your best interest to direct us to important parts of the site.
Pro tip: memorise or have written down the urls of your blog and website. That way you can rock up to assessment and type it straight into the browser without having to mess around logging into Tumblr. Your online work is by nature public facing so show us how it looks from that end. Logging in is always there if you need it.
Email using your own domain
We have mentioned that it is possible to create an email address using your own domain (for example [email protected]) and then use a popular mail client like Google's gmail. This was made a bit harder and more expensive recently with Microsoft announcing that it will end creating custom domain email addresses on it's free Outlook service. This means that you would have to pay for its Office 365 service or go and pay at Google Apps for Business for the gmail equivalent.
This is an alternative to the email client you might be able to get with your domain name hosting, often though this is a mediocre, underdeveloped and an overpriced extra.The Google and Microsoft option provides access to a range of other products as well as a slick email client at a price that isn't too bad, especially if you are running your practice as a business and making it look professional (which is all of you!).
Zoho mail is being touted as one of the alternatives to the big companies but there could be other options. Watch how this space develops!
Assessment: 6 June
Hi Web-Design-Create class,
I can confirm that the assessment for first semester will be 6 June. I will prepare a timetable next week.
Date: 6 June
Location: Peter Karmel 2.28 (Our normal computer lab)
Timetable to be confirmed. 15 minute blocks of assessments from 10am.
Assessment panel: Alex Lewis and Rohan Nicol
Contrast checker
When designing the colour scheme for your site you need to keep in mind the readability of the text on a background. This is another example of accessibility in websites.
Try running colours you have chosen through one of these contrast checkers:
Snook contrast checker
WCAG contrast checker (Firefox add on)
Embedding content and using developer pages
This week we looked at embedding content on your blog or website. This ranges from the simple YouTube embed to using the more sophisticated like and share buttons of the social networks.
Embedding content can be a great way of connecting with social networks and making your content easily shared by your viewers that in turn expands your reach. It is also a great way to present other people's content to make your point without a user leaving your site or hosting your own content in one place and having it appear in multiple places, also expanding your reach.
Below is a list of developer pages provided by these companies that you should get familiar with.
Facebook developers (Like, share and follow widgets will be most useful)
Twitter developers (Look out for the new Twitter cards, also shows you how to add the tweet or follow button)
Tumblr buttons
Pinterest pin it button
Vimeo widgets
Vimeo developers (for using the API)
YouTube developers (also for using the API)
And many more! Look for "developers" at the bottom of a main page or in a sub-menu on a social website.
For Vimeo and YouTube embeds, go to the specific video and look for the share buttons. Find the embed option and copy that code.
You should test as many of these as possible on your blog and website in appropriate contexts. You should implement at least one.
Photos are available
The photos from the documentation photo shoot with Hardy are available now. Log into Wattle and there is link to a Google Drive folder where you can download and view the images. These will be available until the end of semester.
There is a high res and low res version. They are titled the same so just be aware not to overwrite them.The low res ones should already be a good size for your blog or website.
If you're designing your CSS on your site you might consider this scale of responsive type for a responsive page. Worth a read to understand some of the issues
Achievable techniques for reducing a file size of an image. Often pretty small gains but worth knowing that they exist.
**Updated for 2013 Here are some free search engine optimisation tips for you to create a successful site. I deliberately steered clear of things that might be a bit grey, as what is grey today is often black hat tomorrow, as far as Google is concerned. What is SEO? There are a lot of definitions …
Detailed blog post about SEO, fairly easy to understand with basic web design knowledge.
Diagrams made easy.
Handy app for drawing up a sitemap of your new website. Also good for wireframes and layout diagrams. Educational accounts available too.