Una vez que has realizado las 7 primeras prácticas completas, deberías dominar la estructura básica de una página html, añadiendo párrafos, imágenes, audios, vídeos, tablas, listas, etc. Además has aprendido cómo diseñar una hoja de estilos que proporcione un formato determinado a todas las páginas de tu sitio web: tipo de letra, color, tamaño, fondos, bordes, etc. Y también sabes cómo alojar tu web en un hosting gratuito.
¡¡Es el momento de crear tu propio sitio web!!
Antes de nada dedica un tiempo para la planificación del diseño de tu web en papel. Piensa cuántas páginas va a tener y qué contenido tendrá cada página, no improvises sobre la marcha!! Visita algunas web sobre esa misma temática y coge ideas. Recopila material: imágenes, vídeos, links de interés. Y cuando tengas todo claro...abre el editor y comienza a codificar!!
Aquí tienes la lista de indicadores que debe cumplir tu web (pincha la imagen para abrir pdf)
Importante: Ten en cuenta todos estos indicadores a la hora de hacer tu diseño y no te olvides repasarlos realizando una autoevaluación justo antes de entregar tu trabajo
Hasta ahora hemos visto como crear algoritmos con frases en nuestro lenguaje; sin embargo, el lenguaje que entienden los ordenadores no es el mismo que el nuestro.
El lenguaje que utilizan los equipos para comunicarse entre sí se denomina LENGUAJE MÁQUINA . Este lenguaje da lugar al CÓDIGO OBJETO, que consiste en una serie de ceros y unos (datos binarios) que no es comprensible para las personas. Es lo que se denomina LENGUAJE DE BAJO NIVEL.
Cuando una persona escribe un programa, lo hace en un LENGUAJE DE ALTO NIVEL, que es comprensible para la misma, pero que tiene que ser transformado en código objeto para que el ordenador pueda interpretarlo.
El COMPILADOR o INTÉRPRETE es el encargado de traducir a código máquina las órdenes que escriben las personas.
En el siguiente video tienes más información:
1. LENGUAJES DE ALTO NIVEL.
Dentro de los lenguajes de alto nivel también podemos establecer dos categorías:
Lenguajes visuales
Los lenguajes de programación visuales disponen de un conjunto de bloques gráficos de programación que tienen funciones específicas y se ensamblan siguiendo una secuencia de acciones para crear programas.
Estos lenguajes utilizan elementos gráficos con colores y formas, en lugar de texto, y por ello se usan en los entornos educativos para aprender a programar. Uno de los más utilizados es Scratch.
Lenguajes textuales
Un lenguaje de programación textual es un conjunto de símbolos y palabras (instrucciones y sentencias) que el usuario tiene a su disposición para elaborar un programa. Algunos ejemplos son Java, Python y C++.
2. LENGUAJES DE BAJO NIVEL.
Un lenguaje de programación de bajo nivel, es aquel en el que sus instrucciones ejercen un control directo sobre el hardware y por lo tanto están condicionados por la estructura física de las computadoras que lo soportan.
El lenguaje de bajo nivel más famoso es el CÓDIGO BINARIO, que es el más básico y forma parte de todos los equipos informáticos. Este lenguaje utiliza los símbolos 0 y 1, denominados bits, los cuales se suelen agrupar en conjuntos de 8 bits a los que denominamos bytes.
Los procesadores que utilizan los ordenadores transmiten la información en forma de impulsos eléctricos actuando como pequeños interruptores que dejan pasar la corriente eléctrica o bien impiden su paso. Cuando en el circuito existe corriente, se codifica con valor 1; si no la hay, se codifica con valor 0.
Dado que en nuestra vida diaria usamos el sistema decimal para expresar cantidades (usamos 10 dígitos, del 0 al 9), debemos conocer la equivalencia entre éste y el sistema binario.
En los siguientes ejemplos se muestra como se puede pasar de un sistema a otro:
Además de los números, también podemos codificar en lenguaje binario los caracteres del texto escrito. Para poder escribir todas las letras del alfabeto utilizamos combinaciones de grupos de ocho ceros y unos. De esta manera podemos codificar un total de 256 (28) caracteres diferentes, entre los que se incluyen letras mayúsculas, minúsculas, caracteres especiales (como los signos de puntuación, los de acentuación, los símbolos propios [por ejemplo, la virgulilla de la ñ]...) y otros signos.
Para manejar de forma más eficiente grupos tan elevados de ceros y unos, se creó el código ASCII. Este código permite asignar a cada carácter codificado en binario su equivalente numérico en sistema decimal.
La tabla de caracteres ASCII recoge la codificación de cada uno de los caracteres de texto en sistema decimal.
Los llamados “caracteres imprimibles” van desde el número 33 hasta el 126. Otras letras y signos que utilizamos (como la ñ, la ç o las vocales con tilde o diéresis) se encuentran en el grupo llamado “ASCII extendido”.
Así por ejemplo, cuando el ordenador lee el número 100001 binario, que equivale al número 33 en sistema decimal, imprime el signo !.
ACTIVIDADES
1. ¿Puede un lenguaje de alto nivel ser interpretado directamente por el ordenador? Razona tu respuesta.
2. ¿Qué tipo de programación de alto nivel es la más cercana a la realidad laboral?
3. Pon un ejemplo de programa de alto nivel de tipo visual.
Una vez que habéis comprendido el funcionamiento de los diagramas de flujo, deberéis trasladar la información de dichos diagramas a Scratch.
Para ello, en primer lugar debéis registraros en la aplicación web y, a continuación, realizar las siguientes actividades.
Una vez finalizadas las actividades, debéis hacer capturas de pantalla de los bloques de Scratch y subirlas a vuestros blogs.
Actividad 1:Queremos que el escarabajo se mueva describiendo un triángulo. ¿Cuál es el bloque de instrucciones correcto?
Actividad 2. Añadid un objeto que represente una pelota en Scratch y programadlo de acuerdo al siguiente diagrama de flujo:
Actividad 3. Crea el diagrama de flujo y después programa a Sprite en Scratch de forma que:
Al iniciar el programa se coloque en el lado izquierdo de la pantalla
Camine 100 pasos hacia la derecha
Vaya dando saltos hacia arriba de 50 pasos (esperando 1 segundo en la parte alta del salto), baje (esperando un segundo) y avance 20 pasos (esperando 1 segundo) hasta que llegue al borde de la derecha
Al llegar la borde de la derecha finalizará el programa
RETO 1: Un juego de esquivar
- 2 sprites, 3 vidas (variables), 2 fondos
- El Sprite 1 se mueve aleatoriamente.
- El Sprite 2 se mueve con las teclas de flecha para esquivar al Sprite 1.
- Empiezas con 3 vidas, y cada vez que tocas al Sprite 1 pierdes una vida.
- Cuando las vidas lleguen a 0, cambia el fondo mostrando Game Over y detiene todo.
Las hojas de estilo sirven para dar formato a una página web manteniendo separado el contenido del formato. Con HTML damos contenido y con CSS formato.
Fundamentos básicos de CSS - (Cascading Style Sheets o Hojas de Estilo en Cascada)
W E B D E D E S A R R O L L A D O R E S D E M O Z I L L A C O N T O D O
Crea una hoja de estilos CSS para aplicar formato al sitio web que comprende todas tus primeras prácticas. Estilos de borde de imágenes, color de fondo, estilos para los encabezados, etc.
- Crea un nuevo archivo con Visual Studio Code que llames style.css y comienza con los siguientes selectores:
Selector de tipo que afecta al body con color de fondo y tamaño de letra
Selectores de clase que afecta a las imágenes que llevan esa clase
En el documento html esa imagen deberá llevar el siguiente atributo:
Y en el encabezado "head" de todos los documentos html que queramos que les afecte esa hoja de estilos vamos a poner:
PRACTICA DISTINTOS TIPOS DE BORDES CON DIFERENTES PROPIEDADES PARA CADA UNA DE LAS IMÁGENES DE LA TABLA. CREA UN SELECTOR DE CLASE PARA CADA UNA DE LAS IMÁGENES Y PERSONALIZA EN LA HOJA DE ESTILOS.
Estilos de borde predefinidos
solid: Borde sólido y continuo.
dashed: Borde con líneas discontinuas.
dotted: Borde de puntos.
double: Borde de doble línea continua.
groove: Borde con un efecto de ranura 3D.
ridge: Borde con un efecto de cresta 3D.
inset: Borde con un efecto de hundimiento 3D.
outset: Borde con un efecto de relieve 3D.
none: Sin borde (valor por defecto).
EJEMPLOS ESTILOS PARA CSS:
1.Selector de clase: selecciona todos los elementos que tienen el atributo de class especificado.
Sintasis: .classname Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
Ejemplo:Borde de imágenes .Afecta al elemento html en el que inserte dicho estilo, para ello hay que escribir dentro de la etiqueta html <imgsrc="img\ballenas1.jpeg" class="img1">
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
Ejemplo: Color de fondo, h1, h2, encabezados.
Ejemplo: Pie de página
footer{
position:fixed;
bottom:0;
width:100%;
height:20px;
padding-bottom:16px;
background:rgb(50,228,169);
border-top:2pxsolid#f00;
z-index:2000;
}
3.#id se utiliza sólo para un elemento específico
#titulo-enlaces{
color:black;
}
#table-index{
width:380px;
border:2px;
border-style:outset;
border-color:black;
background-color:rgb(50,228,169);
font-size:24px;
}
4. Selector universal: se aplica a todos los elementos de la página.
*{
background-color: rgb(20, 20, 49);
}
Con esto obtendríamos que se aplique ese color a toda la página web.
HTML Y CSS
Crea una hoja de estilos CSS para aplicar formato al sitio web que comprende todas tus primeras prácticas. Estilos de borde de imágenes, color de fondo, estilos para los encabezados, etc.
Completa tu página index.htmlcon una imagen creada con inteligencia artificial en la que aparezca un estudiante que se parezca a ti trabajando con html y css en un ordenador.
Nuevo: al pinchar sobre la imagen se debe abrir en una pestaña nueva la imagen en grande!!
Además, escribe una introducción sobre todo lo que has aprendido hasta ahora, explicando algunas de las principales ETIQUETAS HTML y los TIPOS DE SELECTORES CSS.
ACTUALIZA TODO EN TU HOSTING
Y ASEGÚRATE QUE TIENES BIEN EL ENLACE EN TU BLOG!!
En la página index, añade también un pie <footer> con tu nombre y fecha:
Las páginas web (archivos html) que hemos realizado en las prácticas anteriores sólo podemos visualizarlas en el sitio local. Una vez que tenemos nuestra web completa en el sitio local funcionando correctamente, podemos alojarla en un servidor, si deseamos que puedan verla otros usuarios a través de internet. Para ello, vamos a obtener una cuenta en uno de los servidores gratuitos que existen.
Estos servidores requieren que nos registremos y nos ofrecen espacios gratuitos del orden de 1 GB.
Crea una nueva página que llames index.html que será la página principal desde donde se podrá acceder a todas las prácticas. Repasa los enlaces relativos que utilizaste en la práctica 5.
Completa tu página index.html con una imagen creada con inteligencia artificial en la que aparezca un estudiante que se parezca a ti trabajando con html y css en un ordenador.
Además, escribe una introducción sobre todo lo que has aprendido hasta ahora, explicando algunas de las principales ETIQUETAS HTML y los TIPOS DE SELECTORES CSS.
Para que yo pueda ver vuestra hoja de estilos, al final de la página principal, inserta un enlace a tu archivo .css
ACTUALIZA TODO EN TU HOSTING
Y ASEGÚRATE QUE TIENES BIEN EL ENLACE EN TU BLOG!!
