F5 Masticable sobre HTML y CSS

1,187 views

Published on

Presentación de Caro y Capo

Published in: Education
  • Be the first to comment

  • Be the first to like this

F5 Masticable sobre HTML y CSS

  1. 1. Nuestro primer F5 MasTICable <br />17.Abril.2011<br />
  2. 2. ¿De qué va?<br />Dinámica: Tecnologías en escena<br />¿Qué significan todas esas siglas?<br />HTML<br />XHTML<br />CSS<br />Lenguajes de programación (PHP)<br />Bases de Datos (SQL)<br />Herramientas que nos echan una mano (para Firefox):<br />Firebug<br />ColorZilla<br />Manos a la obra<br />Código fuente de una página<br />Cambiar un CSS<br />
  3. 3. HTML<br />Siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto)<br />Lenguaje de marcado predominante para la elaboración de páginas web<br />Describe la estructura y el contenido en forma de texto<br />Complementa el texto con objetos (como imágenes).<br />HTML se escribe en forma de etiquetas (tags), rodeadas por corchetes angulares (<,>). Por ejemplo: <b> para negrita. Toda etiqueta que se abre debe cerrarse. Para cerrar un tag se usa una / antes. Ejemplo: <b>Texto en negrita</b><br />HTML puede describir, hasta un cierto punto, la apariencia de un documento (CSS hace la tarea más fácil y con mejores resultados).<br />Un HTML puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML<br />
  4. 4. XHTML<br />Acrónimo en inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de hipertexto)<br />Es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas web<br />Su versión 1.0, XHTML es solamente la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades, pero cumple las especificaciones, más estrictas, de XML. <br />Su objetivo es avanzar en el proyecto del World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de presentarla estén claramente separadas<br />
  5. 5. Diferencias entre HTML y XHTML<br />Algunas reglas de XHTML 1.0 que lo diferencian de HTML 4.01. <br />Los elementos vacíos deben cerrarse siempre: <br />Incorrecto: <br><br />Correcto: <br></br> o <br/> o <br /><br />Los elementos no vacíos también deben cerrarse siempre: <br />Incorrecto: <p>Primer párrafo<p>Segundo párrafo<br />Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p><br />Los elementos anidados deben tener un correcto orden de apertura/cierre (el que se abre último, debe cerrarse primero). <br />Incorrecto: <em><strong>Texto</em></strong><br />Correcto: <em><strong>Texto</strong></em><br />Los valores de los atributos deben siempre ir encerrados entre comillas (simples o dobles). <br />Incorrecto: <tdrowspan=3><br />Correcto: <tdrowspan="3"><br />Correcto: <tdrowspan='3'><br />Los nombres de elementos y atributos deben ir en minúsculas. <br />Incorrecto: <A HREF="http://www.domname.com">Domname</A><br />Correcto: <a href="http://www.domname.com">Domname</a><br />
  6. 6. CSS<br />Hojas de estilo en cascada (en inglés Cascading Style Sheets)<br />Lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML).<br />La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.<br />Tres tipos de estilos<br />hoja de estilo externa<br />hoja de estilo interna<br />estilo en línea<br />
  7. 7. PHP<br />Acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools)<br />Lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. <br />Es un lenguaje multiplataforma.<br />Orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una base de datos.<br />El código fuente escrito en PHP es invisible al navegador web y al cliente ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la programación en PHP sea segura y confiable.<br />Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.<br />PHP 5.3.6 (7 de marzo de 2011)<br />
  8. 8. SQL<br />Lenguaje de consulta estructurado o SQL (por sus siglas en inglés structured query language) <br />Lenguaje que permite acceder a bases de datos relacionales que permite especificar diversos tipos de operaciones en éstas<br />Permite efectuar consultas con el fin de recuperar -de una forma sencilla- información de interés de una base de datos, así como también hacer cambios sobre ella.<br />Ejemplo de una sentencia INSERT de SQL para agregar uno o más registros a una (y sólo una) tabla en una base de datos relacional:<br /> INSERT INTO ''tabla'' (''columna1'', [''columna2,... '']) VALUES (''valor1'', [''valor2,...''])<br />
  9. 9. El mejor recurso para “cacharrear”<br />W3Schools Online Web Tutorials<br />http://www.w3schools.com/<br />Tutoriales para:<br />HTML<br />XHTML<br />CSS<br />JavaScript<br />SQL<br />PHP, etc., etc.<br />
  10. 10. Agradecimientos<br />Wikipedia :-)<br />

×