Transcription
Hola, de salud del profesor Mario Padilla Pérez. En este video aprenderás los conceptos básicos sobre diseño y desarrollo web. Abordaremos los siguientes temas: diferencias entre diseño web y desarrollo web, qué es la web y qué es Internet, qué es HTML, cuál es su estructura, luego los lenguajes de programación web, tipos de servidores locales web que podemos utilizar para poder hacer pruebas en nuestra computadora y etiquetas HTML.
Ok, vamos de punto de partida. ¿Cuál es la diferencia entre el diseño web y desarrollo web? Las dice que el diseño web es la esencia que se refiere tanto a la parte estética del sitio web como su usabilidad. Los diseñadores web utilizan diversos programas de diseño como Photoshop para crear el diseño y otros elementos visuales del sitio web. Por otro lado, los desarrolladores web toman un diseño del sitio web y hacen que el sitio web funcione de manera que se utiliza el HTML, CSS, JavaScript, PHP y otros lenguajes de programación para dar vida a los archivos del diseño. Entonces, ¿cuál es la diferencia? En diseño ahora solamente se crea o se maqueta, habrá una estructura gráfica de cómo va a quedar prácticamente el sitio. Y la parte de desarrollo ahora es lo que le da la funcionalidad al sitio.
[Música]
¿Qué tipo de contenido podemos encontrar en la web? En una web podemos encontrar videos, audios, bases de datos, música, juegos que están bastante ahora este siendo un auge en Internet, diferentes tipos de archivo, las miles de archivos que conocemos, que inclusive la información para bases de datos que se quedan vinculados y otros tipos de fuentes.
Ahora, ¿es la web y el tener lo mismo? Es una pregunta que a veces pues, inicialmente cuando iniciamos en este campo, no no hacemos para, pero ignoramos muchas veces porque utilizamos palabras como que vamos a navegar en el Internet o vamos a navegar en la web. Entonces, ¿cuál es la palabra correcta? Ahora, entonces vamos a aclarar. Por ejemplo, www, ahora, o en sus siglas que son World Wide Web, que es un sistema de archivos que se encuentran interconectados o enlazados entre sí y a los que se accede mediante Internet. Todo portal o página web que se encuentra en la Internet posee el prefijo www, que lo hemos visto ahora en todas las páginas, verdades, que se que buscamos o accedemos para hacer referencia al conjunto de datos, textos, archivos o imágenes que se encuentran agrupados en los mencionados portal de la red global mundial. Esto sería lo que este web.
Internet. Ahora, Internet se define como una red de redes que conecta computadoras distribuidas en todo el mundo, que se encuentran interconectadas a nivel mundial para compartir información. Entonces, espero que logremos diferenciar, ¿verdad? Que la web prácticamente es un sistema de archivos que son prácticamente las páginas web y el Internet son lo que conocemos ahora como el cableado de la red estructurada. Una IP se le asigna para que prácticamente el servidor reconozca solamente esa computadora, drive, por ejemplo, que se interconecta con otras computadoras.
Ahora, lenguajes de programación web. Por ejemplo, uno conocido, CSS. Realmente no es un lenguaje en sí de programación, es un un este, es un programa para crear hojas de estilo, darle estilo a la página. Ahora, como dice ahora, son CSS, Cascading Style Sheets, hojas de estilo en cascada, que es un lenguaje que describe la presentación de los documentos estructurado en hojas de estilos para diferentes métodos de interpretación, para, es decir, describe cómo se va a mostrar un documento en pantalla o impreso.
Y tenemos, ver, el JavaScript. El JavaScript es muy importante ahora, que prácticamente es el que le da la funcionalidad a un sitio. Este, sí, es un lenguaje de programación, dice, es un lenguaje de programación que te permite crear contenidos nuevos y dinámicos, controlar archivos de multimedia, crear imágenes animadas y muchas otras cosas más, aunque no todo, pero es increíble lo que puede llegar a ser con tan solo unas pocas líneas de código.
JavaScript y PHP. Dice que es el mismo recurso de PHP, Hipertext Preprocessor, un procesador de hipertexto, en un lenguaje de código abierto muy popular, especialmente adecuado para desarrollo web, que se puede ser incrustado en el mismo este, estructura HTML. Por ejemplo, PHP es muy conocido ahora porque Facebook está creado a partir de la base de PHP.
[Música]
Y tenemos ASP.NET, que es un entorno para aplicaciones web desarrollado y comercializado por Microsoft. Es usado por programadores, diseñadores para construir sitios web dinámicos, aplicaciones web y servicios web.
XML. Ahora tenemos ahora lo que nos vamos a enfocar, que sería el lenguaje de marcado HTML. HTML no es un lenguaje de programación, para que hay que aclarar, de que por si preguntan o le consultan en un momento, porque hay personas que lo hacen, que si HTML es un lenguaje de programación, se le dice que no. HTML es un lenguaje de marcado de etiqueta. Para, entonces, como viaje el significado en sus siglas, HyperText Markup Language, o lenguaje de marcas de hipertexto, ahora, que hace referencia al lenguaje de marcado para la elaboración de páginas web. Y esto se hace con una estructura.
Aquí tenemos otro concepto, era, del mismo HTML. Da una definición que es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet o web. Se trata de las siglas que corresponde, ¿verdad?, al que habíamos mencionado, a un lenguaje de marcado de hipertexto, que podría ser traducido como un lenguaje de formato de documentos para hipertexto.
Ahora, para que conozcamos un poco de la estructura básica o la sintaxis del código HTML. Como podemos ver, tiene un inicio, una etiqueta de inicio, que sería inicio del documento HTML, y también tiene una de cierre. Siempre, toda etiqueta, ahora, con su estructura, tiene una etiqueta de apertura y una etiqueta de cierre. Si ustedes se fijan, el inicio dice HTML con los símbolos de mayor y menor, aquí a apertura, y al final de ese fin del documento HTML, tiene la misma etiqueta pero con una placa invertida, que eso indica que es una etiqueta de cierre.
Continúa la parte que dice `head`. Esa etiqueta de `head` es bien especial. Para, por ejemplo, cuando estamos estructurando, ¿era?, una página web, vamos a introducir, ayuda, por ejemplo, etiquetas de para hojas de estilo, la etiqueta de un título, la etiqueta para los iconos y muchas otras referencias que no se van a mostrar en la página, ¿verdad?, porque no es en la parte indica donde se muestre, sino que va a ser algo interno que solamente el desarrollador va a manejar. Donde sí se va a mostrar contenido es en la parte que sigue, que se llama `body`. `body` de ese contenido de la página. Vemos, y también tiene ahora una etiqueta de apertura y una etiqueta de cierre. En la parte de ese contenido de la página, y vamos a incluir títulos, etiquetas de imágenes, etiquetas para videos, etiquetas para tablas, un sinnúmero de etiquetas que vamos a aprender, ¿verdad?, durante las siguientes sesiones, en las que les voy a enseñar. Y ahí vamos a ir viendo las etiquetas para títulos, etiquetas para párrafos, etiquetas para hacer referencias de otras vínculos, en fibra, todo lo que está contenido en una página web.
Esta es una estructura, ¿verdad?, un poquito más organizada y pues ya hecha, ahora, en un editor de código. Por ejemplo, me dice, dos, HTML es el tipo de documento. Y vemos, pues, en la parte del `head`, hay dos etiquetas que están insertadas. Si ustedes las ven, dice `meta charset="UTF-8"`. Esa etiqueta se utiliza para ingresar caracteres, este, no admitidos en inglés, por ejemplo, la ñ, por ejemplo, las diéresis, letras con diéresis y unos tipos de caracteres no admitidos que a veces no se utiliza en inglés, pero sí en español. En la etiqueta `title`, o título, que sería para esa, prácticamente es donde va a aparecer el título de la página.
`body`. Vemos una etiqueta que se llama `img`, que es para imágenes, y `src`, que es source, o donde está, ¿verdad?, la imagen. Que para eso, pues, vamos a aprender cómo crear carpetas con imágenes, crear documentos y hacer referencias de las imágenes para poder hacer referencia, ¿verdad?, de dónde está ubicado. Entonces, vemos abajo una etiqueta, como lo habíamos mencionado anteriormente, de la etiqueta `p`, es para párrafos. O sea, la etiqueta de apertura, tenemos la etiqueta de cierre, que la identificamos con una plica, ¿verdad?, y el texto, en este caso, el contenido.
Y tenemos algún ejemplo de etiquetas. Son las de `h1`, `h2`, o hasta `h6`, ¿verdad?, son para títulos, pero va haciendo gradualmente, ¿era?, este menor el tamaño, ahora, del título. La segunda dice `font color`, es para definir un color en el texto. La otra dice `a`, que la etiqueta realmente `a href`, que es una referencia. Esa referencia nos va a permitir ingresar un texto para un enlace y el enlace para, para que no se muestre, por ejemplo, `http://www.youtube.com/watch?v=...`, y recursos. Y también siendo que vamos a diferenciarlo con un nombre, ¿verdad?, para no hacer todo el nombre tan extenso. Ahora, la cuarta etiqueta es una para imágenes, que le mencionaba la imagen y recurso donde está ubicada. La segunda es la, perdón, la quinta es para insertar este negrita en el texto. La sexta es para párrafo. Y pues, como definimos, para etiquetas de apertura y etiqueta de cierre. Bueno, aquí vuelvo a mencionar que hay etiquetas que tienen de la apertura y tienen cierta etiqueta que solamente tienen apertura, pero no tienen cierre. Esas son etiquetas especiales. Por ejemplo, una de ellas es la de espacio, que es `br`, pero solamente tiene apertura y no tiene cierre. Esa es este un tipo de etiqueta especial.
Ahora, ¿qué ventajas trae desde escribir código HTML? Uno, que es sencillo, porque permite escribir perfectos. Dos, el texto presentado en forma estructurada y agradable. No se necesita de grandes conocimientos cuando se cuenta con un editor de páginas y los archivos son pequeños en tamaño, despliegue rápido. Lenguaje fácil aprendizaje y lo admiten todos los exploradores o navegadores web.
Y hablando de navegadores, para el navegador son los que interpretan el código HTML, generalmente es el que estará escrito en el que este crea la página web y lo presenta en pantalla, permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.
Ahora, necesito que sepamos cómo va a ser prueba. Vamos a hacer pruebas de las páginas web. Por dónde vamos a necesitar un navegador y un servidor local. Que se abra en este caso, las que son los servidores locales, ¿por qué son necesarios? Tenemos uno que es el ejemplo que se llama XAMPP. Es un paquete de software libre que consiste principalmente en un sistema de gestión de bases de datos, posee, ¿era?, este, un servidor web que se llama Apache. Y este, un te preguntarás, ¿qué es PHP? Dipper para códigos de script. Y pues, este, este sistema o por software, ¿verdad?, está disponible para Windows, Linux y otros tipos de sistemas operativos como Mac. Este, esa es solo a bajar una descripción, explicar, ¿verdad?, también que porque va vinculado a un sitio o el diseño y el desarrollo de una página web con un dominio. Los términos son súper importantes, porque los dominios son extensiones de Internet o un nombre único con el que se identifica la página. El propósito principal del nombre de dominio, este, o un sistema de nombres que se denominan DNS, ahora, es para traducir las direcciones IP. Por ejemplo, en los servidores para identificar una página se utiliza una dirección IP. Por ejemplo, pudiera ser, ¿verdad?, 192.168.10.1, un ejemplo, para que no aparezca y acceder de esa manera a la página web. Entonces, se utiliza un dominio que él prácticamente lo traduce de una dirección IP a un dominio, hacia donde DNS. Ahora, se hace posible mediante la red para que Internet, por aquí, pueda moverse de un lugar geográfico, que no importa dónde se encuentra. Por eso podemos acceder de páginas que puedan estar en Estados Unidos, páginas que puedan estar en Europa, ahora, y estamos en Nicaragua o en cualquier otro país del mundo y podemos acceder mediante, pues, un DNS. Ahora, que eso, pues, lo permite el servicio de red, en este caso, pues, el Internet. Entonces, podemos jugarnos de un lugar geográfico a otro de Internet, aún cuando el cambio implica que tendrá una dirección IP diferente.
En los tipos de dominio, en no también nos encontramos el general, que todos conocemos, que es `.com`, qué es el universal, prácticamente. Ahí los más así como reconocidos que viene siendo `.org`, `.edu` para organizaciones interestatales, institucionales, como en universidades. Existen nuevos ahora, como este, `.app`, `.store` para tiendas. Y los que son, ¿verdad?, que me gustan bastante en lo personal, son los dominios territoriales. Por ejemplo, para Nicaragua es `.ni`. `.co` para los diferentes países, es `.com` para Colombia, `.cl` Chile, `.pe` para Perú, y así van. `.info`, `.org`, `.gov` para los de gobiernos y `.edu` para los de instituciones para educativas. Todo esto va en costos y eso, pues, va a ser prácticamente independencia del nombre o la extensión del nombre que se utilice para un dominio.
[Música]
Y solamente. Ahora, espero que les haya gustado este pequeño video instructivo y estamos para mostrar las dudas, así que cualquier cosa me escriben en los comentarios y muchas gracias.