Vous êtes sur la page 1sur 30

LOS SECRETOS DETRS DE

LA BARRA DE DIRECCIONES

EL NAVEGADOR
Es el responsable de

mostrar los contenidos


de la web y tambin es responsable de que lo que veas, se vea bien o mal puesto que se encarga de interpretar el cdigo con el que estn escritos los sitios web que visitas.

ANIMACIN DE CMO MOZILLA FIREFOX LEE EL CDIGO DE UNA WEB Y LO REPRESENTA (VER SIGUIENTE DIAPOS.)

LOS NAVEGADORES TIENEN MOTOR


ENTRADA SALIDA

SEGN EL MODELO DE TU BARCO AS SER LA EXPERIENCIA DE VIAJE.

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

Hola Mundo
No es lo mismo un dia nublado

MOTORES DE RENDERIZADO MS COMUNES Y POPULARES.

WebKit

Gecko

Trident

LA HISTORIA DEL NAVEGADOR

HAGA CLIC PARA VISUALIZAR UNA LINEA DE TIEMPO CON LA EVOLUCIN DE LOS NAVEGADORES WEB

EL DOMINIO
CHUCK NORRIS NO ESCRIBE FACEBOOK.COM,

ESCRIBE 69.63.189.11

Es el apodo de la ubicacin exacta de un sitio web (IPv4 o IPv6) Es mucho ms fcil 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 NMEROS

DNS

Domain Name Server


Cmo las pginas amarillas el Domain Name Server relaciona un nmero particular (direccin IP) a un nombre en especfico. Facilita la portabilidad. El proveedor de servicio de internet (ISP) se encarga de enviar las solicitudes ya de manera numrica a las diferentes terminales que enrrutan el trfico 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 cadas las pginas y bases de datos que almacena Cualquier computadora puede actuar como servidor, ms los protocolos de seguridad y dems hacen ms barato contratar un servicio profesional.

LOS SECRETOS DETRS DEL

HTML & CSS

.html
HyperText Markup Language (lenguaje de marcado de hipertexto) Posee una estructura bsica construida por etiquetas semnticas Andamio para mostrar datos de lenguajes dinmicos

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
<! DOCTYPE html>. <header>

Significado
Definicin del tipo de documento. HTML5 Cabecera de documento. Se suelen definir propiedades del documento, llamado a librerias requeridas o .css define el cuerpo de la pagina, se desglosa todo el contenido.

<body>

<div>/<article>
<footer>

Define una caja contenedora para un uso particular


define el pie de pagina

ETIQUETAS ESTRUCTURALES
<header>

ETIQUETAS ESTRUCTURALES
<div>

ETIQUETAS ESTRUCTURALES
<body>

ETIQUETAS ESTRUCTURALES

<footer>

ETIQUETAS DE CLASES
Etiqueta
<p> <br /> <strong> <em> <u> <h1> a <h6>
<style>

Significado
para definir parrafo para hacer salto de linea para negrita. para enfatizar = italica para subrayar para definir titulos. Van de mayor a menor Para definir estilos de las etiquetas. Para definir hipervnculos. Para colocar video. Requiere de atributo scr para definir ubicacin

<a href>
<video>, <audio>, <img>

<! 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 ms de esto</a>


</body> </html>

.css
Acrnimo de Cascade Style Sheet. Hoja de estilo en cascada. Complementario al HTML. Declara estilos de las etiquetas. La ltima versin (CSS3) permite efectos de sombreado, bordes redondeados, desenfoques, reflejos de imgenes y otros efectos interesantes sin mucho esfuerzo.

CMO 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; }

Ntese 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
font-family
font-size color width / height

Significado
Define fuentes
Define tamao de fuente. Para definir color (hexadecimal/alias) Ancho / Alto (en pixeles u otras)

Ejemplo
font-family: , Georgia, Times New Roman, serif;
font-size: 12px; color: #CCC; color: gray; width: 200px; height: 400px;

text-align
margin

Para alinear el texto segn el espacio horizontal


Define mrgenes externos. Se puede usar margin-left, marginright, margin-top, margin-bottom para especificar Sombra para texto. Para generar esquinas redondeadas.

text-align: center;
margin-left: 30px; margin-right: 30px; margin-top: 10px; margin-left: 10px; text-shadow: 5px 5px 5px #FF0000; border-radius: 15px;

text-shadow border-radius

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 DETRS DE

EMPRENDER EN LA WEB

LAS CORRIENTES ACTUALES

1. Blogs temticos y bien enfocados. 2. Consultoras 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

IDEA

Entender el nicho Especializarse en el nicho Ofrecer valor agregado Plan de negocios

DOMINIO / HOSTING

Contrato de un nombre .com, .org, .info, .net segn convenga. Contrato de espacio en un servidor para colocar mi contenido. Determinar el tipo de contenidos. Determinar destrezas y conocimientos.

INVERSIN EN WEB (MNIMA)

$50
dlares anuales HOSTING:
Renta de espacio para colocar mis contenidos en la red. Los planes de hosting suelen ser compartidos. Alquiler de un pequeo espacio en una computadora. Ventaja de independencia de plataforma y correos electrnicos personalizados

DOMINIO:
Nombre corto y descriptivo Disponibilidad del nombre Tipo de dominio Anualidad parte desde los $10. Se puede bautizar un servicio en Blogger, Tumblr o afn a un nombre personalizado: blog.jorgeumana.info

INVERSIN EN WEB (MNIMA)

$50
dlares 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:
Rapidez Curva de aprendizaje rpida Intuitivo Interactivo y rico en multimedia

DESVENTAJAS:
Flash 100% No es 100% indexado por buscadores Problemas con accesibilidad Tiene branding del producto, lo que obliga a comprar el servicio para desaparecerlo.

NO ES FCIL 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