Los secretos detrás de cómo hacer la web

LOS SECRETOS DETRÁS DE

LA BARRA DE DIRECCIONES

EL NAVEGADOR
Es el responsable de
mostrar los contenidos
de la web y también es
responsable de que lo que
veas, se vea bien o mal
puesto que se encarga de
interpretar el código con el
que están escritos los sitios
web que visitas.

ANIMACIÓN DE CÓMO MOZILLA FIREFOX LEE EL CÓDIGO DE UNA WEB Y LO REPRESENTA (VER SIGUIENTE DIAPOS.)

LOS NAVEGADORES TIENEN MOTOR
SEGÚN EL MODELO DE TU BARCO ASÍ SERÁ LA EXPERIENCIA DE VIAJE.

ENTRADA SALIDA

<h1>Hola
Mundo</h1><p>No es lo
Hola Mundo
mismo un <em>dia No es lo mismo un dia
nublado…</em></p> nublado…

MOTORES DE RENDERIZADO MÁS COMUNES Y POPULARES.

WebKit Gecko Trident

LA HISTORIA DEL NAVEGADOR

HAGA CLIC PARA VISUALIZAR UNA LINEA DE TIEMPO CON LA EVOLUCIÓN DE LOS NAVEGADORES WEB

EL DOMINIO

CHUCK NORRIS NO
ESCRIBE FACEBOOK.COM,
ESCRIBE 69.63.189.11

• Es el “apodo” de la ubicación exacta de un sitio web (IPv4 o IPv6)
• Es mucho más fácil de memorizar.
• ICANN se encarga de regular la existencia de nuevos dominios.
• Los dominios de segundo nivel como .co.cr son administrados por
entes regionales autorizados por el ICANN.

DE LETRAS A NÚMEROS

DNS
Domain Name Server

Cómo las páginas amarillas el Domain Name Server
relaciona un número particular (dirección IP) a un
nombre en específico. Facilita la portabilidad. El
proveedor de servicio de internet (ISP) se encarga de
enviar las solicitudes ya de manera numérica a las
diferentes terminales que enrrutan el tráfico hasta su
destino final.

SIGUIENDO LA PISTA.

HAGA CLIC PARA RASTREAR VISUALMENTE UNA DIRECCION WEB

EL DESTINO FINAL. ¡TIEEEERAAAA A LA VISTAAAAA!

Datacenters y servidores
• Los datacenters son instalaciones blindadas
y fuertemente resguardadas en donde se
reciben las instrucciones para entregar el
contenido de regreso.

• Un servidor puede soportar una X cantidad
de requisitos por segundo. El aumento de
este puede generar un ataque DDoS y dejar
incomunicado el servidor y caídas las
páginas y bases de datos que almacena

• Cualquier computadora puede actuar como
servidor, más los protocolos de seguridad y
demás hacen más barato contratar un
servicio profesional.

LOS SECRETOS DETRÁS DEL

HTML & CSS

.html
• HyperText Markup Language
(lenguaje de marcado de hipertexto)
• Posee una estructura básica
construida por etiquetas semánticas
• Andamio para mostrar datos de
lenguajes dinámicos

¿ETIQUETAS?
El HTML usa etiquetas para definir elementos de un
sitio web y así darle atributos y a esos atributos valores:

nombre del elemento

<p class="lindo"></p>
atributo valor cierre

EL HTML es un lenguaje que requiere siempre el cierre de
las etiquetas. La manera de cerrar siempre una etiqueta es
con </(nombre del elemento>

ETIQUETAS ESTRUCTURALES
Etiqueta Significado
<! DOCTYPE html>. Definición del tipo de
documento. HTML5
<header> Cabecera de documento. Se
suelen definir propiedades
del documento, llamado a
librerias requeridas o .css
<body> define el cuerpo de la
pagina, se desglosa todo el
contenido.
<div>/<article> Define una caja contenedora
para un uso particular
<footer> define el pie de pagina


<div>


<body>

ETIQUETAS DE CLASES
Etiqueta Significado
<p> para definir parrafo
<br /> para hacer salto de linea
<strong> para negrita.
<em> para enfatizar = italica
<u> para subrayar
<h1> a <h6> para definir titulos. Van de mayor a menor
<style> Para definir estilos de las etiquetas.
<a href> Para definir hipervínculos.
<video>, Para colocar video. Requiere de atributo
<audio>, <img> scr para definir ubicación

<! DOCTYPE html>

<header>

<title>Hola Mundo</title>

</header>

<body>

<h1>Este es el titulo</h1>

<p>Este es el parrafo de prueba</p>

<a href="http://www.wikipedia.org">Haz
clic para ver más de esto</a>

</body>

</html>

.css
• Acrónimo de Cascade Style Sheet.
Hoja de estilo en cascada.
• Complementario al HTML. Declara
estilos de las etiquetas.
• La última versión (CSS3) permite
efectos de sombreado, bordes
redondeados, desenfoques, reflejos
de imágenes y otros efectos
interesantes sin mucho esfuerzo.

¿CÓMO LO HAGO?
El CSS es un documento en donde se definen las
propiedades de las etiquetas y clases particulares,
mediante la apertura de corchetes y contenido desglosado
como en cascada:

body {
font-face: Tahoma, sans-serif;
font-size: 12pt;
}
h1 {
font-size: 20px;

}

Nótese que para definir los estilos estos se inician con un
corchete y luego se declaran las variables y se separa la linea con
un punto y coma y así hasta el final.

Se cierra el corchete cuando se termina de declarar el
estilo/propiedad de la etiqueta

PROPIEDADES COMUNES
Etiqueta Significado Ejemplo
font-family Define fuentes font-family: , Georgia, Times
New Roman, serif;

font-size Define tamaño de fuente. font-size: 12px;

color Para definir color color: #CCC;
(hexadecimal/alias) color: gray;

width / Ancho / Alto (en pixeles u otras) width: 200px;
height: 400px;
height
text-align Para alinear el texto según el text-align: center;
espacio horizontal
margin Define márgenes externos. Se margin-left: 30px;
puede usar margin-left, margin- margin-right: 30px;
margin-top: 10px;
right, margin-top, margin-bottom
margin-left: 10px;
para especificar

text-shadow Sombra para texto. text-shadow: 5px 5px 5px
#FF0000;

border-radius Para generar esquinas border-radius: 15px;
redondeadas.

body {
font-face: Tahoma, sans-serif;
font-size: 12pt;
}
h1 {
font-size: 20px;
}
p {
font-size:15px;
}
.titanic {
float: none;
}
.JohnLennon {
widows: 1;
}
.worldPeace .countries {
border: transparent;

LOS SECRETOS DETRÁS DE

EMPRENDER EN LA WEB

LAS CORRIENTES ACTUALES

1. Blogs temáticos y bien enfocados.
2. Consultorías en desarrollo web.
3. Servicios de social media*.

L O B A S I C O PA R A E M P R E N D E R

• Entender el nicho

IDEA • Especializarse en el nicho
• Ofrecer valor agregado
• Plan de negocios

• Contrato de un nombre .com, .org, .info, .net
según convenga.
DOMINIO / • Contrato de espacio en un servidor para
HOSTING colocar mi contenido. Determinar el tipo de
contenidos.
• Determinar destrezas y conocimientos.

INVERSIÓN EN WEB (MÍNIMA)

$50
dólares anuales

HOSTING: DOMINIO:
• Renta de espacio para colocar mis • Nombre corto y descriptivo
contenidos en la red. • Disponibilidad del nombre
• Los planes de hosting suelen ser • Tipo de dominio
compartidos. Alquiler de un • Anualidad parte desde los $10.
pequeño espacio en una • Se puede «bautizar» un
computadora. servicio en Blogger, Tumblr o
• Ventaja de independencia de afín a un nombre
plataforma y correos electrónicos personalizado:
personalizados blog.jorgeumana.info

INVERSIÓN EN WEB (MÍNIMA)

$50
dólares anuales

ADMINISTRADORES DE CONTENIDO
Muchos servicios de Hosting tienen paneles de control que permiten
instalar en un clic diversos CMS como Joomla, Wordpress o Drupal.

S E R V I C I O S G R AT I S PA R A C R E A R W E B S

VENTAJAS: DESVENTAJAS:
• Rapidez • Flash 100%
• Curva de aprendizaje rápida • No es 100% indexado por buscadores
• Intuitivo • Problemas con accesibilidad
• Interactivo y rico en • Tiene branding del producto, lo que obliga a
multimedia comprar el servicio para desaparecerlo.

NO ES FÁCIL MONETIZAR
E S F U E R Z O S E N I N T E R N E T, P E R O
ESOS ESFUERZOS PERMITEN
RECONOCIMIENTO Y ESE SI
PUEDE SER MONETIZADO

Los secretos detrás de cómo hacer la web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Destaque

Destaque (20)

Semelhante a Los secretos detrás de cómo hacer la web

Semelhante a Los secretos detrás de cómo hacer la web (20)

Último

Último (20)

Los secretos detrás de cómo hacer la web