Entradas

Mostrando entradas de junio 4, 2017

CSS: COMO SE USA EN HTML (PARTE 1)

Imagen
CSS es la tecnología que se emplea para definir la presentación visual de las páginas web. ACOPLAMIENTO: Factor que influye en la calidad de los sistemas informáticos. El acoplamiento informático, indica el nivel de dependencia entre las unidades de software de un sistema informático, es decir, el grado en que una unidad puede funcionar sin recurrir a otras; dos funciones son completamente independientes entre sí (el nivel más básico de acoplamiento) cuando una puede hacer su trabajo completamente sin recurrir a la otra. En este caso se dice que ambas están desacopladas. Lo mejor, sería un desacoplamiento total (que no hubiese ninguna dependencia entre las partes que constituyen un sistema informático), pero dado que es una situación casi imposible de lograr, así que, lo que se intenta logar es reducir el acoplamiento al mínimo posible. Cuanto menos dependientes sean las partes que constituyen un sistema informático, mejor será el resultado final. Cuando usamos CSS para...

CSS CONCEPTOS BÁSICOS

Imagen
CSS: CASCADE STYLE SHEETS (Hojas de estilo en cascada) Existen varios niveles de CSS: CSS 1 CSS 2 CSS 2.1 CSS 3 Cada nivel de CSS se construye sobre el anterior, añadiendo funciones en el nivel previo. CSS es un lenguaje muy sencillo que se compone de reglas. Cada regla esta formada por uno o más selectores y una declaración formada por un bloque de estilos que definen los estilos a aplicar para los elementos del documento que cumplan con el sector. Desde que el lenguaje de CSS se lanzó en 1996, el número de propiedades que posee, ha ido aumentando y en la actualidad, en la actualidad tiene casi 200 propiedades. También esta desarrollado por el W3C. CSS Training

MODULO 4. Lección 14: HTML: NUEVAS FUNCIONALIDADES EN FORMULARIOS (PARTE 2)

Imagen
autocomplete: Nos permite especificar si un formulario completo o si un campo de este debe tener la opción de autocompletado activado o no. Si esta activado, su valor es ON , el navegador completa automaticamente el campo con valores que el usuario ya haya introducido en ese campo ocasiones anteriores. Si se desactiva, asignando el valor OF , lo que se consigue es prevenir que un campo se complete automáticamente. <form autocomplete="on"> Funciona con el atributo FORM y con los siguientes tipos de input: text, search, url, tel, email, date pickers, password, range, colors <input type="email" name "email"  autocomplete="off"> autofocus: Permite especificar en que campo de entrada queremos que se coloque el foco cuando se carga la página. Es un atributo de tipo buleano, por lo que no se debe definir más de un elemento con este atributo en la misma página. Permite comenzar a escribir de inmediato s...

MODULO 4. Lección 12: HTML: NUEVAS FUNCIONALIDADES EN FORMULARIOS (PARTE1)

Imagen
Una de las características más importantes de HTML5 son los nuevos elementos disponibles para el manejo de formularios, ya que nos permite gestionarlos de manera nativa, prescindiendo de Javascript para realizar algunas validaciones de formulario del lado del cliente. Disponer de controles avanzados nativos, facilita mucho el trabajo del desarrollador al no tener que preocuparse por problemas de compatibilidad entre distintos navegadores y supone un ahorro de tiempo y de ancho de banda, ya que por un lado permite no enviar el formulario si no es valido, y por otro lado informa al usuario de si alguno si alguno de los valores introducidos no cumple los requisitos definidos. Son más intuitivos. Se pueden mostrar pistas de lo que se quiere introducir en los campos de entrada, una calendario para un campo de fecha o una paleta de colores. Nuevos estados del atributo type del elemento input : url, tel, email, number, color, search, range, datetime, datetime-local, date, month...

MODULO 4 - Lección 10: DE HTML4 A HTML5

Imagen
En HTML4 se hace un uso abusivo de las etiquetas <span> y <div>, para evitarlo, en HTML5 tenemos las siguientes etiquetas: <header>: cabecera <nav>: barra o menú de navegación <main> <article> <section> <aside>: Panel con información adicional <figure>: imagenes <footer>: pie de página <figure> y <figcaption> permiten definir el titulo de una imagen. Puede etiquetar también un fragmento de código o una cita

MODULO 4 - Lección 9; ¿QUE ES HTLM?

Imagen
Es la quinta versión del lenguaje de etiquetado HTLM y es un estandar desarrollado por el W3C. El desarrollo de HTML va parejo al desarrollo del W3C. DHTM combina el uso de: HTML CSS DOM Javascript AJAX: Permite crear aplicaciones interactivas para navegadores en: DHTML XHR XML JSON HTML5 , define nuevas etiquetas y atributos. <canvas> permite definir un área dentro de la página web en la que se puede dibujar un API para Javascript, lo que nos permite el desarrollo de juegos online sin tener que utilizar Flash o crear apps de dibujo. SVG: Lenguaje de etiquetas, basado en XML que permite crear gráficos vectoriales. GEOLOCALIZACIÓN CACHE: Recursos que se desea almacenar de forma local BASE DE DATOS o DATABASE WEB WORKER JSON:  Java Script Object Notation (Formato de intercambio de datos)

MODULO 4. Lección 7 - HTML: VALIDACIÓN DEL CÓDIGO

Imagen
Para asegurarnos de que el código HTML es correcto y no contiene errores, existe la validación del Código fuente. La versión de HTML que se utiliza en una página web, se indica con la instrucción <!DOCTYPE> al principio del código, y por tanto, no debemos olvidar que ha de ser siempre la primera linea al principio del código. Para validar el código fuente, existen varias herramientas, entre ellas: Validador W3C WDG HTLM Validator https://validator.nu/

MODULO 4 - Lección 6 - HTML: IMAGENES

Imagen
Las imágenes son el elemento principal que confiere a la web su carácter de hipermedia, es decir, su capacidad de integrar en un mismo soporte contenidos, la pagina web, contenidos muy distintos como textos, imágenes, vídeos, audios y otros. La etiqueta para insertar una imagen en HTML es <img> La etiqueta  <img>  tiene dos elementos obligatorios en XHTML 1.0: src alt El atributo src indica la ruta dónde se encuentra la imagen. El atributo alt es el texto alternativo que se debe visualizar cuando la imagen aún no se ha cargado o no se puede cargar (no existe o su formato no es válido) <img src ="img/logo.gif" alt="logo de la empresa"/> La etiqueta  <img>  posee los siguientes atributos opcionales: width y height : Sirven para definir las dimensiones de la imagen; el ancho y el alto. longdesc: Sirve para indicar la URL de una página en la que se proporciona una descripción larga de la imagen. Es un atributo m...

MODULO 4 - Lección 5 - HTML: TABLAS

Imagen
Una tabla HTML es una forma gráfica de representar información de manera esquematizada, ordenada y compacta. Las tablas se organizan en filas y celdas. Las tres etiquetas principales para las tablas son: La etiqueta <table></ table> indica el inicio y el cierre de la tabla y el resto de etiquetas estarán recogidas entre ellas. Fila: Table Row <tr></tr> Celda de datos: Table Data Cell <td></td> Otras etiquetas para las tablas son: Celda de Cabecera: Table Header Cell <th> sustituye a la etiqueta  <td>  para celdas de cabecera. Es posible agrupar filas en 3 bloques de estilos: <thead> agrupa una o más filas de cabecera <tbody> se utiliza para agrupar filas de cuerpo, tipicamente aquellas que contienen el grueso de los datos. <tfoot>  Agrupa las filas del pie de la tabla. <caption> añade un título sobre la tabla Los estilos se trabajarán en CSS Para combinar celdas,...

MODULO 4 - Lección 4 HTML: EL JUEGO DE CARACTERES Y LOS EDITORES DE TEXTO

Imagen
BOM: Byte Order Mark (Marca de Orden de Bytes) es un carácter Unicode   y que se utiliza para indicar el orden de los bytes de un fichero. Existen dos ordenes de bytes: Little-endian Big-endian Definen de que forma se almacenan los datos que ocupan más de 1 byte en el ordenador. BOM es un caracter unicode que ocupa 3 bytes y que tiene esta representación en hexadecimal:   EF BB FF Ï >>¿ Hay programas que no son plenamente compatibles com BOM, como por ejemplo PHP5 que no tiene un soporte completo de UTF-8, por lo que si utilizamos PHP5, debemos utilizar UTF-8 sin BOM Para indicar el juego de caracteres hay que usar la etiqueta <meta charset="UTF-8"/> Lo que se indique en HTML tiene que coincidir con la codificación física del fichero. Ver video

MODULO 4 - Lección 3 JUEGO DE CARACTERES

JUEGO DE CARACTERES: Mapa de caracteres ASCII latin1 ISO 859-1 ANSI UTF-8 UTF-8 sin BOM Unicode Cotejamiento Hay que utilizar siempre el mismo juego de caracteres en todo lo que se haga. Deberíamos tratar que todos los ficheros que compongan un mismo sitio web estén almacenados en el mismo juego de caracteres, aunque no siempre es posible, ya que no depende de nosotros,  Es recomendable usar el juego de caracteres UTF-8 sin BOM , que permite mezclar textos en un mismo documento textos en cualquier idioma y permite mezclar caracteres de cualquier alfabeto. Si por cualquier motivo, no pudiéramos usar  UTF-8 sin BOM , es recomendable usar ISO-8859-1 , también llamado latin1 , es el mejor juego de caracteres para los idiomas de Europa occidental, incluido el español. Si necesitamos escribir el símbolo del euro (€), entonces deberemos usar   ISO-8859-15 , también llamado  latin9 , latin1 y latin9 se diferencian sólo en 8 caracteres que han c...

MODULO 3 - Lección 20: HTML FORMULARIOS - PARTE 2

Imagen
SELECT: Permite generar: Listas desplegables Listas de selección múltiples Además del atributo name , que es fundamental para el manejo de los datos enviados por el formulario,   <select> permite utilizar el atributo multiple para generar listas de selección múltiple. Para definir cada una de las opciones de la lista utilizaremos la etiqueta option , cuyo atributo value será el valor del elemento  <select>  cuando se envíe el formulario. Entre  <option> y   </option> escribiremos el texto que queramos mostrar al usuario. <option value="valor"> texto </option> Este seria un ejemplo de lista desplegable: <select> <option value="HTML"> HTML </option> <option value="CSS"> CSS </option> </select> Al añadirle el atributo multiple a la etiqueta select, se convertiria en una lista de selección multiple: <select multipe="mu...

MODULO 3 - Lección 19: HTML FORMULARIOS - PARTE 1

Imagen
Según la W3C, un formulario HTML es una sección de un documento que contiene: Contenido normal Código Controles (elementos especiales) Rótulos Se utilizan para que el usuario envíe información al servidor (formularios de registro, acceso a sitios web, formularios de contacto, etc...). Hasta para escribir un comentario en Facebook estaríamos utilizando un formulario. Las etiquetas básicas para formularios, son: form input select textarea label fieldset FORM:  Es fundamental para que el resto de elementos puedan ser enviados. Todos los campos que se quieran enviar deben estar entre los campos  <form>  y  </form> No tiene representación gráfica. ACTION:  Es el único atributo requerido para la etiqueta  form . Espera una cadena de texto, que especifique la URL o ruta a la acción o destino que procese los datos de la petición. Es posible utilizar una ruta absoluta o relativa. METHOD:  Indica la for...

MODULO 3 - Lección 18: LOS FORMULARIOS

Imagen
Un formulario web ( web form ) permite al usuario introducir datos para que sean enviados a un servidor web para que sean procesados. Utilizamos formularios web cuando: Realizamos una búsqueda web en un buscador y introducimos las palabras que queremos buscar. Nos registramos en un sitio web e introducimos nuestros datos personales. Realizamos una compra e introducimos los números de la tarjeta de crédito Realizamos actividades tipo test Un formulario web, es un elemento básico en cualquier sitio web y se componen de dos partes, la parte cliente y la parte servidor.

MODULO 3 - Lección 16: HTML5: COMPUTACIÓN EN LA NUBE

Imagen
DHTML: HTML dinámico. Permite crear sitios web interactivos utilizando una combinación del lenguaje de marcado HTML, las hojas de estilo en cascada CSS, el lenguaje interpretado JavaScript y la jerarquía de objetos DOM AJAX: Técnica de desarrollo web que permite crear aplicaciones interactivas que se ejecuten en el navegador. HTML5: Facilita el desarrollo de aplicaciones web y mejora sus prestaciones y rendimiento. En Cloud Computing todo lo que puede ofrecer un sistema informático se ofrece como servicio, de modo que los usuarios puedan acceder de forma remota  a través de Internet. Los datos se almacenan de forma permanente en servidores de Internet y se envían al navegador baj demanda, Las principales ventajas son: Acceder a la aplicación y datos desde cualquier sitio No hay versiones ya que al estar en la web todo esta actualizado a la última versión Utilizar las aplicaciones y datos desde cualquier dispositivo con un navegador Desaparece el concepto de ...

MODULO 3 - Lección 13: COMO SE PUBLICA UN SITIO WEB EN INTERNET:CLIENTE FTP ONLINE (3)

Imagen
Si no se quiere instalar un programa en el ordenador, o si no se puede hacer por alguna razón, como por ejemplo, si el ordenador no es nuestro, no hay problema. Hay programas de cliente de FTP online, como por ejemplo net2ftp Para más detalles de como hacerlo, ver el video   correspondiente a la lección 13 del curso.

MODULO 3 - Lección 13: COMO SE PUBLICA UN SITIO WEB EN INTERNET:CLIENTE FTP (2)

Imagen
Un programa cliente de FTP es: filezilla Esta disponible para diferentes plataformas: Windows Linux Mac OS X Además, como es un proyecto open source , un proyecto de código abierto, también podemos descargar el código fuente ( source ode ) Lo primero que nos descargamos, no es el programa en si, sino un administrador de descargas que nos hará unas preguntas. Para ver el funcionamiento detallado del programa filezilla, podemos ver el video del curso: Al trabajar en FTP, estamos transfiriendo ficheros de nuestro disco duro, al disco duro del servidor FTP.

MODULO 3 - Lección 12: COMO SE PUBLICA UN SITIO WEB EN INTERNET (1)

Imagen
Un sitio web se compone de diferentes ficheros, las páginas HTML, y todos los ficheros, así como las imágenes y vídeos que se emplean en las páginas HTML, Un sitio web se desarrolla en un ordenador, que se suele denominar servidor de desarrollo y que, en muchos casos es el ordenador personal en el que trabaja el desarrollador web. El servidor de desarrollo, normalmente no está siempre conectado a Internet y no suele estar preparado para dar servicios a cientos de usuarios a la vez (para ello tenemos el servidor de producción) Si quisiéramos tener nuestro propio servidor de conexión, estaríamos condenados de por vida, entre otras cosas,  a: Actualizar constantemente (quizás a diario) el sistema operativo Actualizar constantemente (quizás a diario) todo el software que tengamos instalado Leer y leer sobre posibles agujeros de seguridad, ataques por denegación de servicios, etc... Prever posibles caídas del sistema Es mejor delegar esta parte a expertos en la ...

MODULO 3 - Lección 11: ¿CÓMO SE PUBLICA UN SITIO WEB EN INTERNET?

Imagen
En un entorno profesional de desarrollo web, es muy normal que se utilicen diferentes ordenadores para diferentes propósitos: El servidor de desarrollo: es el ordenador en el que se desarrolla el sitio web, no necesita estar conectado a Internet. El servidor de pruebas: es el ordenador en el que se puede comprobar el correcto funcionamiento de un sitio web en su conjunto. El servidor de respaldo o de versiones: es el ordenador en el que se almacena todo el códifo desarrollado y permite recuperar versiones antiguas del código. El servidor de producción: es el ordenador en el que está funcionando el sitio web, al que están accediendo los usuarios del sitio web y que está conectado a Internet (excepto si el sitio web es para una intranet) En nuestro caso, el ordenador personal, realiza las funciones de servidor de desarrollo, de servidor de pruebas y de servidor de respaldo y el servidor de producción, es el ordenador en el que se va a publicar el sitio web.

MODULO 3 - Lección 10 - COMO PUBLICAR UN SITIO WEB: ALOJAMIENTO (HOSTING) (3)

Imagen
 5 - VELOCIDAD DE TRANSFERENCIA La velocidad de transferencia o ancho de banda ( bandwidth ), es la cantidad de datos que se pueden enviar a través de un canal de comunicación por unidad de tiempo. Las medidas se hacen por kilobits o megabits por segundo. En los planes más económicos, esto no se suele indicar y sólo se garantiza en planes más costosos. Un ancho de banda ilimitado, es siempre imposible, aunque haya empresas que lo prometan. El ancho de banda, indica el límite de transferencia de datos que podemos alcanzar en un momento determinado e influye en el tiempo de respuesta del servidor web y en el tiempo que necesita un visitante para acceder a una página web, por lo que es un parámetro que afecta a la percepción que tienen los visitantes de nuestro sitio web. 6 - LENGUAJES DE PROGRAMACIÓN (PROGRAMING LANGUAGE) Se emplea para dar las instrucciones de calculo al ordenador y permite crear aplicaciones web. Si el sitio web es estático (no tiene program...

MODULO 3 - Lección 9 - COMO PUBLICAR UN SITIO WEB: ALOJAMIENTO (HOSTING) (2)

Imagen
En cuanto a los criterios que debemos tener en cuenta a la hora de decidirnos por que alojamiento contratar, debemos tener en cuenta lo siguiente: 1 - CALIDAD Es dificil evaluarla sin haber probado antes el servicio. Se puede resumir en los siguientes puntos: Que la empresa cumpla lo que se ha contratado Que resuelva los problemas que tengamos  Que nos ofrezca la máxima disponibilidad y fiabilidad. Que el servidor web dónde este alojado nuestro sitio web no este apagado o tenga problemas de conectividad frecuentemente. Algunos indicadores que nos pueden ayudar a saber la calidad de una empresa de alojamiento son: la calidad de la página web de la empresa de alojamiento, las opiniones de clientes antiguos y actuales, el tiempo que lleva operando, el nivel de soporte que ofrece y si ofrecen servicio de atención al cliente y resolución de problemas. Comprobar los mecanismos de contacto y el tiempo de respuesta. 2 - EL SISTEMA OPERATIVO El Sistema operativo o Ope...