El desarrollo hoy en día se ha hecho cada vez más importante y requiere de una mayor cantidad de personas capacitadas por eso es esta ocasión explicare de manera simple la creación de formularios para realizar prácticas de programación con interfaz gráfica web pero antes de comenzar sería conveniente definir qué son las tecnologías y/o lenguajes de la web.
HyperText Markup Language, en español, Lenguaje de Marcado para Hipertextos es el elemento de construcción de una página web y se usa para crear y representar visualmente una página web.
Cascading Style Sheets, en español, Hojas de Estilo en Cascada es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG.
Es un lenguaje de programación interpretado, orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Pero qué significa todo esto? se preguntaran las personas que desconozca los términos que se utilizan en programación.
Orientado Objetos es un paradigma de programación (propuesta tecnológica) que viene con la intención de innovar la forma de obtener resultados. Sería entonces una manera de pensar a la hora de programar, utilizando objetos y estos manipulan los datos de entrada para la obtención de datos de salida específicos.
Basada en prototipos es una forma de programación orientada a objetos, consiste en que los objetos no se crean mediante la instanciación de clases sino mediante la clonación de otros objetos o mediante la escritura de código por parte del programador
Imperativoes un paradigma de programación radica en generar instrucciones que le indican al computador de cómo realizar una tarea.
En resumen se puede decir que JavaScript es un lenguaje de programación multi paradigma.
Ahora bien teniendo en cuenta estos conceptos se puede comenzar
El ejemplo tiene el siguiente enunciado:
Es un ejercicio realmente básico cuando se está comenzando en el mundo de la programación.
Para comenzar en un editor de texto se debe de realizar la estructura Básica HTML
En el body se crear el formulario con las éticas form como se puede observar se se colocan las etiquetas center actualmente obsoletas debido a al uso de archivos de estilo CSS pero para este ejemplo se pueden implementar sin problemas (Se recomienda para formularios más amplios definir id y class para centrar y agregar estilos). A continuación se observa el contenido de la hoja CSS.
Con la etiqueta p se coloca el mensaje que se quiera transmitir para este ejemplo sería la solicitud del Nombre y Edad.
Luego se crean los input. Se le asigna un id único. El type de entradas en este caso text. Y un placeholder. Como se puede apreciar son dos entradas de texto.
Y por último un button que activará la función que permitirá mostrar la Edad de la persona que esté ingresando sus datos. Y un párrafo en donde se mostrará el mensaje de salida
Ahora bien luego de realizar el Formulario, se debe programar el botón para que haga la función que se quiere. El código estara comentado para su mejor entendimiento.
Para finalizar se muestra una vista previa de cómo quedaría el formulario
Vista Previa
Ahora pueden realizar prácticas de programación con interfaz web.
Como extra les dejo un listado de ejercicios básicos
Cualquier duda pueden comentar y les ayudare
