Formularios - TICII

 Formularios

Los formularios HTML son componentes esenciales de la mayoría de los sitios web y aplicaciones web. Permiten la interacción entre los usuarios y esos sitios web y son un concepto clave que deben comprender los desarrolladores web.

enlace 1

Atributos de la etiqueta <form>

- acción: Especifica la URL donde se deben enviar los datos del formulario.

- método: especifica el método HTTP utilizado para enviar datos del formulario (POST o GET).

- objetivo : especifica dónde mostrar la respuesta después del envío del formulario 

(por ejemplo, _self, _blank, _parent, _top)

- nombre : Asigna un nombre al formulario con fines de identificación.

Tipos de entradas en un formulario:

- texto (text)

- opciones (radio)

- casillas de verificación (checkbox)

- desplegables **

*** Busca información para crear un elemento que sea un desplegable de opciones****

AÑADE UN FORMULARIO A TU SITIO WEB atendiendo a las siguientes instrucciones:

- Crea una nueva página formulario.html en la que diseñes un formulario relacionado con la temática de tu web (puede ser un formulario de registro, de opinión, de sugerencias, de consulta, etc.), y debe tener al menos 10 campos para rellenar, variando tipo texto, radio, casillas de verificación y desplegables. Puedes probar también otros tipos predefinidos como "email", "number", etc...

*ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚*ੈ✩‧₊˚

Actividad extra: prueba a crear un documento php para recoger los datos del formulario.

Visita este enlace: https://www.php.net/manual/es/tutorial.forms.php

Ideas Arduino

 - Reproducir audio

https://www.youtube.com/watch?v=tNNycZpvg-Y&ab_channel=AndrobotTECH

https://www.youtube.com/watch?v=pOFFsiolsGU&ab_channel=AndrobotTECH

Sensor de distancia y Servomotor - ARDUINO - 3CyR

Seguimos avanzando con prácticas que nos permiten conocer el funcionamiento de distintos sensores y actuadores.

Hasta el momento hemos realizado prácticas con:

- Diodos LED

- Pantalla LCD

Repasamos:

P1: encender y apagar un led

P2: secuencia de leds

P3: semáforo

P4: mensaje en LCD

Vamos ahora a conocer el sensor de distancia por ultrasonidos

P5_sensor de distancia (enlace a fotocopia)

Y el servomotor, que es un actuador que gira solamente hasta 180 grados

P6_servomotor (enlace a fotocopia)

Después de realizar estas dos prácticas  intenta unirlas de tal forma que el servomotor gire 90º cuando se acerca un objeto a menos de 50cm (como si fuera una barrera que se abre cuando se acerca un coche). Está será la P7.

Tutorial1

Tutorial2

Diseño y publicación de presentaciones con herramientas Cloud Computing

 Repasamos los principales componentes del Hardware de un ordenador:

Sergio > Disco Duro

Antonio > Procesador

Nico >  Placa Base

Marcos > Periféricos de entrada

Juan Marcos > Periféricos de salida

Unai > RAM

Lucía > Tarjeta gráfica

Herramientas Cloud Computing para el diseño y publicación de presentaciones:

:: CANVA ::

:: GENIALLY ::

:: PREZI ::

************************

Para finalizar este tema, asegúrate que conoces los siguientes conectores y sabes qué tipo de componentes conectarías a cada uno de ellos:

- ATX

- SOCKET

- SLOTS O RANURAS DE EXPANSIÓN

- RANURAS PCI

- RANURAS DE RAM

- CONECTOR SATA

- PS2

- RJ45

- USB

- HDMI

- JACKS DE AUDIO

- CONECTOR VGA

CMS - Wix - TICI

 

P4 ARDUINO - Texto en pantalla LCD - 3ºCyR

PARA LA SEMANA DEL 14 DE OCTUBRE DEBEREIS  TERMINAR LAS PRÁCTICAS DE LA SEMANA PASADA >>> PINCHA AQUÍ PARA VER EL LINK

-  LA PRÁCTICA DEL PARPADEO DEL LED

- LA PRÁCTICA DEL COCHE FANTÁSTICO

- EL SEMÁFORO (Secuencia de led rojo, amarillo y verde)

Si las has terminado, haz la siguiente ampliación y asegúrate que las tienes guardadas con estos nombres en Tinkercad, aunque no corresponda con lo que dije al principio:

P1_LED_NOMBRES

P2_LUCES_NOMBRES

P3_SEMAFORO_NOMBRES

Ampliación: Probad a programar un cruce de semáforos, cuando uno está en verde, el otro en rojo y viceversa. Y para los más avanzados podéis probar a simular también los semáforos de peatones!! Contará como positivo en la práctica 3

(Realizad primero la práctica en Tinkercad y luego pasad el código al IDE de Arduino para conectarlo al montaje real en la protoboard)

Y si todavía os sobra tiempo, probad con la siguiente práctica que muestre un mensaje en la pantalla LCD. Hay fotocopias impresas de todas las prácticas en la mesa de la izquierda, así como cables, leds y resistencias por si necesitáis más.

P4 - Conectar y mostrar texto en LCD - Hello World (fotocopia)

Amplía la siguiente imagen para ver bien las conexiones:

Avanzado: Texto en movimiento

CSS - TICII

Fundamentos básicos de CSS - (Cascading Style Sheets o Hojas de Estilo en Cascada)

Html y Css_2Bach

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). 

2. Hosting de una página web - TICII

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.

Hosting gratuito:

https://007sites.com/

awardspace.com

webs.com

Mi web en el hosting 007sites: 

http://practicashtmleva.atwebpages.com/index.html

http://practicashtmleva2.atwebpages.com/

Mi tutorial para subir nuestros archivos al hosting (by Vidyard)

CMS - Wordpress - TIC I

 Tutoriales para iniciarse en Wordpress:

- Cómo crear entradas en Wordpress Blog

- Curso de Wordpress

Actividad: Creación de una web personal para la publicación de algún contenido de vuestra elección.

ejemplo