TPR, Technology and TEIC website
IES Sabino Fernández Campos

TEIC 4A-4B
(bilingual)

Alumnos con Evaluaciones Suspensas

Si has suspendido una evaluación puedes no tener que hacer el examen extraordinario. Mira abajo en cada evaluación lo que hay que hacer.

El examen se hará en el Aula Virtual del instituto. En caso de ser pocos alumnos será un examen oral.

Para poder acceder al Aula Virtual a hacer el examen, tienes que tener usuario y contraseña.

El usuario y la contraseña se os porporcionó a principio de curso. Si lo has perdido, se la tienes que volver a solicitar a Javier Prieto, secretario y profesor de música.

Es vuestra responsabilidad tener usuario y contrase˜a. No se solventarán problemas de usuario y contraseña después del viernes 19 de junio.

Alumnos con la Tercera Evaluación Suspensa

Para aprobar sólo hay que hacer BIEN todos los trabajos de la tercera evaluación. Me tenéis que escribir en un documento de word o libreoffice writer todos los ejercicios con sus correspondientes respuestas. Los de HTML; los de CSS y la web del COVID19. Deadline: June 21st

Estoy a vuestra disposición para solventar dudas. Me podéis escribir para pedirme el móvil si no lo tenéis.

Sólo contesto en estas direcciones:

  • carmen.dilla@educa.madrid.org

  • tecnoteachercarmen@gmail.com

Alumnos con la Asignatura Aprobada

You have passed, congratulations.

Activities for these last days. We will do apps for the mobile.

App inventor is a powerful development environment for Google apps online.

Its main advantage: You do not need to install anything on your computer, nor to follow complex configuration instructions. Just register on the development portal and start creating your own apps.

Steps to start programming your own apps

  1. You have to register in the AppInventor web site

  2. You need an Android smartphone and a PC connected to the internet through the same Wi-Fi network.

  3. (Optional but highly recommended, as it makes things much easier). Install a QR code reader on your Smartphone. Since QR codes are used to install the apps.

  4. (Optional, but highly recommended, as it makes app testing much easier). Install the free MIT AI2 companion app on your smartphone.

  5. Go to the App Inventor page click on the create button in the upper right corner to register and create your first app.

Exercise

This is an step to step guide to create your first app, link

After having done the app, you have to send it to me

This is an step to step guide to create your second app, an app which talks to me. Go into the App inventor page downwards there is a link to "talk to me".

Follow the instructions, in video or pdf, and make the app.

After having done the app, you have to send it to me


Basic Points

  • Everyone should have their OWN mail. If someone does not have one, get in touch with me, so I can help you

  • I need to know who DOES NOT have:

    • An accesible computer to do homework

    • Your own mobile, in case you don't have a PC

    • Line with unlimited data

  • If you have a computer, you should load LibreOffice. Don't know how? get in touch with me

  • If you have a PC, you should do your homework with LibreOffice, unless otherwise indicated

  • I will speak with each person who does not have a PC to tell them how to do their homework

  • Homework should be mailed BEFORE last date. I will not take any work sent later than that day, unless previously written about it

  • Internet has the answer about nearly everything. Before asking, seek for an answer in the Internet

Homework - Web Design - Updated: June, 4th

In this term we are going to learn how to design web pages. I've made a short summary which will increase as days go by. Updated: May 18th.

There are a lot of platforms which provide free server space (free space in a www server). I've choosen Neocities.

This is what you have to do:

  1. Create an account in Neocities, and send me the data Deadline:April 17th, Friday at 14:00

  2. Read the summary up to point 8, included.

  3. Get into Neocities with your id and password, and, do the tutorial, The Neocities HTML course!. You have to be INSIDE neocities to be able to follow the link. IMPORTANT: Do NOT TRANSLATE the page while coding, it translates the tags and it does NOT WORK properly. Deadline:May 4th, Monday at 14:00

  4. Updated: April 27th. Read the summary up to point 10.

    • Do exercises 5.1, 5.2, 5.3, 5.4, 5.5 and 5.6. You can write them in a lIbreoffice writer doc and send them to me. Or, if you have problemas, just in a mail Deadline:May 4th, Monday at 14:00

    • Do the 2 short exercises in point 6, in a libre office writer doc, and send them to me.Deadline:May 4th, Monday at 14:00 . IMPORTANT:I will not count this deadline, as the number of chapter was mistaken.BUT do them.
    • Do exercise 10.1 and send the wordpad file to me. Deadline:May 4th, Monday at 14:00

    • Do exercise 10.2 and send the wordpad file to me. Deadline:May 8th, Friday at 14:00

    • Do exercise 10.3 and sende me the URL.Deadline:May 18th, Monday at 14:00

    • Do exercise 10.4 and sende me the URL.Deadline:May 18th, Monday at 14:00


Updated: April, 30th. It's time to begin with formatting. Let's give life to our pages.

I've made a short summary about CSS that will increase as days go by.

This summary includes exercises. This is what you have to do

  • Updated: April 30th. Read the summary up to point 5, type of CSS selectors.

    • First of all, you have to copy your table HTML files in neocities, if you have not done so.

      Deadline:May 11th, Monday at 14:00
    • Read the CSS summaryDeadline:May 11th, Monday at 14:00

    • Do exercises from ONE to EIGHT in the CSS summaryDeadline:May 11th, Monday at 14:00

IMPORTANT:You may exchange the exercises between days 11th and 18th. Do exercises for 11th on 18th and viceversa


Final exercise. Designing a COVID-19 Web Site. Deadline: June 9th, Tuesday

Now we are designing a complete web site. My proposal is COVID-19

Structure of Your Web Site

You have to make 5 different web pages for your web site:

index.html
  • This page will be linked from "index" in the menu

  • This page will be an introduction about COVID 19

  • You have to add a covid19 picture>

  • You have to write two different type of lists in it

World - Covid Around the World - world.html
  • This page will be linked from "element1" in the menu

  • Here you will put global data, with some picture of a graph

  • You have to add a table of some short, with data on it

Spain - Covid in Spain - spain.html
  • This page will be linked from "element2" in the menu

  • Here you will put global data, with some picture of a graph

  • Add some comments about problems in hospitals

  • Add a picture of doctors, nurses or ill people in hospitals

Economy - Covid and Economics - economy.html
  • This page will be linked from "element3" in the menu

  • Here you will speak about how covid19 is affecting economy

  • Add some comments about problems with jobs

  • Add pictures about it

Education - Covid and Education - education.html
  • This page will be linked from "element4" in the menu

  • Here you will speak about how covid19 is affecting education

  • Add some comments about tele education, what do you think about it

  • Add pictures of students teleworking

Templates for Your Web Site

We are going to use the same design as in the tecnoteacher´s website.

We will use files that are stored in the tecnoteacher´s website as templates. One template for the html pages, and one file for the styles

You will use these files:

estilo3.css

This is the style sheet used in tecnoetacher.neocities.org

modelo.html

This file will be your template for your web pages. Each web page will have the same structure.

On the top of the file you have 5 buttons, to take you to the different pages that you will have on your web site. Each page you do for your web site has to be linked from those buttons. These buttons have names on them: element 1, element 2, element 3...

Instructions

Please follow these instructions:

  • In the root directory of my website (tecnoteacher.neocities.org) I have the two important files I´ve just explained about:

    download them to your computer using absolute addressing

  • You may use these two files for your web

Making web pages
  • Get into your neocities website and rename index.html into index2.html. Neocities does not let you do this. What to do instead:

    • Create a new file in your neocities root folder, call it index3.html

    • Copy the contens of index.html into index3.html

    • Save modelo.html from the tecnoteacher´s website

    • In most navigators you right click the mouse when you are over the page, and you get the option to save. If you don´t, call me, and I ´ll explain another way

    • You have to save it as Only HTML (not save the whole webpage)

    • Copy the contents of modelo.html into index.html and modify index.html to act as a template, as explained downwards

    • OR modify modelo.html, in wordpad, as explained downwards, and copy it, afterwards, into index.html

  • On the top of the file you have 5 buttons, to take you to the different pages that you will have on your web site. Each page has to be linked from those buttons. These buttons have names on them: element 1, element 2, element 3...

  • Yo have to substitute each element with the name of each page:

    • Covid in the World

    • Covid in Spain

    • Covid and Economy

    • Covid and Education

    • Index

  • and link each page in its proper place (between "")

    Index.html is already linked so that you see how to do them

  • You have to modify this file, and, once modified, use it as a template for each page you do. Or, you may copy it, as it is, on index.html, and modify index.html.

  • The first page you have to do is index.html

  • Once modified, you create the rest of the pages in neocities:

    • world.html

    • spain.html

    • economy.html

    • education.html

    and copy the structure you have just created, on each of them. You keep the same top title, buttoms and bottom bar, and just change the central contens for each page

Modifying the CSS Style Sheet, Estilo3.css
  • You have copied estilo3.css form the tecnoteacher's website into your computer.

  • Now, upload estilo3.css into your neocities website.

  • We are going to modify estilo3.css

  • You have to change the colours of Font and Background, you CAN NOT use the same as in tecnoteacher

    Colours are in hexadecimal code. Hexadecimal colours begin with #.

    You may choose colours from this web

  • Estilo3.css is a complex css file. You may not understand most of it, just try to understand the following sections:

    body {                            --> Overall look of the page, 
                                          background color,
                                          font color and font type
                                          
      background-color: #CCFFFF;      --> Change this colour        
      color: #669966;                 --> Change this colour  
      font-family: Verdana;           --> Change font type if you wish
      }
    
     h1 {                             --> Look of Title type 1, H1, 
                                        The dark green bar on top
        background-color: #669966;    --> Change this colour        
        color: #CCFFFF;               --> Change this colour  
        font-family: Verdana;         --> Change font type if you wish
        padding: 10px;
        text-align: center;
        margin: 0px;
        }
    
    .menu a:link, a:visited, a:active { -->Look of Hyperlinks in Menu Buttons
                                            :normal state, 
                                            once visited,
                                            or when you are clicking them
        background-color: #CCFFFF;    --> Change this colour        
        color: #669966;               --> Change this colour 
        text-decoration: none;
        display: block;
        }
    .menu a:hover {                   -->Look of Hyperlinks in Menu Buttons:
                                          when you are over them
         background-color: #669966;   --> Change this colour   
         color: #CCFFFF;              --> Change this colour   
         text-decoration: none;
         display: block;
          }
    #activo {                        --> Id for button of the page, so that
                                          it shows in which page you are.
        text-align: center;          --->You should set this class, in the 
        HTML page, for the button of the page
        border-style: outset;
        border-radius: 5px;
        width: 19%;
        background-color: #669966;   --> Change this colour   
        color: #CCFFFF;              --> Change this colour   
        text-decoration: none;
        }
    
    .foot{                           --> Class for the bar on foot, where 
                                        it says who is the designer
         background-color: #669966;  --> Change this colour
         color: #CCFFFF;             --> Change this colour  
         text-align: center;
         }
                                      
                  
  • Now you have to change the colours, as indicated above

    Be coherent with the changes of colours. My recomendation is to change all appeareances of #669966 to one colour and all #ccffff to another one

  • You may also change fonts, type of letters. Look in the internet for types available if you want to cahnge them

Checking of Web Site

Updated: June, 3rd

You may check your pages with the W3 HTML Validator. In fact, you have to check them before sending the URLs

Design by Carmen Dilla, the TecnoTeacher. TecnoTeacher is a mix of an spanish word, Tecno, from "Tecnología" and an english word, "Teacher".