Programación Web

Santiago Ardila

Software Developer

UI Designer

¿QUÍEN SOY?

  • 12 años de experiencia en Diseño gráfico

  • 4 años de experiencia en Diseño y Desarrollo de software

¿QUÉ ES PROGRAMACIÓN?

¿QUÉ ES PROGRAMACIÓN?

La programación es el acto de organizar una secuencia de pasos ordenados a seguir para hacer cierta cosa.

 

En el ámbito de la informática, la programación refiere a la acción de crear programas o aplicaciones a través del desarrollo de un código fuente, que se basa en el conjunto de instrucciones que sigue el ordenador para ejecutar un programa.

 

La programación es lo que permite que un ordenador funcione y realice las tareas que el usuario solicita.

LENGUAJE DE PROGRAMACIÓN

El lenguaje de programación es un idioma artificial prediseñado formado por signos, palabras y símbolos que permite la comunicación entre el programador y el ordenador.

¿CÓMO SE CREAN LAS PÁGINAS WEB?

COMENCEMOS POR EL INICIO... ¿QUÉ ES LA WEB?

Es un sistema interconectado de páginas web públicas accesibles a través de Internet. La Web no es lo mismo que el Internet: la Web es una de las muchas aplicaciones construidas sobre Internet.

 

Tim Berners-Lee propuso la arquitectura de lo que es conocido como la World Wide Web. Él creó el primer servidor web (server (en-US)), el primer navegador de internet (browser), y la primera página web, en su computadora del laboratorio de investigación de física del CERN en 1990. En 1991, anunció su creación en el grupo de noticias alt.hypertext, marcando con esto el momento en que la Web se hizo pública.

El sistema que nosotros conocemos hoy como "la Web" tiene varios componentes:

 

  • El protocolo HTTP dirige las transferencias de datos entre el servidor y el cliente.
  • Para acceder a un componente de la Web, el cliente proporciona un único identificador universal, llamado URL por sus siglas en inglés de Localizador Uniforme de Recursos (Uniform Resource Locator)
  • HTML por sus siglas en inglés de Lenguaje de Marcas de Hipertexto (Hypertext Markup Language) es el formato más común para publicar documentos web.

PÁGINA / SITIO / APLICACIÓN

HOSTING / DOMINIO

TECNOLOGÍAS PARA CREAR UNA WEB

HTML

Las siglas de HTML en ingles significan: HyperText Markup Language o lenguaje de marcado de Hipertexto.

 

‌El HTML, es el lenguaje base con el que se hacen las páginas web.

 

‌No es un lenguaje de programación, sino un lenguaje descriptivo, una serie de etiquetas 🏷️ que el navegador reconoce para mostrar el contenido en la pantalla 💻.

Estructura básica de una web

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi pagina de prueba</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Mi imagen de prueba">
  </body>
</html>

Sintaxis 

Anidamiento (Nesting)

Comentarios

 

Tipos de elementos del HTML

 

‌En bloque:

<div></div>, <p></p>, <h1></h1> hasta <h6></h6>, <form></form>, <ol></ol>, <ul></ul>, <li></li>, <section></section>, <article></article>, entre otras.

 

 

‌En línea:

<img />, <a></a>, <span></span>, <strong></strong>, <i></i>, <input />, <button></button>

CSS

Las siglas de CSS significan “Cascade Style Sheet” u “Hoja de estilo en cascada”.

 

Son un conjunto de instrucciones que nos permiten definir la apariencia de los diferentes elementos o etiquetas del HTML. A este conjunto de instrucciones podemos llamarlas reglas.

¿Cómo aplicar los selectores de CSS?

 

Existen tres formas en las que se pueden incluir los selectores de CSS en una hoja de estilos en una página web:

- En línea

- Etiqueta style

- Hoja externa

1. En línea

 

Los cuales se aplican directamente en un elemento HTML, en la que se adiciona el atributo style=”propiedad:valor;?” en la etiqueta de apertura de ese elemento. Por ejemplo:

<p style="color:green;">Texto en verde</p>

2. Etiqueta style

 

Dentro del documento HTML se pueden aplicar los estilos generales haciendo uso de la etiqueta de estilo (<style>). Esta se agrega en el encabezado de la página (<head></head>) y aplica para todo el contenido dentro de esta o los elementos especificados. Por ejemplo, si queremos definir el estilo de los textos h1 haremos algo como esto:

<head>
    <style type="text/css">
        h1 {
        color: red;
        }
    </style>
</head>

3. Hoja externa

 

Este método es el más recomendado para sitios web complejos o con muchas secciones y elementos ya que de esta forma podrás manipular tus estilos de CSS de la mejor manera.

 <link rel="stylesheet" href="nombre-de-tu-archivo.css">

¿Qué podemos hacer con CSS?

- Podemos aplicar la misma regla a multiples elementos.

 

- Podemos cambiarle los estilos a los diferentes estados que tienen los elementos, como el hover, focus, etc.

 

- Podemos cambiar la posición de los elementos en el documento.

- Podemos transformar los elementos con propiedades como por ejemplo: scale, rotate, skew, etc.

 

- Podemos crear animaciones.

 

- Podemos crear reglas para diferentes tamaños e incluso diferentes dispositivos o media: print, screen, etc.

Diferencias entre HTML y CSS

 

- HTML es el lenguaje de marcado básico que describe el contenido y la estructura de las páginas web. Por otro lado, CSS es la extensión del HTML que modifica el diseño y visualización de las páginas web.

 

- El archivo HTML puede contener código CSS, mientras que las hojas de estilo CSS nunca pueden contener código HTML.

 

- HTML se compone de etiquetas que rodean el contenido, mientras que CSS se compone de selectores que van seguidos de un bloque de declaraciones.

JAVASCRIPT

JavaScript es un lenguaje de programación, se dice de él, que es multiparadigma y es débilmente tipado. Es multiplataforma, ya que se puede utilizar en Windows, Linux o Mac. Se puede usar en cualquier navegador. Se puede usar en ambientes de cara al usuario y del lado del servidor.

Insertar JS en el documento HTML

 

Hay dos formas de incluir nuestro código JavaScript en nuestro documento HTML.

 

1. Insertar JavaScript en HTML utilizando la etiqueta:

2.  Agregar código JavaScript a un archivo separado

<script>Aquí va tu código JS</script>
<script src="app.js"></script>

Muchas de las tareas que realizamos con HTML y CSS se podrían realizar con Javascript. De hecho, es muy probable que al principio nos parezca que es mucho más complicado hacerlo con Javascript, y que por lo tanto no merece la pena. Sin embargo, con el tiempo veremos que Javascript nos ofrece una mayor flexibilidad y un abanico de posibilidades más grande, y que bien usadas, pueden ahorrarnos bastante tiempo.

<div class="item">
  <p>Numero: <span class="numero">1</span></p>
  <p>Numero: <span class="numero">2</span></p>
  <p>Numero: <span class="numero">3</span></p>
  <p>Numero: <span class="numero">4</span></p>
  <p>Numero: <span class="numero">5</span></p>
</div>

 

  • Variables

Conceptos Básicos

 

En programación, las variables son espacios donde se puede guardar información y asociarla a un determinado nombre. De esta forma, cada vez que se consulte ese nombre posteriormente, te devolverá la información que contiene. La primera vez que se realiza este paso se suele llamar inicializar una variable.

var a; // Declaramos una variable "a", pero no le asociamos ningún contenido.
var b = 0; // Declaramos una variable de nombre "b", y le asociamos el número 0.

console.log(b); // Muestra 0 (el valor guardado en la variable "b")
console.log(a); // Muestra "undefined" (no hay valor guardado en la variable "a")
  • Tipo de datos

En Javascript, al igual que en la mayoría de los lenguajes de programación, al declarar una variable y guardar su contenido, también le estamos asignando un tipo de dato, ya sea de forma implícita o explícita. El tipo de dato no es más que la naturaleza de su contenido: contenido numérico, contenido de texto, etc...

var s = "Hola, me llamo Manz"; // s, de string
var n = 42; // n, de número
var b = true; // b, de booleano
var u; // u, de undefined

Number:

var n = 42

Valor numérico (enteros, decimales, etc...)

string:

var s = "Hola, me llamo Santiago";

Valor de texto (cadena de texto, caracteres, etc)

boolean:

var t = true
var f = false

Valor booleano (verdaro o falso)

undefined:

var u;

Valor sin definir (variable sin inicializar)

function:

function saludar() {
  return "Hola";
}

saludar(); // 'Hola'

Un conjunto de instrucciones que realiza una tarea o calcula un valor

objects:

const player = {
  name: "Manz",
  life: 99,
  strength: 10,
};

Variable especial que puede contener más variables en su interior

array:

const array = ["a", "b", "c"];

Es una colección de elementos en una misma variable.

MUCHAS GRACIAS

Programacion Web

By santiagodvlpr

Made with Slides.com

Programacion Web

  • 111

More from santiagodvlpr