ESTRUCTURA BASICA ESTILOS Y SEPARACION DE ARCHIVOS.

Hasta el momento lo que se ha diseñado en web esta integrado en un solo archivo .html donde se puede usar estilos y código js.

Lo ideal en una aplicación web frontend es que la estructura el estilo y la lógica estén separados, es decir deben existir 3 archivos los cuales son .HTML .css .js

Mediante el software y/o entorno de desarrollo IDE Visual studio code, darle estilo a un botón mediante etiqueta html5 section.

Estructura o esqueleto --> .HTML

Estilo Visual ---> .css

Logica en el front --> .js




Responder:

1. Que es IDE.

2. Como colocar la estructura básica html en vsc(visual studio code).

3.Cuales son las equietas presentes en la estructura básica de HTML.


4. Para que sirve la etiqueta link 

R/=Es el codigo q une dos archivos separados para crear el funcionamiento 

5.captura de archivo html sin estructurar.

6. captura de los archivos separados .html y .css

7. captura de funcionamiento.

10/02/26 ESTUCTUACION 
ETIQUETA SCIPT
Esta etiqueta permite efeencia un archivo js desde html, se puede colocar dentro de la etiquetas head
de configuracion, oal final de las etiqutas body, donde es recomendable ya que primero se debe de dar a cargar de los componentes html: botones, menu, sliders...etc.

ACTIVIDAD
Diseñar una aplicacion estructurada la cual de un mensaje de saludo al presionar un boton, la la aplicacion debe tener archivo separados.
 
1. Crear archivo html
2. Crear archivo js
3 Enlazarlos.

1- Tomar captura de consola.


2. Tomar captura de funcionamiento de la aplicación web.

3. Copiar codigos html y java script.

html
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>botonsaludo</title>
</head>
<body>

    <input type="button" value="boton de saludo" onclick="saludo()">
    <script src="logica.js">    </script>
</body>
</html>

Java script
console.log("mensaje de java script")

 function saludo()
 {
    alert("hola soy un mensaje ejecutado por un boton");
 }

4. Realizar descripcion.

 

17/02/26 

Calcular velocidad

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculo de velocidad</title>
</head>
<body>
   
    <h3>Digite distancia</h3>
    <br>
    <input type="text" name="" id="cajadistancia" placeholder="digite en metros">
    <br>
    <h3>Digite tiempo</h3>
    <input type="text" name="" id="cajatiempo" placeholder="digite en segundos">
    <br>
    <input type="button" value="calcular v" onclick="calcularvelocidad()">
    <script src="funciones.js"></script>
</body>
</html>

function calcularvelocidad()
{
console.log("esta es la funcion calcular velocidad")
let velocidad=0, distancia=0, tiempo=0
distancia=document.getElementById("cajadistancia").value
distancia=parseFloat(distancia)
console.log(distancia)
tiempo=document.getElementById("cajatiempo").value
tiempo=parseFloat(tiempo)
console.log(tiempo)
velocidad=distancia/tiempo
alert("la velocidad es "+velocidad+ "m/s")
}

24/02/2026

Realizar una aplicacion estructurada donde se separe;logica, estructura y estilo, el usuario ingresa nu y aceleracion y se da el resultado de la fuerza en Newtons

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CALCULO DE FUERZA</title>
    <link rel="stylesheet" href="estio.css">
</head>
<body>
    <h1>CALCULO DE FUERZA EN NEWTONSS</h1>
    <h2>diguite la masa en kg</h2>
    <input type= "text" name="" id="cajamasa"placeholder="digite masa en kg">
    <h2>DIGITE LA ACELERACION EN m/s^2</h2>
    <input type="text "name="" id="caja" placeholder="digite aceleracion en m/s^2">
    <br><br>
<input type="button" value="calcular fuerza"onclick="calculofuerza()" class="estiloboton">
<script src="logica.js"></script>
   
</body>
</html>

console.log("caculo de fuerza.....archivo enlazado....");
function calculofuerza()
{
    console.log("funcion calculo fuerza")
     let masa=0, aceleracion=0, fuerza=0
    masa=document.getElementById("cajamasa").value
    console.log(masa)
    masa=parseFloat(masa)
    aceleracion=document.getElementById("caja").value
    console.log(aceleracion)
    aceleracion=parseFloat(aceleracion)
    fuerza=masa*aceleracion
    console.log(fuerza)
    alert("la fuerza es "+fuerza+ "Newton")
   
}

*{
    background-color: rgb(102, 93, 236);
}
.estiloboton
{
    background-color: rgb(226, 186, 76);
    color: rgba(0, 0, 0, 0.082);
}

03/03/2026

Diseñar una aplicacion web la cual modele la formula a=F/m 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculo de aceleracion</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
<section class="clasesection">
     <h1>Digite masa en KG</h1>
     <input type="text" name="" class="cajamasa" id="cajamasa" placeholder="Digite masa en KG">
     <h1>Digite fuerza en newton</h1>
     <input type="text" name="" class="cajafuerza"  id="cajafuerza" placeholder="Digite la fuerza en newton">
     <br><br><br>
     <input type="button" onclick="calculoaceleracion()" class="estiloboton" value="calcular aceleracion">    
</section>
<script src="logica.js"> </script>
</body>
</html>

console.log("archivo logica.js")
function calculoaceleracion()
{
    let fuerza=0, masa=0, aceleracion=0
    console.log("funcion calculo aceleracion")
    masa=document.getElementById("cajamasa").value
    console.log(masa)
    masa=parseFloat(masa)
    fuerza=document.getElementById("cajafuerza").value
    console.log(fuerza)
    fuerza=parseFloat(fuerza)
    aceleracion=fuerza/masa
    alert("aceleracion es " +aceleracion+" m/s^2")
}

.clasesection
{
    background-color: rgb(76, 182, 173);
    border: 6px solid rgb(18, 37, 202);
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
}
.estiloboton
{
    background-color: rgb(52, 70, 175);
}

.clasesection
{
    background-color: rgb(76, 182, 173);
    border: 6px solid rgb(18, 37, 202);
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 150px;
}
.estiloboton
{
    background-color: rgb(52, 70, 175);
}
.cajafuerza
{
    background-color: rgb(129, 198, 219);
}
.cajamasa
{
    background-color: rgb(129, 198, 219) ;
}


10/03/2026

    Diseñar un aplicacion web la cual reciba los datos de las notas de 5 materias; Implementacion de proyectos, redes, aplicaciones, base de datos, experiencia de usuario

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promedio de materias</title>
    <link rel="stylesheet" href="ESTILO.css">
</head>
<body>
    <section class="seccionpromedio">
        <h1>Calculo de promedio</h1>
        <input type="text" name="" id="implementacion" placeholder="Digite nota implementacion">
        <br><br>
        <input type="text" name="" id="redes" placeholder="Digite nota redes">
        <br><br>
        <input type="text" name="" id="aplicaciones" placeholder="Digite nota aplicaciones">
        <br><br>
        <input type="text" name="" id="basedatos" placeholder="Digite nota base de datos">
        <br><br>
        <input type="text" name="" id="experienciausuario" placeholder="Digite nota experiencia de usuario">
        <br><br>
        <input type="button" onclick="calcularpromedio()" class="estiloboton" value="Calculo promedio">
    </section>  
    <script src="LOGICA.js"> </script>
</body>
</html>


console.log("Aplicacion")
function calcularpromedio()
{
    let implementacion=0, redes=0, aplicaciones=0, basedatos=0, experienciausuario=0
    console.log("funcion promedio")
    implementacion=parseFloat(document.getElementById("implementacion").value);
    redes=parseFloat(document.getElementById("redes").value);
    aplicaciones=parseFloat(document.getElementById("aplicaciones").value);
    basedatos=parseFloat(document.getElementById("basedatos").value);
    experienciausuario=parseFloat(document.getElementById("experienciausuario").value);
   
    promedio=(implementacion+redes+aplicaciones+basedatos+experienciausuario)/5

    alert("su promedio es"+promedio)
}


.seccionpromedio
{
    background-color: rgb(151, 255, 255);
    border: 8px solid rgb(147, 147, 241);
    border-radius: 10px;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

.seccionpromedio #implementacion
{
    background-color: rgb(171, 243, 237);
}
.seccionpromedio #redes
{
    background-color: rgb(171, 243, 237);
}
.seccionpromedio #aplicaciones
{
    background-color: rgb(171, 243, 237);
}
.seccionpromedio #basedatos
{
    background-color: rgb(171, 243, 237);
}
.seccionpromedio #experienciausuario
{
    background-color: rgb(171, 243, 237);
}
.estiloboton
{
    background-color: rgb(134, 134, 230);
}





























Comentarios

Publicar un comentario

Entradas populares de este blog

Estructura mientras o ciclo, bucle o loop while

Imagen
 Estructura mientras o ciclo, bucle o loop while Son un tipo de estructuras cíclicas, las cuales se repiten mientras la expresión lógica a evaluar sea verdadera. Realizar 5 frases que inicien con Mientras y tengan una expresión lógica verdadera. Ejemplo: Mientras "haya una pelea" me distancio.  *Mientras "el profe explica" yo pongo atención. *Mientras "me levanté temprano" llego a tiempo al colegio. *Mientras "coma bien" estaré sano. *Mientras "tome agua" estaré hidratado *Mientras "estoy jugando futbol con mis amigos" me divierto con ellos  Realizar un algoritmo en seudocódigo y diagrama de flujo; Mientras "sea verdadera la expresión" repetir el mensaje "hola el nombre me gusta tics" Colocar captura de pantalla del algoritmo y ejecución Realizar un algoritmo en Java script, usando como mensaje console.log() y que se ejecute mientras un contador sea menor a 100. Colocar captura de pantalla  de la aplicación...
Leer más

VIABILIDAD DE UN PROYECTO

 ¿Que entiende por viabilidad de un proyecto? RTA:Evaluacion integral de su capacidad para completarse con exito, entregando beneficios definidos dentro de limitaciones de tiempo, recursos y presupuesto  Procesos de estudio cuantitativo que busca evaluar el desempeño a futuro de un proyecto. ¿Cual es el titulo de mi proyecto? RTA:Fundacion ecologica plantas TICS ¿Que preguntas que relacionarian con respuestas cuantitativas que pudiecen obtener informacion de viabilidad de su proyecto?. Realice 5 1. estarias dispuesto a ver un catalogo sobre plantas por un sitio web ? a)si             b)no 2. Que red social es la que utlizas con mas frecuencia? a)facebook b) instagran c)whatsaap d) tiktok 3. te interesarias en un sitio web de compra y venta de plantas? a)si              b)no 4. usarias una pagina web para comprar plantas en el municipio de tocaima  a)si        ...
Leer más