Fundamentos de las tecnologas web

Roberto A. Velzquez Tlaseca

Departamento de Informtica

INTERNET
Qu es?

video

Internet
Sistema descentralizado de redes de computadoras

conectadas entre s, distribuidas a nivel mundial, que

ofrece servicios de comunicacin de datos

Primera precisin

Web: Conjunto de informacin que

se encuentra en una direccin
determinada de internet.

La web es un servicio mas de internet.

Como se dice?

1. Pgina de Internet o pgina web?

2. Sitio Web o Sitio de Internet?
3. Aplicacin web o aplicacin basada en

Internet?

INTERNET
Cmo funciona?

Cliente - Servidor

Paradigma Cliente Servidor (2)

Proceso de comunicacin: Contenido Esttico

50.63.196.49

www.cecytepuebla.edu.mx

Paradigma Cliente Servidor (3)

Proceso de comunicacin: Contenido Dinmico

DNS

MySQL

Paradigma Cliente Servidor

Toda computadora puede ser un servidor?
Que se necesita para que mi computadora se convierta

en un servidor y sea accesible via Internet?

Porqu los servidores usan direcciones IP Fijas?
Que tipo de hosting me conviene y como elegirlo?

Conceptos importantes

DNS
Direccin IP
Dominio de Internet.

Conceptos importantes
IP dinmica vs IP Fija

Qu es la propagacin en los
DNS?

Quin asigna las direcciones?

La Corporacin de Internet
para la Asignacin de Nombres
y Nmeros (ICANN)

Quienes controlan Internet?

International Telecommunication Union. Atribuimos

el espectro radioelctrico y las rbitas de satlite a

escala mundial, elaboramos normas tcnicas que
garantizan la interconexin continua de las redes y las
tecnologas, y nos esforzamos por mejorar el acceso a
las TIC de las comunidades insuficientemente atendidas
de todo el mundo.

Quienes controlan Internet? (2)

El Internet Architecture Board (IAB). Supervisa el

desarrollo tcnico de la Red, por ejemplo vigilando que

los estndares oficiales se cumplen, como los
protocolos TCP o IP. Se preocupan de la salud de
Internet
The Internet Society. La filosofa de este grupo es la de

que Internet es para todo el mundo. Supervisa que la

red mantenga su integridad y que ningn Gobierno o
empresa la rompa

Quienes controlan Internet? (3)

La Internet Engineering Task Force es otro grupo de

marcado carcter tcnico que se dedica a crear informes

sobre cmo debera ser el futuro de la Red. Su leyenda
sera Queremos que Internet funcione mejor y todos sus
esfuerzos van en esa direccin.
Internet Corporation for Assigned Names and Numbers.

Su funcin es la de que no haya dos IP o dos nombres

de dominio iguales.

Quienes controlan Internet? (4)

Empresas proveedoras de servicio. AT&T, Vodafone,

Movistar, Verizon... las grandes operadoras tienen mucho

poder en Internet; son ellas las que dan acceso a la
Red a empresas y particulares, y las que fijan el precio de
un bien que muchos ya piden que sea universal.

De que depende que una empresa provee servicios

de mayor velocidad?

Protocolos de Internet
Conjunto de normas que permiten la comunicacin entre

dispositivos conectados a Internet. Independientes de

arquitectura y Sistema Operativo.

Protocolos de Internet (2)

Los protocolos se conforman de capas

Protocolo HTTP/ HTTPS

Wow, que rpido llegaste!!!
Seguro que nadie te vio?

Ya viste la hora?
Llegas retrazado!!

Mmmm.. De hecho no.

Perdn por la tardanza,

Pero estoy seguro que nadie
Me vio.

Servidores Compartidos y Dedicados

Elegir el adecuado de acuerdo a tus necesidades

Modelos de Servidor
AMP

Anatoma de una URL

Cmo funcionan los navegadores?

PROGRAMACIN FRONT END

Qu es?

Perfiles IT en Mxico

W3C
El World Wide Web Consortium, abreviado W3C, es un

consorcio internacional que produce recomendaciones

para la World Wide Web.

Lado del Cliente ( front end )

En diseo de software el front-end es la parte del

software que interacta con el o los usuarios y el backend es la parte que procesa la entrada desde el front-end.

Habilidades de un front end developer

HTML
No es un lenguaje de programacin. Es un lenguaje de

etiquetado, o marcado en que se elaboran las pginas

web.
Nace en 1980, se considera estndar hasta 1995, y en

1999 se considera robusto y adoptado por la mayoria de

navegadores en el mercado.
En 2009 nace HTML 5 y se convierte en el nuevo

estndar dominante en la web.

Estructura de un documento HTML

Hojas de Estilo o CSS

Hoja de estilo en cascada o CSS (siglas en ingls de cascading style

sheets) es un lenguaje usado para definir la presentacin de un

documento estructurado escrito en HTML.
La idea que se encuentra detrs del desarrollo de CSS es
separar la estructura de un documento de su presentacin.

Javascript
Lenguaje de programacin de paginas web, con la

capacidad de utilizar el entorno como HTML no lo logra.

Bibliotecas Javascript
Conjunto de funciones y/o herramientas que permiten

programar aplicaciones interactivas mucho mas

avanzadas, de una forma mucho mas sencilla.

Tipos de Imagen
Los formatos comunes mayormente utilizados en la web

son:

JPG: soporta millones de colores, ideal para fotografas.

GIF: limitado a 256 colores, permite animaciones. No

soporta degradados. Soporta transparencia.

PNG: la evolucin de GIF y ventajas de JPG.
SVG: Grficos vectoriales. Se pueden escalar sin perder
calidad. Tendencia en el 2015.

Uso de APIs Qu es un API?

La API de HTML5

Fuentes Web
Antecedente: Los navegadores solo permitan interpretar

fuentes del sistema.

Con CSS3 podemos incluir casi cualquier fuente, aunque
no exista en la PC del cliente.

CDN (content delivery network)

Sistema de entrega de contenidos a travs de una red

distribuida de servidores.
El fin es proporcionar los recursos al usuario desde el
servidor mas cercano.

Responsive Design

Lo de hoy es
Frameworks

PROGRAMACIN BACK END

El cdigo del lado del servidor (back end)

Es el procesamiento de una peticin de un usuario mediante la

interpretacin de un script en el servidor web para generar pginas

HTML dinmicas. (server side scripting)
Usos frecuentes:
Llenado de Formularios
Compras en lnea
Reservaciones
Etc

Lenguajes mas utilizados

Recomendado usar programacin del lado del servidor

cuando se tratan datos sensibles.

Ideal cuando se requiere interactuar con bases de datos.

PHP

Otros lenguajes de servidor

Otros lenguajes de servidor(2)

Otros lenguajes de servidor(3)

Trabajando con datos

Web Storage API
Cookies
XML
JSON
Bases de datos relacionales

MySQL
SQL es el lenguaje estndar utilizado para la gestin y
recuperacin de informacin procedente de una base de
datos.

CMS (content manager system)

Un sistema de gestin de contenidos es un

programa que permite crear una estructura de

soporte para la creacin y administracin de
contenidos, principalmente en pginas web, por
parte de los administradores, editores, participantes
y dems roles

Recomendaciones
Uso de frameworks
Uso de patrones de arquitectura

de software (MVC por ejemplo)

GitHub

RANKING 2014
1 JavaScript
2 Java
3 PHP
4 Python
5 C#
6 C++
7 Ruby
8 CSS
9C
10 Objective-C

COMPLEMENTOS

H5BP (boilerplates)

Boilerplates

Frameworks

Ejemplos
Initializer
HTML5 Boilerplate
Magento

Foundation
Bootstrap
Pure CSS
Semantic UI

Preprocesadores de CSS

TENDENCIAS 2015 DEL

DESARROLLO WEB

Flexbox

Material Design (google)

video
http://www.elandroidelibre.com/2014/11/que-es-material-design.html

Servicios en la nube

Servicios en la nube (2)

Ventajas del servicio en la nube
El prestador del servicio se encarga de todo: asignacin de recursos,
mantenimiento, mejoras y actualizaciones... As los propietarios del
servicio pueden delegar todos esos aspectos y ahorrarse los costos
asociados.
Movilidad y disponibilidad: El usuario se beneficia de la continua
disponibilidad de sus datos. Por tanto, en cualquier momento o lugar se
puede tener acceso a ellos slo con disponer de un ordenador conectado a
Internet
Ahorro: las empresas no tienen que invertir en comprar y mantener
servidores y Softwares - Con el servicio en la nube se alquila un
determinado servicio y se paga por lo que se consume.
No hay licencias de Software.
Rapidez: la nube permite acceder a las aplicaciones y servicios sin tener
que descargarlos, as las empresas ganan velocidad en la implantacin de
los proyectos.

Evolucin del Hosting

Paga solo lo que utilizas

video

GRACIAS
POR SU ATENCIN