ClubEnsayos.com - Ensayos de Calidad, Tareas y Monografias
Buscar

PRIMEROS PASOS PARA PROGRAMAR

srotakuBiografía29 de Julio de 2021

2.368 Palabras (10 Páginas)111 Visitas

Página 1 de 10

PRIMEROS PASOS PARA PROGRAMAR hh

 

1. Vamos a descargar nuestro editor de texto y vamos a la 2 opción que nos sale.

[pic 1]

[pic 2] 

  1. Procedemos a ejecutar nuestro instalador de brackets y seguimos los pasos de instalación.

[pic 3]

 

  1. Luego de finalizar la instalación buscamos nuestro editor de texto en el equipo.

[pic 4] 

 

  1. Si realizamos correctamente los pasos anteriores tendremos instalado el editor de texto.

[pic 5] 

 

 

  1. En la parte derecha encontraremos los siguientes iconos, seleccionamos en de la mitad para instalar los atajos de teclado.  

[pic 6]

  1. Luego nos aparecerá la siguiente ventana en el campo de búsqueda vamos a

[pic 7]

 

 

 

 

 

 

 

  1. Luego instalamos la segunda opción que nos aparece.

[pic 8]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

NUESTRO PROYECTO  

 

  1. Creamos nuestra carpeta principal del proyecto en el escritorio del computador para tener un rápido acceso y le asignamos un nombre claro para reconocerlo rápido.

[pic 9] 

  1. Entramos a nuestra carpeta proyecto1 y crearemos 3 carpetas css, img y js.

[pic 10] 

Al ser creadas quedan organizadas en orden alfabético.

  • Nuestra carpeta css la usaremos para guardar todos los estilos o diseños para personalizar nuestra aplicación.
  • Nuestra carpeta img la usaremos para guardar todas las imágenes que usaremos en nuestra aplicación.  
  • Nuestra carpeta js la usaremos para guardar nuestras librerías y el archivo main que usaremos para dar las ordenes y funciones de nuestra aplicación.

Nuestra carpeta de css debe tener el siguiente contenido.

[pic 11] 

Nuestra carpeta js debe tener el siguiente contenido.

 

[pic 12] 

Encontraremos una carpeta llamada lib en esta carpeta están las librerías necesarias para el funcionamiento de nuestro aplicación.

 

[pic 13] 

Nuestra librería jquery.animateSprite.min nos permite el funcionamiento de todas las animaciones que se encuentren en nuestra aplicación.

Nuestra librería jquery.mobile-1.4.5.min nos permite el funcionamiento de nuestra aplicación en dispositivos móviles.

Nuestra librería jquery_touch_punch_min nos permite el funcionamiento de los eventos touch en nuestros teléfonos.

  1. Luego entraremos a nuestro editor texto brackets para crear nuestro archivo index y main de nuestra aplicación, estando en nuestro editor de texto encontraremos la opción archivo y seleccionamos nuevo.  

[pic 14]

  1. Luego de crear nuestro archivo nuevo lo guardaremos de la siguiente manera, vamos a archivo nuevamente y seleccionamos la opción que dice guardar como.

[pic 15] 

Guardaremos nuestro archivo de la siguiente manera, buscaremos nuestra carpeta proyecto1 que está en el escritorio de nuestro computador, en nombre colocaremos index.html, en tipo seleccionamos la opción Web Files y seleccionamos guardar.

 

[pic 16] 

Luego realizaremos el mismo proceso para nuestro archivo main pero lo guardaremos en la carpeta js de la siguiente manera, entramos a la carpeta js, en nombre le colocaremos main.js, en tipo seleccionamos la opción All Files y luego guardamos.  

[pic 17] 

  1. Al terminar de crear nuestros archivos vamos a abrir toda nuestra carpeta en el editor de texto de la siguiente forma, vamos a ir a archivo y en la opción abrir carpeta.

[pic 18] 

Luego buscaremos nuestra carpeta que la tenemos en escritorio y le damos un solo click a nuestra carpeta para seleccionarla, luego para finalizar damos en la opción seleccionar carpeta.

 

[pic 19] 

Si realizamos los pasos anteriores veremos nuestra carpeta en el editor de texto y hacemos click en nuestro archivo index..

[pic 20]

  1. Estando en nuestro archivo index, nos ubicaremos en la línea 1 de nuestro archivo, vamos a escribir html:5 y damos en nuestra tecla tabulador del teclado (es la que tiene 2 flechas, 1 mirando a la izquiera y 1 mirando ala derecha).

[pic 21] 

Si realizamos correctamente los pasos anteriores nos va aparecer lo siguiente después de presionar la tecla tabulador.

<html lang=”en”> Esta etiqueta nos muestra el tipo de documento que trabajaremos y para cerrar la etiqueta es </html> y todo lo que este entre esa etiqueta nos aparecerá en nuestra aplicación.

<head> Esta etiqueta nos indica la cabeza de nuestra aplicación y se cierra de esta manera </head>

<tittle> Esta etiqueta nos sirve para asignarle el nombre a nuestra aplicación y cierra de esta manera </tittle>

<body> Esta etiqueta es para el cuerpo de nuestra aplicación y lo que este entre esta etiqueta aparece en la aplicación </body> 

 

[pic 22] 

         Otras etiquetas que se tienen en cuenta y se usan con más frecuencia son:

         <div>Esta etiqueta cumple la función de contenedor</div>

<div align=”center”>Si le agregamos a nuestra etiqueta la propiedad de align=”center” nos permite centrar todo el contenido de esta etiqueta</div>

<h1>Esta etiqueta nos permite darle una característica a las palabras bien sea para resaltar o asignarla como título esta etiqueta cambia de tamaño dependiendo del número que se le asigne (va de h1 a h6)</h1>

 

 

 

 

PARTES DE NUESTRA APLICACIÓN  

 

[pic 23]

 

CÓDIGO DE CADA PANTALLAZO  

 

  1. Primero utilizamos las líneas de código para llamar a nuestras librerías que están en la carpeta js y nuestros estilos que están en la carpeta css, toda estas líneas se ubican entre la etiqueta <head> y </head> en el mismo orden que vemos en la siguiente imagen.

[pic 24] 

  1. Iniciamos con el código necesario para cada pantallazo o página de nuestra aplicación, entre la etiqueta <body> y </body> ubicamos las líneas de código que veremos en las siguientes imágenes.

Encontraremos la propiedad id (que es la identificación de nuestro contenedor) en la línea 18.

En un cuadro del color azul observaremos las líneas necesarias para crear el menú de nuestra aplicación que tiene que ir en todas las paginas o pantallazos la misma línea de código pero cambiando el id, en el siguiente

[pic 25]

En la siguiente imagen encontraremos el código necesario para la cabeza de la página o pantallazo que es con data-role=”header” donde encontraremos el código para el botón de nuestro menú en la línea 24, en la línea 25 encontramos el título de nuestra página o pantallazo, en la línea 26 está el código para el botón salir y en la línea 27 cerramos nuestro contenedor div

[pic 26] 

  1. En la siguiente imagen miramos las líneas para el contenido de nuestra página.

[pic 27] 

  1. por ultimo tenemos las líneas de nuestro pie de página o footer donde encontramos nuestros botones de inicio o home, el botón de editar, el botón de info o información, y los botones de las flechas o arrow-l y arrow-r que nos permiten movernos entre páginas y para que funcionen  correctamente debemos asignar la pag a la que se dirigen como ejemplo la línea 36 vemos la dirección href=”#pag1” que nos lleva a la página de inicio eso quiere decir la página 1 si queremos cambiar la dirección solo cambiamos pag1 por el nombre de la página de resto se deja igual no podemos cambiar más.

[pic 28] 

PREGUNTAS DE FALSO Y VERDADERO

En nuestra contendor de contenido colocaremos las siguientes líneas de código para realizar nuestras preguntas de falso y verdadero  

  1. Encontramos el primer h2 que es nuestro título.
  2. Encontramos el segundo h2 que es nuestra instrucción  
  3. Encontramos un contenedor con un data-role=”controlgroup” que nos permite agrupar el siguiente contenido y darles a todos propiedades.
  4. Encontramos la línea de código para montar una imagen.
  5. Luego encontramos el contenedor donde colocamos nuestra pregunta.
  6. Este paso es opcional otro controlgroup para los botones de falso y verdadero.
  7. Luego encontramos 2 líneas de código 1 para el botón de verdadero y la otra línea para el botón de falso.
  8. Por ultimo encontramos el contenedor para observar en el contenido la frase que nos dice si la respuesta es correcta o incorrecta.
  9. Al finalizar guardamos dando en la tecla CTRL y la tecla S al tiempo.

[pic 29] 

 

 

 

 

 

ARCHIVO MAIN PARA PREGUNTAS DE FALSO Y VERDADERO

 

  1. Primero en la parte izquierda encontraremos nuestra carpeta js le damos click y luego damos click en el archivo main.js. 
  2. luego creamos la función de la línea 1 y para cerrar la función colocamos el mismo símbolo de la línea 14 “ })” todo lo que se encuentre entre la función y el cierre la función genera la acción que necesitamos en nuestra aplicación.  
  3. Pasamos a crear la acción de nuestro botón de verdadero que observamos en la línea 4 a la 7, en la línea 4 este código permite detectar la acción de click en el botón y el nombre de nuestro botón que esta después del numeral, en la línea 5 encontraremos $("#texto_3").html(“”); que nos permite colocar el mensaje que mostraremos cuando se haga click en la aplicación y en la línea 7 encontramos los símbolos para cerrar la acción de nuestro botón verdadero. 
  4. Pasamos a crear la acción de nuestro botón de falso que observamos en la línea 8 a la 11, en la línea 8 este código permite detectar la acción de click en el botón y el nombre de nuestro botón que esta después del numeral, en la línea 9 encontraremos $("#texto_3").html(“”); que nos permite colocar el mensaje que mostraremos cuando se haga click en la aplicación y en la línea 11 encontramos los símbolos para cerrar la acción de nuestro botón verdadero. 
  5. Al finalizar guardamos dando en la tecla CTRL y la tecla S al tiempo.

 

[pic 30] 

 

 

 

 

PREGUNTAS DE INTRODUCCIÓN DE TEXTO

  1. En la primera línea encontramos nuestro contenido. 
  2. En la segunda línea necesitamos el <fieldset> (Grupo de campos, nos permite organizar en grupos los campos del formulario) y cierra </fieldset> 
  3. En la tercera línea encontramos el h2 que lo usamos para ubicarnos en el número de la pregunta. 
  4. En la cuarta línea encontraremos el h3 que es para nuestra pregunta. 
  5. En la quinta línea encontramos la caja de texto donde se ingresara la respuesta y tenemos un id que lo necesitaremos para validar la respuesta en el main. 
  6. En la sexta línea encontramos nuestro botón para evaluar y una acción que es el onClick=”evaluarDatos3()” que activa la función en el main al darle click en el botón. 
  7. En la séptima línea encontraremos el código para mostrar nuestro mensaje de resultado. 
  8. En la octava línea se cierra el fieldset. 
  9. En la novena línea se cierra nuestro contenido. 

[pic 31] 

ARCHIVO MAIN PARA PREGUNTAS DE INTRODUCCION DE TEXTO

  1. En la primera línea creamos nuestra función. 
  2. En la segunda línea creamos nuestro evento. 
  3. En la tercera línea creamos nuestra variable donde guardaremos nuestra información que la traemos del id mencionado anteriormente en el index. 
  4. En la cuarta línea creamos nuestra condición if donde colocamos el nombre de nuestra variable, tiene que ser == entre comillas la respuesta que queremos. 
  5. En la quinta línea encontramos el mensaje que se mostrara después de hacer click en el botón evaluar.  
  6. En la sexta línea encontramos el else que significa sino se cumple la condición del if mostrará el mensaje de error. 
  7. Y en la última línea se cierra nuestra función. 

[pic 32] 

 

ACORDEONES  

  1. Primero encontramos nuestra línea para el contenido. 
  2. Luego encontramos la línea h1 para el título. 
  3. La siguiente línea es para crear el contenedor global del acordeón. 
  4. Luego encontramos nuestro contenedor de la primera pestaña del acordeón.   
  5. Encontramos un h3 que será el título de la primera pestaña. 
  6. Seguido encontramos la etiqueta <p> que es para colocar los párrafos que se verán en el contenido de la primera pestaña del acordeón, es recomendable  que si son varios párrafos separar los con la etiqueta <p> y para cerrar es con la etiqueta </p>. 
  7. Cerramos nuestro contenedor con </div> 
  8. Luego procedemos a crear nuestra 2 pestaña del acordeón. 
  9. Creamos la línea para el nombre. 
  10. La linea que inicia con img es para colocar 1 imagen, la parte de src=”img/cel.jpg” es la dirección que está en la carpeta img de nuestro proyecto y el nombre de nuestra imagen que en el ejemplo aparece cel.jpg si nuestra imagen se llama celular remplazamos y quedaría src=”img/celular.jpg”, si no aparece la imagen revisamos si el formato es jpg, png o gif y cambiamos de la siguiente manera src=”img/cel.png”, luego encontraremos un width y un height que no sirve para asignarle el tamaño de la imagen en alto y ancho. 
  11. Luego cerramos nuestro contenedor con </div> 
  12. Luego cerramos nuestro contenedor global de nuestro acordeón. 13. Para finalizar cerramos nuestro contenido con </div>

14. Guardamos y probamos en el navegador.

[pic 33] 

POPUP O VENTANAS EMERGENTES

  1. En la primera línea abrimos nuestro contenedor para el contenido. 
  2. En la segunda encontramos el h1 para el titulo 
  3. En la tercera línea encontramos la etiqueta <p> para el texto. 
  4. En la cuarta línea encontramos nuestro código que inicia <a href=”#ventana1” para el botón que activara la ventana emergente con un click. 
  5. En la quinta línea encontramos <div data-role=”popup” id=”ventana1” nuestro id es el miso que el href esto permitirá desplegar nuesta ventana emergente. 
  6. La sexta linea abrimos nuestro contenedor y encontramos un datarole=”header” que será la cabeza de nuestra ventana emergente o popup. 
  7. Luego encontramos el h1 para el título. 
  8. En la siguiente línea cerramos el contenedor de la cabeza de nuestro popup. 
  9. Abrimos el contenedor de nuestro contenido para el popup. 
  10. Etiqueta p para nuestro texto que se verá en el popup. 
  11. La línea de código para la imagen. 
  12. La siguiente línea de código es para el botón de cerrar el popup 
  13. Cerramos nuestro contenido del popup. 
  14. Cerramos nuestro popup. 
  15. Cerramos nuestro contenido de la pagina. 

[pic 34] 

 

...

Descargar como (para miembros actualizados) txt (14 Kb) pdf (1 Mb) docx (771 Kb)
Leer 9 páginas más »
Leer documento completo Guardar
Disponible sólo en Clubensayos.com