PRIMEROS PASOS PARA PROGRAMAR
Enviado por srotaku • 29 de Julio de 2021 • Biografías • 2.368 Palabras (10 Páginas) • 63 Visitas
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]
- Procedemos a ejecutar nuestro instalador de brackets y seguimos los pasos de instalación.
[pic 3]
- Luego de finalizar la instalación buscamos nuestro editor de texto en el equipo.
[pic 4]
- Si realizamos correctamente los pasos anteriores tendremos instalado el editor de texto.
[pic 5]
- En la parte derecha encontraremos los siguientes iconos, seleccionamos en de la mitad para instalar los atajos de teclado.
[pic 6]
- Luego nos aparecerá la siguiente ventana en el campo de búsqueda vamos a
[pic 7]
- Luego instalamos la segunda opción que nos aparece.
[pic 8]
NUESTRO PROYECTO
- 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]
- 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.
- 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]
- 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]
- 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]
- 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>
...