|
|
|
|
|
|
|
|
- Lección 1 - Crear páginas
- Un ejemplo para crear páginas
- Abrir el proyecto de ejemplo
- Primera página: introducir datos en un formulario
- Cómo crear una página
- Controles de entrada de formularios
- Primer control: un control Campo de entrada para el apellido
- Mejor la experiencia de usuario de la página
- Editar el control "Address"
- Alineación de controles
- Definir el estilo de los controles "Username" y "Password"
- Probar la página en un navegador
- Conclusión
Tutorial - Crear un sitio WEBDEVLección 1 - Crear páginas Abordaremos los siguientes temas: - Crear una página de formulario.
- Crear controles.
- Mejor la experiencia de usuario de la página.
 10 min Un ejemplo para crear páginas Para desarrollar con WEBDEV, vamos a comenzar creando algunas páginas. Estos ejemplos le permitirán entender el modo de funcionamiento de los sitios de Internet e Intranet, y le permitirán manipular una base de datos. Recordatorio: Las páginas muestran información y permiten a los usuarios introducir datos. Los usuarios pueden interactuar directamente con las páginas mediante controles, botones, etc.  En esta lección, nos centraremos en cómo crear páginas simples. Trabajaremos con un proyecto que ya se creó y que no contiene ningún elemento. Abrir el proyecto de ejemplo En WEBDEV, abra el proyecto "My_First_Pages": - Vaya a la página de inicio de WEBDEV (Ctrl +<).
- Haga clic en "Tutorial", luego en "Tutorial - First website", haga doble clic en "My first pages - Exercise".
 Advertencia
Este proyecto se utilizará en las diferentes lecciones de este tutorial.
Primera página: introducir datos en un formulario Para la primera página, crearemos un formulario de registro. Este formulario contendrá diferentes controles para introducir información personal. Cómo crear una página Puede crear una página directamente desde los botones de acceso rápido: - Haga clic en
 en los botones de acceso rápido. La ventana de creación de nuevos elementos se abre. Esta ventana permite crear todos los elementos del proyecto. - Haga clic en "Página", y luego en "Página". El asistente de creación de páginas se abre automáticamente.
- Seleccione "En blanco".
- Valide (botón "OK").
La página se crea automáticamente en el editor. La ventana para guardar la página se abre. En esta ventana se muestra: - El título de la página. Este título se mostrará en la barra de título del navegador.
- El nombre de la página. Este nombre corresponde al nombre lógico de la página. Se utilizará para manipular la página mediante programación.
- La ubicación. Esta ubicación corresponde al directorio en el que se guardará el archivo de la página.
En nuestro ejemplo, esta página es un formulario. Teniendo esto en cuenta, vamos a definir el nombre de la página. - Introduzca el título de la página: "Form".
- Valide (botón "OK").
Información clave:
El nombre de la página (que se utilizará en el código) se construye automáticamente a partir del título de la página. Si lo desea, puede definir un nombre diferente al del título de la página. Controles de entrada de formularios Hemos creado la primera página. Ahora, vamos a agregar los diferentes controles del formulario. Estos controles permitirán al usuario introducir los datos necesarios para el registro. El formulario contendrá los siguientes controles: - Last name.
- First name.
- Address.
- Email.
- Username.
- Password.
Todos estos controles son controles Campo de entrada que permitirán a los usuarios introducir datos. Primer control: un control Campo de entrada para el apellido Empecemos creando el control Campo de entrada donde el usuario introducirá el apellido: - En la pestaña "Creación", en el grupo "Controles frecuentes", haga clic en
 . El control sigue el movimiento del cursor. - Haga clic dentro de la página en blanco para crear el control. El control aparece con un recuadro y controladores de tamaño para indicar que está seleccionado.
Información clave:
Para crear un control, vaya a la pestaña "Creación" de WEBDEV: en esta pestaña podrá acceder a todos los controles disponibles. El título predeterminado de los nuevos controles es "Campo de entrada". Cambie este título por "Last name": - Haga clic en el control (un solo clic): el texto pasa a modo de edición.
Si prefiere utilizar el teclado, pulse la barra espaciadora o la tecla Entrar para editar el texto. - Escriba "Last name" y presione Entrar para validar.
- El título cambia inmediatamente.
- El nombre del control también cambia: aparece en el tooltip al pasar el cursor sobre el control: EDT_Last_name.
Analicemos el nombre sugerido por WEBDEV: comienza con las letras "EDT_". Este prefijo se agrega automáticamente porque el proyecto utiliza un estilo de código. Para obtener más información, consulte Estilo de código. Para nuestro ejemplo, limitaremos la longitud del texto a 30 caracteres (más que suficiente en la mayoría de los casos). Para ello, utilizaremos la ventana de descripción del control. - Haga doble clic en el control.
La ventana de descripción del control se abre:
En esta ventana, podemos ver que: - El control es de tipo Texto (1). Este control permite a los usuarios introducir cadenas.
- El control tiene un tamaño de entrada ilimitado (2).
- Introduzca "30" en "Tamaño de entrada (caracteres)".
- Haga clic en "OK" para confirmar los cambios.
Información clave:
Para cada elemento del proyecto, la ventana de descripción muestra todas las opciones de configuración posibles. Estas opciones están agrupadas por temas, en diferentes pestañas. Puede abrir esta ventana seleccionando "Descripción" en el menú contextual, o pulsando Alt + Entrada. | Realice las siguientes acciones:
Siga los mismos pasos para crear los siguientes controles Campo de entrada debajo de "Last name":
| | | | Título | Tipo | Tamaño |
|---|
| First name | Texto | 30 | | Address | Texto multilínea | | | Email | Texto | 255 | | Username | Texto | 10 | | Password | Contraseña | 10 |
Como acabamos de ver, los anteriores controles no son del mismo tipo. Para cambiar el tipo del control Campo de entrada, abra la ventana de descripción y seleccione el tipo deseado. |
Hemos creado los principales controles del formulario. Ahora vamos a mejorarlo.Mejor la experiencia de usuario de la página Hemos creado una página sencilla, arrastrando y soltando los controles. Ahora, tenemos que mejorar la página en términos de apariencia y usabilidad. Realizaremos los siguientes cambios: - Habilitar la entrada de texto multilínea en el control Campo de entrada.
- Alinear los distintos controles Campo de entrada
- Utilizar texto rojo en los controles Username y Password.
Editar el control "Address" Empecemos por el control "Address". Este control debe mostrar varias líneas. Vamos a agrandarlo. Para ampliar verticalmente el control "Address": - Haga clic en el control "Address". Los controladores de tamaño aparecen alrededor del control, indicando que ha sido seleccionado.
- Haga clic en el controlador inferior del área de entrada y arrástrelo hacia abajo.
Del mismo modo, puede ampliar los controles horizontalmente. Alineación de controles Una vez colocados en la página, puede que los controles no estén perfectamente alineados. Para obtener una interfaz profesional, debemos comprobar y ajustar la alineación de los controles. Para alinear los controles de la página: - Seleccione el control "Last name" y, a continuación, todos los controles Campo de entrada de la página (mantenga pulsada la tecla Ctrl y haga clic en los diferentes controles).
- Vaya a la pestaña "Alineación" del menú de WEBDEV. Esta pestaña contiene todas las opciones de alineación disponibles para los controles.
- Vamos a alinear los lados izquierdo y derecho de los controles. Haga clic en "Justificar (Int. y Ext.)".
Información clave: Elija cuidadosamente el primer control. Las opciones de alineación se basan en: - El tamaño del primer control seleccionado: se utilizará como referencia para el tamaño de los demás controles.
- La posición del primer control seleccionado: todos los controles seleccionados se alinearán de acuerdo con el primer control seleccionado.
Definir el estilo de los controles "Username" y "Password" Para que el texto de los controles "Username" y "Password" se muestre en rojo, cambiaremos el estilo predeterminado de estos controles.
El "estilo" comprende todas las opciones de visualización de las distintas partes de un control. Todas estas opciones se encuentran en la pestaña "Estilo" de la ventana de descripción del control. Para editar el estilo predeterminado del control Username: - Seleccione el control Username.
- Haga doble clic en el control para abrir la ventana de descripción.
- En la pestaña "Estilo" seleccione el elemento "Texto (CSS)".
- Despliegue las opciones de "Color" y seleccione el color rojo.
- Valide la ventana de descripción del control "Username".
Vamos a aplicar el mismo estilo al control "Password". No es necesario volver a seguir todos estos pasos: simplemente seleccione el control "Password" y presione F4.
La tecla F4 aplica la última acción a los controles seleccionados. En nuestro caso, el nuevo color se aplica automáticamente al control "Password". Obtendrá la siguiente UI: Probar la página en un navegador Hemos creado la primera página. También mejoramos la página en el editor WYSIWYG, que muestra la página tal y como se verá en el navegador. Sin embargo, siempre es necesario realizar una prueba. Vamos a probar la página: - Haga clic en
 en los botones de acceso rápido. - La página aparece en el navegador. Puede introducir datos pero estos no se procesan ni se guardan.
- Cierre el navegador.
La creación de esta primera página nos permitió ver las principales funcionalidades de WEBDEV: - creación de páginas.
- creación de controles Campo de entrada,
- opciones para alinear y organizar controles en la página,
- etc.
En la próxima lección, crearemos rápidamente una base de datos a partir de esta primera página para guardar y comprobar la información introducida. Proyecto completado
Si desea comprobar el resultado final de los pasos descritos en este tutorial, puede abrir una versión finalizada del proyecto. Este proyecto contiene las diferentes páginas creadas en las lecciones de esta parte. Este proyecto muestra el resultado esperado.
Para abrir el proyecto completado, vaya a la página de inicio de WEBDEV y haga clic en "Tutorial", luego en "Tutorial - First website", haga doble clic en "My first pages - Answers". |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|