LOS SECRETOS DETRÁS DELA BARRA DE DIRECCIONES
EL NAVEGADOREs   el   responsable     demostrar los contenidosde la web y también esresponsable de que lo queveas, se vea ...
LOS NAVEGADORES TIENEN MOTOR                SEGÚN EL MODELO DE TU BARCO ASÍ SERÁ LA EXPERIENCIA DE VIAJE.         ENTRADA ...
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 si...
DE LETRAS A NÚMEROS              DNS              Domain Name Server              Cómo las páginas amarillas el Domain Nam...
SIGUIENDO LA PISTA.                HAGA CLIC PARA RASTREAR VISUALMENTE UNA DIRECCION WEB
EL DESTINO FINAL.                    ¡TIEEEERAAAA A LA VISTAAAAA!             Datacenters y servidores             •   Los...
LOS SECRETOS DETRÁS DEL HTML & CSS
.html • HyperText      Markup        Language   (lenguaje de marcado de hipertexto) • Posee     una     estructura    bási...
¿ETIQUETAS?     El HTML usa etiquetas para definir elementos de un     sitio web y así darle atributos y a esos atributos ...
ETIQUETAS ESTRUCTURALES       Etiqueta            Significado       <! DOCTYPE html>.   Definición del tipo de            ...
ETIQUETAS ESTRUCTURALES           <header>
ETIQUETAS ESTRUCTURALES            <div>
ETIQUETAS ESTRUCTURALES            <body>
ETIQUETAS ESTRUCTURALES           <footer>
ETIQUETAS DE CLASES      Etiqueta         Significado      <p>              para definir parrafo      <br />           par...
<! DOCTYPE html><header><title>Hola Mundo</title></header><body><h1>Este es el titulo</h1><p>Este es el parrafo de prueba<...
.css • Acrónimo de Cascade Style Sheet.   Hoja de estilo en cascada. • Complementario al HTML. Declara   estilos de las et...
¿CÓMO LO HAGO?   El CSS es un documento en donde se definen las   propiedades de las etiquetas y clases particulares,   me...
PROPIEDADES COMUNES   Etiqueta        Significado                         Ejemplo   font-family     Define fuentes        ...
body {         font-face: Tahoma, sans-serif;         font-size: 12pt;}h1 {         font-size: 20px;}p {         font-size...
LOS SECRETOS DETRÁS DEEMPRENDER EN LA WEB
LAS CORRIENTES ACTUALES      1. Blogs temáticos y bien enfocados.      2. Consultorías en desarrollo web.      3. Servicio...
L O B A S I C O PA R A E M P R E N D E R                         • Entender el nicho             IDEA        • Especializa...
INVERSIÓN EN WEB (MÍNIMA)                                   $50                                   dólares anuales    HOSTI...
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 di...
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  ...
NO ES FÁCIL MONETIZARE 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   ...
Próxima SlideShare
Cargando en…5
×

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

489 visualizaciones

Publicado el

Presentación con clave de humor para un público que suele estar acostumbrado a consumir la web, más no a producirla.

Esta presentación es un breve extracto de las diversas tecnologías y oportunidades que para generar contenidos e iniciativas desde la parte técnica de la web.

Publicado en: Tecnología
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
489
En SlideShare
0
De insertados
0
Número de insertados
10
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

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

  1. 1. LOS SECRETOS DETRÁS DELA BARRA DE DIRECCIONES
  2. 2. EL NAVEGADOREs el responsable demostrar los contenidosde la web y también esresponsable de que lo queveas, se vea bien o malpuesto que se encarga deinterpretar el código con elque están escritos los sitiosweb que visitas. ANIMACIÓN DE CÓMO MOZILLA FIREFOX LEE EL CÓDIGO DE UNA WEB Y LO REPRESENTA (VER SIGUIENTE DIAPOS.)
  3. 3. 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
  4. 4. LA HISTORIA DEL NAVEGADOR HAGA CLIC PARA VISUALIZAR UNA LINEA DE TIEMPO CON LA EVOLUCIÓN DE LOS NAVEGADORES WEB
  5. 5. 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.
  6. 6. 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.
  7. 7. SIGUIENDO LA PISTA. HAGA CLIC PARA RASTREAR VISUALMENTE UNA DIRECCION WEB
  8. 8. 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.
  9. 9. LOS SECRETOS DETRÁS DEL HTML & CSS
  10. 10. .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
  11. 11. ¿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>
  12. 12. 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
  13. 13. ETIQUETAS ESTRUCTURALES <header>
  14. 14. ETIQUETAS ESTRUCTURALES <div>
  15. 15. ETIQUETAS ESTRUCTURALES <body>
  16. 16. ETIQUETAS ESTRUCTURALES <footer>
  17. 17. 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
  18. 18. <! 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">Hazclic para ver más de esto</a></body></html>
  19. 19. .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.
  20. 20. ¿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
  21. 21. 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.
  22. 22. 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;
  23. 23. LOS SECRETOS DETRÁS DEEMPRENDER EN LA WEB
  24. 24. LAS CORRIENTES ACTUALES 1. Blogs temáticos y bien enfocados. 2. Consultorías en desarrollo web. 3. Servicios de social media*.
  25. 25. 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.
  26. 26. 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
  27. 27. INVERSIÓN EN WEB (MÍNIMA) $50 dólares anuales
  28. 28. ADMINISTRADORES DE CONTENIDO Muchos servicios de Hosting tienen paneles de control que permiten instalar en un clic diversos CMS como Joomla, Wordpress o Drupal.
  29. 29. 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.
  30. 30. NO ES FÁCIL MONETIZARE 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

×