Tuesday, May 26, 2020

PROGRAMAS EN ENSAMBLADOR x86

Programa que despliega "Hola, mundo!!"


Programa que pide tu nombre desde teclado y muestra un mensaje en consola saludandote.

Programa que dibuje una diagonal en la pantalla.

Programa que lea un archivo y cuente cuántas palabras terminan con la letra a.

Programa que pide un numero desde teclado y lo muestra en la consola.

Programa para saber si un numero es mayor.

Programa que suma 2 números.

Thursday, May 21, 2020

RESUMEN DE CSS3



CSS corresponde a las siglas de Cascade Style Sheet o Hojas de Estilos en Cascada en cristiano. Como indica su nombre CSS3 corresponde a la tercera revisión del mismo y los primeros módulos se convirtieron en recomendaciones oficiales de W3C en 2011.

La World Wide Web Consortium o W3C es la encargada de formular las especificaciones de las hojas de estilos que servirán de estándar para los navegadores o los agentes de usuario.

El CSS3 es el lenguaje utilizado para definir los estilos de los documentos HTML o XML. Su desarrolló partió de la idea de separar la estructura de un documento de su presentación, haciendo así mucho mas fácil su mantenimiento.

La información de los estilos puede ser definida en el mismo HTML con el elemento <style> o en un archivo separado con la terminación .css. Evidentemente, este último es el utilizado a día de hoy, precisamente aprovechando el fin para el que fue creado CSS, no mezclar el HTML con los estilos en un mismo documento y que resulte mucho mas fácil su mantenimiento.

El funcionamiento de CSS consiste en definir, mediante su propia sintaxis, el formato de presentación que se aplicará a un sitio web completo, una página o documento HTML, a una parte de un documento HTML o a una etiqueta en concreto.

Si por ejemplo tenemos una etiqueta H1 de título como esta:

<h1>Título de tu página</h1>

Podemos darle estilos de esta forma:

h1 {
font-size : 12px;
font-family : verdana;
text-decoration : underline;
text-align : left;
}

Con esto, le estaríamos dando un tamaño de fuente de 12 pixeles, un tipo de fuente Verdana, un subrayado y una alineación a la izquierda.

Características:

Bordes:
  • Colores múltiples de borde en un mismo lado
  • Imágenes de borde
  • Bordes redondeados
Fondos:
  • Fondos Múltiples pueden ser añadidos al mismo elemento como capas
  • Posicionamiento del fondo con mayor precisión
  • Pueden ser redimensionados
Color:
  • Opacidad
  • Gradientes
  • Valores de color: HSL
Text:
  • Sombras
  • Desbordamiento
  • Ajuste de línea
Transformaciones:
  • Escalar
  • Sesgar
  • Mover
  • Rotar en 2D o 3D
Transiciones:
  • Transición sencilla de estilos
Cajas:
  • Sombras
  • Cajas redimensionables
  • Overflow separado en vertical u horizontal
  • Compensación entre contorno y borde
  • Modelos para especifcar altura y anchura
Contenido:
  • Los estilos pueden añadir contenido a los elementos
Opacidad:
  • Los elementos pueden ser transparentes

INTRODUCCIÓN A HTML5 Y ETIQUETAS BÁSICAS


HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML. Esta nueva versión (aún en desarrollo), define los nuevos estándares de desarrollo web, rediseñando el código para resolver problemas y actualizándolo así a nuevas necesidades. No se limita solo a crear nuevas etiquetas o atributos, sino que incorpora muchas características nuevas y proporciona una plataforma de desarrollo de complejas aplicaciones web (mediante los APIs).


HTML5 está destinado a sustituir no sólo HTML 4, sino también XHTML 1 y DOM Nivel 2. Esta versión nos permite una mayor interacción entre nuestras páginas web y el contenido media (video, audio, entre otros) así como una mayor facilidad a la hora de codificar nuestro diseño básico.

Algunas de las nuevas características de HTML5 serían:

  • Nuevas etiquetas semánticas para estructurar los documentos HTML, destinadas a remplazar la necesidad de tener una etiqueta <div> que identifique cada bloque de la página.
  • Los nuevos elementos multimedia como <audio> y <video>.
  • La integración de gráficos vectoriales escalables (SVG) en sustitución de los genéricos <object>, y un nuevo elemento <canvas> que nos permite dibujar en él.
  • El cambio, redefinición o estandarización de algunos elementos, como <a>, <cite> o <menu>.
  • MathML para fórmulas matemáticas.
  • Almacenamiento local en el lado del cliente.
  • Y otros muchos nuevos APIs que veremos a lo largo de los siguientes capítulos.


ETIQUETAS BÁSICAS

Este es un ejemplo de código de HTML5 de una página sencilla



  • DOCTYPE
<!DOCTYPE html>

La etiqueta doctype declara el tipo de documento, por lo que esta está señalando que este es un documento HTML.

  • HTML
<html></html>

Delimita el documento HTML.

  • HEAD
<head></head>

El elemento head delimita la cabecera del documento, entre sus etiquetas contiene información como scripts, metadatos, estilos, ubicación de documentos de estilos, título de la página, etc.

  • META
<meta name="description" content="Descripción de la WEB">

Las meta etiquetas se utilizan para identificar propiedades del documento como por ejemplo el autor, el título y la descripción que mostrarán los buscadores, etc.

  • META CHARSET
<meta charset="UTF-8">

Establece el tipo de codificación del documento.

  • META TITLE
<meta name="title" content="Título de la WEB">

Contiene el titulo que se mostrará en los buscadores.

  • META DESCRIPTION
<meta name="description" content="Descripción de la WEB">

Es el texto que se muestra bajo el título en los motores de búsqueda.

  • LINK
<link href="http://dominio.com/hoja-de-estilos.css" rel="stylesheet" type="text/css"/>

Esta etiqueta contiene un link a una hoja de estilos externa, la cual se utilizará en este documento.
Atributo a destacar

  • HREF
Especifica la url donde se localiza la hoja de estilo.

  • BODY
<body></body>

La etiqueta body delimita el cuerpo del documento y contiene todo aquello que podremos ver en nuestro navegador. Imágenes, textos, enlaces, video, etc…

  • HEADER
<header></header>

El contenido de esta etiqueta debe ser la cabecera de nuestra página donde se suele encontrar el título, el logotipo y poco más.

  • NAV
<nav></nav>

Esta etiqueta sirve para delimitar el menú de la página, donde colocaremos los enlaces internos para movernos entre nuestras diferentes secciones del sitio web.
  • A
<a href="http://dominio.com/seccion2.html">IR SECCIÓN 2</a>

Representa un enlace o hipervínculo.
  • HREF
Dirección URL hacia la que apunta el enlace.
H1, H2, H3, H4, H5, H6

<h1>Título de la WEB</h1>


<h2>CONTENIDO PRINCIPAL</h2>


<h3>Testimonios</h3>


<h4>Avisos legales</h4>

Estas etiquetas establecen los encabezados. Se organizan por niveles siendo H1 el más importante y H6 el menos importante.
  • SECTION
<section></section>

La etiqueta section engloba una sección de texto, imágenes y otros elementos que guardan cierta relación entre ellos. Normalmente siempre le podremos poner un título o encabezado.
  • ARTICLE
<article></article>

La etiqueta article se suele encontrar dentro de una etiqueta section y sirve para dividir y ordenar los contenidos en su interior.
  • DIV
<div></div>

Otra forma de dividir contenido para posteriormente aplicarle clases y modificar su estilo.
  • P
<p></p>

Entre las etiquetas P colocaremos un párrafo de texto.
  • IMG
<img src="http://dominio.com/imagen.jpg" alt="paisaje">

Esta etiqueta coloca una imagen en el documento mediante un enlace.


Posible resultado:



MI SEGUNDA APLICACIÓN CON DJANGO

Primero se va a crear el proyecto UniversidadInscripciones en el CMD con el siguiente comando:

django-admin startproject UniversidadInscripciones


Y para comprobar que sí se haya creado el proyecto, se abre el IDE de preferencia para Python, que en este caso se utiliza PyCharm y se abre el proyecto

File > Open > C:\ > UniversidadInscripciones


Una vez que el proyecto esté abierto, se comprueba que el framework creó automáticamente un marco de trabajo


El siguiente paso es crear la app de GestionAcademica para poder realizar el modelo, entre otras cosas.

django-admin startapp GestionAcademica


Y en PyCharm se comprueba que sí se creó la app.


También se pueden verificar si se escribe el siguiente comando en el CMD:

/dir


Ahora, se comienza en hacer que corra el servidor con el siguiente comando, para así, que proporciona una dirección http para la página.

python3 manage.py startserver


Se copia el link que proporcionó el servidor y se pega en el URL del navegador de preferencia.

NOTA: Se recomienda hacer primero las migraciones porque en algunas ocasiones no quiere funcionar el enlace.

Para eso, se sugiere que se hagan los dos siguientes comandos, porque si uno no detecta migraciones, el otro puede que sí, así que es mejor realizar las dos operaciones.

python3 manage.py migrate


python3 manage.py makemigrations


Se vuelve a correr el servidor y ahora sí se puede comprobrar que funciona el servidor.


Ahora, en PyCharm, se abre el archivo settings.py para agregar la app para que sea reconocida, ya que si no se agrega, no puede funcionar.


Posteriormente, en el archivo de models.py es donde se va a escribir el código, haciendo 3 clases siendo a la vez 3 tablas para la base de datos.


Este es el código completo:


Asimismo, en el archivo de admin.py se van a registrar el nombre de las clases (tablas) para así poder administrarlas en el servidor.




Hay que tener en cuenta que para cualquier edición o cambio que se haga, se tiene que hacer las migraciones para que detecte las actualizaciones.

NOTA: Para poder detener el servidor es con CTRL + C.

Como se aclaró al principio, a veces un comando para las migraciones no detecta las modificaciones, por lo que es necesario y muy importante realizar las dos operaciones.

python3 manage.py migrate


python3 manage.py makemigrations


Para que ya logremos manipular las tablas y poder llenarlas de datos, se tiene que hacer un súper usuario.

python3 manage.py createsuperuser


Una vez hecho eso, se vuelve a correr el servidor 

python3 manage.py runserver

y en la parte del url se escribe /admin para poder ingresar con el usuario que se creó.


Esta es la página donde se muestra las clases/ tablas que se crearon en el archivo de models.py, ahora lo único que falta hacer es hacer registros para cada uno.


Alumnos



Curso



Matrícula


Para que no aparezca "Alumno object", "Curso objetc" y "Matricula object", se va a quitar como comentarios las siguientes lineas en el archivo models.py

Para Alumnos:


Para Curso:


Para Matrícula:


Todo esto es para que se muestre el nombre de cualquier registro que se haya agregado.
Se hacen migraciones.
Se corre el servidor.


Ahora, en SQLiteManager se comprueba que en la base de datos sí se guardaron los registros en las tablas.

Exitosamente se muestran las tablas en la base de datos.


GestionAcademica_alumno


GestionAcademica_curso


GestionAcademica_matricula



Tuesday, May 19, 2020

MI PRIMERA APLICACIÓN CON DJANGO

En este post se va explicar cómo crear una página web con el framework Django.

Primero se tiene que crear el proyecto a través del CMD de la siguiente manera:




Ahí mismo se van a crear los modelos para la aplicación, escribiendo el siguiente comando:



Se puede comprobar que se creó el proyecto en el IDE para Python, que en este caso se utiliza PyCharm.

File > Open > C:\ > Alumnos


Una vez que el proyecto abierto, se puede observar que también incluye la aplicación que se creó en el CMD.

Recordando que todos los archivos son formato .py porque el Django está hecho con Python.



De la misma manera también se pueden ver esos mismos archivos a través del CMD:



Ahora se tiene que poner a correr el servidor y que nos proporciona una dirección HTTP para poder iniciar la app web.


Muestra un mensaje que existen 17 migraciones de archivos que no se han aplicado. Es necesario hacerlo para que corra bien la página y para eso se hacen los siguientes comandos:

python3 manage.py migrate

python3 manage.py makemigrations


Una vez hechas las migraciones, se vuelve a correr el servidor.


En el navegador de preferencia, se pega en el buscador el HTTP que nos proporcionó el servidor, mostrando lo siguiente, queriendo decir que está listo para usarse:




NOTA: Es necesario tener abierto el CMD en todo el momento que se esté utilizando el servidor, de lo contrario, deja de funcionar y no se podrá seguir manipulándolo. 

Para empezar a manipular la página, es necesario tener una cuenta de súper usuario. Si se escribe la dirección http://127.0.0.1:8000/admin, se mostrará un formulario pidiendo un usuario y contraseña que por el momento todavía no se ha creado. 



Para ello, se tiene que escribir el siguiente comando en el CMD y automáticamente se van a pedir una serie de datos necesarios para la creación del súper usuario, es muy importante no olvidar los datos que se registran (debe de ser dentro de la carpeta del proyecto).

python3 manage.py createsuperuser


NOTA: Recordar que se tiene que volver a correr el servidor.

Una vez completado los datos que pide, ahora sí hay que ingresar el usuario y contraseña que se crearon en el formulario del /admin. Una vez hecho eso, se muestra la página principal del perfil.



Ahora, en esta parte se va explicar cómo tener nuestro propio formulario con datos de Alumnos egresados de una universidad. Es necesario saber cuántas tablas queremos en la base de datos y saber los tipos de datos correctos para Django. Es muy recomendable leer la documentación que nos proporciona la página oficial de Django.

Asimismo, debemos de utilizar un manejador de base de datos de SQLite. En esta ocasión, se va utilizar el SQLiteManager que se podrá descargar en este aquí.

Lo primero que hay que hacer es editar el archivo models.py para ahí poder crear las tablas y campos con los datos que queremos que llene el alumno egresado.



Este es el código de las tablas sobre los datos personales y carreras de los alumnos egresados.


En el archivo de admin.py se van a registrar y administrar las tablas creadas.


Y en el archivo de settings.py se va agregar el nombre de la app para que la reconozca.


Después de haber modificado todo el código y haber editado algunos detalles, se tiene que volver hacer la acción de migrar, es decir, una actualización para que se muestre satisfactoriamente.


Ya en la página web se muestran las tablas para llenarlas con datos.


Tabla de los datos de la carrera:



Ahora con la tabla de datos personales del egresado:




Con el SQLiteManager se va a comprobrar que sí se registraron en la base de datos.