OLD 2º BCH TICO II

EXAMEN EXTRAORDINARIO JUNIO

Este examen tiene como objetivo evaluar la adquisición de competencias de los alumos que no superaron o no se presentaron a la evaluación ordinaria.

Se requerirán ejercicios sobre programación en processing y diseño de página web con html y css.

Como ayudas durante el examen se contará con el asistente integrado en el entorno de processing y con la siguiente dirección web sobre comandos html

https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

En el diseño web se solicitará la inclusión de fotos, videos y audios. Pueden descargarse durante el examen, bajarlos de la nube o bien llevarlos en un pen-drive para ahorrar tiempo.

Sin embargo, debe conocerse y dominar la teoría de programación y diseño puesto que dichas ayudas solo evitan la memorización de primitivas en processing  y etiquetas en html. La aplicación de estos contenidos se expuso en las clases y se practicó sobradamente en la ejecución de los ejercicios pedidos durante el curso escolar. Se recomienda practicar lo suficiente para abordar con éxito la convocatoria extraordinaria.

PRESENTACIÓN PAGINAS WEB Y RECUPERACIONES 2ª EVALUACIÓN

Los dias para presentación de trabajos son:
Lunes 6 mayo - 5ª hora
Martes 7 mayo - 4ª hora
Miercoles 8 mayo - 2ª hora
Jueves 9 mayo - 3ª hora y recreo

La no presentación de los trabajos supondrá el suspenso en la asignatura.

POSIBLES PREGUNTAS EXAMEN DISEÑO WEB

1) Escribe y explica brevemente las reglas básicas para crear una pagina o sitio web (2 p) 

2) Escribe y explica brevemente consejos utiles en el diseño de páginas web. (2 p)

3) Dibuja el esquema de los servicios o usos básicos que proporciona Internet visto en la explicación del profesor (2 p). 

4) Escribe y comenta los peligros más típicos a los que nos vemos sometidos al usar internet. (2 p).

5) Escribe las precauciones básicas al usar internet y ordenadores para prevenir problemas (2 p).

PRESENTACIONES PARA TEORÍA EXAMEN

https://drive.google.com/open?id=1XnhnxoQLT5WevjKkeyWG5vxrKep_L5q6

https://drive.google.com/open?id=1XE9hxw8OlVQz04MWpP0gF5SbOfpCTP8U

 PROYECTO FINAL PAGINA WEB

REQUISITOS

Una página principal que enlaza con 2 o 3 (mín) páginas en un segundo nivel

Cada página del segundo nivel abre a otras 2 (mín) en el tercer nivel

Cada página en el tercer nivel tendrá un enlace a una página de Internet

Se deben implementar al menos 2 tablas en total

Se deben introducir fotos en casi todas las páginas

Al menos 2 videos en total

Al menos 2 canciones en total

Todas las páginas deben tener un link para volver a su página anterior y también a la principal.

Se usará un background con degradado en alguna página. Usar fichero css.

Se usará un background en un color en alguna página.

Se usará una imagen como background en una página.

Se usarán alineaciones de texto.

Se utilizará algún tipo de letra que pongamos en el fichero css

Se valorará (1 pto.) la originalidad e impresión general del sitio web.

IMPORTANTE: DURANTE LA PRESENTACIÓN DEL PROYECTO EL PROFESOR HARÁ PREGUNTAS GENERALES SOBRE EL CÓDIGO HTML Y CÓDIGO. DE NO RESPONDER ADECUADAMENTE SE CONSIDERARÁ QUE EL PROYECTO HA SIDO COPIADO Y SUPONDRÁ EL SUSPENSO EN LA ASIGNATURA.

PROYECTO FINAL PROCESSING

REQUISITOS

- Una imagen de fondo

- Sonido todo el tiempo

- No termina y no se para

- Es interactivo con teclado o ratón

- Debe existir algún tipo de movimiento

- Debe aparecer texto o números en algún momento
- El programa debe ser propio y en caso de copiar parte del código se defenderá
el conocimiento del mismo delante del profesor.
- La fecha tope de presentación es durante la semana de exámenes. El profesor puede
ampliar al día de las evaluaciones en casos especiales.

PROGRAMA DE EJEMPLO

int x = 0;
int y = 0;
int m = 0;

void setup (){
  size (500, 500);
  background (#45ED0E); //color verde
  frameRate(500);
}

void draw(){
  if (m==0) {
    stroke (#D34209); //color rojo contorno
    fill (#D34209); //color rojo relleno
    rect(0,0,x,y);
    x=x+1;
    y=y+1;
  }

  if (x > 500) {
        m=1;
        x=0;
        y=0;
  }
 
  if (m==1) {
    fill (#1543E5); //color azul
    rect(x,y,500,500);
    x=x-1;
    y=y-1;}
 
  if (x == -500) {
    x=0;
    y=0;
    m=0;
  background (#45ED0E);}} //color verde fondo



FICHA FLUJOGRAMAS

1)      Hacer el diagrama de flujo con los bloques de un sistema de control que permite el paso de vehículos sobre el ferrocarril (vía en doble sentido) a través de un conjunto de semáforos y barreras. Compruebe la proximidad de trenes evitando en ese caso que puede mover el coche y permitir el paso de coches cuando los trenes se alejan.

2) Hacer el diagrama de flujo para un ordenador en el que 3 aplicaciones pueden ejecutarse al mismo tiempo. En caso de que el equipo está ejecutando ya 3 programas diferentes debe mostrar un mensaje de error en la pantalla para  prevenir al usuario sobre la situación actual sino hubiera 3 el nuevo programa debe empezar a correr. Los usuarios deben ser preguntados  todo el tiempo si hay la necesidad de un nuevo programa para ejecutar.

SÍMBOLOS PARA FLUJOGRAMAS

No tener en cuenta las número 6, 10 y 12.


CONTENIDOS EXAMEN HERRAMIENTAS COLABORATIVAS

¿Que es Internet? 

Diferencias entre nativos e inmigrantes digitales 

Diferencias entre web 1.0 y web 2.0.

Premisas principales de la web 2.0 

Servicios que nos proporciona internet. 

Diferencia entre navegador web e Internet.

Explicación siglas principales ... HTML, ISP, DNS,.... 

Esquema de conexión básico a Internet.  

Herramientas colaborativas en Internet.

Código para tablas

<table bgcolor="#bb7c3e" border="0" cellpadding="10" cellspacing="5" width="100%">

  <caption><strong><font color="#441100">HISTORY </font></strong></caption>

  <tbody>

    <tr>

      <td align="center" bgcolor="#aacc66" width="33%">

      <img src="RATAS.jpg" alt="Imagen" height="120" width="140"><br>

  <a href="https://en.wikipedia.org/wiki/Black_Death" >Pest killed millions of people in Europe</a></td>

      <td align="center" bgcolor="#aacc66" width="34%">

  <img src="CONEJOS.jpg" alt="Imagen" height="113" width="160"><br>

  <a href="https://en.wikipedia.org/wiki/Rabbits_in_Australia" >Rabbits invaded Australia in 18th century </a></td>

      <td align="center" bgcolor="#aacc66" width="33%">

  <img src="COTORRAS.jpg" alt="Imagen"  height="126" width="100"><br>

  <a href="https://en.wikipedia.org/wiki/Monk_parakeet" >Monks don´t have predators</a></td>

    </tr>

  </tbody>

</table>

Usar imagen como enlace

<a title="back" href="index.html"><div align="right"><img src="back.jpg" width="150" height="100"alt="back" /></a>

Ejemplo práctico

https://drive.google.com/open?id=1An8A1cp-ruHiT4QyqoArzfW7SLkLdx-m

https://drive.google.com/open?id=1b9Memk7MTqXodSxQmZDuZs25Fe_ySmpd


Básicos

https://www.w3schools.com/howto/default.asp

http://fresno.pntic.mec.es/avaler3/webs/index.html

Enlaces tipos letra

https://www.dafont.com

https://en.wikipedia.org/wiki/List_of_typefaces

https://www.hongkiat.com/blog/free-high-quality-gothic-horror-fonts/

HTML TAGS

Heading Tags

Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.

Paragraph Tag

The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag

Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Centering Content

You can use <center> tag to put any content in the center of the page or any table cell. Also you can use <p align=center, right or left>.

Horizontal Lines

Horizontal lines are used to visually break up sections of a document. The <hr>tag creates a line from the current position in the document to the right margin and breaks the line accordingly.

Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Preserve Formatting

Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>.

Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	"Pop-up" title of the elements.

Bold Text

Anything that appears within <b>...</b> element, is displayed in bold.

Italic Text

Anything that appears within <i>...</i> element is displayed in italicized.

Underlined Text

Anything that appears within <u>...</u> element, is displayed with underline.

Strike Text

Anything that appears within <strike>...</strike> element is displayed with strikethrough, which is a thin line through the text.

Superscript Text

The content of a ^... element is written in superscript;

Subscript Text

The content of a _... element is written in subscript;

Inserted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.

Deleted Text

Anything that appears within <del>...</del> element, is displayed as deleted text.

Larger Text

The content of the <big>...</big> element is displayed one font size larger than the rest of the text surrounding it.

Smaller Text

The content of the <small>...</small> element is displayed one font size smaller than the rest of the text surrounding it.

Emphasized Text

Anything that appears within <em>...</em> element is displayed as emphasized text.

Marked Text

Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.

Strong Text

Anything that appears within <strong>...</strong> element is displayed as important text.

Insert Image

You can insert any image in your web page by using <img> tag. Following is the simple syntax to use this tag.

<img src="Image URL" ... attributes-list/>

The <img> tag is an empty tag, which means that it can contain only list of attributes and it has no closing tag.

You can use PNG, JPEG or GIF image file based on your comfort but make sure you specify correct image file name in src attribute. Image name is always case sensitive.

Set Image Location

Usually we keep our all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image test.png.

Set Image Width/Height

You can set image width and height based on your requirement using widthand height attributes. You can specify width and height of the image in terms of either pixels or percentage of its actual size.

<img src="/html/images/test.png" alt="Test Image" width="150" height="100"/>

Set Image Border

By default image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

<img src="/html/images/test.png" alt="Test Image" border="3"/>

Set Image Alignment

By default image will align at the left side of the page, but you can use alignattribute to set it in the center or right.

Tables

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

HTML Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

• <ul> - An unordered list. This will list items using plain bullets.
• <ol> - An ordered list. This will use different schemes of numbers to list your items.
• <dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Text Links

A webpage can contain various links that take you directly to other pages and even specific parts of a given page. These links are known as hyperlinks.

Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. Thus you can create hyperlinks using text or images available on a webpage.

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document

<a href="Document URL" ... attributes-list>Link Text</a>

HTML Image Links

---

It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below:

<a href="http://www.tutorialspoint.com" target="_self"> 

   <img src="/images/logo.png" alt="Tutorials Point" border="0"/> 

</a>