Ir al contenido principal

PROSESO DE PAGINA WEB

Moodle, wufoo, formulario En HTML, PHP Y CSS
Introducción: Moodle es una plataforma educativa lo cual nos podrá al tanto del establecimiento escolar a su mejor desempeño por lo cual tendremos que realizar algunos pasos para ir desarrollando su manejo junto con el servidor apropiado o gratuito en este caso para poder dar uso de el. Wofoo y su arquitectura y herramientas fueron diseñadas para clases en línea, así como también para complementar el aprendizaje presencial, para ello se introdujo un formulario con cascada de estilo, para formar un trabajo de calidad, lo cual desempeñara todos los requisitos necesarios. Con apoyo de HTML, PHP Y CSS

Misión: desarrollar y amplificar el conocimiento propio para alcanzar metas personales como laborales expresar con la mayor franqueza un alto desarrollo profesional y personal.

Visión: llevar acabo el mejor trabajo para solicitar los mejores posicionamientos estudiantiles y ser clasificados como una herramienta en todo nivel profesional.

Objetivo: Determinando que nuestro trabajo se desempeñara por dar la mejor información y trato a nuestros estudiantes y compañeros, con ello la mejor participación de alumnos para que concreten un nivel alto de conocimiento y manejo de su área, permitiéndonos alcanzar la meta con ellos al fin del proyecto.

Planteamiento del problema: realizar una estructura web para que podamos ingresar datos y poder mandarlos a evaluación con eso comprobando que se puede llevar un buen sistema de control y datos necesarios, para mejorar nuestro aprendizaje.

 Un poco de la historia de Moodle
Moodle
Es una aplicación web de tipo Ambiente Educativo Virtual, un sistema de gestión de cursos, de distribución libre, que ayuda a los educadores a crear comunidades de aprendizaje en línea.
Moodle fue creado por Martin Dougiamas, quien fue administrador de WebCT en la Universidad Tecnológica de Curtin.
Basó su diseño en las ideas del constructivismo en pedagogía que afirman que el conocimiento se construye en la mente del estudiante en lugar de ser transmitido sin cambios a partir de libros o enseñanzas, y en el aprendizaje cooperativo.
La primera versión de la herramienta apareció el 20 de agosto de 2002, a partir de allí han aparecido nuevas versiones de forma regular. Hasta julio de 2008, la base de usuarios registrados incluye más de 21 millones, distribuidos en 46.000 sitios en todo el mundo y está traducido a alrededor de 91 idiomas

Procedimientos
Moodle 1.1 principalmente para continuar con nuestra explicación de instalación tuvimos que investigar algunos procedimientos básicos con el fin de entender que es (Moodle) y para que nos serbia, aquí la definición resumida:
( Moodle es un software diseñado para ayudar a los educadores a crear cursos en línea de alta calidad y entornos de aprendizaje virtuales. Tales sistemas de aprendizaje en línea son algunas veces llamados VLEs (Virtual Learning Environments) o entornos virtuales de aprendizaje.

La palabra Moodle originalmente es un acrónimo de Modular Object-Oriented Dynamic Learning Environment (Entorno de Aprendizaje Dinámico Orientado a Objetos y Modular)
Moodle 1.2 Base a esto tenemos idea que nuestro proyecto sería educativo con fines de enseñanza al público con interés de aprender,  por ello tenemos que empezar con la idea del tema a desarrollar.
Por eso se tuvo que dividir el trabajo  empezando con la investigación de los servidores gratuitos.

Moodle1.3 para empezar todo debemos descargar el zip el cual se encuentra

Una vez descargando el zip podremos abrir los archivos que nos ayudaran para instalar plugings,php,lenguaje etc. Para el sitio subido en el servidor .
SERVIDORES
Para encontrar los servidores que nos fueran útiles para el proyecto yuvimos que investigar cuales eran los mas adecuados en este caso nosotros encontramos uno llamado hostinger  el cual nos permitio empezar con el dominio
 El dominio o conocido como DOMINIO WEB o DOMINO INTERNET, es una red de identificación asociada a un grupo de dispositivos o equipos conectados en una red. Lo cual nos permitio traducir las direcciones IP de cada nodo activo en la red.

Despues de esto tendríamos que modificarlo con el nombre y la dirección ip y todo lo necesario para adaptarlo a nosotros con sus medidas de seguridad en esta caso administradores contraseñas etc.
Después de tener el dominio tuvimos que cargarle la plataforma de Moodle lo cual tuvimos que seguir los siguientes pasos a seguir tanto para descargar el correcto como investigar cada uno de los archivos del zip
Paso a eso buscamos tutoriales de modificación con esa plataforma en este caso la modificamos en nuestro dominio web
PLATAFORMA WUFOO (formulario en linea/ base de datos)
En que consiste wufoo es página web para hacer formularios en línea que al diseñar un formulario automáticamente se crea la base de datos y la herramienta de administración necesarias para almacenar, gestionar y entender los datos recogidos, de forma fácil, rápida y divertida. Como nosotros hospedamos todo lo necesario, lo único que se necesita es un navegador, una conexión y unos pocos minutos para construir un formulario y empezar a utilizarlo.

Aquí te brindamos una serie de pasos para realizar un formulario en wufoo
¡Creación de formulario de wufoo¡ (Ingles)
Pasos
1.- entrar a la página de wufoo
2. - dirigisme a sign up for free
3.- dar clic en free
4.- aparecerá una ventana para así ingresar al formulario: el email, contraseña, la url de la pag. Y aceptar condiciones de wufoo
5.- Luego te diriges fórum y le das clic a let´s go make one!
6.- dar clic en Untitled form y te diriges a la parte superior derecha, ingresar el titulo deseado para el formulario y podras al igual un idioma
7.- luego dirigirse add a field y agregar name
8.-  después dar clic en single line text he ingresar field label por ejemplo: nombre del sitio web/blog
9.- dirigirse a la parte inferior hay una serie de opciones que se podrán escoger (requerido, no duplicado) y en la parte derecha está ( everyone, admin only) por ahora le damos clic en la opción Requerido/obligatorio le parecerá al lado del field label un asterisco en color rojo 
10.- volver a add a field y dar clic en paragraph text esto es para agregarle la sección de observaciones y también es opcional se puede incluir el paso 9 según el gusto del usuario
11.- nos dirigimos a lado inferior y le damos clic en save/ guardar
12.- nos aparecera una ventana Awesome. Your form is saved.  Y le das clic en la opción 3
Nota: ya cuando el formulario ya se haya guardado y se les olvido algún dato o agregarlo se puede editar sin ningún problema..
Despues de crear el formulario se tubo que descargar el ziip que tendríamos que adicionar ala plataforma de moodle para eso tuvimos que agregar algunos pasos a seguir en moodle
Moodle
1- tendriamos que regresarnos un poco en la cuestión de los cuestionarios ya que tendríamos que investigar sobre las materias con las que iba estar constituida nuestras preguntas las cuales fueros Administracion, informática o/u ing en sistemas,contaduría,pedagogía y diseño.
2- teniendo en mano los cuestionarios ya resultos pasaríamos a lo que moodle para agregarlas como parte de nuestra evaluación docente
3-ahora teníamos que veincular wufoo y mooodle como ya lo habíamos dicho estraemos el ziip para colocarlo en moodle y nos permita abrir un enlace directo al formulario
4-Su arquitectura y herramientas fueron diseñadas para clases en línea, así como también para complementar el aprendizaje presencial.
teniendo todo el proceso nos dedicamos a nuestra pagina donde tendríamos que unir tecnologías que fueran veinculas una con otra es decir unir los enlaces para mandarlos directos ala pag de moodle o wufoo, lo cual nos permitiría ya tener acceso a nuestros usuarios con forme a su correo.
El lenguaje CSS (cascada de estilo) es utilizado en la presentación de documentos HTML. Un documento HTML viene siendo “una página web”
Para concluir con nuestro proyecto logramos realizar algunos pasos a modificar nuestra página lo cual incluimos el formulario, para eso necesitamos saber que es HTML. Para definir y comprobar que nuestro formulario viene con la mejor fuente de información.
HTML: , un lenguaje de programación para la elaboración de páginas web, que nos permite darle modificaciones directamente a nuestra página.
Teniendo la información necesaria pasamos a crear nuestra cascada de estilo que se llevaría acabo de esta manera…


FORMULARIO EN HTML, PHP Y CSS
Un formulario es una sección del documento destinada a que el usuario introduzca datos que van a ser enviados a algún lado. puede contener cosas muy variadas: texto normal, elementos especiales llamados controles y otros elementos especiales denominados etiquetas son uno de los componentes más comunes en la mayoría de los sitios web o blogs.
entrándonos en la estructura básica de un formulario. Veamos con un ejemplo como se construye un formulario en HTML:



<form id="formulario" action="enviado.php" method="post">


2
    <fieldset>

3
        <legend>Formulario de Ejemplo</legend>

4
            <label>Nombre</label>

5
                <input id="campo1" name="nombre" type="text" />

6
            <label>Email</label>

7
                <input id="campo2" name="email" type="text" />

8
            <input id="campo3" name="enviar" type="submit" value="Enviar" />

9
    </fieldset>

10
</form>

El lenguaje Php se usa básicamente para los datos que se obtienen del formulario, pero el formulario en sí está hecho con código Html. Vamos a ver como se construye y qué opciones tenemos para que nuestros amigos o usuarios que acceden a nuestro sitio o blog puedan enviarnos datos o para rellenarlos nosotros mismos.
Por ejemplo, crear un enlace en nuestro código html para que así se pueda acesar a nuestra base de datos:


<form id="formulario" action="enviado.php" method="post">


Y luego el código php: “enviado.php”
<?php
$nombre = $_POST['nombre'];
$mail = $_POST['mail'];
$empresa = $_POST['empresa'];

$header = 'From: ' . $mail . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

$mensaje = "Este mensaje fue enviado por " . $nombre . ",
 de la empresa " . $empresa . " \r\n";
$mensaje .= "Su e-mail es: " . $mail . " \r\n";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " \r\n";
$mensaje .= "Enviado el " . date('d/m/Y', time());

$para = 'ejemplo@mail.com';
$asunto = 'Asunto del mail recibido';

mail($para, $asunto, utf8_decode($mensaje), $header);

echo 'Mensaje enviado correctamente';
?>
. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.
Ejemplo esto se debe colocar en el codigo html para que asi lo reconozca:
<link rel="stylesheet" type="text/css" href="estilos.css">
Y luego el CSS:
1label { font-weight: bold; color: #444; font-size: 14px; }

2
input { font-size: 14px; }

3
input[type="text"] { margin: 10px 0; background: #fff; border: 1px solid #ccc; color: #777; display: block; max-width: 100%; outline: none; padding: 7px 8px; }

4
input[type="submit"] { margin: 10px 0; background: #0088B2; color: #fff; padding: 8px 14px; font-weight: bold; display: inline-block; border: none; cursor: pointer; }

5
input[type="submit"]:hover { background: #444; }

¡Listo! ¡Se puede tener un formulario básico creado con HTML y PHP que funciona a la perfección! Puedes aplicarle los estilos que necesites para hacerlo más adecuado a tu diseño e incluso crear más campos siempre y cuándo crees sus respectivas variables en el archivo php que recolecta los datos.














Links del formulario, encuestas, y plataforma web con cascada de estilo.


PLATAFORMA WEB
http://www.utcadinformatica.x10.mx/
WUFOO
https://utcmetodo.wufoo.com/forms/r6htye0082vbwg/
https://utcmetodo.wufoo.com/forms/r6htye0082vbwg/
MOODLE FORMULARIO EN HTML, PHP Y CSS
http://www.utcadinformatica.x10.mx/utcADinformatica/



Comentarios

Entradas más populares de este blog

Area del triangulo DFD

Hola amigos bienvenidos al ejercicio 3 de este curso de algoritmo inicio a la programación. hoy vamos a ver cómo se hace un ejercicio de área de un triángulo. -Vamos a ingresar primero una salida que diga 'ingrese base' -se va hace una lectura que diga base  -una salida que diga ingresa altura  -una lectura que diga altura  -y ahora vamos a poner una asignación recordamos que en el curso pasado explicamos que la asignación era para declarar la variable en este caso vamos a declarar Qué área = base * altura // 2 por -último vamos a poner una salida que diga área es igual entre comillas coma y área link de descarga del ejrcicio  da clik aqui

Calculadora de sueldo EN DFD

Hola compañeros ingenieros Aquí les presento el segundo ejercicio en dfd llamado calculadora de sueldo ahora vamos a complicar un poco más la estructura El cuadro de asignación a partir de ahora se va a llamar: int A la figura de lectura le vamos a llamar: cin A la figura de salida le vamos a llamar: cout empezemos: Inicio Int: 'sueldo,horas,paga' Cout:ingrese horas Cin: horas Cout:' ingrese paga por hora' Cin:  paga Sueldo=horas*paga*15 Cout: 'la paga es de' , sueldo SI DESEAS VER EL EJERCICIO YA RESUELTO  DESCARGAR

100 PROGRAMAS EN LENGUAJE C#

PROGRAMAS. 1.    Prog. que obtenga el área de un triangulo, a partir de datos proporcionados por el usuario. 2.    Prog. que obtenga el área de un circulo, a partir de datos proporcionados por el usuario. 3.    Programa que pida los datos necesarios y muestre   en pantalla el área de un rombo. 4.    Pograma que a partir de datos dados por el usuario, calcule el área de un rectángulo. 5.    Programa que calcula la media aritmética de tres números cualesquiera dados por el usuario. 6.    Programa que calcule el volumen de un cubo , a partir de datos dados por el usuario . 7.    Programa que calcule el residuo de cualquier división entera. 8.    Prog. que obtenga el IVA sobre una cantidad dada por el usuario. 9.    Prog. que de acuerdo a una cantidad de pulgadas ingresadas por teclado, realice la conversión a centímetros. (1plg=2.54cm). 10.       Prog....