Section outline

  • Portfolio General

    Collapse all Expand all
    To be completed:
    Quizzes 3 100%
    Portfolio 900%
    Exam 100%
    Portfolio
    assessment:
    Blogger Portfolio,
    Edited and personalized themes with opacity.
    Edited header in two languages.
    Edited background tells a story about your career path.
    Extras on blog that confuse the focus are removed.
    2 images on every page with explanations.
    At least 8 topics of study.
    6 or more examples of code.
    2 posts explaining purpose of portfolio.
    At least 8 pages in menu bar.
    Complete all quizzes.
    Use of CSS.
    Bonus marks more than 8 pages.
    Bonus marks for certificates.
    Bonus marks for css animations.

    Portfolios


    The art of Self Discipline

    A good portfolio is a story.

    The story builds on your experiences and qualities.
    When you add information to your story do not add too much writing but images with explanations work well.

    Present your story with presentation techniques

    Consider your themes. Are they pleasant to look at.
    More importantly do they show your skills and ability to present information to the public.

    Images must be evidence of your qualities/character

    Every image is part of your story.
    The same as in your keynote presentation, images that are not your story weaken what you are saying or showing.

    All images must tell a positive story.

    Every image on your portfolio must tell a strong positive story.
    Images of you at a party are kept for facebook.
    Images of you in a swimming race show your abilities.

    Build a life long history of your qualities

    Pictures and pages that are added now create a history.
    A history is easy to show as evidence of a continuous striving for academic ability.

    The main focus of a portfolio is your academic qualities.

    90% of your portfolio pages should be showing your academic strong points and your ability to perform at many different tasks.

    Personal information is for your character.

    Photos like climbing mountains are better than playing games.
    Learning a musical instrument is better than singing karaoke.
    Reading a foreign language book is better than watching a movie.

    .

    .

    .

    .

    .

    .

    • Announcements Forum

    • Check List For Midterm Assessment
      Edited and personalized themes with opacity. Y/N
      Edited header in two languages. y/n
      Edited background. y/n
      Layout extras on blog that confuse the focus are removed. y/n
      2 images for every topic on every page with clear explanations. y/n
      At least 4 topics of study. y/n
      4 or more examples of code. y/n
      2 posts explaining purpose of portfolio. y/n
      At least 4 pages in menu bar. y/n
      Use of CSS containers y/n


  • Setting Up Blogger

    Setting Up Blogger


    The art of Self Discipline

    Web address

    Create a web address that includes your Thai name in English characters.

    Be careful! No trick or silly names.

    People start to judge you from the moment they see your web address.

    Heading

    If your name is short

    Use your full Thai name and English nickname

    If your name is long use one of your Thai names in Thai characters and your Englsih nickname.

    We want the search engines to be able to find you in at least two languages

    Select a simple theme

    The simple theme can be edited very easily.

    .

    .

    .

    .

    .

    .

  • Quiz | Submit | Exam

    Submits Quizzes Exams


    The art of Self Discipline

    Submits Quizzes Exams

    All quizzes must be done by all students

    .

    .

    .

  • Home Page Post Example

    Home page post.


    The art of Self Discipline

    Create focus points.

    Use colour, boxes, borders, lines and movement to create focus points.

    Remember movement is excellent to create a focus point but too much rapidly becomes annoying.

    If you use movement use it sparingly, be sure to make the focus area or point very special.

    Too many focus points means you do not have any focus points.

    Brett Wilkin

    This website is a portfolio of the skills I have learnt and those that I am learning



    Quote or something of interest to others

    Never follow best practice. Be the best practice for others to follow.

    .

    .

  • Assessment Rubric

    Assessment Rubric


    The art of Self Discipline

    Based on M3 Portfolio in Blogger and HTML coding for website design

    Theme *Creativity exceptions No attempt Standard blogger theme Changed to simple theme Simple theme with background to suit individual student theme with new background and transparent content section with appropriate widths
    0 points 70 points 80 points 90 points 100 points
    Header *Creativity exceptions No attempt Header does not have any relationship to student or portfolio Header is in one language Header is in two languages Header is in 2 languages and helps persons understand the blog and its purpose
    0 points 70 points 80 points 90 points 100 points
    Background *Creativity exceptions No attempt Background is a blogger background Background has been changed but does not help determine the student's personality Background suits student personality and shows what the student would like to be. Background tells a story about personality, future studies and fits blog theme
    0 points 70 points 80 points 90 points 100 points
    Extras that confuse the blog focus. No attempt extra boxes and layout information not removed Layout changes so no side panels. Extras not removed. Layout changed and most of the extras have been removed All extra panels and information removed so the focus is only on students content
    0 points 70 points 80 points 90 points 100 points
    Images with description relate to page topic. No attempt Some pages with no images. At least one image on all pages At least two images on all pages with explanation Average of more than 3 images on all pages with explanation
    0 points 70 points 120 points 140 points 150 points
    Subjects in Pages No attempt--Math, Science- Computer, Pub speak, English, Social, Chinese, Art, Scouts, Thai Subjects. 2 subjects being studied with some content. 3 to 4 subjects with content that is being studied. 5 to 7 subjects with content that is being studied. At least 8 subjects with content that is being studied.
    0 points 70 points 160 points 180 points 200 points
    HTML code No attempt One example of HTML coding 2 to 3 examples of HTML coding As previous plus one example of CSS 6 or more examples of coding.
    0 points 70 points 80 points 90 points 100 points
    2 Posts No attempt More than 4 boxes posts. ** * Move on if exceptional creativity that maintains blog focus is used 1 Post with quote or description of Blog. 1 post with quote and post with description of Blog in HTML boxes 1 post with well thought comments in 2 or 3 boxes that create a good focus point
    0 points 70 points 80 points 90 points 100 points
    Pages Gadget menu bar No attempt Menu bar added Menu bar added and at least 4 pages in bar Menu bar added and at least 6 pages in bar. At least 8 pages in the menu bar.
    0 points 70 points 80 points 90 points 100 points
    Bonus: Sketch Addon No special creativity shown Creative use of GIMP sketch addon used on background image.
    0 points 10 points
    Bonus: Appropriate CSS animations No special animations used to create stronger points of interest Animations have been used to create stronger points of interest on a page
    0 points 5 points

  • Your Story

    Your Story


    The art of Self Discipline

    A good portfolio is a story.

    The story has a beginning a middle and an end.

    The story: Front page subliminal messages.

    The background image of your portfolio should have a lot of subliminal messages.

    This should be chosen or created to show your skills at presentation and to prepare the viewer for the next lot of information.


    Like a good book the cover page is CRITICAL to getting a person to look further at the content.

    The menu shows the stories chapters

    When people enter your blog the menu should be easy to see and should contain words that people can read as excellent skills and experience.

    Each page has latest information at the top.

    The history or older information should be towards the bottom When people read your portfolio they see how you are now.

    When they see somthing that is interesting they can scroll down the page to see your historical EVIDENCE.

    .

    .

    .

    .

    .

    .

  • Present work to others

    Present


    The art of Self Discipline

    Create focus points.

    Use colour, boxes, borders, lines and movement to create focus points.

    Remember movement is excellent to create a focus point but too much rapidly becomes annoying.

    If you use movement use it sparingly, be sure to make the focus area or point very special.

    Too many focus points means you do not have any focus points.

    Focus points, boxes and colour

    Keep your theme subtle with softer colours so you can use colour to make a strong focus.

    If you love colour and are making an art theme portfolio don't forget the poster work from M1.

    Everything on a page should appear to the viewer in layers.
    Lesser information should be a little harder to see and the most important information should be easy to see and attract attention.

    Distractions

    Adding things to your blog that are not your story create distractions.

    Distractions move the viewers concentration away from your story.

    If you know that the most important viewer is a lover of dogs a faint image of a dog may become part of your story.

    Distractions can weaken and trivialise your story.

    .

    .

    .

    .

    .

    .

  • Present work to others

    Present


    The art of Self Discipline

    Create focus points.

    Use colour, boxes, borders, lines and movement to create focus points.

    Remember movement is excellent to create a focus point but too much rapidly becomes annoying.

    If you use movement use it sparingly, be sure to make the focus area or point very special.

    Too many focus points means you do not have any focus points.

    Focus points, boxes and colour

    Keep your theme subtle with softer colours so you can use colour to make a strong focus.

    If you love colour and are making an art theme portfolio don't forget the poster work from M1.

    Everything on a page should appear to the viewer in layers.
    Lesser information should be a little harder to see and the most important information should be easy to see and attract attention.

    Distractions

    Adding things to your blog that are not your story create distractions.

    Distractions move the viewers concentration away from your story.

    If you know that the most important viewer is a lover of dogs a faint image of a dog may become part of your story.

    Distractions can weaken and trivialise your story.

    .

    .

    .

    .

    .

    .

  • Your character

    Character


    The art of Self Discipline

    Show people the evidence

    Never say to people 'I am good'. Show them the evidence.

    You could say, 'I have some good success with this as you can see from my evidence here'.

    If you do not have evidence consider saying something like.

    'As you can see from my photos I have faced many challenges and this would be another challenge for me to apply myself to'.

    Who would you employ

    Who would you employ.

    What story do these pictures tell?

    Use pictures that show your personality as a good personality.

    To get an understanding of how people read pictures do the exercise 'The story pictures tell'H5P .

    Remember you are international students so need to know how other cultures look at pictures.

    .


    Brett Wilkin Profile

    My name is

    I live in

    I went to

    I am now at

    In the future I would like to go to ............ to study ..............

    I love studying

    My parents

    My pets

    I have travelled

    Sports I like or hobbies



    .

    <div style="background: rgba(204, 204, 204, 0.4); border-radius: 10px; border: 6px ridge blue; box-shadow: gray 10px 10px 1px; margin: auto; padding: 15px; width: 650px;"><span style="font-size: 48px; text-shadow: white 1px 1px 1px, blue 2px 2px 1px, red 3px 3px 1px;">Brett Wilkin Profile</span>

            <p>My name is</p>

            <p>I live in</p>

            <p>I went to</p>

            <p>I am now at</p>

            <p>In the future I would like to go to ............ to study ..............</p>

            <p>I love studying</p>

            <p>My parents</p>

            <p>My pets</p>

            <p>I have travelled</p>

            <p>Sports I like or hobbies</p>

            <p><br></p>

        </div>

    .

    .

  • Evidence

    Evidence


    The art of Self Discipline

    Don't say! - Show

    People do not believe your words, they want evidence.

    If you say you are good at maths your words are not strong. Show them evidence in the forms of pictures, certificates and scores.

    If you say you go rock climbing they will want to know where and how. Show them pictures.

    The best evidence is built up over time.

    Show you have a history of doing.

    Your evidence should show a balanced person.

    A balanced person is an active person who has a personal life and an academic life.

    Do not lie with evidence. In an interview you will be asked questions about your evidence and other topics not related to your portfolio.

    Your evidence must show your character. The type of person you are.

    .

    .

    .

    The best portfolios show

    .

    .

    .

  • HTML

    HTML coding


    The art of Self Discipline

    HTML

    Hyper Text Markup Language.

    The basic coding language that supports all websites

    CSS

    Cascading Style Sheets.

    These are how the themes for each part of your website are stored.

    Page

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html>

    Doctype, HTML and body are added by blogger automatically in these activities.

    Tags, Attributes and Elements

    A tag has two parts, Opening and Closing

    Inside the tag are attributes that tell the computer to change things like color border fonts etc.

    Some tags are empty tags or self closing. They do not have a seperate closing tag

    Closing tags and self-closing tags

    Normal tags are opening tags and must have a finishing point at a closing tag
    eg. <div> --- </div>

    A closing tag has a forward slash before the letters
    eg. </div>

    Self closing tags are now called empty tags.

    Self closing tags used to be written <br /> with the forward slash at the end of the containing brackets.

    The new version called empty tags are written <br> with no / (forward slash)

    The above example is a line break tag. another example is an image tag
      <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

    Containers

    An example of a div container in use

    <div style="background: yellow;">aaaaaaaaaa</div>

    Another example of a container is <body> (not needed for blogger)

    Examples of containers for use in blogger are
    <section></section>   
    <div></div>   
    <p></p>
    <span></span>

    Borders

    border: 2px solid yellow;  

    border: 2px dotted yellow;  

    border: 2px dashed yellow;  

    border: 2px double yellow;  

    border: 2px groove yellow;  

    border: 2px ridge yellow;  

    border: 2px inset yellow;  

    border: 2px outset yellow;  

    border: 2px outset yellow;   border-radius: 10px;

    Backgrounds

    Using R,G,B colors lets you have a see through color background.

    The 'R' is for the amount of red. The 'G' is for the amount of green. The 'B' is for the amount of blue.

    RGB are all '0' the colour is black.
    RGB are all 255 the color is white.
    The last number in the position of 'A' is alpha, (a measurement of opacity) .0 is no color. 1 is full color. .5 is half colour see-through.

    background: rgba(255,255,0,1);


    background: rgba(255,255,0,.5);


    Box Shadows, inside and out.

    box-shadow: 10px 10px 2px white;  


    box-shadow: 3px 3px 5px white, -3px -3px 5px yellow;  


    box-shadow: inset 3px 3px 5px white, inset -3px -3px 5px yellow;  

    Images background in boxes

    bbbbb

    cccc

    Lines

    <hr>

    The
    <hr> tag
    will place a line across the page

    Line breaks

    <br /> this is the correct form. A self closing tag

    <br> abbreviated form but the website code closes the tag for you. It is still a self closing tag

    http://brettwilkin.blogspot.com/

    Use this site to copy css code to your blogs css code file and the html code to your page

    .

    .

    https://www.w3schools.com/colors/colors_picker.asp

    .

    .

    .

  • Video | Backgrounds | GIMP

    Recorded Lesson


    The art of Self Discipline

    Lesson 1

    I cut out all the 'ok's" and most of the "um's" 555

    Themes Width Layout Menu bar.

    This vid covers changing the theme to a simple theme.

    Adding a menu bar with a page gadget.

    Removing side bar to keep a better focus on content.

    Adjusting the width of the main window

    Creating Backgrounds in GIMP.

    These are a few techniques to create interesting backgrounds in GIMP

    Each of the 'Filters' will work differently on different pictures.

    Some work better with colour and some work better with black and white.

    How to install the Sketch GIMP addon.

  • Looking At Code

    Looking at code


    The art of Self Discipline

    CSS code. Forward slash /

    The forward slash / is for making comments in your code.

    The web browser ignores everything after the forward slash / until the next forward slash /.

    CSS code. The full stop ..

    The full stop at the start of css code is for a 'class'

    on your website it would be written as class=""

    CSS code. #

    The # is used similar to a full stop '.'

    # at the start of css code indicates an 'id'

    On your web page the html will be id=""

    CSS code. {       }

    Curly brackets contain the html code

    The brackets link the code to the title or name that you give to the block of code.

    CSS code. "   "

    Quotation marks indicate a string of code

    In most code spaces have special meanings.

    Quotation marks tell the computer that spaces are spaces with no special meaning.

    /****start*****  zoom little 10% *************/

    .zoomlittle:hover {transition: all .5s ease-in; transform: scale(1.1) translate(50px); position: relative; z-index: 10; background: rgba(245,245,245,.9); box-shadow: inset 0px 0px 20px grey;}

    /****end*****  zoom little 10% *************/



        <div class="zoomlittle" style="border: 1px solid red; background: linear-gradient(to bottom, white 0%, grey 100%);">



        <div style="border: 1px solid red; background: linear-gradient(to bottom right, white 0%, grey 100%);">

    .

    .

    .

  • Unit and Lesson Plans

    Unit Planning


    The art of Self Discipline

    Reviews and Unit Plans 

    SA – NGUAN YING SCHOOL ENGLISH PROGRAM (SYEP)

    Lesson Plan Period: 10

    Unit: Computing            Topic: Use of Technologies

    Course Code: 23283                  Course Title:_Use of Technologies           

    Matayom Suksa: M3

     

     

    M3 S1 Blogging Portfolio's. 

    Terminal Objectives

    Student’s will gain a basic knowledge of blogs and social media.

    Student’s to demonstrate an understanding of appropriate cultural use of social media.

    Student’s to demonstrate an understanding of negative issues linked to social media.

    Student’s to demonstrate an understanding of the benefits of social media.

    Student’s to demonstrate an understanding of using 'html' and 'css' code in blogs.

    Student’s to demonstrate an understanding of creating an electronic web presence for the future portfolios. 

    Student’s will gain the skills required to complete on-line courses. 

    Student’s will demonstrate the self-discipline needed to complete university and on-line units of work.

    Content

    Setting up a blog.

    Utilizing css code to make focus points.

    Personalizing theme and content with html and CSS and images.

    Planning content.

    Adding pages and posts.

    Changing Templates and Themes.

    Providing feedback.

    Edit photos for appropriate sizes (about 650px).

    Defining the difference between acceptable pictures and not acceptable.(good story concept)

    Grammar checks via comments boxes.

    Student’s to complete on-line quizzes.

    Lessons 25

    Lessons are 2 lessons per week as a double.

    Teaching Topics:

    As per website under the topic of portfolios

     https://brettwilkin.com/moodle/course/view.php?id=11

    The benefits and problems of open source software.

    Setting up Blogger.

    Discuss what is a good theme and how to change them in blogger.

    Discuss templates and how to change.

    Adding pages to a blog.

    Discuss the concept would you employ this person by looking at their photos.

    How long should a web page be?

    What is a good size for a photo in context of slow internet speeds?

    Adding HTML coding to a page under the guise of making your portfolio different.

    Adding animations into the css code of the blog to create a different feel for an individual portfolio.

    Practice Activities:

    Previous image editing units of work.

    Previous HTML units of work.

    Production.

    Create blog using Google blogger.

    Lesson on CSS and how to add to blogger.

    Setting up Blogger for a portfolio not a facebook like page.

    Lesson on creating single focus points.

    Editing CSS and html code to create an individual feel.

    Setting up menus>

    Creating content appropriate for a portfolio.

    Homework / Assignments:

    Complete on-line quizzes. 

    Learn vocabulary.

    Follow up comments from blog.

    It is expected the vocabulary will be regular use by the end of the semester. (not the unit).

    Teaching Material / Aids:

    https://brettwilkin.com/moodle/course/view.php?id=11

    Software (GIMP)

    Computers

    Projectors.

    brettwilkin.blogspot.com for css and html code.

    Evaluation:

    Quizzes.

    Completion of blog created in Google Blogger.

    Blog scores based on rubric guide.
    Evaluation Points
    1100 Points
    Results
    converted to 100%

    Teaching Philosophy

    Creating a blog has many educational outcomes. The first idealistic outcome is that a student will end up with a portfolio that has evidence based on the student's history. If the student has been a good worker they will have evidence from every year they have been at school with clear justifications and explanations about the evidences on their blog. If the blog is maintained over several years the older evidences of expertise will be deleted or trimmed so only the best evidence of continued academic application is kept. The portfolio then becomes a comprehensive display of the student’s abilities.

    This project starts in M2 as a very brief unit of work and is studied in more depth in Semester 1 M3 (G9)

    The blog is an excellent method of teaching HTML code and how to edit in html. The students are taught how to create styles in the forms of boxes and backgrounds in div's p's and span's.

    Once the students have started understanding styles and their blogs are starting to take on a personal appearance then they are introduced to creating CSS styles.

    The third outcome is for the students to demonstrate an understanding of classroom content by having pages in all their subject areas and then describing and justifying their selections of material on the blog. These selections of evidence, the justifications comparisons and evaluations should be linked to Blooms Taxonomy higher levels of thinking.

    Computing is used to create an holistic approach to learning by working with Social studies, Public speaking and Science.

    To support subject’s specific software is taught so students can complete high quality presentations.

    The emphasis is on using the computer as a tool for creating researching and expressing learning from many different areas. The ultimate goal is for the student’s to be able to take control of their learning, understand what good research is and express this in acceptable high quality formats.

    'Student centred classrooms' that are also a ‘flipped classroom' are the preferred methods of delivery. The website for the flipped classroom is brettwilkin.com. The flipped classroom frees the teacher to work with the student’s more often.

    Students use the website to review what is taught in class and review for exams. The site logs show student’s often want to work late at night to finish quizzes and submit work.

    Being an ESL classroom all new words on the web site are linked to a Thai dictionary. The site dictionary gives the meanings of the words in the context of how they are being used on the site.

    Small quizzes to support learning and cater to the curriculum requirements are done on line via the student’s personal accounts. This means most of the feedback is instant.

    A 'Constructivist' approach based on project / activities outcomes means the website is updated regularly to accommodate changing social attitudes, student brain dominances and learning styles. There is a strong emphasis on creative thinking, research skill and looking for answers rather than being spoon fed.

    As this is an ESL classroom; students can review any information they do not understand. It is noted according to the website logs student’s often log on to do quizzes late at night when they are of the feeling to work.

    Teaching Report:

    2015
    Student’s attained most of their outcomes and all students reached a base level of 75% with many attaining a level of 100%. Everything worked well but I want to see a greater use of the blog they create all the way through their school life.

    2016
    There has been an extensive update of the website.
    the game hangman was added, and special word lists associated with the topic added.

    2017 -20
    Small changes progressively made until 2021 when a full rebuild of the website has been undertaken.
    Students respond well to learning with a flipped classroom and all students successfully reached the minimum mark of 75% with a few at 100%. A statistical analysis gave the appropriate Bell Curve for these students.

    2021-22
    Website rebuild successful bringing into play some new teaching tools and layouts. Site was a big advantage for covid years and worked well with zoom.
    It could not take the place of the human teacher in a classroom as students did not communicate well using zoom.

    2022-23
    Once again students responded well even when they all said it is too hard all but one students submitted enough work to reach the required 75%. At the end of this semester there was another big upgrade on the website.

    .

    .

    .

    .

    .

    Signature: 

    Robert BRETT WILKIN.

    Date: __/__/____

    .

    .

    .

    .

    .


    .

    .

    .

    .

    .