Instituto tecnológico superior de la sierra negra de ajalpan Taller de sistemas operativos Ing.

marco Antonio isidro abril Manual de comandos de Linux e investigación de html5 Javier Paniagua palantoc 4° semestre Ing. en sistemas computacionales

Comandos básicos que vimos en clases
Mkdir es para crear una carpeta Gedit es para crear un archivo Chmod es para asignarle permisos aun archivo Donde r=4 w=2 x=1 es para permiso de lectura es para permiso de escritura es para permisos de ejecución

Cat es para abrir un archivo Rm es para borrar puede ser un archivo o carpeta Cd es para abrir una carpeta Mv es para renombrar Ls –l muestra los archivos ya carpetas que tengamos y sus permisos que tienen cada uno Cp es para copiar un archivo Clear es para limpiar la terminal

cambiar de dueño
ejemplo ( chown alfredo index.html) VER ESTADO DE UN PROGRAMA Ejemplo /etc/init.d/apache2 status PARAR UN PROGRAMA Ejemplo /etc/init.d/apache2

REINICIAR UN PROGRAMA Ejemplo /etc/init.d/apache2 restart INICIAR UN PROGRAMA Ejemplo /etc/init.d/apache2 start iniciar INSTALAR UN PROGRAMA apt-get instal nombre del paquete EJEMPLO apt-get install amns Aptitude instaall nombre del paquete (este es otra forma de instalar) COMO INSTALAR PROGRAMAS MODO GRAFICO gestor de paquetes seleccionar el programas que queremos y aplicar DESISTALAR UN PROGRAMA apt-get purge --purge nombre del programa a deistalar EJEMPLO apt-get install –purge amns RENOMBRAR mv index.html cambio o nombre.html CREAR UN NUEVO GRUPO EN EL SISTEMA adadgroup nombre del grupo

CREAR UN NUEVO USUARIO adduser nuevo usuario

CREAR UNA PAGINA HTML Primero lo que hacemos es teclear Cd /var/ www/ Creamos una carpeta Lo abrimos con cd Y dentro de esa carpeta creamos un archivo Con gedit con extensión html Nos abrirá el archivo y le tecleamos lo siguiente <html> <head><title>prueba</title></head> <body> <p> TEXTO </p> <p> TEXTO </p> </body> </html> Lo guardamos y abrimos desde internet Localhost/nombre de nuestra carpeta/ y listo aparecerá el menaje que le hayamos puesto

¿QUE ES HTML5?
Un breve resumen de las características del HTML5 para los que no poseen conocimientos de la edición web. HTML es el lenguaje usado para escribir las páginas web, describe la estructura y el contenido usando solo texto y lo complementa con objetos tales como imágenes, flash y otros. Los archivos así creados son guardados con la extensión de archivo HTM o HTML. Su estructura se compone de etiquetas o tags entre las cuales van insertados los diferentes elementos que componen la pagina como son los bloques de texto, scripts y la ruta a la ubicación de archivos externos como imágenes y otros archivos multimedia. Al navegador cargar dichos archivos representa todos los elementos en ella de forma adecuada. Existen varias versiones o especificaciones de HTML, son las siguientes: • HTML la primera especificación de 1991 • HTML 3.0 propuesta por el recién formado W3C en 1995 • HTML 4 1999 • XHTML 2002 • HTML5 usándose actualmente pero aun en desarrollo HTML5 surge como una evolución lógica de las especificaciones anteriores y por la necesidad de lograr los siguientes objetivos: ✔ Lograr que la información, y la forma de presentarla estén lo más separadas posible. ✔ Resumir, simplificar y hacer más sencillo el código utilizado. ✔ Un lenguaje que haga las páginas compatibles con todos los navegadores web, incluyendo los de los teléfonos móviles y otros dispositivos modernos usados en la actualidad para navegar en Internet. ✔ Eliminar restricciones que hagan el código más popular y asequible

HTML5
Finalmente llega HTML5, recoge todas las ventajas que introdujo el XHTML y elimina bastante restricciones y limitaciones. Es más ligero al ser más sencillo y simple el código, lo que permite que las paginas escritas en este lenguaje carguen mas rápido en el navegador. Si aun no fuera suficiente, introduce infinidad de opciones que hasta ahora estaban vedadas a las páginas web, como insertar directamente video (no flash), música, y casi cualquier elemento.

Si te interesa el posicionamiento de tu pagina en Google, debes saber que una pagina escrita en este lenguaje es priorizada por el buscador, respecto a otras con el mismo contenido pero escritas usando otros lenguajes.

Diferencias del código de HTML5 con lenguajes anteriores.
Solo algunas de las diferencias más notables son las siguientes: ✔ No es necesario el cierre de las etiquetas img, br, hr, input, etc. Por ejemplo: < br /> ahora se sustituye por: <br> < hr /> por: <hr> < img src=""……/> por: <img src=""……> <input …./> por: <input ….> ✔ Se puede usar tanto minúsculas como mayúsculas en el código a diferencia del XHTML que solo admite minúsculas. ✔ El Doctype o declaración del documento está completamente minimizado, en HTML5 solo es necesario emplear: < !DOCTYPE html> ✔ Introduce nuevos marcadores para sumarlos a los existentes <div> en usos específicos, por ejemplo: <nav>, <footer>, <audio>, <video>, etc.

Elementos obsoletos en HTML5.
Un breve vistazo a los elementos que ya no se pueden emplear en el código de las páginas en HTML5 y los nuevos que se introducen. Más información sobre las características de cada uno, puedes encontrarlas en forma detallada en las páginas especializadas cuyos vínculos están al final de este artículo. acronym, applet, basefont, bgsound. big. blink, center, dir, font, frame, frameset, isindex, listing, marquee, nobr, noembed, noframes, plaintext, s, spacer, strike, tt, u, wbr, xmp

Todos los elementos que admite HTML5
a, abbr, address, area, article, aside, audio, b, base, bb, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datagrid, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, samp, script, section, select, small,

source, span, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, ul, var, video

¿Cuáles son los beneficios que nos aporta usar HTML5?
✔ Más fácil de escribir e interpretar. ✔ Más ligero de cargar por el navegador. ✔ Varias opciones disponibles para el posicionamiento web de las páginas. Una de las causas de la necesidad de ir migrando al uso del HTML5, es la infinidad de opciones disponibles en la actualidad y que crece cada día. Una de ellas es el empleo del microformato en las páginas web, que algunos son totalmente incompatibles con otros lenguajes por lo que no validan correctamente a no ser que se use HTML5.

Que es el microformato y que son los marcadores o snippets.
Los lenguajes de marcado es una forma agregarle contenido en forma de texto al código HTML, que pueda ser significativo para el usuario. Tradicionalmente se han usado microdata, microformato y RDFa, recientemente Google con los otros principales buscadores como Yahoo y Bing, han llegado a un consenso para decidirse por el desarrollo del microformato, de forma tal que las páginas que incorporen contenido en ese formato, sean compatibles al usar cualquier buscador. schema.org es donde Google ha centrado su objetivo, el uso de este estándar permite a los usuarios agregar y crear marcadores, también conocidos como snippets enriquecidos, similar a los widgets, en las páginas de acuerdo al tema del que traten. Algunos ejemplos: • Es posible usando marcadores de schema.org, que en los resultados de las búsquedas, una página que incorpore en un marcador una pequeña imagen relacionada con el contenido y una descripción, resalte sobre las otras páginas que solo ofrecen el texto tradicional. Esto permite que el que utilice este sistema en sus páginas, tome ventaja de manera significativa sobre otras que ofrezcan un contenido similar. • Otro ejemplo práctico es el botón +1 de Google, algo similar al Me Gusta de Facebook, pero que promete agregarle funcionalidades muy provechosas para los que publican contenido.

• Ya están disponibles snippets para insertar en páginas con contenido de música, video, ventas, recetas de cocina, que traten de celebridades, etc. todos facilitan que el usuario pueda saber rápidamente si la página tiene la información que le interesa, pues en los resultados de las búsquedas mostrarán un preview o muestra del contenido.

Ejemplos prácticos
Ejemplos del código necesario en dos declaraciones, XHTML y HTML5
En XHTML 1.0 Transicional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="content-language" content="es" /> <title>Código necesario para una página en XHTML</title>

En HTML5
<!DOCTYPE html> <html lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>Código necesario para una página en HTML5</title>

Ejemplo del código para crear una sencilla página en HTML5.
Copia en siguiente código y pégalo en el Bloc de notas, guarda el archivo con el nombre: pagina.html. Contiene varios comentarios en los que se explica algunas de las funcionalidades nuevas del HTML5. Los comentarios tienen el siguiente formato:

<!--Esto es un comentario-->
<!DOCTYPE html> <html lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=w indow s-1252"> <title>Pagina de ejemplo</title>

Solucionar conflictos al validar HTML5.
¿Como validar los formularios en HTML5?
Para que validen correctamente los formularios en HTML5, los elementos INPUT que contengan el atributo NAME se deben encerrar en un contenedor DIV, por ejemplo:
<form method="get" action="http://www.google.com/search"> <div><input type="text" name="q" value=""> <input type="submit" name="" value="Buscar"></div> </form>

Los atributos: size y maxlength ya no se pueden usar, su función se realiza con CSS.

¿Como validar las tablas en HTML5?
Los siguientes atributos ya no se pueden usar en la marco de las tablas: border, cellpadding, cellspacing y width. En el caso de border y width se deben especificar en el estilo CSS, los otros dos no validan ni usándolos en CSS su efecto de consigue usando PADDING. Hazlo como en el siguiente sencillo ejemplo:
<table class="tabla"> <tr><td>celda1</td><td>celda2</td></tr> <tr><td>celda3</td><td>celda4</td></tr> </table>

<style type="text/css" media="screen"> .tabla{width:400px;border-collapse:collapse;}

.tabla td{padding:6px;border:1px solid black;} </style>

Como usar object para insertar flash y otros objetos en HTML5
El elemento object permite insertar películas flash, audio, video, PDF, etc. Ya no son válidos los siguientes atributos: align, classid, codebase, codetype, standby, border. Es posible emplear: data que especifica la URL del archivo, type, width y height. El parámetro <param> es necesario para asegurar compatibilidad con Internet Explorer Usa el siguiente ejemplo para insertar una película flash.
<object type="application/x-shockwave-flash" width="740" height="470" data="../flash/horoscopo.swf"> <param name="movie" value="../flash/horoscopo.swf">

Navegación interna en la misma página en HTML5.
Para crear links que permitan la navegación interna en una página es necesario usar un DIV para anclar el destino. Por ejemplo:
<a href="#abajo">Bajar</a> <a id="abajo"></a> <div id="abajo"></div>

Sign up to vote on this title
UsefulNot useful